FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changed theme preview to work without hitting an endpoint

This commit is contained in:
Andreas Nedbal 2020-05-04 17:26:18 +02:00
parent fe357eaa07
commit 582f8606b0
1 changed files with 66 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
app/assets/javascripts/settings.coffee
View File

@ -107,35 +107,10 @@ document.head.appendChild previewStyle
previewTimeout = null
previewTheme = ->
payload = {}
$('#update_theme').find('.color').each ->
n = this.name.substr 6, this.name.length - 7
payload[n] = parseInt this.value.substr(1, 6), 16
$.post '/settings/theme/preview.css', payload, (data) ->
previewStyle.innerHTML = data
, 'text'
null
themePresets = {
rs: [0x5E35B1, 0xFFFFFF, 0xFF0039, 0xFFFFFF, 0x3FB618, 0xFFFFFF, 0xFF7518, 0xFFFFFF, 0x9954BB, 0xFFFFFF, 0x222222, 0xEEEEEE, 0xF9F9F9, 0x151515, 0x5E35B1, 0xFFFFFF, 0x222222, 0xbbbbbb, 0xFFFFFF, 0x000000, 0x5E35B1],
dc: [0x141414, 0xeeeeee, 0x362222, 0xeeeeee, 0x1d2e1d, 0xeeeeee, 0x404040, 0xeeeeee, 0xb8b8b8, 0x3b3b3b, 0x303030, 0xEEEEEE, 0x202020, 0xeeeeee, 0x9c9a9a, 0x363636, 0xe6e6e6, 0xbbbbbb, 0x383838, 0xebebeb, 0x787676],
lc: [0xebebeb, 0x111111, 0xf76363, 0x111111, 0x8aff94, 0x111111, 0xffbd7f, 0x111111, 0x474747, 0xc4c4c4, 0xcfcfcf, 0x111111, 0xdfdfdf, 0x111111, 0x636565, 0xc9c9c9, 0x191919, 0x444444, 0xc7c7c7, 0x141414, 0x878989]
}
$(document).on 'submit', '#update_theme', (event) ->
$this = $ this
$this.find('.color').each ->
this.value = parseInt this.value.substr(1, 6), 16
true
$(document).ready ->
$('#update_theme .color').each ->
$this = $ this
this.value = '#' + ('000000' + parseInt(this.value).toString(16)).substr(-6, 6)
this.value = '#' + getHexColorFromThemeValue(this.value)
$this.minicolors
control: 'hue'
@ -152,4 +127,68 @@ $(document).ready ->
$(document).on 'click', 'a.theme_preset', (event) ->
preset = [].concat themePresets[this.dataset.preset]
$('#update_theme .color').each ->
$(this).minicolors 'value', '#' + ('000000' + parseInt(preset.shift()).toString(16)).substr(-6, 6)
$(this).minicolors 'value', '#' + getHexColorFromThemeValue(preset.shift())
previewTheme = ->
payload = {}
$('#update_theme').find('.color').each ->
n = this.name.substr 6, this.name.length - 7
payload[n] = parseInt this.value.substr(1, 6), 16
generateTheme payload
null
generateTheme = (payload) ->
theme_attribute_map = {
'primary_color': 'primary',
'primary_text': 'primary-text',
'danger_color': 'danger',
'danger_text': 'danger-text',
'warning_color': 'warning',
'warning_text': 'warning-text',
'info_color': 'info',
'info_text': 'info-text',
'success_color': 'success',
'success_text': 'success-text',
'panel_color': 'raised-bg',
'background_color': 'background',
'background_text': 'body-text',
'input_color': 'input-bg',
'input_text': 'input-text'
}
body = ":root {\n"
(Object.keys(payload)).forEach (plKey) ->
console.log plKey
if theme_attribute_map[plKey]
if theme_attribute_map[plKey].includes 'text'
console.log "aaa"
hex = getHexColorFromThemeValue(payload[plKey])
body += "--#{theme_attribute_map[plKey]}: #{getDecimalTripletsFromHex(hex)};\n"
else
body += "--#{theme_attribute_map[plKey]}: ##{getHexColorFromThemeValue(payload[plKey])};\n"
body += "}"
previewStyle.innerHTML = body
getHexColorFromThemeValue = (themeValue) ->
return ('000000' + parseInt(themeValue).toString(16)).substr(-6, 6)
getDecimalTripletsFromHex = (hex) ->
return hex.match(/.{1,2}/g).map((value) -> parseInt(value, 16)).join(', ')
themePresets = {
rs: [0x5E35B1, 0xFFFFFF, 0xFF0039, 0xFFFFFF, 0x3FB618, 0xFFFFFF, 0xFF7518, 0xFFFFFF, 0x9954BB, 0xFFFFFF, 0x222222, 0xEEEEEE, 0xF9F9F9, 0x151515, 0x5E35B1, 0xFFFFFF, 0x222222, 0xbbbbbb, 0xFFFFFF, 0x000000, 0x5E35B1],
dc: [0x141414, 0xeeeeee, 0x362222, 0xeeeeee, 0x1d2e1d, 0xeeeeee, 0x404040, 0xeeeeee, 0xb8b8b8, 0x3b3b3b, 0x303030, 0xEEEEEE, 0x202020, 0xeeeeee, 0x9c9a9a, 0x363636, 0xe6e6e6, 0xbbbbbb, 0x383838, 0xebebeb, 0x787676],
lc: [0xebebeb, 0x111111, 0xf76363, 0x111111, 0x8aff94, 0x111111, 0xffbd7f, 0x111111, 0x474747, 0xc4c4c4, 0xcfcfcf, 0x111111, 0xdfdfdf, 0x111111, 0x636565, 0xc9c9c9, 0x191919, 0x444444, 0xc7c7c7, 0x141414, 0x878989]
}
$(document).on 'submit', '#update_theme', (event) ->
$this = $ this
$this.find('.color').each ->
this.value = parseInt this.value.substr(1, 6), 16
true