From 268c7b758b315dbfcd8e1344c11eb66213b48eaf Mon Sep 17 00:00:00 2001 From: tophf Date: Sun, 20 Feb 2022 00:59:08 +0300 Subject: [PATCH] give history log a navigatable #hash --- injection-order/injection-order.js | 4 +-- js/router.js | 13 +++++++++ manage.html | 2 +- manage/manage.css | 6 ++-- manage/manage.js | 47 ++++++++++++------------------ manage/updater-ui.js | 10 ++++--- 6 files changed, 43 insertions(+), 39 deletions(-) diff --git a/injection-order/injection-order.js b/injection-order/injection-order.js index 6d325697..f7827db5 100644 --- a/injection-order/injection-order.js +++ b/injection-order/injection-order.js @@ -5,7 +5,7 @@ 'use strict'; /* exported InjectionOrder */ -async function InjectionOrder(show = true) { +async function InjectionOrder(show, el, selector) { if (!show) { return messageBoxProxy.close(); } @@ -27,7 +27,7 @@ async function InjectionOrder(show = true) { await messageBoxProxy.show({ title: t('styleInjectionOrder'), contents: $create('fragment', Object.entries(groups).map(makeList)), - className: 'injection-order center-dialog', + className: 'center-dialog ' + selector.slice(1), blockScroll: true, buttons: [t('confirmClose')], }); diff --git a/js/router.js b/js/router.js index fa3121f9..1fd3d7dc 100644 --- a/js/router.js +++ b/js/router.js @@ -1,3 +1,4 @@ +/* global $ */// dom.js /* global deepEqual */// toolbox.js /* global msg */ 'use strict'; @@ -10,6 +11,18 @@ const router = { return new URLSearchParams(location.search).get(key); }, + makeToggle(hashId, showHide, deps) { + const hash = '#' + hashId; + const selector = '.' + hash.slice(1); + router.watch({hash}, async state => { + const el = $(selector); + if (!state === !el) return; + if (state && deps) await require(deps); + await showHide(state, el, selector); + }); + return router.updateHash.bind(router, hash); + }, + push(url) { const state = history.state || {}; state.buffer = router.buffer; diff --git a/manage.html b/manage.html index ff5df44e..7c8803be 100644 --- a/manage.html +++ b/manage.html @@ -273,7 +273,7 @@ - + diff --git a/manage/manage.css b/manage/manage.css index 1561006e..eae810f5 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -954,7 +954,7 @@ button .svg-icon, margin: .5em 1.25em 0; } -.update-history-log { +.update-history { font-size: 11px; white-space: pre; overflow-x: hidden; @@ -976,7 +976,7 @@ button .svg-icon, -moz-osx-font-smoothing: grayscale; } -#stylus-embedded-options { +.stylus-options { position: fixed; top: 0; left: 0; @@ -988,7 +988,7 @@ button .svg-icon, animation: fadein .25s ease-in-out; } -#stylus-embedded-options.fadeout { +.stylus-options.fadeout { animation: fadeout .25s ease-in-out; } diff --git a/manage/manage.js b/manage/manage.js index 8dca7f9c..84abe0b7 100644 --- a/manage/manage.js +++ b/manage/manage.js @@ -50,9 +50,19 @@ newUI.renderClass(); installed.on('click', Events.entryClicked); installed.on('mouseover', Events.lazyAddEntryTitle, {passive: true}); installed.on('mouseout', Events.lazyAddEntryTitle, {passive: true}); - $('#manage-options-button').onclick = () => router.updateHash('#stylus-options'); - $('#injection-order-button').onclick = () => router.updateHash('#injection-order'); - $('#sync-styles').onclick = () => router.updateHash('#stylus-options'); + $('#sync-styles').onclick = + $('#manage-options-button').onclick = + router.makeToggle('stylus-options', toggleEmbeddedOptions); + $('#injection-order-button').onclick = + router.makeToggle('injection-order', (...args) => InjectionOrder(...args), [ + '/vendor/draggable-list/draggable-list.iife.min.js', + '/injection-order/injection-order.css', + '/injection-order/injection-order', /* global InjectionOrder */ + ]); + $('#update-history-button').onclick = + router.makeToggle('update-history', (...args) => showUpdateHistory(...args), [ + '/manage/updater-ui', /* global showUpdateHistory */ + ]); $$('#header a[href^="http"]').forEach(a => (a.onclick = Events.external)); window.on('pageshow', handleVisibilityChange); window.on('pagehide', handleVisibilityChange); @@ -91,8 +101,6 @@ newUI.renderClass(); msg.onExtension(onRuntimeMessage); window.on('closeOptions', () => router.updateHash('')); -router.watch({hash: '#stylus-options'}, toggleEmbeddedOptions); -router.watch({hash: '#injection-order'}, toggleInjectionOrder); function onRuntimeMessage(msg) { switch (msg.method) { @@ -115,32 +123,13 @@ function onRuntimeMessage(msg) { setTimeout(sorter.updateStripes, 0, {onlyWhenColumnsChanged: true}); } -async function toggleEmbeddedOptions(state) { - const el = $('#stylus-embedded-options') || - state && $.root.appendChild($create('iframe', { - id: 'stylus-embedded-options', - src: '/options.html', - })); - if (state) { - el.focus(); - } else if (el) { +async function toggleEmbeddedOptions(show, el, selector) { + if (show) { + $.root.appendChild($create('iframe' + selector, {src: '/options.html'})) + .focus(); + } else { el.contentDocument.body.classList.add('scaleout'); await animateElement(el, 'fadeout'); el.remove(); } } - -async function toggleInjectionOrder(state) { - const shown = $('.injection-order'); - if (state && !shown) { - await require([ - '/vendor/draggable-list/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 InjectionOrder(false); - } -} diff --git a/manage/updater-ui.js b/manage/updater-ui.js index d411d395..f4edce34 100644 --- a/manage/updater-ui.js +++ b/manage/updater-ui.js @@ -10,7 +10,6 @@ $('#check-all-updates').onclick = checkUpdateAll; $('#check-all-updates-force').onclick = checkUpdateAll; $('#apply-all-updates').onclick = applyUpdateAll; -$('#update-history').onclick = showUpdateHistory; function applyUpdateAll() { const btnApply = $('#apply-all-updates'); @@ -215,9 +214,12 @@ function renderUpdatesOnlyFilter({show, check} = {}) { btnApply.dataset.value = numUpdatable; } -async function showUpdateHistory(event) { - event.preventDefault(); - const log = $create('.update-history-log'); +/* exported showUpdateHistory */ +async function showUpdateHistory(show, el, selector) { + if (!show) { + return messageBoxProxy.close(); + } + const log = $create(selector); let scroller, toggler; let deleted = false; await require(['/js/storage-util']); /* global chromeLocal */