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.2.1 | http://www.getuikit.com | (c) 2014 - 2019 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=t||self).UIkitSortable=e(t.UIkit.util)}(this,function(l){"use strict";var h,c="uk-animation-target";function d(t,e){var i=l.css(t,"zIndex");return!!l.isVisible(t)&&l.assign({display:"",opacity:e?l.css(t,"opacity"):"0",pointerEvents:"none",position:"absolute",zIndex:"auto"===i?l.index(t):i},p(t))}function u(t){l.css(t.children,{height:"",left:"",opacity:"",pointerEvents:"",position:"",top:"",width:""}),l.removeClass(t,c),l.css(t,"height","")}function p(t){var e=t.getBoundingClientRect(),i=e.height,s=e.width,o=l.position(t),n=o.top,r=o.left;return{top:n+=l.toFloat(l.css(t,"marginTop")),left:r,height:i,width:s}}var f,t={mixins:[{connected:function(){l.hasClass(this.$el,this.$name)||l.addClass(this.$el,this.$name)}},{props:{animation:Number},data:{animation:150},computed:{target:function(){return this.$el}},methods:{animate:function(t){var s=this;!function(){if(h)return;(h=l.append(document.head,"<style>").sheet).insertRule("."+c+" > * {\n            margin-top: 0 !important;\n            transform: none !important;\n        }",0)}();var o=l.toNodes(this.target.children),n=o.map(function(t){return d(t,!0)}),e=l.height(this.target),i=window.pageYOffset;t(),l.Transition.cancel(this.target),o.forEach(l.Transition.cancel),u(this.target),this.$update(this.target),l.fastdom.flush();var r=l.height(this.target),a=(o=o.concat(l.toNodes(this.target.children).filter(function(t){return!l.includes(o,t)}))).map(function(t,e){return!!(t.parentNode&&e in n)&&(n[e]?l.isVisible(t)?p(t):{opacity:0}:{opacity:l.isVisible(t)?1:0})});return n=a.map(function(t,e){var i=o[e].parentNode===s.target&&(n[e]||d(o[e]));if(i)if(t){if(!("opacity"in t)){i.opacity%1?t.opacity=1:delete i.opacity}}else delete i.opacity;return i}),l.addClass(this.target,c),o.forEach(function(t,e){return n[e]&&l.css(t,n[e])}),l.css(this.target,"height",e),l.scrollTop(window,i),l.Promise.all(o.map(function(t,e){return n[e]&&a[e]?l.Transition.start(t,a[e],s.animation,"ease"):l.Promise.resolve()}).concat(l.Transition.start(this.target,{height:r},this.animation,"ease"))).then(function(){o.forEach(function(t,e){return l.css(t,{display:0===a[e].opacity?"none":"",zIndex:""})}),u(s.target),s.$update(s.target),l.fastdom.flush()},l.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},created:function(){var n=this;["init","start","move","end"].forEach(function(t){var o=n[t];n[t]=function(t){n.scrollY=window.pageYOffset;var e=l.getEventPos(t,"page"),i=e.x,s=e.y;n.pos={x:i,y:s},o(t)}})},events:{name:l.pointerDown,passive:!1,handler:"init"},update:{write:function(){if(this.clsEmpty&&l.toggleClass(this.$el,this.clsEmpty,l.isEmpty(this.$el.children)),l.css(this.handle?l.$$(this.handle,this.$el):this.$el.children,{touchAction:"none",userSelect:"none"}),this.drag){var t=l.offset(window),e=t.right,i=t.bottom;l.offset(this.drag,{top:l.clamp(this.pos.y+this.origin.top,0,i-this.drag.offsetHeight),left:l.clamp(this.pos.x+this.origin.left,0,e-this.drag.offsetWidth)}),function r(t){var a=t.x;var h=t.y;clearTimeout(f);(e=document.elementFromPoint(a-window.pageXOffset,h-window.pageYOffset),i=g(),function(t,e){var i=[];for(;e(t)&&i.unshift(t),t=t&&t.parentElement;);return i}(e,function(t){return t===i||s.test(l.css(t,"overflow"))})).some(function(t){var e=t.scrollTop,i=t.scrollHeight;g()===t&&(t=window,i-=window.innerHeight);var s=l.offset(t),o=s.top,n=s.bottom;if(o<h&&h<o+30?e-=5:h<n&&n-20<h&&(e+=5),0<e&&e<i)return f=setTimeout(function(){l.scrollTop(t,e),r({x:a,y:h})},10)});var e,i}(this.pos)}}},methods:{init:function(t){var e=t.target,i=t.button,s=t.defaultPrevented,o=l.toNodes(this.$el.children).filter(function(t){return l.within(e,t)})[0];!o||s||0<i||l.isInput(e)||l.within(e,"."+this.clsNoDrag)||this.handle&&!l.within(e,this.handle)||(t.preventDefault(),this.touched=[this],this.placeholder=o,this.origin=l.assign({target:e,index:l.index(o)},this.pos),l.on(document,l.pointerMove,this.move),l.on(document,l.pointerUp,this.end),l.on(window,"scroll",this.scroll),this.threshold||this.start(t))},start:function(t){this.drag=l.append(this.$container,this.placeholder.outerHTML.replace(/^<li/i,"<div").replace(/li>$/i,"div>")),l.css(this.drag,l.assign({boxSizing:"border-box",width:this.placeholder.offsetWidth,height:this.placeholder.offsetHeight,overflow:"hidden"},l.css(this.placeholder,["paddingLeft","paddingRight","paddingTop","paddingBottom"]))),l.attr(this.drag,"uk-no-boot",""),l.addClass(this.drag,this.clsDrag,this.clsCustom),l.height(this.drag.firstElementChild,l.height(this.placeholder.firstElementChild));var e=l.offset(this.placeholder),i=e.left,s=e.top;l.assign(this.origin,{left:i-this.pos.x,top:s-this.pos.y}),l.addClass(this.placeholder,this.clsPlaceholder),l.addClass(this.$el.children,this.clsItem),l.addClass(document.documentElement,this.clsDragState),l.trigger(this.$el,"start",[this,this.placeholder]),this.move(t)},move:function(t){if(this.drag){this.$emit();var e="mousemove"===t.type?t.target:document.elementFromPoint(this.pos.x-window.pageXOffset,this.pos.y-window.pageYOffset),i=this.getSortable(e),s=this.getSortable(this.placeholder),o=i!==s;if(i&&!l.within(e,this.placeholder)&&(!o||i.group&&i.group===s.group)){if(e=i.$el===e.parentNode&&e||l.toNodes(i.$el.children).filter(function(t){return l.within(e,t)})[0],o)s.remove(this.placeholder);else if(!e)return;i.insert(this.placeholder,e),l.includes(this.touched,i)||this.touched.push(i)}}else(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(t){if(l.off(document,l.pointerMove,this.move),l.off(document,l.pointerUp,this.end),l.off(window,"scroll",this.scroll),this.drag){clearTimeout(f);var e=this.getSortable(this.placeholder);this===e?this.origin.index!==l.index(this.placeholder)&&l.trigger(this.$el,"moved",[this,this.placeholder]):(l.trigger(e.$el,"added",[e,this.placeholder]),l.trigger(this.$el,"removed",[this,this.placeholder])),l.trigger(this.$el,"stop",[this,this.placeholder]),l.remove(this.drag),this.drag=null;var i=this.touched.map(function(t){return t.clsPlaceholder+" "+t.clsItem}).join(" ");this.touched.forEach(function(t){return l.removeClass(t.$el.children,i)}),l.removeClass(document.documentElement,this.clsDragState)}else"touchend"===t.type&&t.target.click()},scroll:function(){var t=window.pageYOffset;t!==this.scrollY&&(this.pos.y+=t-this.scrollY,this.scrollY=t,this.$emit())},insert:function(t,e){var i=this;l.addClass(this.$el.children,this.clsItem);function s(){e?!l.within(t,i.$el)||function(t,e){return t.parentNode===e.parentNode&&l.index(t)>l.index(e)}(t,e)?l.before(e,t):l.after(e,t):l.append(i.$el,t)}this.animation?this.animate(s):s()},remove:function(t){l.within(t,this.$el)&&(l.css(this.handle?l.$$(this.handle,t):t,{touchAction:"",userSelect:""}),this.animation?this.animate(function(){return l.remove(t)}):l.remove(t))},getSortable:function(t){return t&&(this.$getComponent(t,"sortable")||this.getSortable(t.parentNode))}}};var s=/auto|scroll/;function g(){return document.scrollingElement||document.documentElement}return"undefined"!=typeof window&&window.UIkit&&window.UIkit.component("sortable",t),t});