open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove iframe, add hint

Browse Source
This commit is contained in:
tophf 2022-01-13 21:47:41 +03:00
parent 365b706320
commit e7cb2e2dc3
6 changed files with 95 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
_locales/en/messages.json
View File

@ -1668,7 +1668,12 @@
"message": "Custom included sites" "message": "Custom included sites"
}, },
"styleInjectionOrder": { "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": { "styleExcludeLabel": {
"message": "Custom excluded sites" "message": "Custom excluded sites"

56
injection-order/injection-order.css
View File

@ -1,40 +1,56 @@
html, body { #message-box.injection-order > div {
margin: 0; height: 100%;
width: 40em;
max-width: 80vw;
}
#message-box.injection-order #message-box-contents {
padding: 0; padding: 0;
overflow: hidden;
} }
ol { .injection-order header {
list-style: none; padding: 1rem 1rem 0;
margin: 0; content: attr(data-hint);
padding: .75rem 0; }
font-size: 16px; .injection-order ol {
height: 100%;
padding: 0;
font-size: 14px;
overflow-y: auto; overflow-y: auto;
background: rgba(255, 2555, 255, 0.7)
} }
li { .injection-order a {
position: relative; display: block;
user-select: none; user-select: none;
padding: 0.3em .5em; padding: 0.3em .5em;
background: white;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
cursor: move; 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); 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; transition: transform .25s ease-in-out;
z-index: 1; z-index: 1;
} }
li.draggable-list-target { .injection-order a.draggable-list-target {
transition: none; transition: none;
z-index: 100; z-index: 100;
position: relative; position: relative;
} }
.dragger::before {
content: "\2261"
}
.dragger {
padding: 0.6em;
}

26
injection-order/injection-order.html
View File

@ -1,26 +0,0 @@
<!DOCTYPE html>
<html id="stylus">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title i18n-text-append="optionsHeading">Stylus </title>
<link rel="stylesheet" href="/global.css">
<link rel="stylesheet" href="injection-order.css">
<script src="/js/polyfill.js"></script>
<script src="/js/toolbox.js"></script>
<script src="/js/msg.js"></script>
<script src="/js/localization.js"></script>
<script src="/js/prefs.js"></script>
<script src="/js/dom.js"></script>
<script src="/content/style-injector.js"></script>
<script src="/content/apply.js"></script>
</head>
<body id="stylus-injection-order">
<ol id="style-list"></ol>
<script src="/vendor/@eight04/draggable-list/dist/draggable-list.iife.min.js"></script>
<script src="injection-order.js"></script>
</body>
</html>

67
injection-order/injection-order.js
View File

@ -1,34 +1,47 @@
/* global $ $create */// dom.js /* global $create messageBoxProxy */// dom.js
/* global API */// msg.js /* global API */// msg.js
/* global DraggableList */ /* global DraggableList */
/* global prefs */ /* global prefs */
/* global t */// localization.js
'use strict'; 'use strict';
(async () => { /* exported InjectionOrder */
const list = (await getOrderedStyles()).map(style => ({ async function InjectionOrder(show = true) {
el: $create('li', [$create('span.dragger'), style.name]), if (!show) {
style, return messageBoxProxy.close();
})); }
const ol = $('#style-list'); const entries = (await getOrderedStyles()).map(makeEntry);
const ol = $create('ol');
let maxTranslateY; let maxTranslateY;
ol.append(...list.map(l => l.el)); ol.append(...entries.map(l => l.el));
ol.on('d:dragstart', e => { ol.on('d:dragstart', ({detail: d}) => {
e.detail.origin.dataTransfer.setDragImage(new Image(), 0, 0); d.origin.dataTransfer.setDragImage(new Image(), 0, 0);
maxTranslateY = ol.scrollHeight - e.detail.dragTarget.offsetHeight - e.detail.dragTarget.offsetTop; maxTranslateY = ol.scrollHeight - d.dragTarget.offsetHeight - d.dragTarget.offsetTop;
}); });
ol.on('d:dragmove', e => { ol.on('d:dragmove', ({detail: d}) => {
e.detail.origin.dataTransfer.dropEffect = 'move'; d.origin.dataTransfer.dropEffect = 'move';
const y = Math.min(e.detail.currentPos.y - e.detail.startPos.y, maxTranslateY); const y = Math.min(d.currentPos.y - d.startPos.y, maxTranslateY);
e.detail.dragTarget.style.transform = `translateY(${y}px)`; d.dragTarget.style.transform = `translateY(${y}px)`;
}); });
ol.on('d:dragend', e => { ol.on('d:dragend', ({detail: d}) => {
const [item] = list.splice(e.detail.originalIndex, 1); const [item] = entries.splice(d.originalIndex, 1);
list.splice(e.detail.spliceIndex, 0, item); entries.splice(d.spliceIndex, 0, item);
ol.insertBefore(e.detail.dragTarget, e.detail.insertBefore); ol.insertBefore(d.dragTarget, d.insertBefore);
prefs.set('injectionOrder', list.map(l => l.style._id)); prefs.set('injectionOrder', entries.map(l => l.style._id));
}); });
new DraggableList(ol, {scrollContainer: ol}); 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() { async function getOrderedStyles() {
const [styles] = await Promise.all([ const [styles] = await Promise.all([
API.styles.getAll(), API.styles.getAll(),
@ -44,7 +57,6 @@
const s = uuidIndex.get(uid); const s = uuidIndex.get(uid);
if (s) { if (s) {
uuidIndex.delete(uid); uuidIndex.delete(uid);
orderedStyles.push(s); orderedStyles.push(s);
styleSet.delete(s); styleSet.delete(s);
} }
@ -52,4 +64,15 @@
orderedStyles.push(...styleSet); orderedStyles.push(...styleSet);
return orderedStyles; return orderedStyles;
} }
})();
function makeEntry(style) {
return {
style,
el: $create('a', {
className: style.enabled ? 'enabled' : '',
href: '/edit.html?id=' + style.id,
target: '_blank',
}, style.name),
};
}
}

15
js/dlg/message-box.css
View File

@ -173,21 +173,6 @@
right: auto; 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 { @keyframes fadein {
from { from {
opacity: 0; opacity: 0;

21
manage/manage.js
View File

@ -11,7 +11,6 @@
$$ $$
$create $create
animateElement animateElement
messageBoxProxy
setupLivePrefs setupLivePrefs
waitForSelector waitForSelector
waitForSheet waitForSheet
@ -142,20 +141,16 @@ async function toggleEmbeddedOptions(state) {
} }
async function toggleInjectionOrder(state) { async function toggleInjectionOrder(state) {
const sel = 'iframe#injection-order'; const shown = $('.injection-order');
const shown = $(sel);
if (state && !shown) { if (state && !shown) {
await messageBoxProxy.show({ await require([
title: t('styleInjectionOrder'), '/vendor/@eight04/draggable-list/dist/draggable-list.iife.min.js',
contents: $create(sel, { '/injection-order/injection-order.css',
src: '/injection-order/injection-order.html', '/injection-order/injection-order', /* global InjectionOrder */
}), ]);
className: 'injection-order-dialog center-dialog', await InjectionOrder();
blockScroll: true,
buttons: [t('confirmClose')],
});
router.updateHash(''); router.updateHash('');
} else if (!state && shown) { } else if (!state && shown) {
await messageBoxProxy.close(); await InjectionOrder(false);
} }
} }