No OneTemporary
Actions

Size

31 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
	index 2c10238edd..670a9904a6 100644
	--- a/src/services/style_setter/style_setter.js
	+++ b/src/services/style_setter/style_setter.js
	@@ -1,322 +1,323 @@
	import { init, getEngineChecksum } from '../theme_data/theme_data_3.service.js'
	import { getCssRules } from '../theme_data/css_utils.js'
	import { defaultState } from 'src/modules/default_config_state.js'
	import { chunk, throttle } from 'lodash'
	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 stylesheets = {}

	export const createStyleSheet = (id, priority = 1000) => {
	if (stylesheets[id]) return stylesheets[id]
	const newStyleSheet = {
	rules: [],
	ready: false,
	priority,
	clear () {
	this.rules = []
	},
	addRule (rule) {
	let newRule = rule
	if (!CSS.supports?.('backdrop-filter', 'blur()')) {
	newRule = newRule.replace(/backdrop-filter:[^;]+;/g, '') // Remove backdrop-filter
	}

	// firefox doesn't like invalid selectors
	if (!CSS.supports?.('selector(::-webkit-scrollbar)') && newRule.startsWith('::-webkit')) {
	return
	}
	this.rules.push(
	newRule
	.replace(/var$--shadowFilter$[^;]*;/g, '') // Remove shadowFilter references
	)
	}
	}

	stylesheets[id] = newStyleSheet
	return newStyleSheet
	}


	export const adoptStyleSheets = throttle(() => {
	+ console.log('adopt')
	if (supportsAdoptedStyleSheets) {
	document.adoptedStyleSheets = Object
	.values(stylesheets)
	.filter(x => x.ready)
	.sort((a, b) => a.priority - b.priority)
	.map(sheet => {
	const css = new CSSStyleSheet()
	sheet.rules.forEach(r => css.insertRule(r))
	return css
	})
	} else {
	const holder = document.getElementById('custom-styles-holder')

	for (let i = holder.sheet.cssRules.length - 1; i >= 0; --i) {
	holder.sheet.deleteRule(i)
	}

	Object
	.values(stylesheets)
	.filter(x => x.ready)
	.sort((a, b) => a.priority - b.priority)
	.forEach(sheet => {
	sheet.rules.forEach(r => holder.sheet.insertRule(r))
	})
	}
	// Some older browsers do not support document.adoptedStyleSheets.
	// In this case, we use the <style> elements.
	// Since the <style> elements we need are already in the DOM, there
	// is nothing to do here.
	}, 500)


	const EAGER_STYLE_ID = 'pleroma-eager-styles'
	const LAZY_STYLE_ID = 'pleroma-lazy-styles'

	export const generateTheme = (inputRuleset, callbacks, debug) => {
	const {
	onNewRule = () => {},
	onLazyFinished = () => {},
	onEagerFinished = () => {}
	} = callbacks

	const themes3 = init({
	inputRuleset,
	- debug: true
	+ debug
	})

	getCssRules(themes3.eager, debug).forEach(rule => {
	// Hacks to support multiple selectors on same component
	onNewRule(rule, false)
	})
	onEagerFinished()

	// Optimization - instead of processing all lazy rules in one go, process them in small chunks
	// so that UI can do other things and be somewhat responsive while less important rules are being
	// processed
	let counter = 0
	const chunks = chunk(themes3.lazy, 200)
	// let t0 = performance.now()
	const processChunk = () => {
	const chunk = chunks[counter]
	Promise.all(chunk.map(x => x())).then(result => {
	getCssRules(result.filter(x => x), debug).forEach(rule => {
	onNewRule(rule, true)
	})
	// const t1 = performance.now()
	// console.debug('Chunk ' + counter + ' took ' + (t1 - t0) + 'ms')
	// t0 = t1
	counter += 1
	if (counter < chunks.length) {
	setTimeout(processChunk, 0)
	} else {
	onLazyFinished()
	}
	})
	}

	return { lazyProcessFunc: processChunk }
	}

	export const tryLoadCache = async () => {
	console.info('Trying to load compiled theme data from cache')
	const cache = await localforage.getItem('pleromafe-theme-cache')
	if (!cache) return null
	try {
	if (cache.engineChecksum === getEngineChecksum()) {
	const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
	const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)

	cache.data[0].forEach(rule => eagerStyles.addRule(rule))
	cache.data[1].forEach(rule => lazyStyles.addRule(rule))

	eagerStyles.ready = true
	lazyStyles.ready = true

	- // Don't do this, we need to wait until config adopts its styles first
	- //adoptStyleSheets()
	+ adoptStyleSheets()

	console.info(`Loaded theme from cache`)
	return true
	} else {
	console.warn('Engine checksum doesn\'t match, cache not usable, clearing')
	localStorage.removeItem('pleroma-fe-theme-cache')
	}
	} catch (e) {
	console.error('Failed to load theme cache:', e)
	return false
	}
	}

	export const applyTheme = (
	input,
	onEagerFinish = () => {},
	onFinish = () => {},
	debug
	) => {
	const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
	const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)

	eagerStyles.clear()
	lazyStyles.clear()

	const { lazyProcessFunc } = generateTheme(
	input,
	{
	onNewRule (rule, isLazy) {
	if (isLazy) {
	lazyStyles.addRule(rule)
	} else {
	eagerStyles.addRule(rule)
	}
	},
	onEagerFinished () {
	eagerStyles.ready = true
	adoptStyleSheets()
	onEagerFinish()
	console.info('Eager part of theme finished, waiting for lazy part to finish to store cache')
	},
	onLazyFinished () {
	lazyStyles.ready = true
	adoptStyleSheets()
	const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
	onFinish(cache)
	localforage.setItem('pleromafe-theme-cache', cache)
	console.info('Theme cache stored')
	}
	},
	debug
	)

	setTimeout(lazyProcessFunc, 0)
	}

	const extractStyleConfig = ({
	sidebarColumnWidth,
	contentColumnWidth,
	notifsColumnWidth,
	themeEditorMinWidth,
	emojiReactionsScale,
	emojiSize,
	navbarSize,
	panelHeaderSize,
	textSize,
	forcedRoundness
	}) => {
	const result = {
	sidebarColumnWidth,
	contentColumnWidth,
	notifsColumnWidth,
	themeEditorMinWidth: parseInt(themeEditorMinWidth) === 0 ? 'fit-content' : themeEditorMinWidth,
	emojiReactionsScale,
	emojiSize,
	navbarSize,
	panelHeaderSize,
	textSize
	}

	switch (forcedRoundness) {
	case 'disable':
	break
	case '0':
	result.forcedRoundness = '0'
	break
	case '1':
	result.forcedRoundness = '1px'
	break
	case '2':
	result.forcedRoundness = '0.4rem'
	break
	default:
	}

	return result
	}

	const defaultStyleConfig = extractStyleConfig(defaultState)

	export const applyConfig = (input) => {
	const config = extractStyleConfig(input)

	if (config === defaultStyleConfig) {
	return
	}

	const rules = Object
	.entries(config)
	.filter(([, v]) => v)
	.map(([k, v]) => `--${k}: ${v}`).join(';')

	const styleSheet = createStyleSheet('theme-holder', 30)

	+ styleSheet.clear()
	styleSheet.addRule(`:root { ${rules} }`)

	// TODO find a way to make this not apply to theme previews
	if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) {
	styleSheet.addRule(` *:not(.preview-block) {
	--roundness: var(--forcedRoundness) !important;
	}`)
	}
	styleSheet.ready = true
	adoptStyleSheets()
	}

	export const getResourcesIndex = async (url, parser = JSON.parse) => {
	const cache = 'no-store'
	const customUrl = url.replace(/\.(\w+)$/, '.custom.$1')
	let builtin
	let custom

	const resourceTransform = (resources) => {
	return Object
	.entries(resources)
	.map(([k, v]) => {
	if (typeof v === 'object') {
	return [k, () => Promise.resolve(v)]
	} else if (typeof v === 'string') {
	return [
	k,
	() => window
	.fetch(v, { cache })
	.then(data => data.text())
	.then(text => parser(text))
	.catch(e => {
	console.error(e)
	return null
	})
	]
	} else {
	console.error(`Unknown resource format - ${k} is a ${typeof v}`)
	return [k, null]
	}
	})
	}

	try {
	const builtinData = await window.fetch(url, { cache })
	const builtinResources = await builtinData.json()
	builtin = resourceTransform(builtinResources)
	} catch {
	builtin = []
	console.warn(`Builtin resources at ${url} unavailable`)
	}

	try {
	const customData = await window.fetch(customUrl, { cache })
	const customResources = await customData.json()
	custom = resourceTransform(customResources)
	} catch {
	custom = []
	console.warn(`Custom resources at ${customUrl} unavailable`)
	}

	const total = [...custom, ...builtin]
	if (total.length === 0) {
	return Promise.reject(new Error(`Resource at ${url} and ${customUrl} completely unavailable. Panicking`))
	}
	return Promise.resolve(Object.fromEntries(total))
	}
	diff --git a/src/stores/interface.js b/src/stores/interface.js
	index b2aa9d8e65..56999217fd 100644
	--- a/src/stores/interface.js
	+++ b/src/stores/interface.js
	@@ -1,687 +1,688 @@
	import { defineStore } from 'pinia'

	import { CURRENT_VERSION, generatePreset } from 'src/services/theme_data/theme_data.service.js'
	import { getResourcesIndex, applyTheme, tryLoadCache } from '../services/style_setter/style_setter.js'
	import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
	import { deserialize } from '../services/theme_data/iss_deserializer.js'

	export const useInterfaceStore = defineStore('interface', {
	state: () => ({
	localFonts: null,
	themeApplied: false,
	themeChangeInProgress: false,
	themeVersion: 'v3',
	styleNameUsed: null,
	styleDataUsed: null,
	useStylePalette: false, // hack for applying styles from appearance tab
	paletteNameUsed: null,
	paletteDataUsed: null,
	themeNameUsed: null,
	themeDataUsed: null,
	temporaryChangesTimeoutId: null, // used for temporary options that revert after a timeout
	temporaryChangesConfirm: () => {}, // used for applying temporary options
	temporaryChangesRevert: () => {}, // used for reverting temporary options
	settingsModalState: 'hidden',
	settingsModalLoadedUser: false,
	settingsModalLoadedAdmin: false,
	settingsModalTargetTab: null,
	settingsModalMode: 'user',
	settings: {
	currentSaveStateNotice: null,
	noticeClearTimeout: null,
	notificationPermission: null
	},
	browserSupport: {
	cssFilter: window.CSS && window.CSS.supports && (
	window.CSS.supports('filter', 'drop-shadow(0 0)') \|\|
	window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
	),
	localFonts: typeof window.queryLocalFonts === 'function'
	},
	layoutType: 'normal',
	globalNotices: [],
	layoutHeight: 0,
	lastTimeline: null
	}),
	actions: {
	setTemporaryChanges ({ timeoutId, confirm, revert }) {
	this.temporaryChangesTimeoutId = timeoutId
	this.temporaryChangesConfirm = confirm
	this.temporaryChangesRevert = revert
	},
	clearTemporaryChanges () {
	clearTimeout(this.temporaryChangesTimeoutId)
	this.temporaryChangesTimeoutId = null
	this.temporaryChangesConfirm = () => {}
	this.temporaryChangesRevert = () => {}
	},
	setPageTitle (option = '') {
	try {
	document.title = `${option} ${window.vuex.state.instance.name}`
	} catch (error) {
	console.error(`${error}`)
	}
	},
	settingsSaved ({ success, error }) {
	if (success) {
	if (this.noticeClearTimeout) {
	clearTimeout(this.noticeClearTimeout)
	}
	this.settings.currentSaveStateNotice = { error: false, data: success }
	this.settings.noticeClearTimeout = setTimeout(() => delete this.settings.currentSaveStateNotice, 2000)
	} else {
	this.settings.currentSaveStateNotice = { error: true, errorData: error }
	}
	},
	setNotificationPermission (permission) {
	this.notificationPermission = permission
	},
	closeSettingsModal () {
	this.settingsModalState = 'hidden'
	},
	openSettingsModal (value) {
	this.settingsModalMode = value
	this.settingsModalState = 'visible'
	if (value === 'user') {
	if (!this.settingsModalLoadedUser) {
	this.settingsModalLoadedUser = true
	}
	} else if (value === 'admin') {
	if (!this.settingsModalLoadedAdmin) {
	this.settingsModalLoadedAdmin = true
	}
	}
	},
	togglePeekSettingsModal () {
	switch (this.settingsModalState) {
	case 'minimized':
	this.settingsModalState = 'visible'
	return
	case 'visible':
	this.settingsModalState = 'minimized'
	return
	default:
	throw new Error('Illegal minimization state of settings modal')
	}
	},
	clearSettingsModalTargetTab () {
	this.settingsModalTargetTab = null
	},
	openSettingsModalTab (value, mode = 'user') {
	this.settingsModalTargetTab = value
	this.openSettingsModal(mode)
	},
	removeGlobalNotice (notice) {
	this.globalNotices = this.globalNotices.filter(n => n !== notice)
	},
	pushGlobalNotice (
	{
	messageKey,
	messageArgs = {},
	level = 'error',
	timeout = 0
	}) {
	const notice = {
	messageKey,
	messageArgs,
	level
	}

	this.globalNotices.push(notice)

	// Adding a new element to array wraps it in a Proxy, which breaks the comparison
	// TODO: Generate UUID or something instead or relying on !== operator?
	const newNotice = this.globalNotices[this.globalNotices.length - 1]
	if (timeout) {
	setTimeout(() => this.removeGlobalNotice(newNotice), timeout)
	}

	return newNotice
	},
	setLayoutHeight (value) {
	this.layoutHeight = value
	},
	setLayoutWidth (value) {
	let width = value
	if (value !== undefined) {
	this.layoutWidth = value
	} else {
	width = this.layoutWidth
	}

	const mobileLayout = width <= 800
	const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
	const { thirdColumnMode } = window.vuex.getters.mergedConfig
	if (thirdColumnMode === 'none' \|\| !window.vuex.state.users.currentUser) {
	this.layoutType = normalOrMobile
	} else {
	const wideLayout = width >= 1300
	this.layoutType = wideLayout ? 'wide' : normalOrMobile
	}
	},
	setFontsList (value) {
	this.localFonts = [...(new Set(value.map(font => font.family))).values()]
	},
	queryLocalFonts () {
	if (this.localFonts !== null) return
	this.setFontsList([])

	if (!this.browserSupport.localFonts) {
	return
	}
	window
	.queryLocalFonts()
	.then((fonts) => {
	this.setFontsList(fonts)
	})
	.catch((e) => {
	this.pushGlobalNotice({
	messageKey: 'settings.style.themes3.font.font_list_unavailable',
	messageArgs: {
	error: e
	},
	level: 'error'
	})
	})
	},
	setLastTimeline (value) {
	this.lastTimeline = value
	},
	async fetchPalettesIndex () {
	try {
	const value = await getResourcesIndex('/static/palettes/index.json')
	window.vuex.commit('setInstanceOption', { name: 'palettesIndex', value })
	return value
	} catch (e) {
	console.error('Could not fetch palettes index', e)
	window.vuex.commit('setInstanceOption', { name: 'palettesIndex', value: { _error: e } })
	return Promise.resolve({})
	}
	},
	setPalette (value) {
	this.resetThemeV3Palette()
	this.resetThemeV2()

	window.vuex.commit('setOption', { name: 'palette', value })

	this.applyTheme({ recompile: true })
	},
	setPaletteCustom (value) {
	this.resetThemeV3Palette()
	this.resetThemeV2()

	window.vuex.commit('setOption', { name: 'paletteCustomData', value })

	this.applyTheme({ recompile: true })
	},
	async fetchStylesIndex () {
	try {
	const value = await getResourcesIndex(
	'/static/styles/index.json',
	deserialize
	)
	window.vuex.commit('setInstanceOption', { name: 'stylesIndex', value })
	return value
	} catch (e) {
	console.error('Could not fetch styles index', e)
	window.vuex.commit('setInstanceOption', { name: 'stylesIndex', value: { _error: e } })
	return Promise.resolve({})
	}
	},
	setStyle (value) {
	this.resetThemeV3()
	this.resetThemeV2()
	this.resetThemeV3Palette()

	window.vuex.commit('setOption', { name: 'style', value })
	this.useStylePalette = true

	this.applyTheme({ recompile: true }).then(() => {
	this.useStylePalette = false
	})
	},
	setStyleCustom (value) {
	this.resetThemeV3()
	this.resetThemeV2()
	this.resetThemeV3Palette()

	window.vuex.commit('setOption', { name: 'styleCustomData', value })

	this.useStylePalette = true
	this.applyTheme({ recompile: true }).then(() => {
	this.useStylePalette = false
	})
	},
	async fetchThemesIndex () {
	try {
	const value = await getResourcesIndex('/static/styles.json')
	window.vuex.commit('setInstanceOption', { name: 'themesIndex', value })
	return value
	} catch (e) {
	console.error('Could not fetch themes index', e)
	window.vuex.commit('setInstanceOption', { name: 'themesIndex', value: { _error: e } })
	return Promise.resolve({})
	}
	},
	setTheme (value) {
	this.resetThemeV3()
	this.resetThemeV3Palette()
	this.resetThemeV2()

	window.vuex.commit('setOption', { name: 'theme', value })

	this.applyTheme({ recompile: true })
	},
	setThemeCustom (value) {
	this.resetThemeV3()
	this.resetThemeV3Palette()
	this.resetThemeV2()

	window.vuex.commit('setOption', { name: 'customTheme', value })
	window.vuex.commit('setOption', { name: 'customThemeSource', value })

	this.applyTheme({ recompile: true })
	},
	resetThemeV3 () {
	window.vuex.commit('setOption', { name: 'style', value: null })
	window.vuex.commit('setOption', { name: 'styleCustomData', value: null })
	},
	resetThemeV3Palette () {
	window.vuex.commit('setOption', { name: 'palette', value: null })
	window.vuex.commit('setOption', { name: 'paletteCustomData', value: null })
	},
	resetThemeV2 () {
	window.vuex.commit('setOption', { name: 'theme', value: null })
	window.vuex.commit('setOption', { name: 'customTheme', value: null })
	window.vuex.commit('setOption', { name: 'customThemeSource', value: null })
	},
	async getThemeData () {
	const getData = async (resource, index, customData, name) => {
	const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
	const result = {}

	if (customData) {
	result.nameUsed = 'custom' // custom data overrides name
	result.dataUsed = customData
	} else {
	result.nameUsed = name

	if (result.nameUsed == null) {
	result.dataUsed = null
	return result
	}

	let fetchFunc = index[result.nameUsed]
	// Fallbacks
	if (!fetchFunc) {
	if (resource === 'style' \|\| resource === 'palette') {
	return result
	}
	const newName = Object.keys(index)[0]
	fetchFunc = index[newName]
	console.warn(`${capitalizedResource} with id '${this.styleNameUsed}' not found, trying back to '${newName}'`)
	if (!fetchFunc) {
	console.warn(`${capitalizedResource} doesn't have a fallback, defaulting to stock.`)
	fetchFunc = () => Promise.resolve(null)
	}
	}
	result.dataUsed = await fetchFunc()
	}
	return result
	}

	const {
	style: instanceStyleName,
	palette: instancePaletteName
	} = window.vuex.state.instance

	let {
	theme: instanceThemeV2Name,
	themesIndex,
	stylesIndex,
	palettesIndex
	} = window.vuex.state.instance

	const {
	style: userStyleName,
	styleCustomData: userStyleCustomData,
	palette: userPaletteName,
	paletteCustomData: userPaletteCustomData
	} = window.vuex.state.config

	let {
	theme: userThemeV2Name,
	customTheme: userThemeV2Snapshot,
	customThemeSource: userThemeV2Source
	} = window.vuex.state.config

	let majorVersionUsed

	console.debug(
	`User V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}`
	)
	console.debug(
	`User V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}`
	)

	console.debug(`Instance V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`)
	console.debug('Instance V2 theme: ' + instanceThemeV2Name)

	if (userPaletteName \|\| userPaletteCustomData \|\|
	userStyleName \|\| userStyleCustomData \|\|
	(
	// User V2 overrides instance V3
	(instancePaletteName \|\|
	instanceStyleName) &&
	instanceThemeV2Name == null &&
	userThemeV2Name == null
	)
	) {
	// Palette and/or style overrides V2 themes
	instanceThemeV2Name = null
	userThemeV2Name = null
	userThemeV2Source = null
	userThemeV2Snapshot = null

	majorVersionUsed = 'v3'
	} else if (
	(userThemeV2Name \|\|
	userThemeV2Snapshot \|\|
	userThemeV2Source \|\|
	instanceThemeV2Name)
	) {
	majorVersionUsed = 'v2'
	} else {
	// if all fails fallback to v3
	majorVersionUsed = 'v3'
	}

	if (majorVersionUsed === 'v3') {
	const result = await Promise.all([
	this.fetchPalettesIndex(),
	this.fetchStylesIndex()
	])

	palettesIndex = result[0]
	stylesIndex = result[1]
	} else {
	// Promise.all just to be uniform with v3
	const result = await Promise.all([
	this.fetchThemesIndex()
	])

	themesIndex = result[0]
	}

	this.themeVersion = majorVersionUsed

	console.debug('Version used', majorVersionUsed)

	if (majorVersionUsed === 'v3') {
	this.themeDataUsed = null
	this.themeNameUsed = null

	const style = await getData(
	'style',
	stylesIndex,
	userStyleCustomData,
	userStyleName \|\| instanceStyleName
	)
	this.styleNameUsed = style.nameUsed
	this.styleDataUsed = style.dataUsed

	let firstStylePaletteName = null
	style
	.dataUsed
	?.filter(x => x.component === '@palette')
	.map(x => {
	const cleanDirectives = Object.fromEntries(
	Object
	.entries(x.directives)
	.filter(([k]) => k)
	)

	return { name: x.variant, ...cleanDirectives }
	})
	.forEach(palette => {
	const key = 'style.' + palette.name.toLowerCase().replace(/ /g, '_')
	if (!firstStylePaletteName) firstStylePaletteName = key
	palettesIndex[key] = () => Promise.resolve(palette)
	})

	const palette = await getData(
	'palette',
	palettesIndex,
	userPaletteCustomData,
	this.useStylePalette ? firstStylePaletteName : (userPaletteName \|\| instancePaletteName)
	)

	if (this.useStylePalette) {
	window.vuex.commit('setOption', { name: 'palette', value: firstStylePaletteName })
	}

	this.paletteNameUsed = palette.nameUsed
	this.paletteDataUsed = palette.dataUsed

	if (this.paletteDataUsed) {
	this.paletteDataUsed.link = this.paletteDataUsed.link \|\| this.paletteDataUsed.accent
	this.paletteDataUsed.accent = this.paletteDataUsed.accent \|\| this.paletteDataUsed.link
	}
	if (Array.isArray(this.paletteDataUsed)) {
	const [
	name,
	bg,
	fg,
	text,
	link,
	cRed = '#FF0000',
	cGreen = '#00FF00',
	cBlue = '#0000FF',
	cOrange = '#E3FF00'
	] = palette.dataUsed
	this.paletteDataUsed = {
	name,
	bg,
	fg,
	text,
	link,
	accent: link,
	cRed,
	cBlue,
	cGreen,
	cOrange
	}
	}
	console.debug('Palette data used', palette.dataUsed)
	} else {
	this.styleNameUsed = null
	this.styleDataUsed = null
	this.paletteNameUsed = null
	this.paletteDataUsed = null

	const theme = await getData(
	'theme',
	themesIndex,
	userThemeV2Source \|\| userThemeV2Snapshot,
	userThemeV2Name \|\| instanceThemeV2Name
	)
	this.themeNameUsed = theme.nameUsed
	this.themeDataUsed = theme.dataUsed
	}
	},
	async setThemeApplied () {
	this.themeApplied = true
	},
	async applyTheme (
	{ recompile = false } = {}
	) {
	+ console.log('Apply')
	const {
	forceThemeRecompilation,
	themeDebug,
	theme3hacks
	} = window.vuex.state.config
	this.themeChangeInProgress = true
	// If we're not forced to recompile try using
	// cache (tryLoadCache return true if load successful)

	const forceRecompile = forceThemeRecompilation \|\| recompile

	await this.getThemeData()

	if (!forceRecompile && !themeDebug && await tryLoadCache()) {
	this.themeChangeInProgress = false
	return this.setThemeApplied()
	}
	window.splashUpdate('splash.theme')

	try {
	const paletteIss = (() => {
	if (!this.paletteDataUsed) return null
	const result = {
	component: 'Root',
	directives: {}
	}

	Object
	.entries(this.paletteDataUsed)
	.filter(([k]) => k !== 'name')
	.forEach(([k, v]) => {
	let issRootDirectiveName
	switch (k) {
	case 'background':
	issRootDirectiveName = 'bg'
	break
	case 'foreground':
	issRootDirectiveName = 'fg'
	break
	default:
	issRootDirectiveName = k
	}
	result.directives['--' + issRootDirectiveName] = 'color \| ' + v
	})
	return result
	})()

	const theme2ruleset = this.themeDataUsed && convertTheme2To3(normalizeThemeData(this.themeDataUsed))
	const hacks = []

	Object.entries(theme3hacks).forEach(([key, value]) => {
	switch (key) {
	case 'fonts': {
	Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
	if (!font?.family) return
	switch (fontKey) {
	case 'interface':
	hacks.push({
	component: 'Root',
	directives: {
	'--font': 'generic \| ' + font.family
	}
	})
	break
	case 'input':
	hacks.push({
	component: 'Input',
	directives: {
	'--font': 'generic \| ' + font.family
	}
	})
	break
	case 'post':
	hacks.push({
	component: 'RichContent',
	directives: {
	'--font': 'generic \| ' + font.family
	}
	})
	break
	case 'monospace':
	hacks.push({
	component: 'Root',
	directives: {
	'--monoFont': 'generic \| ' + font.family
	}
	})
	break
	}
	})
	break
	}
	case 'underlay': {
	if (value !== 'none') {
	const newRule = {
	component: 'Underlay',
	directives: {}
	}
	if (value === 'opaque') {
	newRule.directives.opacity = 1
	newRule.directives.background = '--wallpaper'
	}
	if (value === 'transparent') {
	newRule.directives.opacity = 0
	}
	hacks.push(newRule)
	}
	break
	}
	}
	})

	const rulesetArray = [
	theme2ruleset,
	this.styleDataUsed,
	paletteIss,
	hacks
	].filter(x => x)

	return applyTheme(
	rulesetArray.flat(),
	() => this.setThemeApplied(),
	() => {
	this.themeChangeInProgress = false
	},
	themeDebug
	)
	} catch (e) {
	window.splashError(e)
	}
	}
	}
	})

	export const normalizeThemeData = (input) => {
	let themeData, themeSource

	if (input.themeFileVerison === 1) {
	// this might not be even used at all, some leftover of unimplemented code in V2 editor
	return generatePreset(input).theme
	} else if (
	Object.prototype.hasOwnProperty.call(input, '_pleroma_theme_version') \|\|
	Object.prototype.hasOwnProperty.call(input, 'source') \|\|
	Object.prototype.hasOwnProperty.call(input, 'theme')
	) {
	// We got passed a full theme file
	themeData = input.theme
	themeSource = input.source
	} else if (
	Object.prototype.hasOwnProperty.call(input, 'themeEngineVersion') \|\|
	Object.prototype.hasOwnProperty.call(input, 'colors')
	) {
	// We got passed a source/snapshot
	themeData = input
	themeSource = input
	}
	// New theme presets don't have 'theme' property, they use 'source'

	let out // shout, shout let it all out
	if (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION) {
	// There are some themes in wild that have completely broken source
	out = { ...(themeData \|\| {}), ...themeSource }
	} else {
	out = themeData
	}

	// generatePreset here basically creates/updates "snapshot",
	// while also fixing the 2.2 -> 2.3 colors/shadows/etc
	return generatePreset(out).theme
	}

File Metadata

Mime Type: text/x-diff
Expires: Thu, Jun 4, 6:33 PM (1 d, 20 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1539145
Default Alt Text: (31 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions