UNPKG

uikit

Version:

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

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