From e7cb2e2dc384cda20be558844d5b65d0f16446c0 Mon Sep 17 00:00:00 2001 From: tophf Date: Thu, 13 Jan 2022 21:47:41 +0300 Subject: [PATCH] remove iframe, add hint --- _locales/en/messages.json | 7 ++- injection-order/injection-order.css | 56 ++++++++++++++--------- injection-order/injection-order.html | 26 ----------- injection-order/injection-order.js | 67 +++++++++++++++++++--------- js/dlg/message-box.css | 15 ------- manage/manage.js | 21 ++++----- 6 files changed, 95 insertions(+), 97 deletions(-) delete mode 100644 injection-order/injection-order.html diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 3be04358..84649365 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1668,7 +1668,12 @@ "message": "Custom included sites" }, "styleInjectionOrder": { - "message": "Style injection order" + "message": "Style injection order", + "description": "Tooltip for the button in the manager to open the dialog and also the title of this dialog" + }, + "styleInjectionOrderHint": { + "message": "Drag'n'drop a style to change its position. Styles are injected sequentially in the order shown below so a style further down the list can override the earlier styles.", + "description": "Hint in the injection order dialog in the manager" }, "styleExcludeLabel": { "message": "Custom excluded sites" diff --git a/injection-order/injection-order.css b/injection-order/injection-order.css index 4b78054e..bdd57965 100644 --- a/injection-order/injection-order.css +++ b/injection-order/injection-order.css @@ -1,40 +1,56 @@ -html, body { - margin: 0; +#message-box.injection-order > div { + height: 100%; + width: 40em; + max-width: 80vw; +} +#message-box.injection-order #message-box-contents { padding: 0; + overflow: hidden; } -ol { - list-style: none; - margin: 0; - padding: .75rem 0; - font-size: 16px; +.injection-order header { + padding: 1rem 1rem 0; + content: attr(data-hint); +} +.injection-order ol { + height: 100%; + padding: 0; + font-size: 14px; overflow-y: auto; - background: rgba(255, 2555, 255, 0.7) } -li { - position: relative; +.injection-order a { + display: block; user-select: none; padding: 0.3em .5em; - background: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: move; + color: #000; + text-decoration: none; } -li:not(:first-child) { +.injection-order a.enabled { + font-weight: bold; +} +.injection-order a:active { + background: white; +} +.injection-order a:hover { + text-decoration: underline; +} +.injection-order a:not(:first-child) { border-top: 1px solid rgba(128, 128, 128, .25); } -.draggable-list-dragging li { +.injection-order a::before { + content: "\2261"; + padding: 0.6em; + font-weight: normal; +} +.injection-order .draggable-list-dragging a { transition: transform .25s ease-in-out; z-index: 1; } -li.draggable-list-target { +.injection-order a.draggable-list-target { transition: none; z-index: 100; position: relative; } -.dragger::before { - content: "\2261" -} -.dragger { - padding: 0.6em; -} diff --git a/injection-order/injection-order.html b/injection-order/injection-order.html deleted file mode 100644 index 915fd0d3..00000000 --- a/injection-order/injection-order.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - Stylus - - - - - - - - - - - - - - - -
    - - - - diff --git a/injection-order/injection-order.js b/injection-order/injection-order.js index 2c3cb854..50b1fb4b 100644 --- a/injection-order/injection-order.js +++ b/injection-order/injection-order.js @@ -1,34 +1,47 @@ -/* global $ $create */// dom.js +/* global $create messageBoxProxy */// dom.js /* global API */// msg.js /* global DraggableList */ /* global prefs */ +/* global t */// localization.js 'use strict'; -(async () => { - const list = (await getOrderedStyles()).map(style => ({ - el: $create('li', [$create('span.dragger'), style.name]), - style, - })); - const ol = $('#style-list'); +/* exported InjectionOrder */ +async function InjectionOrder(show = true) { + if (!show) { + return messageBoxProxy.close(); + } + const entries = (await getOrderedStyles()).map(makeEntry); + const ol = $create('ol'); let maxTranslateY; - ol.append(...list.map(l => l.el)); - ol.on('d:dragstart', e => { - e.detail.origin.dataTransfer.setDragImage(new Image(), 0, 0); - maxTranslateY = ol.scrollHeight - e.detail.dragTarget.offsetHeight - e.detail.dragTarget.offsetTop; + ol.append(...entries.map(l => l.el)); + ol.on('d:dragstart', ({detail: d}) => { + d.origin.dataTransfer.setDragImage(new Image(), 0, 0); + maxTranslateY = ol.scrollHeight - d.dragTarget.offsetHeight - d.dragTarget.offsetTop; }); - ol.on('d:dragmove', e => { - e.detail.origin.dataTransfer.dropEffect = 'move'; - const y = Math.min(e.detail.currentPos.y - e.detail.startPos.y, maxTranslateY); - e.detail.dragTarget.style.transform = `translateY(${y}px)`; + ol.on('d:dragmove', ({detail: d}) => { + d.origin.dataTransfer.dropEffect = 'move'; + const y = Math.min(d.currentPos.y - d.startPos.y, maxTranslateY); + d.dragTarget.style.transform = `translateY(${y}px)`; }); - ol.on('d:dragend', e => { - const [item] = list.splice(e.detail.originalIndex, 1); - list.splice(e.detail.spliceIndex, 0, item); - ol.insertBefore(e.detail.dragTarget, e.detail.insertBefore); - prefs.set('injectionOrder', list.map(l => l.style._id)); + ol.on('d:dragend', ({detail: d}) => { + const [item] = entries.splice(d.originalIndex, 1); + entries.splice(d.spliceIndex, 0, item); + ol.insertBefore(d.dragTarget, d.insertBefore); + prefs.set('injectionOrder', entries.map(l => l.style._id)); }); new DraggableList(ol, {scrollContainer: ol}); + await messageBoxProxy.show({ + title: t('styleInjectionOrder'), + contents: $create('fragment', [ + $create('header', t('styleInjectionOrderHint')), + ol, + ]), + className: 'injection-order center-dialog', + blockScroll: true, + buttons: [t('confirmClose')], + }); + async function getOrderedStyles() { const [styles] = await Promise.all([ API.styles.getAll(), @@ -44,7 +57,6 @@ const s = uuidIndex.get(uid); if (s) { uuidIndex.delete(uid); - orderedStyles.push(s); styleSet.delete(s); } @@ -52,4 +64,15 @@ orderedStyles.push(...styleSet); return orderedStyles; } -})(); + + function makeEntry(style) { + return { + style, + el: $create('a', { + className: style.enabled ? 'enabled' : '', + href: '/edit.html?id=' + style.id, + target: '_blank', + }, style.name), + }; + } +} diff --git a/js/dlg/message-box.css b/js/dlg/message-box.css index ea551e53..48874cb0 100644 --- a/js/dlg/message-box.css +++ b/js/dlg/message-box.css @@ -173,21 +173,6 @@ right: auto; } -#message-box.injection-order-dialog > div { - height: 100%; - width: 40em; - max-width: 80vw; -} -#message-box.injection-order-dialog #message-box-contents { - padding: 0; -} -#injection-order { - display: block; - border: 0; - height: 100%; - width: 100%; -} - @keyframes fadein { from { opacity: 0; diff --git a/manage/manage.js b/manage/manage.js index 6904f77f..95f980bf 100644 --- a/manage/manage.js +++ b/manage/manage.js @@ -11,7 +11,6 @@ $$ $create animateElement - messageBoxProxy setupLivePrefs waitForSelector waitForSheet @@ -142,20 +141,16 @@ async function toggleEmbeddedOptions(state) { } async function toggleInjectionOrder(state) { - const sel = 'iframe#injection-order'; - const shown = $(sel); + const shown = $('.injection-order'); if (state && !shown) { - await messageBoxProxy.show({ - title: t('styleInjectionOrder'), - contents: $create(sel, { - src: '/injection-order/injection-order.html', - }), - className: 'injection-order-dialog center-dialog', - blockScroll: true, - buttons: [t('confirmClose')], - }); + await require([ + '/vendor/@eight04/draggable-list/dist/draggable-list.iife.min.js', + '/injection-order/injection-order.css', + '/injection-order/injection-order', /* global InjectionOrder */ + ]); + await InjectionOrder(); router.updateHash(''); } else if (!state && shown) { - await messageBoxProxy.close(); + await InjectionOrder(false); } }