From 5adb7f593d575ef6c01a9c998ea486ac662a9d9c Mon Sep 17 00:00:00 2001 From: eight04 Date: Thu, 9 Dec 2021 22:25:33 +0800 Subject: [PATCH] Add: Slip UI --- execution-order/execution-order.css | 57 ++++++++++++++++++++++++++++ execution-order/execution-order.html | 2 + execution-order/execution-order.js | 40 +++++++++++++++---- manage/manage.css | 21 ++++++++++ manage/manage.js | 9 +++-- tools/build-vendor.js | 4 +- 6 files changed, 119 insertions(+), 14 deletions(-) diff --git a/execution-order/execution-order.css b/execution-order/execution-order.css index e69de29b..a1a23b35 100644 --- a/execution-order/execution-order.css +++ b/execution-order/execution-order.css @@ -0,0 +1,57 @@ +html, body { + margin: 0; + padding: 0; +} +#main { + display: grid; + grid-template-columns: min-content minmax(0, 1fr); + height: 100vh; +} +#main.ready { + animation: slidein .25s ease-in-out; +} +.closer { + max-height: 100vh; +} +.closer::after { + content: "\bb"; +} +ol { + list-style: none; + margin: 0; + padding: 0; + font-size: 16px; + overflow-y: auto; +} +li { + position: relative; + user-select: none; + border: 1px solid; + padding: 0.3em 0; + background: white; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis +} +li:not(:first-child) { + margin-top: -1px; +} +.dragger::before { + content: "\2261" +} +.dragger { + padding: 0.6em; + cursor: grab; +} +.slip-reordering, +.slip-reordering .dragger { + cursor: grabbing; +} +@keyframes slidein { + from { + transform: translateX(100%); + } + to { + transform: translateX(0); + } +} diff --git a/execution-order/execution-order.html b/execution-order/execution-order.html index 2c8facae..e7dd2062 100644 --- a/execution-order/execution-order.html +++ b/execution-order/execution-order.html @@ -5,6 +5,7 @@ Stylus + @@ -19,6 +20,7 @@
+
    diff --git a/execution-order/execution-order.js b/execution-order/execution-order.js index 4f70d094..70a8fc14 100644 --- a/execution-order/execution-order.js +++ b/execution-order/execution-order.js @@ -1,25 +1,46 @@ +/* global Slip */ /* global prefs */ /* global API */ +'use strict'; (async () => { const list = (await getOrderedStyles()).map(createLi); - document.querySelector("#main").append(...list.map(l => l.el)); + const ol = document.querySelector('#style-list'); + ol.append(...list.map(l => l.el)); + ol.addEventListener('slip:beforeswipe', e => e.preventDefault()); + ol.addEventListener('slip:beforewait', e => { + if (e.target.classList.contains('dragger')) { + e.preventDefault(); + } + }); + ol.addEventListener('slip:reorder', e => { + const [item] = list.splice(e.detail.originalIndex, 1); + list.splice(e.detail.spliceIndex, 0, item); + ol.insertBefore(e.target, e.detail.insertBefore); + prefs.set('styles.order', list.map(l => l.style._id)); + }); + new Slip(ol); + document.querySelector('#main').classList.add('ready'); + + document.querySelector('.closer').addEventListener('click', () => { + parent.dispatchEvent(new Event('closeOptions')); + }); function createLi(style) { - const el = document.createElement("li"); - const dragger = document.createElement("span"); - dragger.class = "dragger"; + const el = document.createElement('li'); + const dragger = document.createElement('span'); + dragger.className = 'dragger'; el.append(dragger, style.name); - return {el}; + return {el, style}; } async function getOrderedStyles() { - const [styles, ] = await Promise.all([ + const [styles] = await Promise.all([ API.styles.getAll(), - prefs.ready + prefs.ready, ]); const styleSet = new Set(styles); - const uuidIndex = new Map; + const uuidIndex = new Map(); for (const s of styleSet) { uuidIndex.set(s._id, s); } @@ -27,7 +48,10 @@ for (const uid of prefs.get('styles.order')) { const s = uuidIndex.get(uid); if (s) { + uuidIndex.delete(uid); + orderedStyles.push(s); + styleSet.delete(s); } } orderedStyles.push(...styleSet); diff --git a/manage/manage.css b/manage/manage.css index 98f28d71..4c5b62ba 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -980,6 +980,18 @@ a:hover { animation: fadeout .25s ease-in-out; } +#stylus-execution-order { + position: fixed; + height: 100%; + border: 0; + right: 0; + max-width: 400px; + width: 90%; +} +#stylus-execution-order.fadeout { + animation: slideout .25s ease-in-out; +} + .settings-column { margin-top: 1rem; } @@ -1001,6 +1013,14 @@ a:hover { opacity: 0; } } +@keyframes slideout { + from { + transform: translateX(0); + } + to { + transform: translateX(100%); + } +} @keyframes fadein-25pct { from { @@ -1165,3 +1185,4 @@ a:hover { margin-left: -2px; } } + diff --git a/manage/manage.js b/manage/manage.js index 91bf1dfe..5da3cd28 100644 --- a/manage/manage.js +++ b/manage/manage.js @@ -139,20 +139,21 @@ function onRuntimeMessage(msg) { function Embed(El) { let el; - return async state => { - if (!state && !el) return; - if (!el) el = El(); + return toggle; + async function toggle(state) { if (state) { + if (!el) el = El(); if (!el.offsetParent) { document.body.append(el); } el.focus(); } else { + if (!el || !el.offsetParent) return; if (el.contentDocument) { el.contentDocument.body.classList.add('scaleout'); } await animateElement(el, 'fadeout'); el.remove(); } - }; + } } diff --git a/tools/build-vendor.js b/tools/build-vendor.js index 9b88aa83..8a1d3113 100644 --- a/tools/build-vendor.js +++ b/tools/build-vendor.js @@ -61,8 +61,8 @@ const files = { 'dist/webext-launch-web-auth-flow.min.js → webext-launch-web-auth-flow.min.js', ], 'slipjs': [ - 'slip.js' - ] + 'slip.js', + ], }; main().catch(console.error);