wookmark.min.js

/**
 * Wookmark-Node v1.0.0 (https://www.travismclarke.com)
 * Copyright 2016 Travis Clarke
 *
 * Wookmark v2.1.2 (2016-05-05)
 * (c) 2009-2016 Christoph Ono (www.wookmark.com)
 * License: MIT (http://www.opensource.org/licenses/mit-license.php) license.
 *
 * @preserve
 */
(function(root,factory){if(typeof define==="function"&&define.amd){define(["exports","jquery"],factory)}else if(typeof exports==="object"&&typeof exports.nodeName!=="string"){factory(exports,require("jquery"))}else{factory(root,root.jQuery)}})(this,function(exports,$){"use strict";var defaultOptions={align:"center",autoResize:true,comparator:null,direction:undefined,ignoreInactiveItems:true,inactiveClass:"wookmark-inactive",itemSelector:undefined,itemWidth:0,fillEmptySpace:false,flexibleWidth:0,offset:5,outerOffset:0,onLayoutChanged:undefined,placeholderClass:"wookmark-placeholder",possibleFilters:[],resizeDelay:50,verticalOffset:undefined};function __bind(fn,me){return function(){return fn.apply(me,arguments)}}var executeNextFrame=window.requestAnimationFrame||function(callback){callback()};function setCSS(el,properties){var key;for(key in properties){if(properties.hasOwnProperty(key)){el.style[key]=properties[key]}}}function bulkUpdateCSS(data,callback){executeNextFrame(function(){var i,item;for(i=0;i<data.length;i++){item=data[i];setCSS(item.el,item.css)}if(typeof callback==="function"){executeNextFrame(callback)}})}function cleanFilterName(filterName){return filterName.replace(/^\s+|\s+$/g,"").toLowerCase()}function removeEventListener(el,eventName,handler){if(window.jQuery){$(el).off(eventName,handler)}else if(el.removeEventListener){el.removeEventListener(eventName,handler)}else{el.detachEvent("on"+eventName,handler)}}function addEventListener(el,eventName,handler){removeEventListener(el,eventName,handler);if(window.jQuery){$(el).on(eventName,handler)}else if(el.addEventListener){el.addEventListener(eventName,handler)}else{el.attachEvent("on"+eventName,function(){handler.call(el)})}}function isHidden(el){return el.offsetParent===null}function getHeight(el){return el.offsetHeight}function getWidth(el){return el.offsetWidth}function hasClass(el,className){if(el.classList){return el.classList.contains(className)}return new RegExp("(^| )"+className+"( |$)","gi").test(el.className)}function addClass(el,className){if(el.classList){el.classList.add(className)}else{el.className+=" "+className}}function removeClass(el,className){if(el.classList){el.classList.remove(className)}else{el.className=el.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}function getData(el,attr,isInt,prefix){if(prefix===undefined){prefix="wookmark-"}var val=el.getAttribute("data-"+prefix+attr);if(isInt===true){return parseInt(val,10)}return val}function setData(el,attr,val,prefix){if(prefix===undefined){prefix="wookmark-"}el.setAttribute("data-"+prefix+attr,val)}function removeDuplicates(items){var temp={},result=[],x,i=items.length;while(i--){x=getData(items[i],"id",true);if(!temp.hasOwnProperty(x)){temp[x]=1;result.push(items[i])}}return result}function getStyle(el,prop){return window.getComputedStyle!==undefined?window.getComputedStyle(el,null).getPropertyValue(prop):el.currentStyle[prop]}function indexOf(items,item){var len=items.length,i;for(i=0;i<len;i++){if(items[i]===item){return i}}return-1}function Wookmark(container,options){options=options||{};if(typeof container==="string"){container=document.querySelector(container)}this.container=container;this.columns=this.resizeTimer=null;this.activeItemCount=0;this.placeholders=[];this.itemHeightsInitialized=false;this.itemHeightsDirty=false;this.elementTag="div";this.initItems=__bind(this.initItems,this);this.updateOptions=__bind(this.updateOptions,this);this.onResize=__bind(this.onResize,this);this.onRefresh=__bind(this.onRefresh,this);this.getItemWidth=__bind(this.getItemWidth,this);this.layout=__bind(this.layout,this);this.layoutFull=__bind(this.layoutFull,this);this.layoutColumns=__bind(this.layoutColumns,this);this.filter=__bind(this.filter,this);this.clear=__bind(this.clear,this);this.getActiveItems=__bind(this.getActiveItems,this);this.refreshPlaceholders=__bind(this.refreshPlaceholders,this);this.sortElements=__bind(this.sortElements,this);this.updateFilterClasses=__bind(this.updateFilterClasses,this);this.initItems();this.container.style.display="block";this.updateOptions(options);this.updateFilterClasses();if(this.autoResize){addEventListener(window,"resize",this.onResize)}addEventListener(this.container,"refreshWookmark",this.onRefresh)}Wookmark.prototype.initItems=function(){if(this.itemSelector===undefined){var items=[],child,children=this.container.children,i=children.length;while(i--){child=children[i];if(child.nodeType!==8){child.style.display="";setData(child,"id",i);items.unshift(child)}}this.items=items}else{this.items=this.container.querySelectorAll(this.itemSelector)}if(this.items.length){this.elementTag=this.items[0].tagName}this.itemHeightsDirty=true};Wookmark.prototype.updateFilterClasses=function(){var i=this.items.length,j,filterClasses={},itemFilterClasses,item,filterClass,possibleFilters=this.possibleFilters,k=possibleFilters.length,possibleFilter;while(i--){item=this.items[i];itemFilterClasses=JSON.parse(getData(item,"filter-class",false,""));if(itemFilterClasses&&typeof itemFilterClasses==="object"){j=itemFilterClasses.length;while(j--){filterClass=cleanFilterName(itemFilterClasses[j]);if(!filterClasses.hasOwnProperty(filterClass)){filterClasses[filterClass]=[]}filterClasses[filterClass].push(item)}}}while(k--){possibleFilter=cleanFilterName(possibleFilters[k]);if(!filterClasses.hasOwnProperty(possibleFilter)){filterClasses[possibleFilter]=[]}}this.filterClasses=filterClasses};Wookmark.prototype.updateOptions=function(options){var key;this.itemHeightsDirty=true;options=options||{};for(key in defaultOptions){if(defaultOptions.hasOwnProperty(key)){if(options.hasOwnProperty(key)){this[key]=options[key]}else if(!this.hasOwnProperty(key)){this[key]=defaultOptions[key]}}}this.verticalOffset=this.verticalOffset||this.offset;this.layout(true)};Wookmark.prototype.onResize=function(){clearTimeout(this.resizeTimer);this.itemHeightsDirty=this.flexibleWidth!==0;this.resizeTimer=setTimeout(this.layout,this.resizeDelay)};Wookmark.prototype.onRefresh=function(){this.itemHeightsDirty=true;this.layout()};Wookmark.prototype.filter=function(filters,mode,dryRun){var activeFilters=[],activeFiltersLength,activeItems=[],i,j,k,filter;filters=filters||[];mode=mode||"or";dryRun=dryRun||false;if(filters.length){for(i=0;i<filters.length;i++){filter=cleanFilterName(filters[i]);if(this.filterClasses.hasOwnProperty(filter)){activeFilters.push(this.filterClasses[filter])}}i=activeFiltersLength=activeFilters.length;if(mode==="or"||activeFiltersLength===1){while(i--){activeItems=activeItems.concat(activeFilters[i])}}else if(mode==="and"){var shortestFilter=activeFilters[0],itemValid=true,foundInFilter,currentItem,currentFilter;while(i--){if(activeFilters[i].length<shortestFilter.length){shortestFilter=activeFilters[i]}}shortestFilter=shortestFilter||[];i=shortestFilter.length;while(i--){currentItem=shortestFilter[i];j=activeFiltersLength;itemValid=true;while(j--&&itemValid){currentFilter=activeFilters[j];if(shortestFilter!==currentFilter){foundInFilter=false;k=currentFilter.length;while(k--&&!foundInFilter){foundInFilter=currentFilter[k]===currentItem}itemValid&=foundInFilter}}if(itemValid){activeItems=activeItems.concat(shortestFilter[i])}}}if(activeFiltersLength>1){activeItems=removeDuplicates(activeItems)}if(!dryRun){i=this.items.length;while(i--){if(indexOf(activeItems,this.items[i])===-1){addClass(this.items[i],this.inactiveClass)}}}}else{activeItems=this.items}if(!dryRun){i=activeItems.length;while(i--){removeClass(activeItems[i],this.inactiveClass)}this.columns=null;this.layout()}return activeItems};Wookmark.prototype.refreshPlaceholders=function(columnWidth,sideOffset){var i,containerHeight=getHeight(this.container),columnsLength=this.columns.length,column,height,innerOffset,lastColumnItem,placeholdersHtml="",placeholder,top;if(this.placeholders.length<columnsLength){for(i=0;i<columnsLength-this.placeholders.length;i++){placeholdersHtml+="<"+this.elementTag+' class="'+this.placeholderClass+'"/>'}this.container.insertAdjacentHTML("beforeend",placeholdersHtml);this.placeholders=this.container.querySelectorAll("."+this.placeholderClass)}innerOffset=this.offset+parseInt(getStyle(this.placeholders[0],"border-left-width"),10)*2||0;innerOffset+=parseInt(getStyle(this.placeholders[0],"padding-left"),10)*2||0;for(i=0;i<this.placeholders.length;i++){placeholder=this.placeholders[i];column=this.columns[i];if(i>=columnsLength||column.length===0){placeholder.style.display="none"}else{lastColumnItem=column[column.length-1];top=getData(lastColumnItem,"top",true)+getData(lastColumnItem,"height",true)+this.verticalOffset;height=Math.max(0,containerHeight-top-innerOffset);setCSS(placeholder,{position:"absolute",display:height>0?"block":"none",left:i*columnWidth+sideOffset+"px",top:top+"px",width:columnWidth-innerOffset+"px",height:height+"px"})}}};Wookmark.prototype.getActiveItems=function(){var inactiveClass=this.inactiveClass,i,result=[],item,items=this.items;if(this.ignoreInactiveItems){for(i=0;i<items.length;i++){item=items[i];if(!hasClass(item,inactiveClass)){result.push(item)}}}else{return items}return result};Wookmark.prototype.getItemWidth=function(){var itemWidth=this.itemWidth,innerWidth=getWidth(this.container)-2*this.outerOffset,flexibleWidth=this.flexibleWidth;if(typeof itemWidth==="function"){itemWidth=this.itemWidth()}if(this.items.length>0&&(itemWidth===undefined||itemWidth===0&&!this.flexibleWidth)){itemWidth=getWidth(this.items[0])}else if(typeof itemWidth==="string"&&itemWidth.indexOf("%")>=0){itemWidth=parseFloat(itemWidth)/100*innerWidth}if(flexibleWidth){if(typeof flexibleWidth==="function"){flexibleWidth=flexibleWidth()}if(typeof flexibleWidth==="string"&&flexibleWidth.indexOf("%")>=0){flexibleWidth=parseFloat(flexibleWidth)/100*innerWidth}var paddedInnerWidth=innerWidth+this.offset,flexibleColumns=Math.floor(.5+paddedInnerWidth/(flexibleWidth+this.offset)),fixedColumns=Math.floor(paddedInnerWidth/(itemWidth+this.offset)),columns=Math.max(flexibleColumns,fixedColumns),columnWidth=Math.min(flexibleWidth,Math.floor((innerWidth-(columns-1)*this.offset)/columns));itemWidth=Math.max(itemWidth,columnWidth)}return itemWidth};Wookmark.prototype.layout=function(force,callback){if(!force&&isHidden(this.container)){return}var calculatedItemWidth=this.getItemWidth(),columnWidth=calculatedItemWidth+this.offset,containerWidth=getWidth(this.container),innerWidth=containerWidth-2*this.outerOffset,columns=Math.floor((innerWidth+this.offset)/columnWidth),offset,maxHeight=0,activeItems=this.getActiveItems(),activeItemsLength=activeItems.length,item;if(force||this.itemHeightsDirty||!this.itemHeightsInitialized){for(var i=0;i<activeItemsLength;i++){item=activeItems[i];if(this.flexibleWidth){item.style.width=calculatedItemWidth+"px"}setData(item,"height",item.offsetHeight)}this.itemHeightsDirty=false;this.itemHeightsInitialized=true}columns=Math.max(1,Math.min(columns,activeItemsLength));offset=this.outerOffset;if(this.align==="center"){offset+=Math.floor(.5+(innerWidth-(columns*columnWidth-this.offset))>>1)}this.direction=this.direction||(this.align==="right"?"right":"left");if(!force&&this.columns!==null&&this.columns.length===columns&&this.activeItemCount===activeItemsLength){maxHeight=this.layoutColumns(columnWidth,offset)}else{maxHeight=this.layoutFull(columnWidth,columns,offset)}this.activeItemCount=activeItemsLength;this.container.style.height=maxHeight+"px";if(this.fillEmptySpace){this.refreshPlaceholders(columnWidth,offset)}if(this.onLayoutChanged!==undefined&&typeof this.onLayoutChanged==="function"){this.onLayoutChanged()}if(typeof callback==="function"){callback()}};Wookmark.prototype.sortElements=function(elements){return typeof this.comparator==="function"?elements.sort(this.comparator):elements};Wookmark.prototype.layoutFull=function(columnWidth,columns,offset){var item,k=0,i=0,activeItems,activeItemCount,shortest=null,shortestIndex=null,sideOffset,heights=[],itemBulkCSS=[],leftAligned=this.align==="left",self=this;this.columns=[];activeItems=this.sortElements(this.getActiveItems());activeItemCount=activeItems.length;while(heights.length<columns){heights.push(this.outerOffset);this.columns.push([])}while(i<activeItemCount){item=activeItems[i];shortest=heights[0];shortestIndex=0;for(k=0;k<columns;k++){if(heights[k]<shortest){shortest=heights[k];shortestIndex=k}}setData(item,"top",shortest);sideOffset=offset;if(shortestIndex>0||!leftAligned){sideOffset+=shortestIndex*columnWidth}itemBulkCSS[i]={el:item,css:{position:"absolute",top:shortest+"px"}};itemBulkCSS[i].css[this.direction]=sideOffset+"px";heights[shortestIndex]+=getData(item,"height",true)+this.verticalOffset;this.columns[shortestIndex].push(item);i++}bulkUpdateCSS(itemBulkCSS,function(){if(!hasClass(self.container,"wookmark-initialised")){addClass(self.container,"wookmark-initialised")}});return Math.max.apply(Math,heights)};Wookmark.prototype.layoutColumns=function(columnWidth,offset){var heights=[],itemBulkCSS=[],k=0,j=0,i=this.columns.length,currentHeight,column,item,sideOffset;while(i--){currentHeight=this.outerOffset;heights.push(currentHeight);column=this.columns[i];sideOffset=i*columnWidth+offset;for(k=0;k<column.length;k++,j++){item=column[k];setData(item,"top",currentHeight);itemBulkCSS[j]={el:item,css:{top:currentHeight+"px"}};itemBulkCSS[j].css[this.direction]=sideOffset+"px";currentHeight+=getData(item,"height",true)+this.verticalOffset}heights[i]=currentHeight}bulkUpdateCSS(itemBulkCSS);return Math.max.apply(Math,heights)};Wookmark.prototype.clear=function(){clearTimeout(this.resizeTimer);var i=this.placeholders.length;while(i--){this.container.removeChild(this.placeholders[i])}removeEventListener(window,"resize",this.onResize);removeEventListener(this.container,"refreshWookmark",this.onRefresh)};if(window.jQuery!==undefined){jQuery.fn.wookmark=function(options){var i=this.length;if(options!==undefined&&options.container instanceof jQuery){options.container=options.container[0]}if(i>1){while(i--){$(this).eq(i).wookmark(options)}}else if(i===1){if(!this.wookmarkInstance){this.wookmarkInstance=new Wookmark(this[0],options||{})}else{this.wookmarkInstance.updateOptions(options||{})}}return this}}exports.default=exports.Wookmark=Wookmark});