akkoma-fe/src/services/style_setter/style_setter.js

472 lines
12 KiB
JavaScript
Raw Normal View History

import { times } from 'lodash'
import { brightness, invertLightness, convert, contrastRatio } from 'chromatism'
import { rgb2hex, hex2rgb, mixrgb, getContrastRatio, alphaBlend } from '../color_convert/color_convert.js'
// While this is not used anymore right now, I left it in if we want to do custom
// styles that aren't just colors, so user can pick from a few different distinct
// styles as well as set their own colors in the future.
const setStyle = (href, commit) => {
2017-01-16 16:44:26 +00:00
/***
What's going on here?
I want to make it easy for admins to style this application. To have
a good set of default themes, I chose the system from base16
(https://chriskempson.github.io/base16/) to style all elements. They
all have the base00..0F classes. So the only thing an admin needs to
do to style Pleroma is to change these colors in that one css file.
Some default things (body text color, link color) need to be set dy-
namically, so this is done here by waiting for the stylesheet to be
loaded and then creating an element with the respective classes.
It is a bit weird, but should make life for admins somewhat easier.
***/
const head = document.head
const body = document.body
body.style.display = 'none'
const cssEl = document.createElement('link')
cssEl.setAttribute('rel', 'stylesheet')
cssEl.setAttribute('href', href)
head.appendChild(cssEl)
const setDynamic = () => {
const baseEl = document.createElement('div')
2017-01-20 22:39:38 +00:00
body.appendChild(baseEl)
let colors = {}
times(16, (n) => {
const name = `base0${n.toString(16).toUpperCase()}`
baseEl.setAttribute('class', name)
const color = window.getComputedStyle(baseEl).getPropertyValue('color')
colors[name] = color
})
body.removeChild(baseEl)
2017-01-16 16:44:26 +00:00
const styleEl = document.createElement('style')
head.appendChild(styleEl)
// const styleSheet = styleEl.sheet
2017-01-16 16:44:26 +00:00
body.style.display = 'initial'
}
cssEl.addEventListener('load', setDynamic)
}
const rgb2rgba = function (rgba) {
return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
}
const getTextColor = function (bg, text, preserve) {
const bgIsLight = convert(bg).hsl.l > 50
const textIsLight = convert(text).hsl.l > 50
if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
const result = Object.assign(base, invertLightness(text).rgb)
if (!preserve && getContrastRatio(bg, result) < 4.5) {
return contrastRatio(bg, text).rgb
}
return result
}
return text
}
const setColors = (input, commit) => {
2018-11-19 17:22:46 +00:00
const { rules, theme } = generatePreset(input)
const head = document.head
const body = document.body
body.style.display = 'none'
const styleEl = document.createElement('style')
head.appendChild(styleEl)
const styleSheet = styleEl.sheet
styleSheet.toString()
2018-11-19 17:22:46 +00:00
styleSheet.insertRule(`body { ${rules.radii} }`, 'index-max')
styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max')
styleSheet.insertRule(`body { ${rules.shadows} }`, 'index-max')
2018-11-25 18:48:16 +00:00
styleSheet.insertRule(`body { ${rules.fonts} }`, 'index-max')
body.style.display = 'initial'
// commit('setOption', { name: 'colors', value: htmlColors })
// commit('setOption', { name: 'radii', value: radii })
commit('setOption', { name: 'customTheme', value: input })
commit('setOption', { name: 'colors', value: theme.colors })
}
2018-11-19 17:22:46 +00:00
const getCssShadow = (input) => {
if (input.length === 0) {
return 'none'
}
return input.map((shad) => [
shad.x,
shad.y,
shad.blur,
shad.spread
].map(_ => _ + 'px').concat([
getCssColor(shad.color, shad.alpha),
shad.inset ? 'inset' : ''
]).join(' ')).join(', ')
}
const getCssColor = (input, a) => {
let rgb = {}
if (typeof input === 'object') {
rgb = input
} else if (typeof input === 'string') {
if (input.startsWith('#')) {
rgb = hex2rgb(input)
} else if (input.startsWith('--')) {
return `var(${input})`
} else {
return input
}
}
return rgb2rgba({ ...rgb, a })
}
2018-11-19 17:22:46 +00:00
const generateColors = (input) => {
const colors = {}
const opacity = Object.assign({
alert: 0.5,
input: 0.5,
faint: 0.5
}, Object.entries(input.opacity || {}).reduce((acc, [k, v]) => {
if (typeof v !== 'undefined') {
acc[k] = v
}
return acc
}, {}))
const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
if (typeof v === 'object') {
acc[k] = v
} else {
acc[k] = hex2rgb(v)
}
return acc
}, {})
const isLightOnDark = convert(col.bg).hsl.l < convert(col.text).hsl.l
const mod = isLightOnDark ? 1 : -1
2018-10-04 15:27:27 +00:00
colors.text = col.text
colors.lightText = brightness(20 * mod, colors.text).rgb
2018-10-07 16:59:22 +00:00
colors.link = col.link
colors.faint = col.faint || Object.assign({}, col.text)
2018-10-04 15:16:14 +00:00
colors.bg = col.bg
colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb
2018-10-04 15:27:27 +00:00
colors.fg = col.fg
2018-10-07 16:59:22 +00:00
colors.fgText = col.fgText || getTextColor(colors.fg, colors.text)
colors.fgLink = col.fgLink || getTextColor(colors.fg, colors.link, true)
colors.border = col.border || brightness(2 * mod, colors.fg).rgb
colors.btn = col.btn || Object.assign({}, col.fg)
2018-10-07 16:59:22 +00:00
colors.btnText = col.btnText || getTextColor(colors.btn, colors.fgText)
colors.input = col.input || Object.assign({}, col.fg)
colors.inputText = col.inputText || getTextColor(colors.input, colors.lightText)
colors.panel = col.panel || Object.assign({}, col.fg)
2018-10-07 16:59:22 +00:00
colors.panelText = col.panelText || getTextColor(colors.panel, colors.fgText)
colors.panelLink = col.panelLink || getTextColor(colors.panel, colors.fgLink)
2018-10-07 16:59:22 +00:00
colors.panelFaint = col.panelFaint || getTextColor(colors.panel, colors.faint)
colors.topBar = col.topBar || Object.assign({}, col.fg)
2018-10-07 16:59:22 +00:00
colors.topBarText = col.topBarText || getTextColor(colors.topBar, colors.fgText)
colors.topBarLink = col.topBarLink || getTextColor(colors.topBar, colors.fgLink)
colors.faintLink = col.faintLink || Object.assign({}, col.link)
2018-10-04 15:16:14 +00:00
colors.icon = mixrgb(colors.bg, colors.text)
colors.cBlue = col.cBlue
colors.cRed = col.cRed
colors.cGreen = col.cGreen
colors.cOrange = col.cOrange
2018-11-13 13:30:01 +00:00
colors.alertError = col.alertError || Object.assign({}, col.cRed)
colors.alertErrorText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.bg), colors.text)
colors.alertErrorPanelText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.panel), colors.panelText)
2018-11-13 13:30:01 +00:00
colors.badgeNotification = col.badgeNotification || Object.assign({}, col.cRed)
colors.badgeNotificationText = contrastRatio(colors.badgeNotification).rgb
Object.entries(opacity).forEach(([ k, v ]) => {
if (typeof v === 'undefined') return
if (k === 'alert') {
2018-11-13 13:30:01 +00:00
colors.alertError.a = v
return
}
if (k === 'faint') {
colors[k + 'Link'].a = v
colors['panelFaint'].a = v
}
2018-11-21 15:22:05 +00:00
if (k === 'bg') {
colors['lightBg'].a = v
}
2018-11-19 17:22:46 +00:00
if (colors[k]) {
colors[k].a = v
} else {
console.error('Wrong key ' + k)
}
})
const htmlColors = Object.entries(colors)
.reduce((acc, [k, v]) => {
if (!v) return acc
acc.solid[k] = rgb2hex(v)
acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
return acc
}, { complete: {}, solid: {} })
return {
2018-11-19 17:22:46 +00:00
rules: {
colors: Object.entries(htmlColors.complete)
.filter(([k, v]) => v)
.map(([k, v]) => `--${k}: ${v}`)
.join(';')
},
2018-10-04 15:16:14 +00:00
theme: {
colors: htmlColors.solid,
2018-11-19 17:22:46 +00:00
opacity
}
}
}
const generateRadii = (input) => {
2018-11-23 06:14:52 +00:00
let inputRadii = input.radii || {}
// v1 -> v2
if (typeof input.btnRadius !== 'undefined') {
inputRadii = Object
.entries(input)
.filter(([k, v]) => k.endsWith('Radius'))
.reduce((acc, e) => { acc[e[0].split('Radius')[0]] = e[1]; return acc }, {})
}
const radii = Object.entries(inputRadii).filter(([k, v]) => v).reduce((acc, [k, v]) => {
acc[k] = v
2018-11-21 00:14:59 +00:00
return acc
}, {
2018-11-19 17:22:46 +00:00
btn: 4,
input: 4,
checkbox: 2,
2018-11-19 17:22:46 +00:00
panel: 10,
avatar: 5,
avatarAlt: 50,
tooltip: 2,
2018-11-21 00:14:59 +00:00
attachment: 5
})
2018-11-19 17:22:46 +00:00
return {
rules: {
radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';')
},
theme: {
2018-10-04 15:16:14 +00:00
radii
}
}
}
2018-11-25 18:48:16 +00:00
const generateFonts = (input) => {
const fonts = Object.entries(input.fonts || {}).filter(([k, v]) => v).reduce((acc, [k, v]) => {
acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => {
acc[k] = v
return acc
}, acc[k])
return acc
}, {
interface: {
family: 'sans-serif'
},
input: {
family: 'inherit'
},
post: {
family: 'inherit'
},
postCode: {
family: 'monospace'
}
})
return {
rules: {
fonts: Object
.entries(fonts)
.filter(([k, v]) => v)
.map(([k, v]) => `--${k}Font: ${v.family}`).join(';')
},
theme: {
fonts
}
}
}
2018-11-19 17:22:46 +00:00
const generateShadows = (input) => {
const border = (top, shadow) => ({
x: 0,
y: top ? 1 : -1,
blur: 0,
spread: 0,
color: shadow ? '#000000' : '#FFFFFF',
alpha: 0.2,
inset: true
})
const buttonInsetFakeBorders = [border(true, false), border(false, true)]
const inputInsetFakeBorders = [border(true, true), border(false, false)]
const hoverGlow = {
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '--faint',
alpha: 1
}
2018-11-19 17:22:46 +00:00
const shadows = {
panel: [{
x: 1,
y: 1,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}],
topBar: [{
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}],
popup: [{
x: 2,
y: 2,
blur: 3,
spread: 0,
color: '#000000',
alpha: 0.5
}],
avatar: [{
x: 0,
y: 1,
blur: 8,
spread: 0,
color: '#000000',
alpha: 0.7
}],
2018-11-25 14:21:53 +00:00
avatarStatus: [],
panelHeader: [],
button: [{
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1
}, ...buttonInsetFakeBorders],
buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
input: [...inputInsetFakeBorders, {
x: 0,
y: 0,
blur: 2,
inset: true,
spread: 0,
color: '#000000',
alpha: 1
}],
2018-11-19 17:22:46 +00:00
...(input.shadows || {})
}
return {
rules: {
shadows: Object.entries(shadows).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';')
2018-11-19 17:22:46 +00:00
},
theme: {
shadows
}
}
}
2018-11-25 18:48:16 +00:00
const composePreset = (colors, radii, shadows, fonts) => {
2018-11-19 17:22:46 +00:00
return {
rules: {
...shadows.rules,
...colors.rules,
2018-11-25 18:48:16 +00:00
...radii.rules,
...fonts.rules
2018-11-19 17:22:46 +00:00
},
theme: {
...shadows.theme,
...colors.theme,
2018-11-25 18:48:16 +00:00
...radii.theme,
...fonts.theme
2018-11-19 17:22:46 +00:00
}
}
}
const generatePreset = (input) => {
const shadows = generateShadows(input)
const colors = generateColors(input)
const radii = generateRadii(input)
2018-11-25 18:48:16 +00:00
const fonts = generateFonts(input)
2018-11-19 17:22:46 +00:00
2018-11-25 18:48:16 +00:00
return composePreset(colors, radii, shadows, fonts)
2018-11-19 17:22:46 +00:00
}
const setPreset = (val, commit) => {
window.fetch('/static/styles.json')
.then((data) => data.json())
.then((themes) => {
const theme = themes[val] ? themes[val] : themes['pleroma-dark']
const bgRgb = hex2rgb(theme[1])
2018-10-07 16:59:22 +00:00
const fgRgb = hex2rgb(theme[2])
const textRgb = hex2rgb(theme[3])
const linkRgb = hex2rgb(theme[4])
const cRedRgb = hex2rgb(theme[5] || '#FF0000')
const cGreenRgb = hex2rgb(theme[6] || '#00FF00')
const cBlueRgb = hex2rgb(theme[7] || '#0000FF')
const cOrangeRgb = hex2rgb(theme[8] || '#E3FF00')
const colors = {
bg: bgRgb,
2018-10-07 16:59:22 +00:00
fg: fgRgb,
text: textRgb,
link: linkRgb,
cRed: cRedRgb,
cBlue: cBlueRgb,
cGreen: cGreenRgb,
cOrange: cOrangeRgb
}
// 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
// loading a theme from the persisted state.
// Needed some way of dealing with the async way of things.
// load config -> set preset -> wait for styles.json to load ->
// load persisted state -> set colors -> styles.json loaded -> set colors
if (!window.themeLoaded) {
setColors({ colors }, commit)
}
})
2017-01-16 16:44:26 +00:00
}
2018-11-19 17:22:46 +00:00
export {
setStyle,
setPreset,
setColors,
2018-10-04 15:16:14 +00:00
getTextColor,
2018-11-19 17:22:46 +00:00
generateColors,
generateRadii,
generateShadows,
2018-11-25 18:48:16 +00:00
generateFonts,
generatePreset,
2018-11-19 17:22:46 +00:00
composePreset,
getCssShadow
2017-01-16 16:44:26 +00:00
}