Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // jsincss
- 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)})})};
- // overflow(selector, 'top'|'right'|'bottom'|'left'|[], '[--self] {}')
- 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},"")};
- // Scrolling element triggers 'reprocess' event
- var list = document.querySelector('#narrow-by-list')
- ;['scroll', 'click'].forEach(function(evt) {
- list.addEventListener(evt, function() {
- var reprocess = document.createEvent('Event')
- reprocess.initEvent('reprocess', true, true)
- window.dispatchEvent(reprocess)
- })
- })
- // Add shadow elements to list container
- ;['top-shadow', 'bottom-shadow'].forEach(function(name) {
- var tag = document.createElement('div')
- tag.className = name
- list.insertAdjacentElement('afterend', tag)
- })
- document.head.appendChild(document.createElement('style')).textContent = `
- .block-layered-nav.popup::after {
- display: none;
- }
- .close-icon {
- background: transparent !important;
- }
- [id="narrow-by-list"] li {
- margin-right: 0px;
- }
- [id="narrow-by-list"] ~ .top-shadow,
- [id="narrow-by-list"] ~ .bottom-shadow {
- display: block;
- width: 100%;
- height: 1.5em;
- position: absolute;
- left: 0;
- opacity: 0;
- pointer-events: none;
- transition: .5s ease-in-out;
- }
- [id="narrow-by-list"] ~ .top-shadow {
- top: 0;
- background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 100%);
- }
- [id="narrow-by-list"] ~ .bottom-shadow {
- bottom: 80px;
- background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 100%);
- }
- `
- // JS-powered overflow styles
- jsincss(function() {
- return [
- overflow(
- '#narrow-by-list',
- 'top',
- '[--self] ~ .top-shadow { opacity: 1; }'
- ),
- overflow(
- '#narrow-by-list',
- 'bottom',
- '[--self] ~ .bottom-shadow { opacity: 1; }'
- )
- ].join('\n')
- })
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement