epic-slidy
Version:
An EPIC slider
2 lines (1 loc) • 15.8 kB
JavaScript
function t(){return(t=Object.assign||function(t){for(var i=1;i<arguments.length;i++){var s=arguments[i];for(var h in s)Object.prototype.hasOwnProperty.call(s,h)&&(t[h]=s[h])}return t}).apply(this,arguments)}function i(t,i,s){return!1===s?String(t):function(t,i){var s=t-i.toString().length;return s>0?new Array(s+1).join("0")+i:String(i)}(!0===s?i.toString(10).length:s,t)}function s(t,i,s){return t.replace(/\$\{.+?}/g,function(t){return h=t.substr(2,t.length-3).trim(),n=i,void 0===(e=s)&&(e="${"+h+"}"),h.split(".").reduce(function(t,i){return t[i]||e},n);var h,n,e})}var h=function(){function t(t,i){this.t=t,this.i=i,this.s(),this.h()}t.disable=function(t){t.setAttribute("disabled",""),t.classList.add("is-disabled")},t.enable=function(t){t.removeAttribute("disabled"),t.classList.remove("is-disabled")};var i=t.prototype;return i.destroy=function(){this.o.parentNode.removeChild(this.o),this.t.hooks.remove("beforeSlide",this.u)},i.s=function(){var t=this.t,i=t.namespace,h=t.outer,n=this.i.controls,e="<",o=">";!0!==n&&(e=s(n,{label:"previous slide"}),o=s(n,{label:"next slide"}));var r=document.createElement("div");r.classList.add(i+"-controls"),r.innerHTML='<button type="button" class="'+i+'-controls__item--prev">'+e+'</button>\n <button type="button" class="'+i+'-controls__item--next">'+o+"</button>",this.o=r,this.l=this.o.querySelector("button:first-child"),this.v=this.o.querySelector("button:last-child"),h.appendChild(this.o),this.u()},i.h=function(){var t=this;this.m=this.m.bind(this),this.p=this.p.bind(this),this.u=this.u.bind(this),this.t.hooks.add("beforeSlide",this.u),this.g(),this.i.keyboard&&addEventListener("keydown",function(i){37===i.keyCode?t.t.slidePrev("controls"):39===i.keyCode&&t.t.slideNext("controls")})},i.g=function(){this.l.addEventListener("click",this.m),this.v.addEventListener("click",this.p)},i.m=function(){this.t.slidePrev("controls")},i.p=function(){this.t.slideNext("controls")},i.u=function(){if(!this.i.loop){var i=this.t.newIndex,s=this.t.items.length;t.enable(this.l),t.enable(this.v),0===i&&t.disable(this.l),i+this.t.group>=s&&t.disable(this.v)}},t}(),n=function(){function t(t){this.o=t,this.S=new Map,this._=new Map,this.k=1e3,this.M=50,this.$=100,this.P=this.P.bind(this),this.A=this.A.bind(this),this.D=this.D.bind(this)}var i=t.prototype;return i.on=function(i,s){var h,n,e;switch(this.S.set(i,s),i){case"click":case"drag":this.j||(h=t.N("mousedown")||t.O("PointerDown"),n=t.N("mouseup")||t.O("PointerUp"),e=t.N("mousemove")||t.O("PointerMove"),this.j=!0);break;case"tap":case"swipe":this.I||(h=t.N("touchstart")||t.O("PointerDown"),n=t.N("touchend")||t.O("PointerUp"),e=t.N("touchmove")||t.O("PointerMove"),this.I=!0,"swipe"===i&&(this.o.style.touchAction="pan-y"))}h&&this.h(h,this.P),n&&this.h(n,this.A),e&&this.h(e,this.D)},i.destroy=function(){var t=this;this.S.forEach(function(i,s){t.S.delete(s)}),this._.forEach(function(i,s){t.T(s)})},t.U=function(t){return t.changedTouches?t.changedTouches[0]:t},t.O=function(t){var i=t.toLowerCase();return navigator.msPointerEnabled?"MS"+t:!!window.PointerEvent&&i},t.N=function(t){return"on"+t in window&&t},i.h=function(t,i,s){void 0===s&&(s=!1),this._.has(t)||(this.o.addEventListener(t,i,s),this._.set(t,i))},i.T=function(t){if(this._.has(t)){var i=this._.get(t);this.o.removeEventListener(t,i),this._.delete(t)}},i.P=function(i){this.q=t.U(i).clientX,this.G=Date.now()},i.A=function(i){var s=t.U(i).clientX-this.q,h=Date.now()-this.G;if(Math.abs(s)<=this.M&&h<=this.k)return this.S.has("click")&&this.S.get("click")(),void(this.S.has("tap")&&this.S.get("tap")());if(Math.abs(s)>this.M&&h>this.$){var n=s>=0?"right":"left";this.S.has("drag")&&this.S.get("drag")(n,"drag"),this.S.has("swipe")&&this.S.get("swipe")(n,"swipe")}},i.D=function(t){},t}(),e=function(){function t(){this.L=new Map}var i=t.prototype;return i.add=function(t,i){var s=this.L.has(t)?this.L.get(t):new Set;s.add(i),this.L.set(t,s)},i.remove=function(t,i){if(this.L.has(t)){var s=this.L.get(t);s.delete(i),0===s.size?this.L.delete(t):this.L.set(t,s)}},i.call=function(t,i){var s=arguments;if(this.L.has(t)){var h=this.L.get(t);h.forEach(function(t){t.call.apply(t,[i].concat([].slice.call(s,2)))})}},t}(),o=function(){function t(t,i){if(this.t=t,this.i=i,this.i.nav){var s=!0===this.i.nav?"number":this.i.nav;if(/\${(number|thumb)}/.test(s))this.R="template",this.B=s;else if("thumb"===s)this.R="thumb";else{if("number"!==s)return void console.error('Slidy: wrong value for "nav" option');this.R="number"}this.s(),this.h()}}t.C=function(t){return'<img src="'+("slidyThumb"in t.dataset?t.dataset.slidyThumb:t.querySelector("img").getAttribute("src").replace(/(.*)(\.\w{3,4}$)/,"$1_thumb$2"))+'">'},t.F=function(t){return'<button type="button">\n <span>\n '+t+"\n </span>\n </button>"};var h=t.prototype;return h.destroy=function(){this.o.parentNode.removeChild(this.o),this.t.hooks.remove("beforeSlide",this.H),this.t.hooks.remove("beforeSlide",this.J)},h.s=function(){var h=this,n=this.t,e=n.items,o=n.groupsMax,r=n.namespace,u=n.outer,a=this.i.zerofill,c=document.createElement("ol");c.classList.add(r+"-nav");var f=e.filter(function(t,i){return i%h.t.group==0}).map(function(n,e){if("slidyNav"in n.dataset){var r=n.dataset.slidyNav;return"template"===h.R?s(h.B,{number:r,thumb:r}):t.F(r)}var u,c,f={};switch(h.R){case"template":return/\${number}/.test(h.B)&&(f.number=i(e+1,o,a)),/\${thumb}/.test(h.B)&&(f.thumb=t.C(n)),s(h.B,f);case"thumb":return c=t.C(n),t.F(c);case"number":default:return u=i(e+1,o,a),t.F(u)}}).map(function(t){return'<li class="'+r+'-nav__item">'+t+"</li>"}).join("");c.innerHTML=f,this.o=c,u.appendChild(this.o),this.K=Array.from(this.o.querySelectorAll("li")),this.J()},h.h=function(){this.V=this.V.bind(this),this.H=this.H.bind(this),this.J=this.J.bind(this),this.t.hooks.add("beforeSlide",this.H),this.t.hooks.add("beforeSlide",this.J),this.W()},h.W=function(){this.o.addEventListener("click",this.V)},h.H=function(){var t=this.o.querySelector(".is-active");if(t){t.classList.remove("is-active");var i=t.querySelector("button");i&&(i.disabled=!1)}},h.J=function(){var t=this.K[this.t.newGroup];t.classList.add("is-active");var i=t.querySelector("button");i&&(i.disabled=!0)},h.V=function(t){var i=function(t,i){for(var s=t;s&&s!==document;s=s.parentNode)if(s.classList.contains(i))return s;return null}(t.target,this.t.namespace+"-nav__item");if(null!==i){var s=Array.from(this.o.children).indexOf(i);this.t.slideTo(s,"nav")}},t}(),r=function(){function t(t,i){this.t=t,this.i=i,this.s(),this.h()}var s=t.prototype;return s.destroy=function(){this.o.parentNode.removeChild(this.o)},s.s=function(){var t=this.t,s=t.groupsMax,h=t.namespace,n=t.outer,e=this.i,o=e.pagination,r=e.zerofill,u=i(t.currentGroup+1,t.items.length,r),a=!0===o?"/":o,c=i(s,s,r),f=document.createElement("div");f.classList.add(h+"-pagination"),f.innerHTML='<span class="'+h+'-pagination__current">'+u+'</span>\n <span class="'+h+'-pagination__separator">'+a+'</span>\n <span class="'+h+'-pagination__total">'+c+"</span>",this.o=f,this.X=this.o.querySelector("span:nth-child(1)"),n.appendChild(this.o),this.u()},s.h=function(){this.t.hooks.add("beforeSlide",this.u.bind(this))},s.u=function(){this.X.textContent=i(this.t.newGroup+1,this.Y,this.i.zerofill)},t}(),u=function(){function t(t,i){this.t=t,this.Z=!1,this.shouldPrevent=!1,this.tt=i,this.Z=!1,this.it=this.t.options.queue,this.st=[]}var i=t.prototype;return i.add=function(t){this.t.hooks.call("preventSlide",this.t,t,this),this.shouldPrevent?this.shouldPrevent=!1:(this.shouldPrevent=!1,this.st.length>this.it&&(this.st.length=this.it),this.st.push(t),this.Z||this.ht())},i.empty=function(){this.st=[]},i.getCurrentItems=function(t){var i=this.t,s=i.group,h=i.items,n=this.t.options,e=n.loop,o=n.preserveGroup,r=h.slice(t,t+s);return t+s>=h.length&&e&&o&&(r=r.concat(h.slice(0,s-(h.length-t)))),r},i.getNewItems=function(t){var i=this.t,s=i.group,h=i.items,n=this.t.options,e=n.loop,o=n.preserveGroup,r=h.slice(t,t+s);return t+s>=h.length&&e&&o&&(r=r.concat(h.slice(0,s-(h.length-t)))),r},i.ht=function(){var t=this;if(0!==this.st.length){var i,s,h=this.st[0],n=h.move,e=h.animate,o={trigger:h.trigger,animate:e},r=this.t.items.length,u=this.t,a=u.currentIndex,c=u.currentGroup,f=u.groupsMax,l=u.group,v=u.options,d=v.loop,m=v.preserveGroup;if("to"===n?i=(s=h.index)*l:("prev"===n&&(s=c-1,i=a-l),"next"===n&&(s=c+1,i=a+l)),s<0&&(s=d?f-1:c),s>=f&&(s=d?0:c),i<0&&(i=d?m?r-Math.abs(i):r-r%l:a),i>=r&&(i=d?m?i-r:0:a),o.direction="to"===n?s>c?"next":"prev":n,o.currentIndex=a,o.newIndex=i,o.currentGroup=c,o.newGroup=s,s===c)return this.st.shift(),void this.ht();var p=this.getCurrentItems(a),w=this.getNewItems(i);this.t.newIndex=i,this.t.newGroup=s,this.t.hooks.call("beforeSlide",this.t,o,this.t.context,this.t.data),this.Z=!0,p.forEach(function(t){t.classList.remove("is-active")}),(e?this.tt:function(){return Promise.resolve()}).call(this.t,l>1?p:p[0],l>1?w:w[0],o,this.t.context,this.t.data).then(function(){t.t.currentIndex=i,t.t.currentGroup=s,t.st.shift(),t.Z=!1,w.forEach(function(t){t.classList.add("is-active")}),t.t.hooks.call("afterSlide",t.t,o,t.t.context,t.t.data),t.ht()})}},t}();module.exports=function(){function i(i,s,h,n){var o;return void 0===h&&(h=null),void 0===n&&(n=null),this.data=n,this.hooks=new e,"string"==typeof i&&(o=document.querySelectorAll(i)),!i||o&&0===o.length?(this.nt=!0,void console.error("Slidy: no element matching!")):(o&&o.length>1&&console.warn("Slidy: multiple elements matching!"),this.el=o?o[0]:i,this.i=t({auto:!1,click:!0,controls:!1,debounce:100,drag:!1,group:function(){return 1},height:"auto",index:0,interval:2e3,keyboard:!0,loop:!0,namespace:"slidy",nav:!1,pagination:!1,pause:!0,preserveGroup:!0,queue:1,resize:!0,reverse:!1,swipe:!1,tap:!1,transition:null,zerofill:!1},s),null===this.i.transition?(this.nt=!0,void console.error("Slidy: you should define a transition!")):(this.context=h||this,this.et=this.i.debounce,this.currentIndex=this.i.index,this.newIndex=this.currentIndex,this.group=Number(this.i.group)||this.i.group(),this.currentGroup=Math.ceil(this.currentIndex/this.group),this.newGroup=this.currentGroup,void(this.newIndex%this.group==0||this.options.preserveGroup||console.warn("Slidy: index does not match with group!"))))}var s,a=i.prototype;return a.init=function(){var t=this;this.nt?console.error("Slidy: fix errors!"):(this.items=Array.from(this.el.children),this.itemsMax=this.items.length,this.groupsMax=Math.ceil(this.itemsMax/this.group),this.ot=!1,this.start=this.start.bind(this),this.slideNext=this.slideNext.bind(this),this.hooks.add("afterSlide",function(){t.el.setAttribute("aria-valuenow",""+(t.currentIndex+1))}),this.hooks.call("beforeInit",this,this.el),this.rt=new u(this,this.i.transition),"auto"===this.i.height?this.reset():this.el.style.height=this.i.height+"px",this.outer=document.createElement("div"),this.el.parentNode.insertBefore(this.outer,this.el),this.outer.appendChild(this.el),this.ut=this.rt.getCurrentItems(this.currentIndex),this.outer.classList.add(this.namespace+"-outer"),this.el.classList.add(this.namespace),this.items.forEach(function(i){i.classList.add(t.namespace+"__item")}),this.ut.forEach(function(t){t.classList.add("is-active")}),this.el.setAttribute("role","slider"),this.el.setAttribute("aria-valuemin","1"),this.el.setAttribute("aria-valuemax",""+this.items.length),this.el.setAttribute("aria-valuenow",""+(this.currentIndex+1)),this.el.setAttribute("aria-valuenow",""+(this.currentGroup+1)),this.i.click&&(this.el.style.cursor="pointer"),this.i.controls&&(this.at=new h(this,this.i)),this.i.nav&&(this.ct=new o(this,this.i)),this.i.pagination&&(this.ft=new r(this,this.i)),this.bind(),this.i.auto&&this.start(),this.hooks.call("afterInit",this,this.el))},a.on=function(t,i){this.hooks.add(t,i)},a.off=function(t,i){this.hooks.remove(t,i)},a.slidePrev=function(t,i){void 0===i&&(i=!1),!this.i.reverse||i?this.slide({move:"prev",trigger:t}):this.slideNext(t,!0)},a.slideNext=function(t,i){void 0===i&&(i=!1),!this.i.reverse||i?this.slide({move:"next",trigger:t}):this.slidePrev(t,!0)},a.slideTo=function(t,i,s){void 0===s&&(s=!0),this.slide({move:"to",trigger:i,index:t,animate:s})},a.slide=function(i){this.i.auto&&(window.clearInterval(this.lt),this.lt=window.setInterval(this.slideNext,this.i.interval)),this.rt?this.rt.add(t({index:null,animate:!0},i)):this.stop()},a.start=function(t,i){var s=this;void 0===t&&(t=this.i.interval),void 0===i&&(i=this.i.auto),this.vt=window.setTimeout(function(){s.slideNext("auto"),!s.ot&&s.i.pause&&s.outer.addEventListener("mouseenter",s.dt),i&&(window.clearInterval(s.lt),s.lt=window.setInterval(s.slideNext,s.i.interval))},t)},a.stop=function(){this.ot&&this.outer.removeEventListener("mouseenter",this.dt),window.clearTimeout(this.vt),window.clearInterval(this.lt)},a.destroy=function(){var t=this;this.pt=!0,this.stop(),this.rt&&(this.rt.empty(),delete this.rt),this.i.resize&&window.removeEventListener("resize",this.onResize),this.el.removeEventListener("mouseenter",this.dt),this.el.removeEventListener("mouseleave",this.wt),this.el.removeEventListener("click",this.V),this.items.forEach(function(t){t.classList.remove("is-active")}),this.bt&&(this.bt.destroy(),delete this.bt),this.at&&(this.at.destroy(),delete this.at),this.ct&&(this.ct.destroy(),delete this.ct),this.ft&&(this.ft.destroy(),delete this.ft),this.outer.before(this.el),this.outer.parentNode&&this.outer.parentNode.removeChild(this.outer),this.el.classList.remove(this.namespace),this.items.forEach(function(i){i.classList.remove(t.namespace+"__item"),i.removeAttribute("style"),Array.from(i.children).forEach(function(t){t.removeAttribute("style")})}),this.el.removeAttribute("style"),this.el.removeAttribute("role"),this.el.removeAttribute("aria-valuemin"),this.el.removeAttribute("aria-valuemax"),this.el.removeAttribute("aria-valuenow"),this.el.removeAttribute("aria-valuenow")},a.bind=function(){var t,i,s;this.dt=this.dt.bind(this),this.wt=this.wt.bind(this),this.V=this.V.bind(this),this.gt=this.gt.bind(this),this.yt=this.yt.bind(this),this.i.resize&&(this.onResize=(t=this.onResize,i=this.et,function(){var h=arguments,n=this,e=function(){s=null,t.apply(n,[].slice.call(h))};clearTimeout(s),s=window.setTimeout(e,i)}).bind(this),window.addEventListener("resize",this.onResize)),this.i.pause&&this.i.auto&&(this.outer.addEventListener("mouseenter",this.dt),this.ot=!0),this.bt=new n(this.el),"ontouchstart"in window?(this.i.tap&&this.bt.on("tap",this.gt),this.i.swipe&&this.bt.on("swipe",this.yt)):(this.i.click&&this.bt.on("click",this.V),this.i.drag&&this.bt.on("drag",this.yt))},a.reset=function(){if("auto"===this.i.height){this.el.style.height="";var t=[],i=0===this.items[0].offsetHeight;this.items.forEach(function(s){t.push(i&&s.firstElementChild?s.firstElementChild.offsetHeight:s.offsetHeight)}),this.el.style.height=t.filter(function(t){return t>0}).sort(function(t,i){return i-t}).slice(0,1)+"px"}},a.onResize=function(){this.pt||(this.reset(),Number(this.i.group)||(this.group=this.i.group()),this.hooks.call("afterResize",this,this.el))},a.V=function(){this.slideNext("click")},a.gt=function(){this.slideNext("tap")},a.yt=function(t,i){"right"===t&&this.slidePrev(i),"left"===t&&this.slideNext(i)},a.dt=function(){this.outer.removeEventListener("mouseenter",this.dt),this.stop(),this.outer.addEventListener("mouseleave",this.wt)},a.wt=function(){this.outer.removeEventListener("mouseleave",this.wt),this.start(),this.outer.addEventListener("mouseenter",this.dt)},(s=[{key:"options",get:function(){return this.i}},{key:"namespace",get:function(){return this.i.namespace}}])&&function(t,i){for(var s=0;s<i.length;s++){var h=i[s];h.enumerable=h.enumerable||!1,h.configurable=!0,"value"in h&&(h.writable=!0),Object.defineProperty(t,h.key,h)}}(i.prototype,s),i}();