const ColorTriangle = require('./lib/colortriangle') const $ = require('./lib/chibi') const themes = require('./term/themes') const { qs } = require('./utils') function selectedTheme () { return +$('#theme').val() } exports.init = function () { $('#theme').on('change', showColor) $('#default_fg').on('input', showColor) $('#default_bg').on('input', showColor) let opts = { padding: 10, event: 'drag', uppercase: true, trianglePointerSize: 20, // wheelPointerSize: 12, size: 200, parseColor: (color) => { return themes.toHex(color, selectedTheme()) } } ColorTriangle.initInput(qs('#default_fg'), opts) ColorTriangle.initInput(qs('#default_bg'), opts) $('.colorprev.bg span').on('click', function () { const bg = this.dataset.bg if (typeof bg != 'undefined') $('#default_bg').val(bg) showColor() }) $('.colorprev.fg span').on('click', function () { const fg = this.dataset.fg if (typeof fg != 'undefined') $('#default_fg').val(fg) showColor() }) let $presets = $('#fgbg_presets') for (let i = 0; i < themes.fgbgThemes.length; i++) { const thm = themes.fgbgThemes[i] const fg = thm[0] const bg = thm[1] const lbl = thm[2] const tit = thm[3] $presets.htmlAppend( ' ' + lbl + ' ') if ((i + 1) % 5 === 0) $presets.htmlAppend('
') } $('.preset').on('click', function () { $('#default_fg').val(this.dataset.xfg) $('#default_bg').val(this.dataset.xbg) showColor() }) showColor() } function showColor () { let ex = qs('.color-example') let fg = $('#default_fg').val() let bg = $('#default_bg').val() if (/^\d+$/.test(fg)) { fg = +fg } else if (!/^#[\da-f]{6}$/i.test(fg)) { fg = 'black' } if (/^\d+$/.test(bg)) { bg = +bg } else if (!/^#[\da-f]{6}$/i.test(bg)) { bg = 'black' } const themeN = selectedTheme() ex.dataset.fg = fg ex.dataset.bg = bg themes.themePreview(themeN) $('.colorprev.fg span').css('background', themes.toHex(bg, themeN)) } exports.nextTheme = () => { let sel = qs('#theme') let i = sel.selectedIndex sel.options[++i % sel.options.length].selected = true showColor() } exports.prevTheme = () => { let sel = qs('#theme') let i = sel.selectedIndex sel.options[(sel.options.length + (--i)) % sel.options.length].selected = true showColor() }