apex4x
Version:
The Comprehensive ARIA Development Suite
9 lines (8 loc) • 4.86 kB
JavaScript
/*@license
ARIA Drag and Drop Module 1.1 for Apex 4X
Author: Bryan Garaventa (https://www.linkedin.com/in/bgaraventa)
Home: WhatSock.com : Download: https://github.com/whatsock/apex
License: MIT (https://opensource.org/licenses/MIT)
Required dependencies: Animate.js, Menu.js, Dragula.css, Dragula.js
*/
"setDrag"in $A||$A.extend({setDrag:function(l){function o(a,c,e){var n,t,d;$A.isArray(a)?$A.loop(a,function(n,t){o(t,c,e)},"array"):((d=$A.data(a,"actions"))&&($A.remove(d.button),$A.remove(d.menu),$A.destroy(d.DC)),$A.isArray(e)&&e.length&&(d={button:$A.morph(l.menu.tag.button),menu:$A.morph(l.menu.tag.menu),children:[],dragElement:a,sourceContainer:c},p&&(n="horizontal"===(n=$A.getOrientation(c.children)).orientation&&!n.lineWrap,$A.previous(a)&&(t=$A.morph(l.menu.tag[n?"left":"up"]),d.children.push(t),d.menu.appendChild(t)),$A.next(a))&&(t=$A.morph(l.menu.tag[n?"right":"down"]),d.children.push(t),d.menu.appendChild(t)),$A.loop(e,function(n,t){var e=($A.getAttr(t,"data-dropname")||"").replace(/<|>/g,"");if(!e)throw"The drop-zone container element is missing a unique and informative data-dropname attribute.";e=$A.morph(l.menu.tag[m?"copy":"move"].replace("%DROPNAME%",e));l.dragula.accepts(a,t,c)&&t!==c&&($A.data(e,"DropContainer",t),d.children.push(e),d.menu.appendChild(e))},"array"),$A.loop(l.menu.tag.custom,function(n,t){t=$A.morph(t);l.menu.tag.invalid(a,$A.getAttr(t.firstChild,"data-action"),c)||(d.children.push(t),d.menu.appendChild(t))},"array"),$A[l.menu.tag.render](d.button,a),$A.after(d.menu,d.button),$A(d.button).describedBy(a),$A.setKBA11Y(d.button,"button"),$A(d.button).on("click mousedown mouseup mousemove touchstart touchend touchmove",function(n){n.stopPropagation()}),d.DC=$A.setMenu(d.button,$A.extend(!0,{toggleHide:!0,onActivate:function(o,r,n,t,e,a,i){var u=$A.data(r.parentNode,"DropContainer");n.DC.top.remove(function(){var n=$A.previous(d.dragElement),t=$A.next(d.dragElement),e=t||c,a=$A.getAttr(r,"data-action");s.emit("beforeClone",d.dragElement),!p||"up"!==a&&"down"!==a?u?s.emit("drop",d.dragElement,u,c,t,function(){l.menu.manualDrop(d.dragElement,u,c,a,d,e)||$A[l.render](m?d.dragElement.cloneNode(!0):d.dragElement,u),s.emit("dragend",d.dragElement),$A.data(t,"actions")&&(e=$A.data(t,"actions").button),$A.focus(e)}):$A.isFn(l.menu.tag.customActivate)&&(l.menu.manualDrop(d.dragElement,u,c,a,d,t)||l.menu.tag.customActivate(o,d.dragElement,c,a,d,e),s.emit("dragend",d.dragElement),$A.data(t,"actions")&&(e=$A.data(t,"actions").button),$A.focus(e)):s.emit("drop",d.dragElement,u,c,t,function(){l.menu.manualDrop(d.dragElement,u,c,a,d,e)||("up"===a?($A.before(d.dragElement,n),s.emit("dragend",d.dragElement),$A.data(d.dragElement,"actions")&&(e=$A.data(d.dragElement,"actions").button),$A.focus(e)):"down"===a&&($A.after(d.dragElement,t),s.emit("dragend",d.dragElement),$A.data(d.dragElement,"actions")&&(e=$A.data(d.dragElement,"actions").button),$A.focus(e)))})})},animate:{onRender:function(n,t,e){$A.Velocity(t,"transition.slideUpIn",{complete:function(){e()}})},onRemove:function(n,t,e){$A.Velocity(t,"transition.slideUpOut",{complete:function(){e()}})}},click:function(n,t){n.stopPropagation()},mouseDown:function(n,t){n.stopPropagation()},mouseUp:function(n,t){n.stopPropagation()},mouseMove:function(n,t){n.stopPropagation()},touchStart:function(n,t){n.stopPropagation()},touchEnd:function(n,t){n.stopPropagation()},touchMove:function(n,t){n.stopPropagation()}},l.menu)),$A.data(a,"actions",d)))}var m=(l=$A.extend(!0,{render:"append",sort:!1,dragula:{revertOnSpill:!0,invalid:function(n,t){return!1},accepts:function(n,t,e,a){return!!p||e!==t}},menu:{manualDrop:function(n,t,e,a,o,r){return!1},tag:{render:"append",button:'<a aria-label="Actions" class="aria-action-menu-button">↓</a>',menu:'<ul hidden class="drag top menu"></ul>',move:'<li><a data-action="move" class="menu-action move">Move to %DROPNAME%</a></li>',copy:'<li><a data-action="copy" class="menu-action copy">Copy to %DROPNAME%</a></li>',up:'<li><a data-action="up" class="menu-action up">Move Up</a></li>',left:'<li><a data-action="up" class="menu-action left">Move Left</a></li>',down:'<li><a data-action="down" class="menu-action down">Move Down</a></li>',right:'<li><a data-action="down" class="menu-action right">Move Right</a></li>',custom:[],customActivate:null,invalid:function(n,t,e,a){return!1}}}},l)).dragula.copy||!1,p=l.sort||l.dragula.copySortSource||!1,s=$A.dragula(l.dragula).on("beforeClone",function(n){o(n)}).on("drop",function(n,t,e,a,o){$A.isFn(o)&&o()}).on("dragend",function(n){t()}),t=function(){$A.loop(s.containers,function(n,t){o(t.children,t,s.containers)},"array")};return t(),s},unsetDrag:function(n){$A.loop(n.containers,function(n,t){$A.loop(t.children,function(n,t){t=$A.data(t,"actions");t&&($A.remove(t.button),$A.remove(t.menu),$A.destroy(t.DC))},"array")},"array"),n.destroy()}});