uikit/dist/js/components/sortable.min.js

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

/*! UIkit 3.14.1 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */(function(e,g){typeof exports=="object"&&typeof module<"u"?module.exports=g(require("uikit-util")):typeof define=="function"&&define.amd?define("uikitsortable",["uikit-util"],g):(e=typeof globalThis<"u"?globalThis:e||self,e.UIkitSortable=g(e.UIkit.util))})(this,function(e){"use strict";function g(n){return F(n,"top","bottom")}function F(n,s,o){const a=[[]];for(const r of n){if(!e.isVisible(r))continue;let c=v(r);for(let t=a.length-1;t>=0;t--){const h=a[t];if(!h[0]){h.push(r);break}let d;if(h[0].offsetParent===r.offsetParent?d=v(h[0]):(c=v(r,!0),d=v(h[0],!0)),c[s]>=d[o]-1&&c[s]!==d[s]){a.push([r]);break}if(c[o]-1>d[s]||c[s]===d[s]){h.push(r);break}if(t===0){a.unshift([r]);break}}}return a}function v(n,s){s===void 0&&(s=!1);let{offsetTop:o,offsetLeft:a,offsetHeight:r,offsetWidth:c}=n;return s&&([o,a]=e.offsetPosition(n)),{top:o,left:a,bottom:o+r,right:a+c}}const b="uk-transition-leave",w="uk-transition-enter";function y(n,s,o,a){a===void 0&&(a=0);const r=u(s,!0),c={opacity:1},t={opacity:0},h=f=>()=>r===u(s)?f():Promise.reject(),d=h(()=>(e.addClass(s,b),Promise.all(C(s).map((f,p)=>new Promise(m=>setTimeout(()=>e.Transition.start(f,t,o/2,"ease").then(m),p*a)))).then(()=>e.removeClass(s,b)))),i=h(()=>{const f=e.height(s);return e.addClass(s,w),n(),e.css(e.children(s),{opacity:0}),new Promise(p=>requestAnimationFrame(()=>{const m=e.children(s),l=e.height(s);e.css(s,"alignContent","flex-start"),e.height(s,f);const E=C(s);e.css(m,t);const B=E.map((j,O)=>new Promise(G=>setTimeout(()=>e.Transition.start(j,c,o/2,"ease").then(G),O*a)));f!==l&&B.push(e.Transition.start(s,{height:l},o/2+E.length*a,"ease")),Promise.all(B).then(()=>{e.removeClass(s,w),r===u(s)&&(e.css(s,{height:"",alignContent:""}),e.css(m,{opacity:""}),delete s.dataset.transition),p()})}))});return e.hasClass(s,b)?T(s).then(i):e.hasClass(s,w)?T(s).then(d).then(i):d().then(i)}function u(n,s){return s&&(n.dataset.transition=1+u(n)),e.toNumber(n.dataset.transition)||0}function T(n){return Promise.all(e.children(n).filter(e.Transition.inProgress).map(s=>new Promise(o=>e.once(s,"transitionend transitioncanceled",o))))}function C(n){return g(e.children(n)).reduce((s,o)=>s.concat(e.sortBy(o.filter(a=>e.isInView(a)),"offsetLeft")),[])}function R(n,s,o){return new Promise(a=>requestAnimationFrame(()=>{let r=e.children(s);const c=r.map(h=>P(h,!0)),t=e.css(s,["height","padding"]);e.Transition.cancel(s),r.forEach(e.Transition.cancel),S(s),n(),r=r.concat(e.children(s).filter(h=>!e.includes(r,h))),Promise.resolve().then(()=>{e.fastdom.flush();const h=e.css(s,["height","padding"]),[d,i]=L(s,r,c);r.forEach((f,p)=>i[p]&&e.css(f,i[p])),e.css(s,{display:"block",...t}),requestAnimationFrame(()=>{const f=r.map((p,m)=>e.parent(p)===s&&e.Transition.start(p,d[m],o,"ease")).concat(e.Transition.start(s,h,o,"ease"));Promise.all(f).then(()=>{r.forEach((p,m)=>e.parent(p)===s&&e.css(p,"display",d[m].opacity===0?"none":"")),S(s)},e.noop).then(a)})})}))}function P(n,s){const o=e.css(n,"zIndex");return e.isVisible(n)?{display:"",opacity:s?e.css(n,"opacity"):"0",pointerEvents:"none",position:"absolute",zIndex:o==="auto"?e.index(n):o,...x(n)}:!1}function L(n,s,o){const a=s.map((c,t)=>e.parent(c)&&t in o?o[t]?e.isVisible(c)?x(c):{opacity:0}:{opacity:e.isVisible(c)?1:0}:!1),r=a.map((c,t)=>{const h=e.parent(s[t])===n&&(o[t]||P(s[t]));if(!h)return!1;if(!c)delete h.opacity;else if(!("opacity"in c)){const{opacity:d}=h;d%1?c.opacity=1:delete h.opacity}return h});return[a,r]}function S(n){e.css(n.children,{height:"",left:"",opacity:"",pointerEvents:"",position:"",top:"",marginTop:"",marginLeft:"",transform:"",width:"",zIndex:""}),e.css(n,{height:"",display:"",padding:""})}function x(n){const{height:s,width:o}=e.offset(n),{top:a,left:r}=e.position(n),{marginLeft:c,marginTop:t}=e.css(n,["marginTop","marginLeft"]);return{top:a,left:r,height:s,width:o,marginLeft:c,marginTop:t,transform:""}}var z={props:{duration:Number,animation:Boolean},data:{duration:150,animation:"slide"},methods:{animate(n,s){s===void 0&&(s=this.$el);const o=this.animation;return(o==="fade"?y:o==="delayed-fade"?function(){for(var r=arguments.length,c=new Array(r),t=0;t<r;t++)c[t]=arguments[t];return y(...c,40)}:o?R:()=>(n(),Promise.resolve()))(n,s,this.duration).then(()=>this.$update(s,"resize"),e.noop)}}},H={connected(){!e.hasClass(this.$el,this.$name)&&e.addClass(this.$el,this.$name)}},I={mixins:[H,z],props:{group:String,threshold:Number,clsItem:String,clsPlaceholder:String,clsDrag:String,clsDragState:String,clsBase:String,clsNoDrag:String,clsEmpty:String,clsCustom:String,handle:String},data:{group:!1,threshold:5,clsItem:"uk-sortable-item",clsPlaceholder:"uk-sortable-placeholder",clsDrag:"uk-sortable-drag",clsDragState:"uk-drag",clsBase:"uk-sortable",clsNoDrag:"uk-sortable-nodrag",clsEmpty:"uk-sortable-empty",clsCustom:"",handle:!1,pos:{}},created(){for(const n of["init","start","move","end"]){const s=this[n];this[n]=o=>{e.assign(this.pos,e.getEventPos(o)),s(o)}}},events:{name:e.pointerDown,passive:!1,handler:"init"},computed:{target(){return(this.$el.tBodies||[this.$el])[0]},items(){return e.children(this.target)},isEmpty:{get(){return e.isEmpty(this.items)},watch(n){e.toggleClass(this.target,this.clsEmpty,n)},immediate:!0},handles:{get(n,s){let{handle:o}=n;return o?e.$$(o,s):this.items},watch(n,s){e.css(s,{touchAction:"",userSelect:""}),e.css(n,{touchAction:e.hasTouch?"none":"",userSelect:"none"})},immediate:!0}},update:{write(n){if(!this.drag||!e.parent(this.placeholder))return;const{pos:{x:s,y:o},origin:{offsetTop:a,offsetLeft:r},placeholder:c}=this;e.css(this.drag,{top:o-a,left:s-r});const t=this.getSortable(document.elementFromPoint(s,o));if(!t)return;const{items:h}=t;if(h.some(e.Transition.inProgress))return;const d=V(h,{x:s,y:o});if(h.length&&(!d||d===c))return;const i=this.getSortable(c),f=q(t.target,d,c,s,o,t===i&&n.moved!==d);f!==!1&&(f&&c===f||(t!==i?(i.remove(c),n.moved=d):delete n.moved,t.insert(c,f),this.touched.add(t)))},events:["move"]},methods:{init(n){const{target:s,button:o,defaultPrevented:a}=n,[r]=this.items.filter(c=>e.within(s,c));!r||a||o>0||e.isInput(s)||e.within(s,"."+this.clsNoDrag)||this.handle&&!e.within(s,this.handle)||(n.preventDefault(),this.touched=new Set([this]),this.placeholder=r,this.origin={target:s,index:e.index(r),...this.pos},e.on(document,e.pointerMove,this.move),e.on(document,e.pointerUp,this.end),this.threshold||this.start(n))},start(n){this.drag=M(this.$container,this.placeholder);const{left:s,top:o}=this.placeholder.getBoundingClientRect();e.assign(this.origin,{offsetLeft:this.pos.x-s,offsetTop:this.pos.y-o}),e.addClass(this.drag,this.clsDrag,this.clsCustom),e.addClass(this.placeholder,this.clsPlaceholder),e.addClass(this.items,this.clsItem),e.addClass(document.documentElement,this.clsDragState),e.trigger(this.$el,"start",[this,this.placeholder]),N(this.pos),this.move(n)},move(n){this.drag?this.$emit("move"):(Math.abs(this.pos.x-this.origin.x)>this.threshold||Math.abs(this.pos.y-this.origin.y)>this.threshold)&&this.start(n)},end(){if(e.off(document,e.pointerMove,this.move),e.off(document,e.pointerUp,this.end),!this.drag)return;A();const n=this.getSortable(this.placeholder);this===n?this.origin.index!==e.index(this.placeholder)&&e.trigger(this.$el,"moved",[this,this.placeholder]):(e.trigger(n.$el,"added",[n,this.placeholder]),e.trigger(this.$el,"removed",[this,this.placeholder])),e.trigger(this.$el,"stop",[this,this.placeholder]),e.remove(this.drag),this.drag=null;for(const{clsPlaceholder:s,clsItem:o}of this.touched)for(const a of this.touched)e.removeClass(a.items,s,o);this.touched=null,e.removeClass(document.documentElement,this.clsDragState)},insert(n,s){e.addClass(this.items,this.clsItem);const o=()=>s?e.before(s,n):e.append(this.target,n);this.animate(o)},remove(n){!e.within(n,this.target)||this.animate(()=>e.remove(n))},getSortable(n){do{const s=this.$getComponent(n,"sortable");if(s&&(s===this||this.group!==!1&&s.group===this.group))return s}while(n=e.parent(n))}}};let $;function N(n){let s=Date.now();$=setInterval(()=>{let{x:o,y:a}=n;a+=e.scrollTop(window);const r=(Date.now()-s)*.3;s=Date.now(),e.scrollParents(document.elementFromPoint(o,n.y),/auto|scroll/).reverse().some(c=>{let{scrollTop:t,scrollHeight:h}=c;const{top:d,bottom:i,height:f}=e.offsetViewport(c);if(d<a&&d+35>a)t-=r;else if(i>a&&i-35<a)t+=r;else return;if(t>0&&t<h-f)return e.scrollTop(c,t),!0})},15)}function A(){clearInterval($)}function M(n,s){const o=e.append(n,s.outerHTML.replace(/(^<)(?:li|tr)|(?:li|tr)(\/>$)/g,"$1div$2"));return e.css(o,"margin","0","important"),e.css(o,{boxSizing:"border-box",width:s.offsetWidth,height:s.offsetHeight,padding:e.css(s,"padding")}),e.height(o.firstElementChild,e.height(s.firstElementChild)),o}function V(n,s){return n[e.findIndex(n,o=>e.pointInRect(s,o.getBoundingClientRect()))]}function q(n,s,o,a,r,c){if(!e.children(n).length)return;const t=s.getBoundingClientRect();if(!c)return W(n,o)||r<t.top+t.height/2?s:s.nextElementSibling;const h=o.getBoundingClientRect(),d=D([t.top,t.bottom],[h.top,h.bottom]),i=d?a:r,f=d?"width":"height",p=d?"left":"top",m=d?"right":"bottom",l=h[f]<t[f]?t[f]-h[f]:0;return h[p]<t[p]?l&&i<t[p]+l?!1:s.nextElementSibling:l&&i>t[m]-l?!1:s}function W(n,s){const o=e.children(n).length===1;o&&e.append(n,s);const a=e.children(n),r=a.some((c,t)=>{const h=c.getBoundingClientRect();return a.slice(t+1).some(d=>{const i=d.getBoundingClientRect();return!D([h.left,h.right],[i.left,i.right])})});return o&&e.remove(s),r}function D(n,s){return n[1]>s[0]&&s[1]>n[0]}return typeof window<"u"&&window.UIkit&&window.UIkit.component("sortable",I),I});