SHARE
TWEET

Untitled

a guest Apr 20th, 2019 68 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // jsincss
  2. function jsincss(a,b,e){function f(c,a,b,e){return c.addEventListener(a,function(a){var d=document.querySelector("#jsincss-"+b);d||(d=document.createElement("style"),d.id="jsincss-"+b,document.head.appendChild(d));var c=d.textContent;a=e(a);d=c&&a===c?void 0:d.textContent=a;return d})}a=a||function(){return""};b=b||window;e=e||["load","resize","input","click","reprocess"];var g=Date.now()+Math.floor(100*Math.random());return b===window?e.forEach(function(c){return f(window,c,g,a)}):Array.prototype.slice.call(document.querySelectorAll(b)).forEach(function(c){return e.forEach(function(b){return f(c,b,g,a)})})};
  3.  
  4. // overflow(selector, 'top'|'right'|'bottom'|'left'|[], '[--self] {}')
  5. function overflow(c,b,f){var d=(c+b).replace(/\W/g,""),g={top:function(a){return 0<a.scrollTop},right:function(a){return a.scrollLeft+a.offsetWidth<a.scrollWidth},bottom:function(a){return a.scrollTop+a.offsetHeight<a.scrollHeight},left:function(a){return 0<a.scrollLeft}};return Array.prototype.slice.call(document.querySelectorAll(c)).reduce(function(a,e,c){b=Array.isArray(b)?b:[b];b.every(function(a){return g[a](e)})?(e.setAttribute("data-overflow-"+d,c),a+=f.replace(/\[--self\]/g,"[data-overflow-"+d+'="'+c+'"]')):e.setAttribute("data-overflow-"+d,"");return a},"")};
  6.  
  7. // Scrolling element triggers 'reprocess' event
  8. var list = document.querySelector('#narrow-by-list')
  9.  
  10. ;['scroll', 'click'].forEach(function(evt) {
  11.   list.addEventListener(evt, function() {
  12.     var reprocess = document.createEvent('Event')
  13.     reprocess.initEvent('reprocess', true, true)
  14.     window.dispatchEvent(reprocess)
  15.   })  
  16. })
  17.  
  18. // Add shadow elements to list container
  19. ;['top-shadow', 'bottom-shadow'].forEach(function(name) {
  20.   var tag = document.createElement('div')
  21.   tag.className = name
  22.   list.insertAdjacentElement('afterend', tag)
  23. })
  24.  
  25. document.head.appendChild(document.createElement('style')).textContent = `
  26.   .block-layered-nav.popup::after {
  27.     display: none;
  28.   }
  29.   .close-icon {
  30.     background: transparent !important;
  31.   }
  32.   [id="narrow-by-list"] li {
  33.     margin-right: 0px;
  34.   }
  35.   [id="narrow-by-list"] ~ .top-shadow,
  36.   [id="narrow-by-list"] ~ .bottom-shadow {
  37.     display: block;
  38.     width: 100%;
  39.     height: 1.5em;
  40.     position: absolute;
  41.     left: 0;
  42.     opacity: 0;
  43.     pointer-events: none;
  44.     transition: .5s ease-in-out;
  45.   }
  46.   [id="narrow-by-list"] ~ .top-shadow {
  47.     top: 0;
  48.     background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 100%);
  49.   }
  50.   [id="narrow-by-list"] ~ .bottom-shadow {
  51.     bottom: 80px;
  52.     background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 100%);
  53.   }
  54. `
  55.  
  56. // JS-powered overflow styles
  57. jsincss(function() {
  58.   return [
  59.     overflow(
  60.       '#narrow-by-list',
  61.       'top',
  62.       '[--self] ~ .top-shadow { opacity: 1; }'
  63.     ),
  64.     overflow(
  65.       '#narrow-by-list',
  66.       'bottom',
  67.       '[--self] ~ .bottom-shadow { opacity: 1; }'
  68.     )
  69.   ].join('\n')
  70. })
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top