You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3 lines
17 KiB
JavaScript
3 lines
17 KiB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Shuffle=e()}(this,(function(){"use strict";var t={exports:{}};function e(){}e.prototype={on:function(t,e,i){var s=this.e||(this.e={});return(s[t]||(s[t]=[])).push({fn:e,ctx:i}),this},once:function(t,e,i){var s=this;function n(){s.off(t,n),e.apply(i,arguments)}return n._=e,this.on(t,n,i)},emit:function(t){for(var e=[].slice.call(arguments,1),i=((this.e||(this.e={}))[t]||[]).slice(),s=0,n=i.length;s<n;s++)i[s].fn.apply(i[s].ctx,e);return this},off:function(t,e){var i=this.e||(this.e={}),s=i[t],n=[];if(s&&e)for(var o=0,r=s.length;o<r;o++)s[o].fn!==e&&s[o].fn._!==e&&n.push(s[o]);return n.length?i[t]=n:delete i[t],this}},t.exports=e,t.exports.TinyEmitter=e;var i=t.exports,s=function(t,e){var i,s,n,o,r=0;return function(){i=this,s=arguments;var t=new Date-r;return o||(t>=e?h():o=setTimeout(h,e-t)),n};function h(){o=0,r=+new Date,n=t.apply(i,s),i=null,s=null}};function n(){}function o(t){return parseFloat(t)||0}class r{constructor(t,e){this.x=o(t),this.y=o(e)}static equals(t,e){return t.x===e.x&&t.y===e.y}}class h{constructor(t,e,i,s,n){this.id=n,this.left=t,this.top=e,this.width=i,this.height=s}static intersects(t,e){return t.left<e.left+e.width&&e.left<t.left+t.width&&t.top<e.top+e.height&&e.top<t.top+t.height}}var l={BASE:"shuffle",SHUFFLE_ITEM:"shuffle-item",VISIBLE:"shuffle-item--visible",HIDDEN:"shuffle-item--hidden"};let a=0;class d{constructor(t,e){a+=1,this.id=a,this.element=t,this.isRTL=e,this.isVisible=!0,this.isHidden=!1}show(){this.isVisible=!0,this.element.classList.remove(l.HIDDEN),this.element.classList.add(l.VISIBLE),this.element.removeAttribute("aria-hidden")}hide(){this.isVisible=!1,this.element.classList.remove(l.VISIBLE),this.element.classList.add(l.HIDDEN),this.element.setAttribute("aria-hidden",!0)}init(){this.addClasses([l.SHUFFLE_ITEM,l.VISIBLE]),this.applyCss(d.Css.INITIAL),this.applyCss(this.isRTL?d.Css.DIRECTION.rtl:d.Css.DIRECTION.ltr),this.scale=d.Scale.VISIBLE,this.point=new r}addClasses(t){t.forEach((t=>{this.element.classList.add(t)}))}removeClasses(t){t.forEach((t=>{this.element.classList.remove(t)}))}applyCss(t){Object.keys(t).forEach((e=>{this.element.style[e]=t[e]}))}dispose(){this.removeClasses([l.HIDDEN,l.VISIBLE,l.SHUFFLE_ITEM]),this.element.removeAttribute("style"),this.element=null}}d.Css={INITIAL:{position:"absolute",top:0,visibility:"visible",willChange:"transform"},DIRECTION:{ltr:{left:0},rtl:{right:0}},VISIBLE:{before:{opacity:1,visibility:"visible"},after:{transitionDelay:""}},HIDDEN:{before:{opacity:0},after:{visibility:"hidden",transitionDelay:""}}},d.Scale={VISIBLE:1,HIDDEN:.001};let u=null;var m=()=>{if(null!==u)return u;const t=document.body||document.documentElement,e=document.createElement("div");e.style.cssText="width:10px;padding:2px;box-sizing:border-box;",t.appendChild(e);const{width:i}=window.getComputedStyle(e,null);return u=10===Math.round(o(i)),t.removeChild(e),u};function c(t,e){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:window.getComputedStyle(t,null),s=o(i[e]);return m()||"width"!==e?m()||"height"!==e||(s+=o(i.paddingTop)+o(i.paddingBottom)+o(i.borderTopWidth)+o(i.borderBottomWidth)):s+=o(i.paddingLeft)+o(i.paddingRight)+o(i.borderLeftWidth)+o(i.borderRightWidth),s}const p={reverse:!1,by:null,compare:null,randomize:!1,key:"element"};function f(t,e){const i={...p,...e},s=Array.from(t);let n=!1;return t.length?i.randomize?function(t){let e=t.length;for(;e;){e-=1;const i=Math.floor(Math.random()*(e+1)),s=t[i];t[i]=t[e],t[e]=s}return t}(t):("function"==typeof i.by?t.sort(((t,e)=>{if(n)return 0;const s=i.by(t[i.key]),o=i.by(e[i.key]);return void 0===s&&void 0===o?(n=!0,0):s<o||"sortFirst"===s||"sortLast"===o?-1:s>o||"sortLast"===s||"sortFirst"===o?1:0})):"function"==typeof i.compare&&t.sort(i.compare),n?s:(i.reverse&&t.reverse(),t)):[]}const g={},_="transitionend";let y=0;function I(t){return!!g[t]&&(g[t].element.removeEventListener(_,g[t].listener),g[t]=null,!0)}function E(t,e){const i=(y+=1,_+y),s=t=>{t.currentTarget===t.target&&(I(i),e(t))};return t.addEventListener(_,s),g[i]={element:t,listener:s},i}function T(t){return Math.max(...t)}function v(t,e,i,s){let n=t/e;return Math.abs(Math.round(n)-n)<s&&(n=Math.round(n)),Math.min(Math.ceil(n),i)}function S(t,e,i){if(1===e)return t;const s=[];for(let n=0;n<=i-e;n++)s.push(T(t.slice(n,n+e)));return s}function b(t,e){const i=(s=t,Math.min(...s));var s;for(let s=0,n=t.length;s<n;s++)if(t[s]>=i-e&&t[s]<=i+e)return s;return 0}function C(t,e){const i={};t.forEach((t=>{i[t.top]?i[t.top].push(t):i[t.top]=[t]}));let s=[];const n=[],o=[];return Object.keys(i).forEach((t=>{const r=i[t];n.push(r);const l=r[r.length-1],a=l.left+l.width,d=Math.round((e-a)/2);let u=r,m=!1;if(d>0){const t=[];m=r.every((e=>{const i=new h(e.left+d,e.top,e.width,e.height,e.id),n=!s.some((t=>h.intersects(i,t)));return t.push(i),n})),m&&(u=t)}if(!m){let t;if(r.some((e=>s.some((i=>{const s=h.intersects(e,i);return s&&(t=i),s}))))){const e=o.findIndex((e=>e.includes(t)));o.splice(e,1,n[e])}}s=s.concat(u),o.push(u)})),o.flat().sort(((t,e)=>t.id-e.id)).map((t=>new r(t.left,t.top)))}function L(t){return Array.from(new Set(t))}let w=0;class D extends i{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(),this.options={...D.options,...e},this.lastSort={},this.group=D.ALL_ITEMS,this.lastFilter=D.ALL_ITEMS,this.isEnabled=!0,this.isDestroyed=!1,this.isInitialized=!1,this._transitions=[],this.isTransitioning=!1,this._queue=[];const i=this._getElementOption(t);if(!i)throw new TypeError("Shuffle needs to be initialized with an element.");this.element=i,this.id="shuffle_"+w,w+=1,this._init(),this.isInitialized=!0}_init(){if(this.items=this._getItems(),this.sortedItems=this.items,this.options.sizer=this._getElementOption(this.options.sizer),this.element.classList.add(D.Classes.BASE),this._initItems(this.items),this._onResize=this._getResizeFunction(),window.addEventListener("resize",this._onResize),"complete"!==document.readyState){const t=this.layout.bind(this);window.addEventListener("load",(function e(){window.removeEventListener("load",e),t()}))}const t=window.getComputedStyle(this.element,null),e=D.getSize(this.element).width;this._validateStyles(t),this._setColumns(e),this.filter(this.options.group,this.options.initialSort),this.element.offsetWidth,this.setItemTransitions(this.items),this.element.style.transition=`height ${this.options.speed}ms ${this.options.easing}`}_getResizeFunction(){const t=this._handleResize.bind(this);return this.options.throttle?this.options.throttle(t,this.options.throttleTime):t}_getElementOption(t){return"string"==typeof t?this.element.querySelector(t):t&&t.nodeType&&1===t.nodeType?t:t&&t.jquery?t[0]:null}_validateStyles(t){"static"===t.position&&(this.element.style.position="relative"),"hidden"!==t.overflow&&(this.element.style.overflow="hidden")}_filter(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.lastFilter,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.items;const i=this._getFilteredSets(t,e);return this._toggleFilterClasses(i),this.lastFilter=t,"string"==typeof t&&(this.group=t),i}_getFilteredSets(t,e){let i=[];const s=[];return t===D.ALL_ITEMS?i=e:e.forEach((e=>{this._doesPassFilter(t,e.element)?i.push(e):s.push(e)})),{visible:i,hidden:s}}_doesPassFilter(t,e){if("function"==typeof t)return t.call(e,e,this);const i=e.getAttribute("data-"+D.FILTER_ATTRIBUTE_KEY),s=this.options.delimiter?i.split(this.options.delimiter):JSON.parse(i);function n(t){return s.includes(t)}return Array.isArray(t)?this.options.filterMode===D.FilterMode.ANY?t.some(n):t.every(n):s.includes(t)}_toggleFilterClasses(t){let{visible:e,hidden:i}=t;e.forEach((t=>{t.show()})),i.forEach((t=>{t.hide()}))}_initItems(t){t.forEach((t=>{t.init()}))}_disposeItems(t){t.forEach((t=>{t.dispose()}))}_updateItemCount(){this.visibleItems=this._getFilteredItems().length}setItemTransitions(t){const{speed:e,easing:i}=this.options,s=this.options.useTransforms?["transform"]:["top","left"],n=Object.keys(d.Css.HIDDEN.before).map((t=>t.replace(/([A-Z])/g,((t,e)=>`-${e.toLowerCase()}`)))),o=s.concat(n).join();t.forEach((t=>{t.element.style.transitionDuration=e+"ms",t.element.style.transitionTimingFunction=i,t.element.style.transitionProperty=o}))}_getItems(){return Array.from(this.element.children).filter((t=>t.matches(this.options.itemSelector))).map((t=>new d(t,this.options.isRTL)))}_mergeNewItems(t){const e=Array.from(this.element.children);return f(this.items.concat(t),{by:t=>e.indexOf(t)})}_getFilteredItems(){return this.items.filter((t=>t.isVisible))}_getConcealedItems(){return this.items.filter((t=>!t.isVisible))}_getColumnSize(t,e){let i;return i="function"==typeof this.options.columnWidth?this.options.columnWidth(t):this.options.sizer?D.getSize(this.options.sizer).width:this.options.columnWidth?this.options.columnWidth:this.items.length>0?D.getSize(this.items[0].element,!0).width:t,0===i&&(i=t),i+e}_getGutterSize(t){let e;return e="function"==typeof this.options.gutterWidth?this.options.gutterWidth(t):this.options.sizer?c(this.options.sizer,"marginLeft"):this.options.gutterWidth,e}_setColumns(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:D.getSize(this.element).width;const e=this._getGutterSize(t),i=this._getColumnSize(t,e);let s=(t+e)/i;Math.abs(Math.round(s)-s)<this.options.columnThreshold&&(s=Math.round(s)),this.cols=Math.max(Math.floor(s||0),1),this.containerWidth=t,this.colWidth=i}_setContainerSize(){this.element.style.height=this._getContainerSize()+"px"}_getContainerSize(){return T(this.positions)}_getStaggerAmount(t){return Math.min(t*this.options.staggerAmount,this.options.staggerAmountMax)}_dispatch(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.isDestroyed||(e.shuffle=this,this.emit(t,e))}_resetCols(){let t=this.cols;for(this.positions=[];t;)t-=1,this.positions.push(0)}_layout(t){const e=this._getNextPositions(t);let i=0;t.forEach(((t,s)=>{function n(){t.applyCss(d.Css.VISIBLE.after)}if(r.equals(t.point,e[s])&&!t.isHidden)return t.applyCss(d.Css.VISIBLE.before),void n();t.point=e[s],t.scale=d.Scale.VISIBLE,t.isHidden=!1;const o=this.getStylesForTransition(t,d.Css.VISIBLE.before);o.transitionDelay=this._getStaggerAmount(i)+"ms",this._queue.push({item:t,styles:o,callback:n}),i+=1}))}_getNextPositions(t){if(this.options.isCentered){const e=t.map(((t,e)=>{const i=D.getSize(t.element,!0),s=this._getItemPosition(i);return new h(s.x,s.y,i.width,i.height,e)}));return this.getTransformedPositions(e,this.containerWidth)}return t.map((t=>this._getItemPosition(D.getSize(t.element,!0))))}_getItemPosition(t){return function(t){let{itemSize:e,positions:i,gridSize:s,total:n,threshold:o,buffer:h}=t;const l=v(e.width,s,n,o),a=S(i,l,n),d=b(a,h),u=new r(s*d,a[d]),m=a[d]+e.height;for(let t=0;t<l;t++)i[d+t]=m;return u}({itemSize:t,positions:this.positions,gridSize:this.colWidth,total:this.cols,threshold:this.options.columnThreshold,buffer:this.options.buffer})}getTransformedPositions(t,e){return C(t,e)}_shrink(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this._getConcealedItems(),e=0;t.forEach((t=>{function i(){t.applyCss(d.Css.HIDDEN.after)}if(t.isHidden)return t.applyCss(d.Css.HIDDEN.before),void i();t.scale=d.Scale.HIDDEN,t.isHidden=!0;const s=this.getStylesForTransition(t,d.Css.HIDDEN.before);s.transitionDelay=this._getStaggerAmount(e)+"ms",this._queue.push({item:t,styles:s,callback:i}),e+=1}))}_handleResize(){this.isEnabled&&!this.isDestroyed&&this.update()}getStylesForTransition(t,e){const i={...e};if(this.options.useTransforms){const e=this.options.isRTL?"-":"",s=this.options.roundTransforms?Math.round(t.point.x):t.point.x,n=this.options.roundTransforms?Math.round(t.point.y):t.point.y;i.transform=`translate(${e}${s}px, ${n}px) scale(${t.scale})`}else this.options.isRTL?i.right=t.point.x+"px":i.left=t.point.x+"px",i.top=t.point.y+"px";return i}_whenTransitionDone(t,e,i){const s=E(t,(t=>{e(),i(null,t)}));this._transitions.push(s)}_getTransitionFunction(t){return e=>{t.item.applyCss(t.styles),this._whenTransitionDone(t.item.element,t.callback,e)}}_processQueue(){this.isTransitioning&&this._cancelMovement();const t=this.options.speed>0,e=this._queue.length>0;e&&t&&this.isInitialized?this._startTransitions(this._queue):e?(this._styleImmediately(this._queue),this._dispatch(D.EventType.LAYOUT)):this._dispatch(D.EventType.LAYOUT),this._queue.length=0}_startTransitions(t){this.isTransitioning=!0;!function(t,e,i){i||("function"==typeof e?(i=e,e=null):i=n);var s=t&&t.length;if(!s)return i(null,[]);var o=!1,r=new Array(s);function h(t){return function(e,n){if(!o){if(e)return i(e,r),void(o=!0);r[t]=n,--s||i(null,r)}}}t.forEach(e?function(t,i){t.call(e,h(i))}:function(t,e){t(h(e))})}(t.map((t=>this._getTransitionFunction(t))),this._movementFinished.bind(this))}_cancelMovement(){this._transitions.forEach(I),this._transitions.length=0,this.isTransitioning=!1}_styleImmediately(t){if(t.length){const e=t.map((t=>t.item.element));D._skipTransitions(e,(()=>{t.forEach((t=>{t.item.applyCss(t.styles),t.callback()}))}))}}_movementFinished(){this._transitions.length=0,this.isTransitioning=!1,this._dispatch(D.EventType.LAYOUT)}filter(t,e){this.isEnabled&&((!t||t&&0===t.length)&&(t=D.ALL_ITEMS),this._filter(t),this._shrink(),this._updateItemCount(),this.sort(e))}sort(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.lastSort;if(!this.isEnabled)return;this._resetCols();const e=f(this._getFilteredItems(),t);this.sortedItems=e,this._layout(e),this._processQueue(),this._setContainerSize(),this.lastSort=t}update(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.isEnabled&&(t||this._setColumns(),this.sort())}layout(){this.update(!0)}add(t){const e=L(t).map((t=>new d(t,this.options.isRTL)));this._initItems(e),this._resetCols();const i=f(this._mergeNewItems(e),this.lastSort),s=this._filter(this.lastFilter,i),n=t=>e.includes(t),o=t=>{t.scale=d.Scale.HIDDEN,t.isHidden=!0,t.applyCss(d.Css.HIDDEN.before),t.applyCss(d.Css.HIDDEN.after)},r=this._getNextPositions(s.visible);s.visible.forEach(((t,e)=>{n(t)&&(t.point=r[e],o(t),t.applyCss(this.getStylesForTransition(t,{})))})),s.hidden.forEach((t=>{n(t)&&o(t)})),this.element.offsetWidth,this.setItemTransitions(e),this.items=this._mergeNewItems(e),this.filter(this.lastFilter)}disable(){this.isEnabled=!1}enable(){let t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.isEnabled=!0,t&&this.update()}remove(t){if(!t.length)return;const e=L(t),i=e.map((t=>this.getItemByElement(t))).filter((t=>!!t));this._toggleFilterClasses({visible:[],hidden:i}),this._shrink(i),this.sort(),this.items=this.items.filter((t=>!i.includes(t))),this._updateItemCount(),this.once(D.EventType.LAYOUT,(()=>{this._disposeItems(i),e.forEach((t=>{t.parentNode.removeChild(t)})),this._dispatch(D.EventType.REMOVED,{collection:e})}))}getItemByElement(t){return this.items.find((e=>e.element===t))}resetItems(){this._disposeItems(this.items),this.isInitialized=!1,this.items=this._getItems(),this._initItems(this.items),this.once(D.EventType.LAYOUT,(()=>{this.setItemTransitions(this.items),this.isInitialized=!0})),this.filter(this.lastFilter)}destroy(){this._cancelMovement(),window.removeEventListener("resize",this._onResize),this.element.classList.remove("shuffle"),this.element.removeAttribute("style"),this._disposeItems(this.items),this.items.length=0,this.sortedItems.length=0,this._transitions.length=0,this.options.sizer=null,this.element=null,this.isDestroyed=!0,this.isEnabled=!1}static getSize(t){let e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];const i=window.getComputedStyle(t,null);let s=c(t,"width",i),n=c(t,"height",i);if(e){s+=c(t,"marginLeft",i)+c(t,"marginRight",i),n+=c(t,"marginTop",i)+c(t,"marginBottom",i)}return{width:s,height:n}}static _skipTransitions(t,e){const i=t.map((t=>{const{style:e}=t,i=e.transitionDuration,s=e.transitionDelay;return e.transitionDuration="0ms",e.transitionDelay="0ms",{duration:i,delay:s}}));e(),t[0].offsetWidth,t.forEach(((t,e)=>{t.style.transitionDuration=i[e].duration,t.style.transitionDelay=i[e].delay}))}}return D.ShuffleItem=d,D.ALL_ITEMS="all",D.FILTER_ATTRIBUTE_KEY="groups",D.EventType={LAYOUT:"shuffle:layout",REMOVED:"shuffle:removed"},D.Classes=l,D.FilterMode={ANY:"any",ALL:"all"},D.options={group:D.ALL_ITEMS,speed:250,easing:"cubic-bezier(0.4, 0.0, 0.2, 1)",itemSelector:"*",sizer:null,gutterWidth:0,columnWidth:0,delimiter:null,buffer:0,columnThreshold:.01,initialSort:null,throttle:s,throttleTime:300,staggerAmount:15,staggerAmountMax:150,useTransforms:!0,filterMode:D.FilterMode.ANY,isCentered:!1,isRTL:!1,roundTransforms:!0},D.Point=r,D.Rect=h,D.__sorter=f,D.__getColumnSpan=v,D.__getAvailablePositions=S,D.__getShortColumn=b,D.__getCenteredPositions=C,D}));
|
|
//# sourceMappingURL=shuffle.min.js.map
|