hella-slider
Version:
Hella rad image slider.
1 lines • 5.12 kB
JavaScript
!function(e){var t={};function i(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/",i(i.s=0)}([function(e,t,i){i(1),e.exports=i(2)},function(e,t){function i(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}new(function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:900,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:".hella-slider";!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),document.querySelector(i)&&(this.breakpoint=t,this.sel={slider:i,sliderImages:".hella-slider-images",captionSlot:".hella-caption-display-slot",prevButton:".hella-slider-prev",nextButton:".hella-slider-next",disabledClass:"hella-disabled",transitionClass:"hella-smooth-transition"},this.xDown=this.yDown=null,this.init(document.querySelectorAll(this.sel.slider)))}var t,n,r;return t=e,(n=[{key:"init",value:function(e){var t=this;e.forEach(function(e){e.setAttribute("count",0),e.querySelector(t.sel.prevButton).classList.add(t.sel.disabledClass),e.initialWidth=e.style.width;var i=t.initFigures(e)[0].querySelectorAll("figcaption")[0],n=e.querySelector(t.sel.captionSlot);n&&i&&(n.innerHTML=i.innerHTML),e.querySelector(t.sel.prevButton).addEventListener("click",function(i){return t.moveSlide(e,"prev")}),e.querySelector(t.sel.nextButton).addEventListener("click",function(i){return t.moveSlide(e,"next")}),e.addEventListener("touchstart",function(e){return t.touchStart(e)}),e.addEventListener("touchmove",function(i){return t.touchMove(e,i)}),window.addEventListener("resize",function(i){return t.initFigures(e,i)})})}},{key:"initFigures",value:function(e,t){document.body.clientWidth<this.breakpoint?e.style.width="auto":e.style.width=e.initialWidth;var i=e.querySelectorAll("figure");if(i.forEach(function(t){t.style.width=e.clientWidth+"px",t.children[0].style.opacity=1}),void 0!==t&&"resize"===t.type){var n=e.getAttribute("count");e.querySelector(this.sel.sliderImages).classList.remove(this.sel.transitionClass),e.querySelector(this.sel.sliderImages).style.marginLeft=i[0].clientWidth*-n+"px"}return i}},{key:"touchStart",value:function(e){this.xDown=e.touches[0].clientX,this.yDown=e.touches[0].clientY}},{key:"touchMove",value:function(e,t){if(this.xDown&&this.yDown){var i=t.touches[0].clientX,n=t.touches[0].clientY,r=this.xDown-i,s=this.yDown-n;Math.abs(r)>Math.abs(s)&&(r>0?this.moveSlide(e,"next"):this.moveSlide(e,"prev")),this.xDown=null,this.yDown=null}}},{key:"moveSlide",value:function(e,t){var i=this.parseElement(e);if(i.sliderImageContainer.classList.contains(this.sel.transitionClass)||i.sliderImageContainer.classList.add(this.sel.transitionClass),"prev"===t){if(0===i.sliderCount)return;this.diff=i.marginLeftInt+i.currentFigureWidth+"px"}if("next"===t){if(0===i.sliderCount&&i.sliderPrevButton.classList.remove(this.sel.disabledClass),i.figures.length-1===i.sliderCount)return;this.diff=i.marginLeftInt-i.currentFigureWidth+"px"}i.sliderImageContainer.style.marginLeft=this.diff,this.setCaptionAndCount(i,t)}},{key:"setCaptionAndCount",value:function(e,t){var i=("prev"===t?e.figures[e.sliderCount-1]:e.figures[e.sliderCount+1]).getElementsByTagName("figcaption")[0];e.slot&&(e.slot.innerHTML=i?i.innerHTML:"");var n="prev"===t?e.sliderCount-1:e.sliderCount+1;e.sliderCont.setAttribute("count",n),"prev"===t&&(e.sliderCount-1==0&&e.sliderPrevButton.classList.add(this.sel.disabledClass),e.sliderCount-1!==e.figures.length&&e.sliderNextButton.classList.remove(this.sel.disabledClass)),"next"===t&&e.sliderCount+1===e.figures.length-1&&e.sliderNextButton.classList.add(this.sel.disabledClass)}},{key:"parseElement",value:function(e){var t={};return t.sliderCont=e,t.figures=e.querySelectorAll("figure"),t.sliderCount=parseInt(e.getAttribute("count")),t.currentFigure=t.figures[t.sliderCount],t.currentFigureWidth=parseInt(t.currentFigure.style.width),t.sliderImageContainer=e.querySelector(this.sel.sliderImages),t.marginLeftInt=parseInt(t.sliderImageContainer.style.marginLeft)||0,t.slot=e.querySelector(this.sel.captionSlot),t.sliderPrevButton=e.querySelector(this.sel.prevButton),t.sliderNextButton=e.querySelector(this.sel.nextButton),t}}])&&i(t.prototype,n),r&&i(t,r),e}())},function(e,t){}]);