Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

optimized theme loading so that it wouldn't wait until ALL themes are loaded to

Browse source 
select one by default
This commit is contained in:
Henry Jameson 2020-01-17 00:27:46 +02:00
parent 24a7a9bfd8
commit f77d675434
2 changed files with 53 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/style_switcher/style_switcher.js
View file

@ -96,9 +96,26 @@ export default {
created () { created () {
const self = this const self = this
getThemes().then((themesComplete) => { getThemes()
self.availableStyles = themesComplete .then((promises) => {
}) return Promise.all(
Object.entries(promises)
.map(([k, v]) => v.then(res => [k, res]))
)
})
.then(themes => themes.reduce((acc, [k, v]) => {
if (v) {
return {
...acc,
[k]: v
}
} else {
return acc
}
}, {}))
.then((themesComplete) => {
self.availableStyles = themesComplete
})
}, },
mounted () { mounted () {
this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme) this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme)

67
src/services/style_setter/style_setter.js
View file

@ -336,25 +336,23 @@ export const getThemes = () => {
return window.fetch('/static/styles.json') return window.fetch('/static/styles.json')
.then((data) => data.json()) .then((data) => data.json())
.then((themes) => { .then((themes) => {
return Promise.all(Object.entries(themes).map(([k, v]) => { return Object.entries(themes).map(([k, v]) => {
let promise = null
if (typeof v === 'object') { if (typeof v === 'object') {
return Promise.resolve([k, v]) promise = Promise.resolve(v)
} else if (typeof v === 'string') { } else if (typeof v === 'string') {
return window.fetch(v) promise = window.fetch(v)
.then((data) => data.json()) .then((data) => data.json())
.then((theme) => {
return [k, theme]
})
.catch((e) => { .catch((e) => {
console.error(e) console.error(e)
return [] return null
}) })
} }
})) return [k, promise]
})
}) })
.then((promises) => { .then((promises) => {
return promises return promises
.filter(([k, v]) => v)
.reduce((acc, [k, v]) => { .reduce((acc, [k, v]) => {
acc[k] = v acc[k] = v
return acc return acc
@ -363,33 +361,34 @@ export const getThemes = () => {
} }
export const setPreset = (val, commit) => { export const setPreset = (val, commit) => {
return getThemes().then((themes) => { return getThemes()
const theme = themes[val] ? themes[val] : themes['pleroma-dark'] .then((themes) => console.log(themes) || themes[val] ? themes[val] : themes['pleroma-dark'])
const isV1 = Array.isArray(theme) .then((theme) => {
const data = isV1 ? {} : theme.theme const isV1 = Array.isArray(theme)
const data = isV1 ? {} : theme.theme
if (isV1) { if (isV1) {
const bg = hex2rgb(theme[1]) const bg = hex2rgb(theme[1])
const fg = hex2rgb(theme[2]) const fg = hex2rgb(theme[2])
const text = hex2rgb(theme[3]) const text = hex2rgb(theme[3])
const link = hex2rgb(theme[4]) const link = hex2rgb(theme[4])
const cRed = hex2rgb(theme[5] || '#FF0000') const cRed = hex2rgb(theme[5] || '#FF0000')
const cGreen = hex2rgb(theme[6] || '#00FF00') const cGreen = hex2rgb(theme[6] || '#00FF00')
const cBlue = hex2rgb(theme[7] || '#0000FF') const cBlue = hex2rgb(theme[7] || '#0000FF')
const cOrange = hex2rgb(theme[8] || '#E3FF00') const cOrange = hex2rgb(theme[8] || '#E3FF00')
data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange } data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
} }
// This is a hack, this function is only called during initial load. // This is a hack, this function is only called during initial load.
// We want to cancel loading the theme from config.json if we're already // We want to cancel loading the theme from config.json if we're already
// loading a theme from the persisted state. // loading a theme from the persisted state.
// Needed some way of dealing with the async way of things. // Needed some way of dealing with the async way of things.
// load config -> set preset -> wait for styles.json to load -> // load config -> set preset -> wait for styles.json to load ->
// load persisted state -> set colors -> styles.json loaded -> set colors // load persisted state -> set colors -> styles.json loaded -> set colors
if (!window.themeLoaded) { if (!window.themeLoaded) {
applyTheme(data, commit) applyTheme(data, commit)
} }
}) })
} }