diff --git a/execution-order/execution-order.css b/execution-order/execution-order.css index 11bdc37a..328b83a7 100644 --- a/execution-order/execution-order.css +++ b/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%); diff --git a/execution-order/execution-order.html b/execution-order/execution-order.html index db1bed03..8c055236 100644 --- a/execution-order/execution-order.html +++ b/execution-order/execution-order.html @@ -23,7 +23,7 @@
    - + diff --git a/execution-order/execution-order.js b/execution-order/execution-order.js index 89c44c7c..91aaaa4e 100644 --- a/execution-order/execution-order.js +++ b/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', () => { diff --git a/package-lock.json b/package-lock.json index bcc233fc..df91cdd4 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index a4b3b52e..b7d5a779 100644 --- a/package.json +++ b/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", diff --git a/tools/build-vendor.js b/tools/build-vendor.js index 2091f0f8..7f730cac 100644 --- a/tools/build-vendor.js +++ b/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', ], }; diff --git a/vendor/@eight04/draggable-list/README.md b/vendor/@eight04/draggable-list/README.md index 9fc32899..f2a4e672 100644 --- a/vendor/@eight04/draggable-list/README.md +++ b/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 diff --git a/vendor/@eight04/draggable-list/dist/draggable-list.iife.js b/vendor/@eight04/draggable-list/dist/draggable-list.iife.js deleted file mode 100644 index 98884e4e..00000000 --- a/vendor/@eight04/draggable-list/dist/draggable-list.iife.js +++ /dev/null @@ -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;an);a++)ar&&e[a].top=0&&!(e[a].bottomr&&e[a].top>n&&t[a].classList.contains("draggable-list-transformed")?(t[a].classList.remove("draggable-list-transformed"),t[a].style=""):an&&!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{o&&(d=!0,t.preventDefault())}))}}(); -//# sourceMappingURL=draggable-list.iife.js.map diff --git a/vendor/@eight04/draggable-list/dist/draggable-list.iife.min.js b/vendor/@eight04/draggable-list/dist/draggable-list.iife.min.js new file mode 100644 index 00000000..3e49567b --- /dev/null +++ b/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+10?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(rt[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)),r0&&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{i&&(c=!0,t.preventDefault())}))}}();