Bump draggable-list

execution-order/execution-order.css

@@ -22,6 +22,7 @@ ol {
   padding: 0;
   font-size: 16px;
   overflow-y: auto;
+  background: rgba(255, 2555, 255, 0.7)
 }
 li {
   position: relative;
@@ -33,7 +34,7 @@ li {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  cursor: grab;
+  cursor: move;
 }
 li:not(:first-child) {
   /* margin-top: -1px; */
@@ -44,6 +45,8 @@ li:not(:first-child) {
 }
 li.draggable-list-target {
   transition: none;
+  z-index: 100;
+  position: relative;
 }
 .dragger::before {
   content: "\2261"
@@ -51,10 +54,6 @@ li.draggable-list-target {
 .dragger {
   padding: 0.6em;
 }
-.slip-reordering,
-.slip-reordering .dragger {
-  cursor: grabbing;
-}
 @keyframes slidein {
   from {
     transform: translateX(100%);

execution-order/execution-order.html

@@ -23,7 +23,7 @@
     <button class="closer"></button>
     <ol id="style-list"></ol>
   </div>
-  <script src="/vendor/@eight04/draggable-list/dist/draggable-list.iife.js"></script>
+  <script src="/vendor/@eight04/draggable-list/dist/draggable-list.iife.min.js"></script>
   <script src="execution-order.js"></script>
 </body>
 </html>

execution-order/execution-order.js

@@ -6,11 +6,16 @@
 (async () => {
   const list = (await getOrderedStyles()).map(createLi);
   const ol = document.querySelector('#style-list');
+  let maxTranslateY;
   ol.append(...list.map(l => l.el));
+  ol.addEventListener('d:dragstart', e => {
+    e.detail.origin.dataTransfer.setDragImage(new Image(), 0, 0);
+    maxTranslateY = ol.scrollHeight - e.detail.dragTarget.offsetHeight - e.detail.dragTarget.offsetTop;
+  });
   ol.addEventListener('d:dragmove', e => {
     e.detail.origin.dataTransfer.dropEffect = 'move';
-    e.detail.dragTarget.style.transform = `translateY(${e.detail.currentPos.y - e.detail.startPos.y}px)`;
-    console.log(e.detail.origin.pageY, e.detail.origin.screenY);
+    const y = Math.min(e.detail.currentPos.y - e.detail.startPos.y, maxTranslateY);
+    e.detail.dragTarget.style.transform = `translateY(${y}px)`;
   });
   ol.addEventListener('d:dragend', e => {
     const [item] = list.splice(e.detail.originalIndex, 1);
@@ -18,7 +23,7 @@
     ol.insertBefore(e.detail.dragTarget, e.detail.insertBefore);
     prefs.set('styles.order', list.map(l => l.style._id));
   });
-  new DraggableList(ol);
+  new DraggableList(ol, {scrollContainer: ol});
   document.querySelector('#main').classList.add('ready');
 
   document.querySelector('.closer').addEventListener('click', () => {

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.5.22",
       "license": "GPL-3.0-only",
       "dependencies": {
-        "@eight04/draggable-list": "^0.2.0",
+        "@eight04/draggable-list": "^0.3.0",
         "codemirror": "5.63.3",
         "db-to-cloud": "^0.7.0",
         "jsonlint": "^1.6.3",
@@ -348,9 +348,9 @@
       "dev": true
     },
     "node_modules/@eight04/draggable-list": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@eight04/draggable-list/-/draggable-list-0.2.0.tgz",
-      "integrity": "sha512-RphV30fMoYQ6O154qnDOirA13c/Da5/xrKcNZLomo9qHC8fzNFDyJjZOynpdXKXL/4dMaZGiX/tn5lpmes8JQw==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@eight04/draggable-list/-/draggable-list-0.3.0.tgz",
+      "integrity": "sha512-3mDCUv/dCIylc7BA8VZVW8kB0Y937UqVOgORN9vyCpgmzLTfO+0Qp00vRPaXJI7MBy+Ufg7c0K08y8/a41S3cw==",
       "engines": {
         "node": ">=8"
       }
@@ -10079,9 +10079,9 @@
       }
     },
     "@eight04/draggable-list": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@eight04/draggable-list/-/draggable-list-0.2.0.tgz",
-      "integrity": "sha512-RphV30fMoYQ6O154qnDOirA13c/Da5/xrKcNZLomo9qHC8fzNFDyJjZOynpdXKXL/4dMaZGiX/tn5lpmes8JQw=="
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@eight04/draggable-list/-/draggable-list-0.3.0.tgz",
+      "integrity": "sha512-3mDCUv/dCIylc7BA8VZVW8kB0Y937UqVOgORN9vyCpgmzLTfO+0Qp00vRPaXJI7MBy+Ufg7c0K08y8/a41S3cw=="
     },
     "@eight04/read-write-lock": {
       "version": "0.1.0",

package.json

@@ -9,7 +9,7 @@
     "codemirror": "WARNING! Always use an exact version and test it for a while before releasing"
   },
   "dependencies": {
-    "@eight04/draggable-list": "^0.2.0",
+    "@eight04/draggable-list": "^0.3.0",
     "codemirror": "5.63.3",
     "db-to-cloud": "^0.7.0",
     "jsonlint": "^1.6.3",

tools/build-vendor.js

@@ -61,7 +61,7 @@ const files = {
     'dist/webext-launch-web-auth-flow.min.js → webext-launch-web-auth-flow.min.js',
   ],
   '@eight04/draggable-list': [
-    'dist/draggable-list.iife.js',
+    'dist/draggable-list.iife.min.js',
   ],
 };
 

vendor/@eight04/draggable-list/README.md

@@ -1,5 +1,5 @@
-## @eight04/draggable-list v0.2.0
+## @eight04/draggable-list v0.3.0
 
 Following files are copied from npm (node_modules):
 
-* dist\draggable-list.iife.js
+* dist\draggable-list.iife.min.js

vendor/@eight04/draggable-list/dist/draggable-list.iife.js

@@ -1,2 +0,0 @@
-var DraggableList=function(){"use strict";return function(t){for(const e of t.children)e.draggable=!0;new MutationObserver((t=>{for(const e of t)for(const t of e.addedNodes)t.draggable=!0})).observe(t,{childList:!0});let e=null,r=0,a=0,s=null,n=[],o=null,d=!1;function l(r,a,n){const d={origin:r,startPos:e,currentPos:s,dragTarget:o};n&&Object.assign(d,n),t.dispatchEvent(new CustomEvent(a,{detail:d}))}t.addEventListener("dragstart",(i=>{if(i.target.parentNode!==t)return;o=i.target,d=!1,e={x:i.pageX,y:i.pageY},r=[...t.children].indexOf(i.target),a=r,s=e;const g=window.scrollY;n=[...t.children].map((t=>{const e=t.getBoundingClientRect();return{top:e.top+g,bottom:e.bottom+g}})),o.classList.add("draggable-list-target"),t.classList.add("draggable-list-dragging"),l(i,"d:dragstart")})),t.addEventListener("dragenter",(t=>{o&&(t.preventDefault(),l(t,"d:dragmove"))})),t.addEventListener("dragover",(e=>{if(!o)return;e.preventDefault();const d={x:e.pageX,y:e.pageY};a=function(t,e,r,a,s,n){if(n>a)for(let a=s;a<t.length&&!(e[a].top>n);a++)a<r&&e[a].bottom<n&&t[a].classList.contains("draggable-list-transformed")?(t[a].classList.remove("draggable-list-transformed"),t[a].style=""):a>r&&e[a].top<n&&!t[a].classList.contains("draggable-list-transformed")&&(t[a].classList.add("draggable-list-transformed"),t[a].style.transform="translateY(".concat(e[r].top-e[r+1].top,"px)")),s=a;else for(let a=s;a>=0&&!(e[a].bottom<n);a--)a>r&&e[a].top>n&&t[a].classList.contains("draggable-list-transformed")?(t[a].classList.remove("draggable-list-transformed"),t[a].style=""):a<r&&e[a].bottom>n&&!t[a].classList.contains("draggable-list-transformed")&&(t[a].classList.add("draggable-list-transformed"),t[a].style.transform="translateY(".concat(e[r].bottom-e[r-1].bottom,"px)")),s=a;return s}(t.children,n,r,s.y,a,d.y),s=d,l(e,"d:dragmove")})),document.addEventListener("dragend",(e=>{if(o){for(const e of t.children)e.classList.remove("draggable-list-transformed"),e.style="";o.classList.remove("draggable-list-target"),t.classList.remove("draggable-list-dragging"),l(e,"d:dragend",{originalIndex:r,spliceIndex:a,insertBefore:a<r?t.children[a]:t.children[a+1],dropped:d}),o=null}})),t.addEventListener("drop",(t=>{o&&(d=!0,t.preventDefault())}))}}();
-//# sourceMappingURL=draggable-list.iife.js.map

vendor/@eight04/draggable-list/dist/draggable-list.iife.min.js

@@ -0,0 +1 @@
+var DraggableList=function(){"use strict";const t="draggable-list-transformed";return function(e,{bound:r,scrollContainer:n}={}){for(const t of e.children)t.draggable=!0;new MutationObserver((t=>{for(const e of t)for(const t of e.addedNodes)t.draggable=!0})).observe(e,{childList:!0});let a=null,o=0,s=0,l=null,d=[],i=null,c=!1,g=0;function f(t,r,n){const o={origin:t,startPos:a,currentPos:l,dragTarget:i};n&&Object.assign(o,n),e.dispatchEvent(new CustomEvent(r,{detail:o}))}e.addEventListener("dragstart",(t=>{if(t.target.parentNode!==e)return;i=t.target,c=!1;const r=n?n.scrollLeft:0,u=n?n.scrollTop:0;a={x:t.pageX+r,y:t.pageY+u},o=[...e.children].indexOf(t.target),s=o,l=a,d=[...e.children].map((t=>{const e=t.getBoundingClientRect();return{top:e.top+window.scrollY+u,bottom:e.bottom+window.scrollY+u}})),g=o+1<d.length?d[o+1].top-d[o].top:o>0?d[o].bottom-d[o-1].bottom:0,i.classList.add("draggable-list-target"),e.classList.add("draggable-list-dragging"),f(t,"d:dragstart")})),e.addEventListener("dragenter",(t=>{i&&(t.preventDefault(),f(t,"d:dragmove"))})),e.addEventListener("dragover",(a=>{if(!i)return;a.preventDefault();const c=n?n.scrollLeft:0,u=n?n.scrollTop:0,p={x:a.pageX+c,y:a.pageY+u},m=function(t,e,r,n){if(r<t[0].top&&n)return e;for(let n=0;n<e;n++)if(!(t[n].bottom<r))return n;if(r>t[t.length-1].bottom&&n)return e;for(let n=t.length-1;n>e;n--)if(!(t[n].top>r))return n;return e}(d,o,p.y,r);!function(e,r,n,a,o){function s(r,n,a,o){for(let s=n;s<=a;s++)r&&!e[s].classList.contains(t)?(e[s].classList.add(t),e[s].style.transform=o):!r&&e[s].classList.contains(t)&&(e[s].classList.remove(t),e[s].style="")}a>n?(s(!1,n,Math.min(r-1,a-1)),r<e.length-1&&s(!0,Math.max(n+1,r+1),a,"translateY(".concat(-o,"px)"))):(s(!1,Math.max(r+1,a+1),n),r>0&&s(!0,a,Math.min(n-1,r-1),"translateY(".concat(o,"px)")))}(e.children,o,s,m,g),s=m,l=p,f(a,"d:dragmove")})),document.addEventListener("dragend",(r=>{if(i){for(const r of e.children)r.classList.remove(t),r.style="";i.classList.remove("draggable-list-target"),e.classList.remove("draggable-list-dragging"),f(r,"d:dragend",{originalIndex:o,spliceIndex:s,insertBefore:s<o?e.children[s]:e.children[s+1],dropped:c}),i=null}})),e.addEventListener("drop",(t=>{i&&(c=!0,t.preventDefault())}))}}();