tessarray.min.js

// ------ Tessarray ------
// Copyright 2016 Dixon and Moe
// Licensed under the terms of the MIT license. Please see LICENSE file in the project root for terms.
!function(t,i){"function"==typeof define&&define.amd?define([],i):"object"==typeof module&&module.exports?module.exports=i():t.Tessarray=i()}("undefined"!=typeof window?window:global,function(){var t=function(t,i,s){this.container=document.querySelector(t),this.eventListeners={},this.allFilters=[],this.allSorts={},this._setOptions(s),this._styleContainer(),this._defineTransitions(),this.options.containerTransition&&(this.container.style.transition=this.containerTransition),this._setContainerPadding(),this._setEventListeners(),this._bindAndPrepareFilteringAndSorting(),this._createBoxes(i),this._changeSortValuesToNumbersIfPossible(),this._setContainerState()};t.prototype._setOptions=function(t){this.options=t||{},this._setOptionValue("selectorClass",!1),this._setOptionValue("defaultFilter",!1),this._setOptionValue("defaultSort",!1),this._setOptionValue("resize",!0),this._setOptionValue("containerTransition",{duration:300,timingFunction:"ease-in",delay:0}),this._setOptionValue("boxTransition",{duration:500,timingFunction:"ease-in",delay:0}),this._setOptionValue("boxTransformOutTransition",{duration:250,timingFunction:"ease-in",delay:0}),this._setOptionValue("containerLoadedClass","container-is-loaded"),this._setOptionValue("boxLoadedClass","is-loaded"),this._setOptionValue("onContainerLoad",!1),this._setOptionValue("onBoxLoad",!1),this._setOptionValue("onRender",!1),this._setOptionValue("flickr",{})},t.prototype._setOptionValue=function(t,i){void 0===this.options[t]&&(this.options[t]=i)},t.prototype._styleContainer=function(){this.container.style.position="relative",this.container.style.opacity="0",this.container.offsetTop,this.specifiedContainerWidth=!!this.options.flickr.containerWidth,this._setContainerWidth()},t.prototype._setContainerWidth=function(){this.specifiedContainerWidth||(this.options.flickr.containerWidth=this.container.clientWidth)},t.prototype._defineTransitions=function(){"object"==typeof this.options.containerTransition?this.containerTransition="opacity "+this.options.containerTransition.duration+"ms "+this.options.containerTransition.timingFunction+" "+this.options.containerTransition.delay+"ms":"string"==typeof this.options.containerTransition?this.containerTransition=this.options.containerTransition:this.containerTransition=!1,"object"==typeof this.options.boxTransition?this.boxTransition="transform "+this.options.boxTransition.duration+"ms "+this.options.boxTransition.timingFunction+" "+this.options.boxTransition.delay+"ms, height "+this.options.boxTransition.duration+"ms "+this.options.boxTransition.timingFunction+" "+this.options.boxTransition.delay+"ms, width "+this.options.boxTransition.duration+"ms "+this.options.boxTransition.timingFunction+" "+this.options.boxTransition.delay+"ms":"string"==typeof this.options.boxTransition?this.boxTransition=this.options.boxTransition:this.boxTransition=!1,"object"==typeof this.options.boxTransformOutTransition?this.boxTransformOutTransition="transform "+this.options.boxTransformOutTransition.duration+"ms "+this.options.boxTransformOutTransition.timingFunction+" "+this.options.boxTransformOutTransition.delay+"ms":"string"==typeof this.options.boxTransformOutTransition?this.boxTransformOutTransition=this.options.boxTransformOutTransition:this.boxTransformOutTransition=!1},t.prototype._setContainerPadding=function(){this.options.flickr.containerPadding?"number"==typeof this.options.flickr.containerPadding?this.containerPaddingBottom=this.options.flickr.containerPadding:this.options.flickr.containerPadding.bottom?this.containerPaddingBottom=this.options.flickr.containerPadding.bottom:this.containerPaddingBottom=0:this.containerPaddingBottom=10},t.prototype._setEventListeners=function(){if(this.eventListeners.container=function(t){t.target===this.container&&(this._addTransitionToAllBoxNodes(),this.container.removeEventListener("transitionend",this.eventListeners.container))}.bind(this),!1!==this.options.containerTransition&&("object"!=typeof this.options.containerTransition||0!==this.options.containerTransition.duration))try{this.container.addEventListener("transitionend",this.eventListeners.container)}catch(t){console.error('Cannot find container with selectorString "'+containerSelector+'"')}this.options.resize&&(this.eventListeners.window=this.renderOnResize.bind(this),window.addEventListener("resize",this.eventListeners.window))},t.prototype._bindAndPrepareFilteringAndSorting=function(){if(this.options.selectorClass){this.selectors=document.getElementsByClassName(this.options.selectorClass);for(var t=0;t<this.selectors.length;t++){var i=this.selectors[t].getAttribute("data-filter"),s=this.selectors[t].getAttribute("data-sort");null!==i&&null!==s?this.eventListeners[t]=this.filterAndSort.bind(this,i,s):null!==i?this.eventListeners[t]=this.filter.bind(this,i):null!==s&&(this.eventListeners[t]=this.sort.bind(this,s)),this.eventListeners[t]&&this.selectors[t].addEventListener("click",this.eventListeners[t]),i&&this.allFilters.push(i),s&&(this.allSorts[s]=!0)}}},t.prototype._changeSortValuesToNumbersIfPossible=function(){if(this.options.selectorClass)for(var t in this.allSorts)this.allSorts[t]&&this._changeSortValuesToNumbers(t)},t.prototype._changeSortValuesToNumbers=function(t){""!==t&&this.boxObjects.forEach(function(i){!1!==i.sortData[t]&&(i.sortData[t]=+i.sortData[t].replace(/,/g,""))})},t.prototype._setContainerState=function(){this.containerIsReady=!0,this.boxesAreReady()&&this.initialRender()},t.prototype.boxesAreReady=function(){if(!this.boxesHaveBeenCreated)return!1;for(var t=0;t<this.boxesAspectRatioStates.length;t++)if(!this.boxesAspectRatioStates[t])return!1;return!0},t.prototype._createBoxes=function(t){var s=this.container.querySelectorAll(t);this.boxNodes=[],this.boxObjects=[],this.boxesAspectRatioStates=[];for(var o=0,e=0;e<s.length;e++){var n=new i(s[e],e,this);n.invalid?o+=1:(this.boxObjects[e-o]=n,this.boxNodes[e-o]=s[e],this.boxNodes[e-o].style.position="absolute")}this.boxesHaveBeenCreated=!0};var i=function(t,i,s){this.index=i,this.boxNode=t,this.tessarray=s,this.filters=[],this.sortData={},this.tessarray.boxesAspectRatioStates[i]=!1,this.tessarray.options.selectorClass&&(this._setFilters(),this._setSortData()),this._loadImagesAndSetAspectRatios()};return i.prototype._setFilters=function(){this.tessarray.allFilters.forEach(function(t){this.boxNode.classList.contains(t)&&this.filters.push(t)}.bind(this))},i.prototype._setSortData=function(){for(var t in this.tessarray.allSorts){var i=this._setSortValue(t);i?this.tessarray.allSorts[t]&&(this._isValidNumber(i)||(this.tessarray.allSorts[t]=!1)):i=!1,this.sortData[t]=i}},i.prototype._setSortValue=function(t){return"data-"===t.slice(0,5)?sortValue=this.boxNode.dataset[this._camelCase(t.slice(5))]:this.boxNode.getElementsByClassName(t)[0]?sortValue=this.boxNode.getElementsByClassName(t)[0].innerHTML.toLowerCase().trim():sortValue=!1,sortValue},i.prototype._camelCase=function(t){return t.replace(/-([a-z])/g,function(t){return t[1].toUpperCase()})},i.prototype._isValidNumber=function(t){return!(+t.replace(/,/g,"")!=+t.replace(/,/g,""))},i.prototype._loadImagesAndSetAspectRatios=function(){if(this.boxNode.querySelector("img")?this.image=this.boxNode.querySelector("img"):"IMG"===this.boxNode.tagName&&(this.image=this.boxNode),this.boxNode.getAttribute("data-aspect-ratio")||this.boxNode.getAttribute("data-height")&&this.boxNode.getAttribute("data-width"))this.setAspectRatio(this.tessarray,this.index);else if(this.image&&this.image.getAttribute("src")){var t=this.image.getAttribute("src"),i=new Image,s=this;i.onload=function(){s.aspectRatio=this.width/this.height,s.tessarray.boxIsReady(s.index),s.boxNode.classList.add(s.tessarray.options.boxLoadedClass),"function"==typeof s.tessarray.options.onBoxLoad&&s.tessarray.options.onBoxLoad(s)},i.src=t}else this.invalid=!0,this.tessarray.boxIsReady(index),console.error("One of your images does not exist.")},i.prototype.setAspectRatio=function(t,i){if(this.boxNode.getAttribute("data-aspect-ratio")?this.aspectRatio=parseFloat(this.boxNode.getAttribute("data-aspect-ratio")):this.boxNode.getAttribute("data-height")&&this.boxNode.getAttribute("data-width")&&(this.aspectRatio=parseFloat(this.boxNode.getAttribute("data-width"))/parseFloat(this.boxNode.getAttribute("data-height"))),t.boxIsReady(i),this.image){var s=this.image.getAttribute("src"),o=new Image,e=this;o.onload=function(){e.boxNode.classList.add(t.options.boxLoadedClass),"function"==typeof t.options.onBoxLoad&&t.options.onBoxLoad(e)},o.src=s}else this.boxNode.classList.add(t.options.boxLoadedClass),"function"==typeof t.options.onBoxLoad&&t.options.onBoxLoad(this)},t.prototype.boxIsReady=function(t){this.boxesAspectRatioStates[t]=!0,this.boxesAreReady()&&this.containerIsReady&&this.initialRender()},t.prototype.renderOnResize=function(){this.specifiedContainerWidth||this.options.flickr.containerWidth===this.container.clientWidth||this.debounce(this.render.bind(this),100)()},t.prototype.debounce=function(t,i,s){var o;return function(){var e=this,n=arguments,r=s&&!o;clearTimeout(o),o=setTimeout(function(){o=null,s||t.apply(e,n)},i),r&&t.apply(e,n)}},t.prototype.initialRender=function(){this.container.style.opacity="1",this.container.classList.add(this.options.containerLoadedClass),"function"==typeof this.options.onContainerLoad&&this.options.onContainerLoad(this),this.options.selectorClass&&this.options.defaultFilter&&this.options.defaultSort?this.filterAndSort(this.options.defaultFilter,this.options.defaultSort,!0):(this.selectedBoxes=this.boxObjects.slice(),this.render(!0))},t.prototype.filterAndSort=function(t,i,s){(s||t!==this.activeFilter&&!1!==t||i!==this.activeSort&&!1!==i)&&(t===this.activeFilter||!1===t||(""===t?(this.activeFilter=t,this.selectedBoxes=this.boxObjects.slice()):(this.activeFilter=t,this.selectedBoxes=this.boxObjects.filter(function(i){return i.filters.indexOf(t)>=0}))),i===this.activeSort||!1===i||(""===i?(this.activeSort=i,this.selectedBoxes=this.selectedBoxes.sort(function(t,i){return t.index-i.index})):(this.activeSort=i,this.selectedBoxes=this.selectedBoxes.sort(function(t,s){return!1===t.sortData[i]?1:!1===s.sortData[i]?-1:t.sortData[i]<s.sortData[i]?-1:t.sortData[i]>s.sortData[i]?1:0}))),!0===s?this.render(!0):this.render())},t.prototype.filter=function(t){this.filterAndSort(t,!1)},t.prototype.sort=function(t){this.filterAndSort(!1,t)},t.prototype._scale=function(t,i){this.boxTransformOutTransition&&(t.style.transition=this.boxTransformOutTransition);var s=t.style.transform;t.style.transform=""!==s?s.replace(/(scale\()(\d)(\))/,"$1"+i.toString()+"$3"):"translate(0px, 0px) scale("+i.toString()+")"},t.prototype._addTransitionToAllBoxNodes=function(){if(this.boxTransition)for(var t=0;t<this.boxNodes.length;t++)this.boxNodes[t].style.transition=this.boxTransition},t.prototype.render=function(t){if(this._setContainerWidth(),this.layoutGeometry=require("justified-layout")(this.selectedBoxes.map(function(t){return t.aspectRatio}),this.options.flickr),this.layoutGeometry.boxes.length>0){var i=this.layoutGeometry.boxes[this.layoutGeometry.boxes.length-1].top+this.layoutGeometry.boxes[this.layoutGeometry.boxes.length-1].height+this.containerPaddingBottom;this.container.style.height=i.toString()+"px"}else this.container.style.height="0px";t||this._addTransitionToAllBoxNodes();for(var s=0;s<this.boxObjects.length;s++){var o=this.selectedBoxes.indexOf(this.boxObjects[s]);if(o>=0){var e=this.layoutGeometry.boxes[o];void 0!==e?(this.boxNodes[s].style.transform="translate("+e.left+"px, "+e.top+"px) scale(1)",this.boxNodes[s].style.height=e.height+"px",this.boxNodes[s].style.width=e.width+"px"):this._scale(this.boxNodes[s],0)}else this._scale(this.boxNodes[s],0)}t?"function"==typeof this.options.onRender&&this.options.onRender(this,!0):"function"==typeof this.options.onRender&&this.options.onRender(this,!1),this.container.offsetTop},t.prototype.destroy=function(){this.eventListeners.window&&window.removeEventListener("resize",this.eventListeners.window),this.eventListeners.container&&this.container.removeEventListener("transitionend",this.eventListeners.container),this.options.containerTransition&&(this.container.style.transition=""),this.boxNodes.forEach(function(t){t.style.transition=""}),this.selectors&&this.selectors.forEach(function(t){t.removeEventListener("click",this.eventListeners[j])}),delete this.boxObjects},t});