backwards compat WORKING

This commit is contained in:
Henry Jameson 2024-02-20 01:05:17 +02:00
parent 0285efadbb
commit 2172529dd0
2 changed files with 214 additions and 10 deletions

View File

@ -4,9 +4,6 @@ import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/th
import { init } from '../theme_data/theme_data_3.service.js' import { init } from '../theme_data/theme_data_3.service.js'
import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js' import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
import { getCssRules } from '../theme_data/css_utils.js' import { getCssRules } from '../theme_data/css_utils.js'
import {
sampleRules
} from 'src/services/theme_data/pleromafe.t3.js'
import { defaultState } from '../../modules/config.js' import { defaultState } from '../../modules/config.js'
export const applyTheme = (input) => { export const applyTheme = (input) => {
@ -16,7 +13,8 @@ export const applyTheme = (input) => {
const t1 = performance.now() const t1 = performance.now()
console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms') console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
const extraRules = convertTheme2To3(theme) const extraRules = convertTheme2To3(theme)
const themes3 = init([...sampleRules, ...extraRules]) console.log(extraRules)
const themes3 = init(extraRules)
const t2 = performance.now() const t2 = performance.now()
console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms') console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
const head = document.head const head = document.head

View File

@ -27,6 +27,18 @@ export const shadowsKeys = new Set([
'input' 'input'
]) ])
export const radiiKeys = new Set([
'btn',
'input',
// 'checkbox',
'panel',
'avatar',
'avatarAlt',
'tooltip',
'attachment',
'chatMessage'
])
// Keys that are not available in editor and never meant to be edited // Keys that are not available in editor and never meant to be edited
export const hiddenKeys = new Set([ export const hiddenKeys = new Set([
'profileBg', 'profileBg',
@ -43,12 +55,13 @@ export const extendedBasePrefixes = [
'panel', 'panel',
'topBar', 'topBar',
'tab', // 'tab', // TODO: not implemented yet
'btn', 'btn',
'input', 'input',
'selectedMenu', 'selectedMenu',
'alert', 'alert',
'alertPopup',
'badge', 'badge',
'post', 'post',
@ -56,15 +69,31 @@ export const extendedBasePrefixes = [
'poll', 'poll',
'chatBg', 'chatBg',
'chatMessageIncoming', 'chatMessage'
'chatMessageOutgoing'
] ]
export const nonComponentPrefixes = new Set([
'border',
'icon',
'highlight',
'lightText',
'chatBg'
])
export const extendedBaseKeys = Object.fromEntries(extendedBasePrefixes.map(prefix => [prefix, allKeys.filter(k => k.startsWith(prefix))])) export const extendedBaseKeys = Object.fromEntries(
extendedBasePrefixes.map(prefix => [
prefix,
allKeys.filter(k => {
if (prefix === 'alert') {
return k.startsWith(prefix) && !k.startsWith('alertPopup')
}
return k.startsWith(prefix)
})
])
)
// Keysets that are only really used intermideately, i.e. to generate other colors // Keysets that are only really used intermideately, i.e. to generate other colors
export const temporary = new Set([ export const temporary = new Set([
'border', '',
'highlight' 'highlight'
]) ])
@ -80,6 +109,51 @@ export const convertTheme2To3 = (data) => {
} }
} }
const convertRadii = () => {
const newRules = []
radiiKeys.forEach(key => {
const originalRadius = data.radii[key]
const rule = {}
switch (key) {
case 'btn':
rule.component = 'Button'
break
case 'input':
rule.component = 'Input'
break
// TODO: missing feature?
// case 'checkbox':
// rule.component = 'Input'
// break
case 'panel':
rule.component = 'Panel'
break
case 'avatar':
rule.component = 'Avatar'
break
case 'avatarAlt':
rule.component = 'Avatar'
rule.variant = 'compact'
break
case 'tooltip':
rule.component = 'Popover'
break
case 'attachment':
rule.component = 'Attachment'
break
case 'ChatMessage':
rule.component = 'Button'
break
}
rule.directives = {
roundness: originalRadius
}
newRules.push(rule)
})
return newRules
}
const convertShadows = () => { const convertShadows = () => {
const newRules = [] const newRules = []
shadowsKeys.forEach(key => { shadowsKeys.forEach(key => {
@ -129,5 +203,137 @@ export const convertTheme2To3 = (data) => {
return newRules return newRules
} }
return [generateRoot(), ...convertShadows()] const extendedRules = Object.entries(extendedBaseKeys).map(([prefix, keys]) => {
if (nonComponentPrefixes.has(prefix)) return null
const rule = {}
if (prefix === 'alertPopup') {
rule.component = 'Alert'
rule.parent = { component: 'Popover' }
} else if (prefix === 'selectedPost') {
rule.component = 'Post'
rule.state = ['selected']
} else if (prefix === 'selectedMenu') {
rule.component = 'MenuItem'
rule.state = ['hover']
} else if (prefix === 'chatMessageIncoming') {
rule.component = 'ChatMessage'
} else if (prefix === 'chatMessageOutgoing') {
rule.component = 'ChatMessage'
rule.variant = 'outgoing'
} else if (prefix === 'panel') {
rule.component = 'PanelHeader'
} else if (prefix === 'topbar') {
rule.component = 'TopBar'
} else if (prefix === 'chatMessage') {
rule.component = 'ChatMessage'
} else if (prefix === 'poll') {
rule.component = 'PollGraph'
} else {
rule.component = prefix[0].toUpperCase() + prefix.slice(1).toLowerCase()
}
return keys.map((key) => {
const leftoverKey = key.replace(prefix, '')
const parts = (leftoverKey || 'Bg').match(/[A-Z][a-z]*/g)
const last = parts.slice(-1)[0]
let newRule = { directives: {} }
let variantArray = []
switch (last) {
case 'Text':
case 'Faint': // typo
case 'Link':
case 'Icon':
case 'Greentext':
case 'Cyantext':
case 'Border':
newRule.parent = rule
newRule.directives.textColor = data.colors[key]
variantArray = parts.slice(0, -1)
break
default:
newRule = { ...rule, directives: {} }
newRule.directives.background = data.colors[key]
variantArray = parts
break
}
if (last === 'Text' || last === 'Link') {
const secondLast = parts.slice(-2)[0]
if (secondLast === 'Light') {
return null // unsupported
} else if (secondLast === 'Faint') {
newRule.state = ['faint']
variantArray = parts.slice(0, -2)
}
}
switch (last) {
case 'Text':
case 'Link':
case 'Icon':
case 'Border':
newRule.component = last
break
case 'Greentext':
case 'Cyantext':
newRule.component = 'FunText'
newRule.variant = last.toLowerCase()
break
case 'Faint':
newRule.component = 'Text'
newRule.state = ['faint']
break
}
variantArray = variantArray.filter(x => x !== 'Bg')
if (last === 'Link' && prefix === 'selectedPost') {
// selectedPost has typo - duplicate 'Post'
variantArray = variantArray.filter(x => x !== 'Post')
}
if (prefix === 'popover' && variantArray[0] === 'Post') {
newRule.component = 'Post'
newRule.parent = { component: 'Popover' }
variantArray = variantArray.filter(x => x !== 'Post')
}
if (prefix === 'selectedMenu' && variantArray[0] === 'Popover') {
newRule.parent = { component: 'Popover' }
variantArray = variantArray.filter(x => x !== 'Popover')
}
switch (prefix) {
case 'btn':
case 'input':
case 'alert': {
const hasPanel = variantArray.find(x => x === 'Panel')
if (hasPanel) {
rule.parent = { component: 'PanelHeader' }
variantArray = variantArray.filter(x => x !== 'Panel')
}
const hasTop = variantArray.find(x => x === 'Top') // TopBar
if (hasTop) {
rule.parent = { component: 'TopBar' }
variantArray = variantArray.filter(x => x !== 'Top' && x !== 'Bar')
}
break
}
}
if (variantArray.length > 0) {
if (prefix === 'btn') {
newRule.state = variantArray.map(x => x.toLowerCase())
} else {
newRule.variant = variantArray[0].toLowerCase()
}
}
console.log(key, newRule)
return newRule
})
})
const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x)
return [generateRoot(), ...convertShadows(), ...convertRadii(), ...flatExtRules]
} }