smart.sortable.js

/* Smart UI v15.2.0 (2023-04-20) 
Copyright (c) 2011-2023 jQWidgets. 
License: https://htmlelements.com/license/ */ //

Smart("smart-sortable",class extends Smart.ContentElement{static get properties(){return{disableMode:{value:"auto",allowedValues:["auto","manual"],type:"string"},dragMode:{value:"item",allowedValues:["item","handle"],type:"string"},handlePosition:{value:"right",allowedValues:["none","right","left","top","bottom"],type:"string"},handleVisibility:{value:"hover",allowedValues:["none","hover","visible"],type:"string"},items:{value:null,type:"string?"},mode:{value:"vertical",allowedValues:["horizontal","vertical"],type:"string"}}}static get listeners(){return{contextmenu:"_preventDefault","container.down":"_containerDownHandler","container.move":"_containerMoveHandler","container.transitionend":"_containerTransitionendHandler","document.dragstart":"_preventDefault","document.move":"_documentMoveHandler","document.selectstart":"_preventDefault","document.up":"_documentUpHandler"}}static get styleUrls(){return["smart.sortable.css"]}template(){return'<div id="container" class="smart-sortable-container" role="presentation" inner-h-t-m-l=\'[[innerHTML]]\'><content></content></div>'}move(e,t){const o=this,i=o._items;if(isNaN(e)||isNaN(t)||e===t||e<0||e>=i.length||t<0||t>=i.length)return;const n=i[e],s=i[t];e>t?o._itemsParent.insertBefore(n,s):o._itemsParent.insertBefore(n,s.nextElementSibling),o._getItems(!1)}updateItems(){this._items.forEach((e=>e.classList.remove("smart-sortable-item"))),this._getItems()}propertyChangedHandler(e,t,o){super.propertyChangedHandler(e,t,o);const i=this;switch(e){case"disabled":i._originallyDisabled=o,i._items.length<2&&"auto"===i.disableMode&&(i.disabled=!0);break;case"items":i._itemsParent.classList.remove("smart-sortable-items-parent"),i.updateItems();break;case"mode":i._setSettingsObject()}}ready(){super.ready();const e=this;e.setAttribute("role","group"),e._originallyDisabled=e.disabled,e._getItems(),e._setSettingsObject()}_getItems(e){const t=this;if(null===t.items?t._items=Array.from(t.$.container.children):t._items=Array.from((t.shadowRoot||t).querySelectorAll(".smart-sortable-container "+t.items)),t._items=t._items.filter((e=>!e.hasAttribute("disable-drag"))),!1!==e&&(t._items.forEach((e=>e.classList.add("smart-sortable-item"))),t._items.length)){if(t._itemsParent=t._items[0].parentElement,t._itemsParent.classList.add("smart-sortable-items-parent"),t.parents)for(let e=0;e<t.parents.length;e++)if(t.parents[e]instanceof HTMLElement&&t.parents[e].classList.contains("smart-sort-panel"))return void("auto"===t.disableMode&&(t.disabled=t._originallyDisabled));"auto"===t.disableMode&&(t._items.length<2?t.disabled=!0:t.disabled=t._originallyDisabled)}}_setSettingsObject(){const e=this;"vertical"===e.mode?e._settings={coordinateName:"y",dimension:"height",offsetDimension:"offsetHeight",startOffset:"top",endOffset:"bottom"}:e._settings={coordinateName:"x",dimension:"width",offsetDimension:"offsetWidth",startOffset:"left",endOffset:"right"}}_preventDefault(e){this._draggedItem&&e.preventDefault()}_containerDownHandler(e){const t=this;if(t.disabled||t._draggedItem)return;const o=(t.shadowRoot||t.isInShadowDOM?e.originalEvent.composedPath()[0]:e.originalEvent.target).closest(".smart-sortable-item");if(!o)return;if(o.hasAttribute("disable-drag"))return;const i=e.pageX-window.scrollX,n=e.pageY-window.scrollY,s=o.getBoundingClientRect(),r=getComputedStyle(o),a=parseFloat(r.marginLeft),l=parseFloat(r.marginTop);if("handle"!==t.dragMode||!(e.originalEvent.target!==document.elementFromPoint(e.clientX,e.clientY)||i>=s.left&&i<=s.right&&n>=s.top&&n<=s.bottom)){if("handle"===t.dragMode){const t=e.originalEvent.composedPath();for(let e=1;e<t.length;e++)if(t[e].classList&&t[e].classList.contains("smart-sortable-item"))return}window.getSelection().removeAllRanges(),t._draggedItem=o,t._positionPlaceholder(),t._getPositionedAncestorCoords(),o.style.width=o.offsetWidth+"px",o.style.height=o.offsetHeight+"px",o.style.left=s.left-a+(-t._positionedAncestorCoords.x||window.scrollX)+"px",o.style.top=s.top-l+(-t._positionedAncestorCoords.y||window.scrollY)+"px",o.classList.add("dragged"),t._clickOffset={x:e.pageX-s.left+a,y:e.pageY-s.top+l},t._prevCoords={x:i,y:n},t._getItemCoordinates()}}_positionPlaceholder(){const e=this,t=e._draggedItem,o=getComputedStyle(t),i=document.createElement("div");i.className="smart-sortable-item placeholder smart-visibility-hidden",i.style.width=t.offsetWidth+"px",i.style.height=t.offsetHeight+"px",i.style.minHeight=t.offsetHeight+"px",i.style.marginBottom=o.marginBottom,i.style.marginLeft=o.marginLeft,i.style.marginRight=o.marginRight,i.style.marginTop=o.marginTop,e._itemsParent.insertBefore(i,t.nextElementSibling),e._placeholder=i}_getPositionedAncestorCoords(){const e=this,t=e.offsetParent;if(e._positionedAncestorCoords={x:0,y:0},t!==document.body){const o=t.getBoundingClientRect();e._positionedAncestorCoords={x:o.left,y:o.top}}}_getItemCoordinates(){const e=[];this._items.forEach((function(t){const o=t.getBoundingClientRect();e.push({left:o.left,top:o.top,right:o.right,bottom:o.bottom,width:o.width,height:o.height})})),this._coordinates=e}_containerMoveHandler(e){this._draggedItem&&"touchmove"===e.originalEvent.type&&e.originalEvent.preventDefault()}_containerTransitionendHandler(e){const t=this;t._draggedItem&&e.target.classList.contains("smart-sortable-item")&&(e.target.classList.contains("returning")?t._resolveDragging():t._getItemCoordinates())}_documentMoveHandler(e){const t=this,o=t._draggedItem;if(!o)return;const i=t._settings,n={x:e.pageX-window.scrollX,y:e.pageY-window.scrollY},s=n[i.coordinateName];let r;if(t._prevCoords.x===n.x&&t._prevCoords.y===n.y)return;t.hasAttribute("dragged")||t.setAttribute("dragged",""),r=t._prevCoords[i.coordinateName]>s?"up":"down",t._prevCoords=n,o.style.top=e.pageY-t._clickOffset.y+(-t._positionedAncestorCoords.y||window.scrollY)+"px",o.style.left=e.pageX-t._clickOffset.x+(-t._positionedAncestorCoords.x||window.scrollX)+"px";const a=t._items.indexOf(o);let l;for(let e=0;e<t._coordinates.length;e++){const o=t._coordinates[e];if(a!==e){if("down"===r&&s>=o[i.startOffset]+o[i.dimension]/2&&s<=o[i.endOffset]){l=t._items[e];break}if("up"===r&&s>=o[i.startOffset]&&s<=o[i.startOffset]+o[i.dimension]/2){l=t._items[e];break}}}if(l){if(l!==t._prevOverItem){if(t._prevOverItem=l,l[r])return;const e=t._items.indexOf(l);if(t._overItem=l,l.up||l.down)l.style.transform=null,delete l.up,delete l.down;else{if("horizontal"===t.mode&&("up"===r&&(!t.rightToLeft&&e>a||t.rightToLeft&&e<a)||"down"===r&&(!t.rightToLeft&&e<a||t.rightToLeft&&e>a)))return;if("vertical"===t.mode&&("up"===r&&e>a||"down"===r&&e<a))return;const o=getComputedStyle(l);l.style.transform=`translate${i.coordinateName.toUpperCase()}(${("up"===r?1:-1)*(l[i.offsetDimension]+parseFloat(o["margin-"+i.startOffset])+parseFloat(o["margin-"+i.endOffset]))}px)`,l[r]=!0}}}else delete t._prevOverItem}_documentUpHandler(){const e=this,t=e._draggedItem;if(!t)return;let o=e._overItem;if(o){const i=e._items.indexOf(t),n=e._items.indexOf(o);i<n&&o[e.rightToLeft&&"horizontal"===e.mode?"up":"down"]||i>n&&!o.down&&!o.up?(e._insertBefore=o.nextElementSibling,o=e._insertBefore,o&&o.nextElementSibling===t&&(o=e._placeholder)):(i>n&&o[e.rightToLeft&&"horizontal"===e.mode?"down":"up"]||i<n&&!o.down&&!o.up)&&(e._insertBefore=o,i>n&&o[e.rightToLeft&&"horizontal"===e.mode?"down":"up"]||(o=o.previousElementSibling||o))}else o=e._placeholder;e._resolveDragging()}_resolveDragging(){const e=this,t=e._draggedItem,o=e._items.indexOf(t);let i=!1;t.classList.remove("dragged","returning"),e._removeInlineStyle(),void 0!==e._insertBefore&&e._items.indexOf(e._insertBefore)!==o&&e._insertBefore!==e._placeholder[e.rightToLeft&&"horizontal"===e.mode?"previousElementSibling":"nextElementSibling"]&&(e._itemsParent.insertBefore(t,e._insertBefore),delete e._insertBefore,i=!0),e._itemsParent.removeChild(e._placeholder),delete e._clickOffset,delete e._draggedItem,delete e._overItem,delete e._placeholder,delete e._prevCoords,e.removeAttribute("dragged"),i&&(e._getItems(!1),e.$.fireEvent("dragEnd",{oldIndex:o,newIndex:e._items.indexOf(t)}))}_removeInlineStyle(){const e=this;e._items.forEach((function(e){e.style=null,e.style.transition="none",delete e.up,delete e.down})),setTimeout((function(){e._items.forEach((e=>e.style.transition=null))}),50)}});