From bbb3585f2fe33554cdf46ec33f3d0be846bb5fe1 Mon Sep 17 00:00:00 2001 From: tophf Date: Wed, 29 Dec 2021 13:26:27 +0300 Subject: [PATCH] hide Settings button in new styles --- edit/base.js | 27 --------------------------- edit/edit.css | 1 + edit/edit.js | 34 ++++++++++++++++++++++++++-------- edit/sections-editor.js | 20 ++++---------------- edit/settings.js | 14 ++++---------- edit/source-editor.js | 21 +++++---------------- 6 files changed, 40 insertions(+), 77 deletions(-) diff --git a/edit/base.js b/edit/base.js index ec13a50a..0764d8d9 100644 --- a/edit/base.js +++ b/edit/base.js @@ -11,7 +11,6 @@ debounce getOwnTab sessionStore - tryCatch tryJSONparse tryURL */// toolbox.js @@ -24,7 +23,6 @@ const editor = { style: null, dirty: DirtyReporter(), - events: {}, isUsercss: false, isWindowed: false, lazyKeymaps: { @@ -39,18 +37,6 @@ const editor = { cancel: () => location.assign('/manage.html'), - emit(name, ...args) { - for (const fn of editor.events[name] || []) { - tryCatch(fn, ...args); - } - }, - - on(name, fn) { - (editor.events[name] || ( - editor.events[name] = new Set() - )).add(fn); - }, - updateClass() { document.documentElement.classList.toggle('is-new-style', !editor.style.id); }, @@ -65,19 +51,6 @@ const editor = { }, }; -editor.on('styleUpdated', (newStyle, reason) => { - if (reason === 'config') { - delete newStyle.sourceCode; - delete newStyle.sections; - delete newStyle.name; - delete newStyle.enabled; - Object.assign(editor.style, newStyle); - editor.updateLivePreview(); - } else if (reason !== 'new') { - editor.replaceStyle(newStyle); - } -}); - //#region pre-init const baseInit = (() => { diff --git a/edit/edit.css b/edit/edit.css index 04756c39..ffebe4fe 100644 --- a/edit/edit.css +++ b/edit/edit.css @@ -34,6 +34,7 @@ a:hover { } html.is-new-style #preview-label, +html.is-new-style #style-cfg-btn, html.is-new-style #publish, .hidden { display: none !important; diff --git a/edit/edit.js b/edit/edit.js index 33fe1f43..72546a82 100644 --- a/edit/edit.js +++ b/edit/edit.js @@ -74,14 +74,7 @@ msg.onExtension(request => { switch (request.method) { case 'styleUpdated': if (editor.style.id === style.id && !IGNORE_UPDATE_REASONS.includes(request.reason)) { - if (request.reason === 'toggle') { - editor.emit('styleToggled', request.style); - } else { - API.styles.get(request.style.id) - .then(style => { - editor.emit('styleUpdated', style, request.reason); - }); - } + handleExternalUpdate(request); } break; case 'styleDeleted': @@ -95,6 +88,31 @@ msg.onExtension(request => { } }); +async function handleExternalUpdate({style, reason}) { + if (reason === 'toggle') { + if (editor.dirty.isDirty()) { + editor.toggleStyle(style.enabled); + } else { + Object.assign(editor.style, style); + } + editor.updateMeta(); + editor.updateLivePreview(); + return; + } + style = await API.styles.get(style.id); + if (reason === 'config') { + delete style.sourceCode; + delete style.sections; + delete style.name; + delete style.enabled; + Object.assign(editor.style, style); + editor.updateLivePreview(); + } else { + await editor.replaceStyle(style); + } + editor.updateSettings(); +} + window.on('beforeunload', e => { let pos; if (editor.isWindowed && diff --git a/edit/sections-editor.js b/edit/sections-editor.js index 6530f35e..deba1520 100644 --- a/edit/sections-editor.js +++ b/edit/sections-editor.js @@ -23,7 +23,7 @@ function SectionsEditor() { let headerOffset; // in compact mode the header is at the top so it reduces the available height let cmExtrasHeight; // resize grip + borders - updateHeader(); + updateMeta(); rerouteHotkeys.toggle(true); // enabled initially because we don't always focus a CodeMirror editor.livePreview.init(); container.classList.add('section-editor'); @@ -44,6 +44,7 @@ function SectionsEditor() { closestVisible, updateLivePreview, + updateMeta, getEditors() { return sections.filter(s => !s.removed).map(s => s.cm); @@ -90,7 +91,7 @@ function SectionsEditor() { await initSections(newStyle.sections, {replace: true}); Object.assign(style, newStyle); editor.updateClass(); - updateHeader(); + updateMeta(); // Go from new style URL to edit style URL if (style.id && !/[&?]id=/.test(location.search)) { history.replaceState({}, document.title, `${location.pathname}?id=${style.id}`); @@ -108,9 +109,6 @@ function SectionsEditor() { } newStyle = await API.styles.editSave(newStyle); destroyRemovedSections(); - if (!style.id) { - editor.emit('styleUpdated', newStyle, 'new'); - } sessionStore.justEditedStyleId = newStyle.id; editor.replaceStyle(newStyle, false); }, @@ -128,16 +126,6 @@ function SectionsEditor() { editor.ready = initSections(style.sections); - editor.on('styleToggled', newStyle => { - if (!dirty.isDirty()) { - Object.assign(style, newStyle); - } else { - editor.toggleStyle(newStyle.enabled); - } - updateHeader(); - updateLivePreview(); - }); - /** @param {EditorSection} section */ function fitToContent(section) { const {cm, cm: {display: {wrapper, sizer}}} = section; @@ -477,7 +465,7 @@ function SectionsEditor() { } } - function updateHeader() { + function updateMeta() { $('#name').value = style.customName || style.name || ''; $('#enabled').checked = style.enabled !== false; $('#url').href = style.url || ''; diff --git a/edit/settings.js b/edit/settings.js index f74037a4..ccf44363 100644 --- a/edit/settings.js +++ b/edit/settings.js @@ -7,7 +7,7 @@ 'use strict'; function StyleSettings() { - let {style} = editor; + const {style} = editor; const ui = t.template.styleSettings.cloneNode(true); const inputs = [ createInput('.style-update-url input', () => style.updateUrl || '', @@ -19,8 +19,9 @@ function StyleSettings() { ['.style-exclude', 'exclusions'], ].map(createArea), ]; - update(style); - editor.on('styleUpdated', update); + (editor.updateSettings = () => { + inputs.forEach(i => i.update()); + })(); helpPopup.show(t('styleSettings'), $create([ ui, $create('.buttons', [ @@ -39,13 +40,6 @@ function StyleSettings() { return list.filter(Boolean); } - function update(newStyle, reason) { - if (!newStyle.id) return; - if (reason === 'editSave') return; - style = newStyle; - inputs.forEach(i => i.update()); - } - function createArea([parentSel, type]) { const sel = parentSel + ' textarea'; const el = $(sel, ui); diff --git a/edit/source-editor.js b/edit/source-editor.js index 198887f0..9c7a1415 100644 --- a/edit/source-editor.js +++ b/edit/source-editor.js @@ -45,6 +45,7 @@ function SourceEditor() { sections: sectionFinder.sections, replaceStyle, updateLivePreview, + updateMeta, closestVisible: () => cm, getEditors: () => [cm], getEditorTitle: () => '', @@ -70,9 +71,6 @@ function SourceEditor() { messageBoxProxy.alert(t('usercssAvoidOverwriting'), 'danger', t('genericError')); } else { res = await API.usercss.editSave({customName, enabled, id, sourceCode}); - if (!id) { - editor.emit('styleUpdated', res.style, 'new'); - } // Awaiting inside `try` so that exceptions go to our `catch` await replaceStyle(res.style); } @@ -116,15 +114,6 @@ function SourceEditor() { if (!$isTextInput(document.activeElement)) { cm.focus(); } - editor.on('styleToggled', newStyle => { - if (dirty.isDirty()) { - editor.toggleStyle(newStyle.enabled); - } else { - style.enabled = newStyle.enabled; - } - updateMeta(); - updateLivePreview(); - }); async function preprocess(style) { const res = await API.usercss.build({ @@ -220,7 +209,7 @@ function SourceEditor() { cm.setPreprocessor((style.usercssData || {}).preprocessor); } - function replaceStyle(newStyle) { + async function replaceStyle(newStyle) { dirty.clear('name'); const sameCode = newStyle.sourceCode === cm.getValue(); if (sameCode) { @@ -232,8 +221,8 @@ function SourceEditor() { return; } - Promise.resolve(messageBoxProxy.confirm(t('styleUpdateDiscardChanges'))).then(ok => { - if (!ok) return; + // TODO: also confirm in sections-editor? + if (await messageBoxProxy.confirm(t('styleUpdateDiscardChanges'))) { updateEnvironment(); if (!sameCode) { const cursor = cm.getCursor(); @@ -246,7 +235,7 @@ function SourceEditor() { updateLivePreview(); } dirty.clear(); - }); + } function updateEnvironment() { if (style.id !== newStyle.id) {