|
|
@ -6,6 +6,45 @@ import { getCssRules } from '../theme_data/css_utils.js'
|
|
|
|
import { defaultState } from '../../modules/config.js'
|
|
|
|
import { defaultState } from '../../modules/config.js'
|
|
|
|
import { chunk } from 'lodash'
|
|
|
|
import { chunk } from 'lodash'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// On platforms where this is not supported, it will return undefined
|
|
|
|
|
|
|
|
// Otherwise it will return an array
|
|
|
|
|
|
|
|
const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const createStyleSheet = (id) => {
|
|
|
|
|
|
|
|
if (supportsAdoptedStyleSheets) {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
el: null,
|
|
|
|
|
|
|
|
sheet: new CSSStyleSheet(),
|
|
|
|
|
|
|
|
rules: []
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const el = document.getElementById(id)
|
|
|
|
|
|
|
|
// Clear all rules in it
|
|
|
|
|
|
|
|
for (let i = el.sheet.cssRules.length - 1; i >= 0; --i) {
|
|
|
|
|
|
|
|
el.sheet.deleteRule(i)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
el,
|
|
|
|
|
|
|
|
sheet: el.sheet,
|
|
|
|
|
|
|
|
rules: []
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const EAGER_STYLE_ID = 'pleroma-eager-styles'
|
|
|
|
|
|
|
|
const LAZY_STYLE_ID = 'pleroma-lazy-styles'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const adoptStyleSheets = (styles) => {
|
|
|
|
|
|
|
|
if (supportsAdoptedStyleSheets) {
|
|
|
|
|
|
|
|
document.adoptedStyleSheets = styles.map(s => s.sheet)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// 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.
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export const generateTheme = async (input, callbacks, debug) => {
|
|
|
|
export const generateTheme = async (input, callbacks, debug) => {
|
|
|
|
const {
|
|
|
|
const {
|
|
|
|
onNewRule = (rule, isLazy) => {},
|
|
|
|
onNewRule = (rule, isLazy) => {},
|
|
|
@ -100,13 +139,13 @@ export const tryLoadCache = () => {
|
|
|
|
return false
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (cache.engineChecksum === getEngineChecksum()) {
|
|
|
|
if (cache.engineChecksum === getEngineChecksum()) {
|
|
|
|
const styleSheet = new CSSStyleSheet()
|
|
|
|
const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
|
|
|
|
const lazyStyleSheet = new CSSStyleSheet()
|
|
|
|
const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
|
|
|
|
|
|
|
|
|
|
|
|
cache.data[0].forEach(rule => styleSheet.insertRule(rule, 'index-max'))
|
|
|
|
cache.data[0].forEach(rule => eagerStyles.sheet.insertRule(rule, 'index-max'))
|
|
|
|
cache.data[1].forEach(rule => lazyStyleSheet.insertRule(rule, 'index-max'))
|
|
|
|
cache.data[1].forEach(rule => lazyStyles.sheet.insertRule(rule, 'index-max'))
|
|
|
|
|
|
|
|
|
|
|
|
document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
|
|
|
|
adoptStyleSheets([eagerStyles, lazyStyles])
|
|
|
|
|
|
|
|
|
|
|
|
return true
|
|
|
|
return true
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
@ -116,10 +155,8 @@ export const tryLoadCache = () => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
|
|
|
|
export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
|
|
|
|
const styleSheet = new CSSStyleSheet()
|
|
|
|
const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
|
|
|
|
const styleArray = []
|
|
|
|
const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
|
|
|
|
const lazyStyleSheet = new CSSStyleSheet()
|
|
|
|
|
|
|
|
const lazyStyleArray = []
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log('DEBUG IS', debug)
|
|
|
|
console.log('DEBUG IS', debug)
|
|
|
|
|
|
|
|
|
|
|
@ -128,19 +165,19 @@ export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
onNewRule (rule, isLazy) {
|
|
|
|
onNewRule (rule, isLazy) {
|
|
|
|
if (isLazy) {
|
|
|
|
if (isLazy) {
|
|
|
|
lazyStyleSheet.insertRule(rule, 'index-max')
|
|
|
|
lazyStyles.sheet.insertRule(rule, 'index-max')
|
|
|
|
lazyStyleArray.push(rule)
|
|
|
|
lazyStyles.rules.push(rule)
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
styleSheet.insertRule(rule, 'index-max')
|
|
|
|
eagerStyles.sheet.insertRule(rule, 'index-max')
|
|
|
|
styleArray.push(rule)
|
|
|
|
eagerStyles.rules.push(rule)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onEagerFinished () {
|
|
|
|
onEagerFinished () {
|
|
|
|
document.adoptedStyleSheets = [styleSheet]
|
|
|
|
adoptStyleSheets([eagerStyles])
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onLazyFinished () {
|
|
|
|
onLazyFinished () {
|
|
|
|
document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
|
|
|
|
adoptStyleSheets([eagerStyles, lazyStyles])
|
|
|
|
const cache = { engineChecksum: getEngineChecksum(), data: [styleArray, lazyStyleArray] }
|
|
|
|
const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
|
|
|
|
onFinish(cache)
|
|
|
|
onFinish(cache)
|
|
|
|
localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
|
|
|
|
localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
|
|
|
|
}
|
|
|
|
}
|
|
|
|