const force_redraw = (element) => {
if (!element) return
element.classList.toggle('twt')
var n = document.createTextNode(' ')
var disp = element.style.display || 'block'
element.appendChild(n)
element.style.display = 'none'
setTimeout(() => {
element.style.display = disp
n.parentNode.removeChild(n)
},20)
}
const settings = {
icons: {
open: ``,
close: ``
},
styles: {
'base_bg_color': [0, 360, 'Color', ''],
'base_bg_saturation': [0, 100, 'Saturation', '%'],
'base_bg_color_range': [0, 180, 'Range', ''],
},
set_style: (name, value) => {
setToStorage(`theme_${name}`, value)
const bg = document.querySelector('#background')
bg.style.setProperty(`--${name}`, value)
bg.style.display = 'none'
setTimeout(async () => {
bg.style.display = 'block'
},)
},
init: async () => {
document.querySelector('#settingsbutton').innerHTML = settings.icons.open
document.querySelector('#settingsbutton').onclick = () => settings.open()
Object.keys(settings.styles).map(
key => {
const v = getFromStorage(`theme_${key}`)
if (!v) settings.set_style(key, `11${settings.styles[key][3]}`)
else settings.set_style(key, v)
}
)
},
open: async () => {
const ret = name => parseInt(document.querySelector('#background').style.getPropertyValue(`--${name}`).trim().replace('%', ''))
const setter = (name, trail = '') => (e) => settings.set_style(name, `${e.target.value}${trail}`)
const state = (name, trail = '') => {return {value: ret(name), oninput: setter(name, trail)}}
document.body.appendChild($.div(
{id: 'settingsui'},
$.h2('Settings'),
...Object.keys(settings.styles).map(key => {
const d = settings.styles[key]
return $.div(
$.h4(d[2]),
$.input({type: 'range', min: d[0], max: d[1], ...state(key, d[3])})
)
})
))
document.querySelector('#settingsbutton').innerHTML = settings.icons.close
document.querySelector('#settingsbutton').onclick = () => {
document.querySelector('#settingsui').remove()
settings.init()
}
}
}