wtc-gallery-component/dist/wtc-gallery-component.min.js

Very simplistic gallery with image preloader and a navigation and autoplay option.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _wtcUtilityPreloader=_interopRequireDefault(require("wtc-utility-preloader")),_wtcControllerElement=_interopRequireWildcard(require("wtc-controller-element"));function _getRequireWildcardCache(){if("function"!=typeof WeakMap)return null;var cache=new WeakMap;return _getRequireWildcardCache=function(){return cache},cache}function _interopRequireWildcard(obj){if(obj&&obj.__esModule)return obj;if(null===obj||"object"!==_typeof(obj)&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache();if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if(Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}return newObj.default=obj,cache&&cache.set(obj,newObj),newObj}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function _iterableToArray(iter){if(Symbol.iterator in Object(iter)||"[object Arguments]"===Object.prototype.toString.call(iter))return Array.from(iter)}function _arrayWithoutHoles(arr){if(Array.isArray(arr)){for(var i=0,arr2=new Array(arr.length);i<arr.length;i++)arr2[i]=arr[i];return arr2}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}function _possibleConstructorReturn(self,call){return!call||"object"!==_typeof(call)&&"function"!=typeof call?_assertThisInitialized(self):call}function _getPrototypeOf(o){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(o){return o.__proto__||Object.getPrototypeOf(o)})(o)}function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),superClass&&_setPrototypeOf(subClass,superClass)}function _setPrototypeOf(o,p){return(_setPrototypeOf=Object.setPrototypeOf||function(o,p){return o.__proto__=p,o})(o,p)}var Gallery=function(){function Gallery(element){var _this,options=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(_classCallCheck(this,Gallery),(_this=_possibleConstructorReturn(this,_getPrototypeOf(Gallery).call(this,element))).options={nav:"true"==_this.element.getAttribute("data-nav"),debug:"true"==_this.element.getAttribute("data-debug"),autoplay:"true"==_this.element.getAttribute("data-autoplay"),delay:0<parseInt(_this.element.getAttribute("data-delay"))?parseInt(_this.element.getAttribute("data-delay")):5e3,pauseOnHover:"true"==_this.element.getAttribute("data-pause-on-hover"),loop:"true"==_this.element.getAttribute("data-loop"),draggable:"true"==_this.element.getAttribute("data-draggable"),dragThreshold:0<parseInt(_this.element.getAttribute("data-drag-threshold"))?parseInt(_this.element.getAttribute("data-drag-threshold")):40,pagination:"true"==_this.element.getAttribute("data-pagination"),paginationTarget:_this.element.getAttribute("data-pagination-target")&&1<_this.element.getAttribute("data-pagination-target").length?_this.element.getAttribute("data-pagination-target"):null,nextBtnMarkup:_this.element.getAttribute("data-next-btn-markup")?_this.element.getAttribute("data-next-btn-markup"):'Next <span class="visually-hidden">carousel item.</span>',prevBtnMarkup:_this.element.getAttribute("data-prev-btn-markup")?_this.element.getAttribute("data-prev-btn-markup"):'Previous <span class="visually-hidden">carousel item.</span>',liveRegionText:_this.element.getAttribute("data-live-region-text")?_this.element.getAttribute("data-live-region-text"):"Active carousel item",onLoad:null,onWillChange:null,onHasChanged:null},options&&(_this.options=Object.assign({},_this.options,options)),_this.wrapper=_this.element.querySelector("ul"),_this.items=_toConsumableArray(_this.wrapper.children),_this.overlay=document.createElement("div"),_this.currentItem=_this.items[0],_this.currentIndex=0,_this.handleVisibilityChange=_this.handleVisibilityChange.bind(_assertThisInitialized(_this)),_this.options.nav&&(_this.nextBtn=document.createElement("button"),_this.nextBtn.innerHTML=_this.options.nextBtnMarkup,_this.prevBtn=document.createElement("button"),_this.prevBtn.innerHTML=_this.options.prevBtnMarkup,_this.nextBtn.className="gallery__nav gallery__nav-next",_this.prevBtn.className="gallery__nav gallery__nav-prev",_this.nextBtn.addEventListener("click",_this.next.bind(_assertThisInitialized(_this))),_this.prevBtn.addEventListener("click",_this.prev.bind(_assertThisInitialized(_this))),_this.wrapper.insertAdjacentElement("afterend",_this.nextBtn),_this.wrapper.insertAdjacentElement("afterend",_this.prevBtn)),_this.options.pagination){var itemList;if(_this.options.paginationTarget){_toConsumableArray((itemList=document.querySelector(_this.options.paginationTarget)).children).forEach(function(el,i){el.classList.add("gallery__pagination-item"),el.dataset.index||(el.dataset.index=i),0===i&&el.classList.add("is-active"),el.addEventListener("click",_this.handlePagination.bind(_assertThisInitialized(_this)))})}else{var i=0,length=_this.items.length;for(itemList=document.createElement("ul");i<length;i++){var item=document.createElement("li"),itemBtn=document.createElement("button"),itemBtnContent=document.createTextNode(i+1);item.classList.add("gallery__pagination-item"),0===(item.dataset.index=i)&&item.classList.add("is-active"),item.addEventListener("click",_this.handlePagination.bind(_assertThisInitialized(_this))),itemBtn.appendChild(itemBtnContent),item.appendChild(itemBtn),itemList.appendChild(item)}_this.element.appendChild(itemList)}_this.paginationList=itemList,_this.paginationItems=_toConsumableArray(_this.paginationList.children),itemList.classList.add("gallery__pagination")}_this.liveRegion=null,_this.options.liveRegionText&&(_this.liveRegion=document.createElement("p"),_this.liveRegion.setAttribute("aria-live","polite"),_this.liveRegion.classList.add("visually-hidden"),_this.element.insertAdjacentElement("afterbegin",_this.liveRegion)),_this.options.pauseOnHover&&(window.PointerEvent?(element.addEventListener("pointerover",_this.pause.bind(_assertThisInitialized(_this)),!1),element.addEventListener("pointerout",_this.resume.bind(_assertThisInitialized(_this)),!1)):(element.addEventListener("mouseenter",_this.pause.bind(_assertThisInitialized(_this)),!1),element.addEventListener("mouseleave",_this.resume.bind(_assertThisInitialized(_this)),!1))),_this.options.draggable&&(_this.dragStartX=null,element.addEventListener("mousedown",_this.draggablePointerDown.bind(_assertThisInitialized(_this)),!1),element.addEventListener("touchstart",_this.draggablePointerDown.bind(_assertThisInitialized(_this)),!1),element.addEventListener("mouseup",_this.draggablePointerUp.bind(_assertThisInitialized(_this)),!1),element.addEventListener("touchend",_this.draggablePointerUp.bind(_assertThisInitialized(_this)),!1)),_this.element.classList.add("gallery"),_this.overlay.classList.add("gallery__overlay"),_this.wrapper.classList.add("gallery__wrapper"),_this.items.forEach(function(item,i){if(item.classList.add("gallery__item"),item.dataset.index=i,item.setAttribute("tabindex",-1),_this.currentIndex!==i){var focusableChildren=item.querySelectorAll("button, [href], [tabindex]"),_iteratorNormalCompletion=!0,_didIteratorError=!1,_iteratorError=void 0;try{for(var _step,_iterator=focusableChildren[Symbol.iterator]();!(_iteratorNormalCompletion=(_step=_iterator.next()).done);_iteratorNormalCompletion=!0){_step.value.setAttribute("tabindex",-1)}}catch(err){_didIteratorError=!0,_iteratorError=err}finally{try{_iteratorNormalCompletion||null==_iterator.return||_iterator.return()}finally{if(_didIteratorError)throw _iteratorError}}item.setAttribute("aria-hidden","true")}item.addEventListener("transitionend",_this.itemTransitioned.bind(_assertThisInitialized(_this),item))}),_this.currentItem.classList.add("is-active"),_this.element.classList.add("is-loading"),_this.element.appendChild(_this.overlay);var images=_this.wrapper.querySelectorAll("img");if(0<images.length){var preloader=new _wtcUtilityPreloader.default({debug:_this.options.debug}),_iteratorNormalCompletion2=!0,_didIteratorError2=!1,_iteratorError2=void 0;try{for(var _step2,_iterator2=images[Symbol.iterator]();!(_iteratorNormalCompletion2=(_step2=_iterator2.next()).done);_iteratorNormalCompletion2=!0){var _item=_step2.value;preloader.add(_item.getAttribute("src"),"image")}}catch(err){_didIteratorError2=!0,_iteratorError2=err}finally{try{_iteratorNormalCompletion2||null==_iterator2.return||_iterator2.return()}finally{if(_didIteratorError2)throw _iteratorError2}}preloader.load(_this.loaded.bind(_assertThisInitialized(_this)))}else _this.loaded();return _this}return _inherits(Gallery,_wtcControllerElement["default"]),_createClass(Gallery,[{key:"handlePagination",value:function(e){var target=e.target.closest(".gallery__pagination-item");if(target){var paginationIndex=+target.dataset.index;this.paginationItems.forEach(function(item,i){paginationIndex===i?item.classList.add("is-active"):item.classList.remove("is-active")}),this.moveByIndex(paginationIndex),this.currentItem.focus()}}},{key:"draggablePointerDown",value:function(e){if(!e.target.closest("button")){e.preventDefault();var xPos=e.clientX||e.touches[0].clientX;this.dragStartX=xPos}}},{key:"draggablePointerUp",value:function(e){if(!e.target.closest("button")&&!e.target.closest("[href]")){e.preventDefault();var xPos=e.clientX||e.changedTouches[0].clientX;Math.abs(xPos-this.dragStartX)>this.options.dragThreshold&&(xPos>this.dragStartX?this.prev():this.next())}}},{key:"resize",value:function(){var newH=0,_iteratorNormalCompletion3=!0,_didIteratorError3=!1,_iteratorError3=void 0;try{for(var _step3,_iterator3=this.items[Symbol.iterator]();!(_iteratorNormalCompletion3=(_step3=_iterator3.next()).done);_iteratorNormalCompletion3=!0){var h=_step3.value.offsetHeight;newH<h&&(newH=h)}}catch(err){_didIteratorError3=!0,_iteratorError3=err}finally{try{_iteratorNormalCompletion3||null==_iterator3.return||_iterator3.return()}finally{if(_didIteratorError3)throw _iteratorError3}}return this.wrapper.style.height="".concat(newH,"px"),this}},{key:"handleAutoplay",value:function(){this.options.autoplay&&("hidden"===document.visibilityState?(this.pause(),document.addEventListener("visibilitychange",this.handleVisibilityChange)):this.player=setTimeout(this.next.bind(this),this.options.delay))}},{key:"handleVisibilityChange",value:function(){this.options.autoplay&&"hidden"!==document.visibilityState&&(document.removeEventListener("visibilitychange",this.handleVisibilityChange),this.handleAutoplay())}},{key:"loaded",value:function(){return window.addEventListener("resize",this.resize.bind(this)),this.resize(),this.element.classList.remove("is-loading"),this.element.classList.add("is-loaded"),this.options.autoplay&&this.handleAutoplay(),this.options.nav&&!this.options.loop&&0==this.currentIndex&&this.prevBtn.setAttribute("disabled",!0),"function"==typeof this.options.onLoad&&this.options.onLoad(this),this}},{key:"itemTransitioned",value:function(item){return item.classList.remove("is-transitioning"),item.classList.remove("is-transitioning--center"),item.classList.remove("is-transitioning--backward"),item.classList.remove("is-transitioning--forward"),this}},{key:"moveByIndex",value:function(index){var next=this.items[index];if(this.options.autoplay&&clearTimeout(this.player),next){if(this.currentItem!=next&&(this.currentItem.setAttribute("aria-hidden","true"),next.removeAttribute("aria-hidden"),next.classList.add("is-active"),next.classList.add("is-transitioning"),next.classList.add("is-transitioning--center"),this.currentItem.classList.remove("is-active")),this.options.pagination){var _iteratorNormalCompletion4=!0,_didIteratorError4=!1,_iteratorError4=void 0;try{for(var _step4,_iterator4=this.paginationItems[Symbol.iterator]();!(_iteratorNormalCompletion4=(_step4=_iterator4.next()).done);_iteratorNormalCompletion4=!0){var item=_step4.value;item.dataset.index==index?item.classList.add("is-active"):item.classList.remove("is-active")}}catch(err){_didIteratorError4=!0,_iteratorError4=err}finally{try{_iteratorNormalCompletion4||null==_iterator4.return||_iterator4.return()}finally{if(_didIteratorError4)throw _iteratorError4}}}this.liveRegion&&this.options.liveRegionText&&(this.liveRegion.innerHTML="".concat(this.options.liveRegionText,": ").concat(index+1," of ").concat(this.items.length,"."));var prev=this.currentItem;return this.currentItem=next,this.currentIndex=index,!this.options.loop&&this.options.nav&&(this.currentIndex==this.items.length-1?(this.nextBtn.setAttribute("disabled",!0),this.prevBtn.removeAttribute("disabled")):0==this.currentIndex?(this.prevBtn.setAttribute("disabled",!0),this.nextBtn.removeAttribute("disabled")):(this.nextBtn.removeAttribute("disabled"),this.prevBtn.removeAttribute("disabled"))),"function"==typeof this.options.onHasChanged&&this.options.onHasChanged(this.currentItem,prev,this),this.options.autoplay&&this.handleAutoplay(),this}console.warn("No item with index: "+index)}},{key:"move",value:function(argument_0){var direction=!(0<arguments.length&&void 0!==argument_0)||argument_0;this.options.autoplay&&clearTimeout(this.player);var next=direction?this.currentItem.nextElementSibling:this.currentItem.previousElementSibling;(next=next||(direction?this.items[0]:this.items[this.items.length-1])).classList.add("is-active"),next.classList.add("is-transitioning"),next.classList.add("is-transitioning--center"),this.currentItem.classList.remove("is-active"),this.currentItem.setAttribute("aria-hidden","true"),next.removeAttribute("aria-hidden"),this.options.pagination&&this.paginationItems.forEach(function(item,i){i==next.dataset.index?item.classList.add("is-active"):item.classList.remove("is-active")});var prev=this.currentItem;this.currentItem=next,this.currentIndex=+next.dataset.index,!this.options.loop&&this.options.nav&&(this.currentIndex==this.items.length-1?(this.nextBtn.setAttribute("disabled",!0),this.prevBtn.removeAttribute("disabled")):0==this.currentIndex?(this.prevBtn.setAttribute("disabled",!0),this.nextBtn.removeAttribute("disabled")):(this.nextBtn.removeAttribute("disabled"),this.prevBtn.removeAttribute("disabled"))),"function"==typeof this.options.onHasChanged&&this.options.onHasChanged(this.currentItem,prev,this),this.options.autoplay?this.handleAutoplay():this.liveRegion&&this.options.liveRegionText&&(this.liveRegion.innerHTML="".concat(this.options.liveRegionText,": ").concat(this.currentIndex+1," of ").concat(this.items.length,"."))}},{key:"next",value:function(){return this.currentIndex=parseInt(this.currentItem.dataset.index),"function"==typeof this.options.onWillChange&&this.options.onWillChange(this,!0),this.currentItem.classList.remove("is-transitioning--center"),this.currentItem.classList.add("is-transitioning"),this.currentItem.classList.add("is-transitioning--backward"),this.move(),this}},{key:"prev",value:function(){return this.currentIndex=this.currentItem.dataset.index,"function"==typeof this.options.onWillChange&&this.options.onWillChange(this,!1),this.currentItem.classList.remove("is-transitioning--center"),this.currentItem.classList.add("is-transitioning"),this.currentItem.classList.add("is-transitioning--forward"),this.move(!1),this}},{key:"pause",value:function(){return this.options.autoplay&&clearTimeout(this.player),this}},{key:"resume",value:function(){return this.options.autoplay&&this.handleAutoplay(),this}},{key:"active",get:function(){return this.currentItem}},{key:"activeIndex",get:function(){return this.currentIndex}}]),Gallery}();_wtcControllerElement.ExecuteControllers.registerController(Gallery,"Gallery");var _default=Gallery;exports.default=_default;