From f6cfea70101d758d22b3ac035805adb4e415bfbd Mon Sep 17 00:00:00 2001 From: marcantondahmen Date: Thu, 27 Jul 2023 18:52:52 +0000 Subject: [PATCH] deploy: 42da583d765994acf344e9c11fc9d4490a5a93c6 --- sortable-tree.css | 2 +- sortable-tree.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/sortable-tree.css b/sortable-tree.css index f1626fb..19c2d56 100644 --- a/sortable-tree.css +++ b/sortable-tree.css @@ -1,4 +1,4 @@ -/*! Sortable Tree 0.6.0, (c) 2023 Marc Anton Dahmen, MIT license */ +/*! Sortable Tree 0.7.0, (c) 2023 Marc Anton Dahmen, MIT license */ :root { --st-label-height: 2.5rem; --st-subnodes-padding-left: 1.5rem; diff --git a/sortable-tree.js b/sortable-tree.js index b0c1555..8b3c6ff 100644 --- a/sortable-tree.js +++ b/sortable-tree.js @@ -1,2 +1,2 @@ -/*! Sortable Tree 0.6.0, (c) 2023 Marc Anton Dahmen, MIT license */ +/*! Sortable Tree 0.7.0, (c) 2023 Marc Anton Dahmen, MIT license */ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.SortableTree=t():e.SortableTree=t()}(self,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>L});var n=function(e,t,n,o){return new(n||(n=Promise))((function(s,r){function i(e){try{l(o.next(e))}catch(e){r(e)}}function a(e){try{l(o.throw(e))}catch(e){r(e)}}function l(e){var t;e.done?s(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,a)}l((o=o.apply(e,t||[])).next())}))};const o=e=>`${e.title}`,s={collapsed:'\n\t\t\n\t\t\t\n\t\t',open:'\n\t\t\n\t\t\t\n\t\t\n\t'},r={tree:"tree",node:"tree__node",nodeHover:"tree__node--hover",nodeDragging:"tree__node--dragging",nodeDropBefore:"tree__node--drop-before",nodeDropInside:"tree__node--drop-inside",nodeDropAfter:"tree__node--drop-after",label:"tree__label",subnodes:"tree__subnodes",collapse:"tree__collapse"},i=({nodes:e,movedNode:t,srcParentNode:o,targetParentNode:s})=>n(void 0,void 0,void 0,(function*(){})),a=(e,t)=>n(void 0,void 0,void 0,(function*(){})),l=(e,t)=>n(void 0,void 0,void 0,(function*(){return!0}));const d=(e,t=[],n=null)=>{const o=document.createElement(e);return t.forEach((e=>{o.classList.add(e)})),n&&n.appendChild(o),o},c=()=>((e=21)=>crypto.getRandomValues(new Uint8Array(e)).reduce(((e,t)=>e+((t&=63)<36?t.toString(36):t<62?(t-26).toString(36).toUpperCase():t>62?"-":"_")),""))();class u extends HTMLElement{static create({data:e,renderLabel:t,icons:n,styles:o,parent:s,onClick:r,draggable:i}){const a=d(u.TAG_NAME,[o.node],s),l=d("div",[o.label],a),c=d("div",[o.subnodes],a),h=d("span",[o.collapse],a);return l.innerHTML=t(e),h.innerHTML=n.collapsed,h.addEventListener("click",a.toggle.bind(a)),l.addEventListener("click",(e=>{r(e,a)})),i&&a.setAttribute("draggable","true"),a._data=e,a._icons=n,a._label=l,a._nodes=c,a._collapseButton=h,a}get data(){return this._data}get label(){return this._label}get subnodes(){return this._nodes}get subnodesData(){const e=[];return Array.from(this._nodes.children).forEach((t=>{e.push(t.data)})),e}get id(){return this._id}constructor(){super(),this._id=c()}collapse(e){e?(this.removeAttribute("open"),this._collapseButton.innerHTML=this._icons.collapsed):(this.setAttribute("open","true"),this._collapseButton.innerHTML=this._icons.open)}toggle(){this.collapse(this.hasAttribute("open"))}reveal(){((e,t)=>{const n=[];let o=t.closest(e);for(;null!==o;)n.push(o),o=o.parentNode.closest(e);return n})(u.TAG_NAME,this).forEach((e=>{e.collapse(!1)}))}}u.TAG_NAME="sortable-tree-node";var h=function(e,t,n,o){return new(n||(n=Promise))((function(s,r){function i(e){try{l(o.next(e))}catch(e){r(e)}}function a(e){try{l(o.throw(e))}catch(e){r(e)}}function l(e){var t;e.done?s(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,a)}l((o=o.apply(e,t||[])).next())}))};const p=({node:e,eventName:t,handler:n,tree:o})=>{e.addEventListener(t,(e=>{n(e,o)}),!1)};var f;!function(e){e.BEFORE="BEFORE",e.INSIDE="INSIDE",e.AFTER="AFTER"}(f||(f={}));const g=e=>{const t=e.clientY,n=v(e).label.getBoundingClientRect(),o=Math.round(n.height/4);return n.top+o>t?f.BEFORE:n.bottom-oe.target.closest(u.TAG_NAME),b=e=>{const t=null==e?void 0:e.parentElement.parentElement;return(null==t?void 0:t.tagName.toLowerCase())!==u.TAG_NAME?null:t},m=(e,t)=>{v(e).classList.remove(t.styles.nodeDropAfter,t.styles.nodeDropBefore,t.styles.nodeDropInside)},E=(e,t)=>{e.stopPropagation();const n=e.target;n.tagName.toLowerCase()===u.TAG_NAME&&(e.dataTransfer.setData("text",n.id),e.dataTransfer.effectAllowed="move",n.classList.add(t.styles.nodeDragging))},_=(e,t)=>h(void 0,void 0,void 0,(function*(){e.stopPropagation(),e.preventDefault(),m(e,t);const n=v(e);if(!n)return!1;const o=b(n),s=e.dataTransfer.getData("text"),r=g(e),i=t.getNode(s);if(!i||(null==i?void 0:i.contains(n)))return!1;const a=b(i);if(t.lockRootLevel&&!(null==n?void 0:n.parentElement.closest(u.TAG_NAME))&&(r===f.BEFORE||r===f.AFTER))return!1;if(r===f.BEFORE)return!!(yield t.confirm(i,o))&&(n.parentNode.insertBefore(i,n),t.onDrop(i,a,o),!1);if(r===f.AFTER){if(!(yield t.confirm(i,o)))return!1;const e=n.nextElementSibling;return e?(n.parentNode.insertBefore(i,e),t.onDrop(i,a,o)):(n.parentNode.appendChild(i),t.onDrop(i,a,o)),!1}return!!(yield t.confirm(i,n))&&(n.subnodes.appendChild(i),t.onDrop(i,a,n),!1)})),y=(e,t)=>{e.preventDefault(),e.dataTransfer.dropEffect="move",((e,t)=>{const n=v(e),o=g(e);n.classList.toggle(t.styles.nodeDropBefore,o===f.BEFORE),n.classList.toggle(t.styles.nodeDropInside,o===f.INSIDE),n.classList.toggle(t.styles.nodeDropAfter,o===f.AFTER)})(e,t)},A=(e,t)=>{m(e,t)},T=(e,t)=>{e.target.classList.remove(t.styles.nodeDragging),m(e,t)},N=e=>`sortableTreeState-${e.replace(/[^\w]+/,"-")}`;const L=class{constructor({nodes:e,element:t,renderLabel:n,icons:d,styles:c,lockRootLevel:u,onChange:h,onClick:p,initCollapseLevel:f,confirm:g,disableSorting:v,stateId:b}){this.nodeCollection={},e&&(t?(this.defineElements(),this.root=t,this.icons=Object.assign(Object.assign({},s),d),this.styles=Object.assign(Object.assign({},r),c),this.renderLabel=n||o,this.lockRootLevel=void 0===u||u,this.onChange=h||i,this.onClick=p||a,this.confirm=g||l,this.initCollapseLevel=void 0===f?2:f,this.disableSorting=v||!1,t.classList.add(this.styles.tree),this.render({nodes:e,element:t}),b&&(((e,t)=>{const n=sessionStorage.getItem(N(e));if(!n)return;const o=JSON.parse(n),s=(e,t)=>{const[n,o]=t;e.element.collapse(0===n),o&&e.subnodes.forEach(((e,t)=>{void 0!==o[t]&&s(e,o[t])}))};t.forEach(((e,t)=>{s(e,o[t])}))})(b,this.parseTree(this.root)),this.initStateObserver(b))):console.error('Error: "element" is not a valid HTML element!'))}getNode(e){return this.nodeCollection[e]}findNode(e,t){const n=Object.values(this.nodeCollection);for(let o=0;o{((e,t)=>{const n=[],o=e=>{const t=[],n=[e.element.getAttribute("open")?1:0,t];return e.subnodes.forEach((e=>{t.push(o(e))})),n};t.forEach((e=>{n.push(o(e))})),sessionStorage.setItem(N(e),JSON.stringify(n))})(e,this.parseTree(this.root))}));t.observe(this.root,{childList:!0,attributes:!0,subtree:!0})}defineElements(){try{customElements.define(u.TAG_NAME,u)}catch(e){}}render({nodes:e,element:t},n=0){n++,e.forEach((e=>{const o=u.create({icons:this.icons,styles:this.styles,parent:t,renderLabel:this.renderLabel,data:e.data,onClick:this.onClick,draggable:!this.disableSorting});this.disableSorting||((e,t)=>{const n={dragstart:E,drop:_,dragover:y,dragend:T,dragleave:A};for(const[o,s]of Object.entries(n))p({node:e,eventName:o,handler:s,tree:t})})(o,this),o.collapse(n>this.initCollapseLevel),this.nodeCollection[o.id]=o,e.nodes&&this.render({nodes:e.nodes,element:o.subnodes},n)}))}parseTree(e){const t=Array.from(e.querySelectorAll(`:scope > ${u.TAG_NAME}`)),n=[];return t.forEach((e=>{n.push({element:e,id:e.id,subnodes:this.parseTree(e.subnodes)})})),n}};return t=t.default})())); \ No newline at end of file