|
|
@ -35,6 +35,7 @@ const AppearanceTab = {
|
|
|
|
data () {
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
availableStyles: [],
|
|
|
|
availableStyles: [],
|
|
|
|
|
|
|
|
intersectionObserver: null,
|
|
|
|
thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
|
|
|
|
thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
|
|
|
|
key: mode,
|
|
|
|
key: mode,
|
|
|
|
value: mode,
|
|
|
|
value: mode,
|
|
|
@ -62,9 +63,7 @@ const AppearanceTab = {
|
|
|
|
FontControl,
|
|
|
|
FontControl,
|
|
|
|
Preview
|
|
|
|
Preview
|
|
|
|
},
|
|
|
|
},
|
|
|
|
created () {
|
|
|
|
mounted () {
|
|
|
|
const self = this
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getThemes()
|
|
|
|
getThemes()
|
|
|
|
.then((promises) => {
|
|
|
|
.then((promises) => {
|
|
|
|
return Promise.all(
|
|
|
|
return Promise.all(
|
|
|
@ -74,19 +73,48 @@ const AppearanceTab = {
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.then(themes => themes.reduce((acc, [k, v]) => {
|
|
|
|
.then(themes => themes.reduce((acc, [k, v]) => {
|
|
|
|
if (v) {
|
|
|
|
if (v) {
|
|
|
|
return {
|
|
|
|
return [
|
|
|
|
...acc,
|
|
|
|
...acc,
|
|
|
|
[k]: v
|
|
|
|
{
|
|
|
|
}
|
|
|
|
name: v.name || v[0],
|
|
|
|
|
|
|
|
key: k,
|
|
|
|
|
|
|
|
data: v
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
]
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
return acc
|
|
|
|
return acc
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, {}))
|
|
|
|
}, []))
|
|
|
|
.then((themesComplete) => {
|
|
|
|
.then((themesComplete) => {
|
|
|
|
self.availableStyles = themesComplete
|
|
|
|
this.availableStyles = themesComplete
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (window.IntersectionObserver) {
|
|
|
|
|
|
|
|
this.intersectionObserver = new IntersectionObserver((entries, observer) => {
|
|
|
|
|
|
|
|
entries.forEach(({ target, isIntersecting }) => {
|
|
|
|
|
|
|
|
if (!isIntersecting) return
|
|
|
|
|
|
|
|
const theme = this.availableStyles.find(x => x.key === target.dataset.themeKey)
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
|
|
theme.ready = true
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
observer.unobserve(target)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}, {
|
|
|
|
|
|
|
|
root: this.$refs.themeList
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
updated () {
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
|
|
this.$refs.themeList.querySelectorAll('.theme-preview').forEach(node => {
|
|
|
|
|
|
|
|
this.intersectionObserver.observe(node)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
|
|
|
|
|
noIntersectionObserver () {
|
|
|
|
|
|
|
|
return !window.IntersectionObserver
|
|
|
|
|
|
|
|
},
|
|
|
|
horizontalUnits () {
|
|
|
|
horizontalUnits () {
|
|
|
|
return defaultHorizontalUnits
|
|
|
|
return defaultHorizontalUnits
|
|
|
|
},
|
|
|
|
},
|
|
|
@ -119,7 +147,12 @@ const AppearanceTab = {
|
|
|
|
...SharedComputedObject()
|
|
|
|
...SharedComputedObject()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
previewTheme (input) {
|
|
|
|
isThemeActive (key, name) {
|
|
|
|
|
|
|
|
console.log(this.$store.getters.mergedConfig)
|
|
|
|
|
|
|
|
const { customTheme, themeName, customThemeSource } = this.$store.getters.mergedConfig
|
|
|
|
|
|
|
|
console.log(customTheme, customThemeSource, themeName)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
previewTheme (key, input) {
|
|
|
|
const style = normalizeThemeData(input)
|
|
|
|
const style = normalizeThemeData(input)
|
|
|
|
const x = 2
|
|
|
|
const x = 2
|
|
|
|
if (x === 1) return
|
|
|
|
if (x === 1) return
|
|
|
@ -128,12 +161,13 @@ const AppearanceTab = {
|
|
|
|
inputRuleset: theme2,
|
|
|
|
inputRuleset: theme2,
|
|
|
|
ultimateBackgroundColor: '#000000',
|
|
|
|
ultimateBackgroundColor: '#000000',
|
|
|
|
liteMode: true,
|
|
|
|
liteMode: true,
|
|
|
|
|
|
|
|
debug: true,
|
|
|
|
onlyNormalState: true
|
|
|
|
onlyNormalState: true
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
return getScopedVersion(
|
|
|
|
return getScopedVersion(
|
|
|
|
getCssRules(theme3.eager),
|
|
|
|
getCssRules(theme3.eager),
|
|
|
|
'#theme-preview-' + (input.name || input[0]).replace(/ /g, '_')
|
|
|
|
'#theme-preview-' + key
|
|
|
|
).join('\n')
|
|
|
|
).join('\n')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|