From 8709451e74d3bcad7e058fd63ac4f13ef774f521 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 2 Jul 2025 16:18:07 +0300 Subject: [PATCH 1/3] update component preview on render --- src/components/component_preview/component_preview.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/component_preview/component_preview.js b/src/components/component_preview/component_preview.js index 5e25ded23..769490092 100644 --- a/src/components/component_preview/component_preview.js +++ b/src/components/component_preview/component_preview.js @@ -27,6 +27,9 @@ export default { randomSeed: genRandomSeed() } }, + mounted () { + this.update() + }, computed: { hideControls () { return typeof this.shadow === 'string' From b94d495fd50a37c2c423c9c96fde05e8b09953ba Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 2 Jul 2025 16:58:08 +0300 Subject: [PATCH 2/3] small fix --- src/components/settings_modal/tabs/style_tab/style_tab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js index ec397ec67..eed1d644e 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.js +++ b/src/components/settings_modal/tabs/style_tab/style_tab.js @@ -667,7 +667,7 @@ export default { }) exports.clearStyle = () => { - onImport(interfaceStore().styleDataUsed) + onImport(interfaceStore.styleDataUsed) } exports.exportStyle = () => { From e22eefa1d40a312804311b122de1ab98fcc3b885 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 2 Jul 2025 17:10:54 +0300 Subject: [PATCH 3/3] reduce copypasta --- index.html | 25 +++++++++++++------ .../component_preview/component_preview.js | 12 ++------- .../settings_modal/tabs/appearance_tab.js | 5 +++- .../tabs/style_tab/style_tab.js | 15 +++-------- src/services/style_setter/style_setter.js | 15 +++++++---- 5 files changed, 37 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index be9c0e886..899a0efd3 100644 --- a/index.html +++ b/index.html @@ -11,17 +11,26 @@ - - - - - - - - + + + + + + + + + + + + + + + + + diff --git a/src/components/component_preview/component_preview.js b/src/components/component_preview/component_preview.js index 769490092..cf098c0a3 100644 --- a/src/components/component_preview/component_preview.js +++ b/src/components/component_preview/component_preview.js @@ -2,6 +2,7 @@ import Checkbox from 'src/components/checkbox/checkbox.vue' import ColorInput from 'src/components/color_input/color_input.vue' import genRandomSeed from 'src/services/random_seed/random_seed.service.js' +import { createStyleSheet } from 'src/services/style_setter/style_setter.js' export default { components: { @@ -51,18 +52,9 @@ export default { this.$emit('update:shadow', { axis, value: Number(value) }) }, update () { - let styleEl = document.getElementById('component-style-holder') - if (!styleEl.sheet) { - styleEl = document.getElementById('component-style-holder') - } - const styleSheet = styleEl.sheet - - for (let i = styleSheet.cssRules.length - 1; i >= 0; --i) { - styleSheet.deleteRule(i) - } + const styleSheet = createStyleSheet('component-style-holder').sheet const result = [] - if (this.colorOverride) result.push(`--background: ${this.colorOverride}`) const styleRule = [ diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js index 9067ac300..a2ebb44a7 100644 --- a/src/components/settings_modal/tabs/appearance_tab.js +++ b/src/components/settings_modal/tabs/appearance_tab.js @@ -410,7 +410,10 @@ const AppearanceTab = { this.compilationCache[key] = theme3 } - const styleEl = document.getElementById('theme-preview-holder') + let styleEl = document.getElementById('theme-previews-holder') + if (!styleEl.sheet) { + styleEl = document.getElementById('theme-previews-holder-link') + } const styleSheet = styleEl.sheet styleSheet.insertRule([ '#theme-preview-', diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js index eed1d644e..42882e67f 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.js +++ b/src/components/settings_modal/tabs/style_tab/style_tab.js @@ -1,6 +1,6 @@ -import { ref, reactive, computed, watch, watchEffect, provide, getCurrentInstance } from 'vue' +import { ref, reactive, computed, watch, provide, getCurrentInstance } from 'vue' import { useInterfaceStore } from 'src/stores/interface' -import { get, set, unset, throttle } from 'lodash' +import { get, set, unset } from 'lodash' import Select from 'src/components/select/select.vue' import SelectMotion from 'src/components/select/select_motion.vue' @@ -23,6 +23,7 @@ import { init, findColor } from 'src/services/theme_data/theme_data_3.service.js import { getCssRules } from 'src/services/theme_data/css_utils.js' import { serialize } from 'src/services/theme_data/iss_serializer.js' import { deserializeShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js' +import { createStyleSheet } from 'src/services/style_setter/style_setter.js' import { rgb2hex, hex2rgb, @@ -694,15 +695,7 @@ export default { return } - let styleEl = document.getElementById('editor-overall-holder') - if (!styleEl.sheet) { - styleEl = document.getElementById('editor-overall-holder-link') - } - const styleSheet = styleEl.sheet - - for (let i = styleSheet.cssRules.length - 1; i >= 0; --i) { - styleSheet.deleteRule(i) - } + const styleSheet = createStyleSheet('editor-overall-holder') styleSheet.insertRule([ '#edited-style-preview {\n', diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 3d85db3aa..a68978a9d 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -6,9 +6,11 @@ import localforage from 'localforage' // On platforms where this is not supported, it will return undefined // Otherwise it will return an array -const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets +const supportsAdoptedStyleSheets = false //!!document.adoptedStyleSheets -const createStyleSheet = (id) => { +const adoptedStyleSheets = {} + +export const createStyleSheet = (id) => { if (supportsAdoptedStyleSheets) { return { el: null, @@ -17,7 +19,10 @@ const createStyleSheet = (id) => { } } - const el = document.getElementById(id) + let el = document.getElementById(id) + if (!el?.sheet) { + el = document.getElementById(id + '-link') + } // Clear all rules in it for (let i = el.sheet.cssRules.length - 1; i >= 0; --i) { el.sheet.deleteRule(i) @@ -32,6 +37,7 @@ const createStyleSheet = (id) => { const EAGER_STYLE_ID = 'pleroma-eager-styles' const LAZY_STYLE_ID = 'pleroma-lazy-styles' +const THEME_HOLDER_ID = 'theme-holder' const adoptStyleSheets = (styles) => { if (supportsAdoptedStyleSheets) { @@ -239,8 +245,7 @@ export const applyConfig = (input) => { .filter(([, v]) => v) .map(([k, v]) => `--${k}: ${v}`).join(';') - const styleEl = document.getElementById('theme-holder') - const styleSheet = styleEl.sheet + const styleSheet = createStyleSheet(THEME_HOLDER_ID).sheet styleSheet.insertRule(`:root { ${rules} }`, 'index-max')