term_conf refactor, add color pickers

.babelrc

@@ -6,13 +6,9 @@
           "last 2 versions",
           "> 4%",
           "ie 11",
-          "safari 8",
+          "safari 8"
-          "android 4.4"
         ]
       }
-    }],
-    ["minify", {
-      "mergeVars": false
     }]
   ]
 }

.eslintignore

@@ -2,7 +2,8 @@
 out/**/*
 
 # libraries
-js/lib/*
+js/lib/chibi.js
+js/lib/polyfills.js
 
 # php generated file
 js/lang.js

js/index.js

@@ -14,3 +14,5 @@ window.$ = $
 window.qs = qs
 
 window.themes = require('./term/themes')
+
+window.TermConf = require('./term_conf')

js/lib/color_utils.js

@@ -0,0 +1,121 @@
+/*
+ * Copyright (c) 2010 Tim Baumann
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+// NOTE:
+// Extracted from ColorTriangle and
+// Converted to ES6 by MightyPork (2017)
+
+/*******************
+ * Color conversion *
+ *******************/
+
+const M = Math
+const PI = M.PI
+
+exports.hue_to_rgb = function (v1, v2, h) {
+  if (h < 0) h += 1
+  if (h > 1) h -= 1
+
+  if ((6 * h) < 1) return v1 + (v2 - v1) * 6 * h
+  if ((2 * h) < 1) return v2
+  if ((3 * h) < 2) return v1 + (v2 - v1) * ((2 / 3) - h) * 6
+  return v1
+}
+
+exports.hsl_to_rgb = function (h, s, l) {
+  h /= 2 * PI
+  let r, g, b
+
+  if (s === 0) {
+    r = g = b = l
+  } else {
+    let var_1, var_2
+
+    if (l < 0.5) var_2 = l * (1 + s)
+    else var_2 = (l + s) - (s * l)
+
+    var_1 = 2 * l - var_2
+
+    r = exports.hue_to_rgb(var_1, var_2, h + (1 / 3))
+    g = exports.hue_to_rgb(var_1, var_2, h)
+    b = exports.hue_to_rgb(var_1, var_2, h - (1 / 3))
+  }
+  return [r, g, b]
+}
+
+exports.rgb_to_hsl = function (r, g, b) {
+  const min = M.min(r, g, b)
+  const max = M.max(r, g, b)
+  const d = max - min // delta
+
+  let h, s, l
+
+  l = (max + min) / 2
+
+  if (d === 0) {
+    // gray
+    h = s = 0 // HSL results from 0 to 1
+  } else {
+    // chroma
+    if (l < 0.5) s = d / (max + min)
+    else s = d / (2 - max - min)
+
+    const d_r = (((max - r) / 6) + (d / 2)) / d
+    const d_g = (((max - g) / 6) + (d / 2)) / d
+    const d_b = (((max - b) / 6) + (d / 2)) / d // deltas
+
+    if (r === max) h = d_b - d_g
+    else if (g === max) h = (1 / 3) + d_r - d_b
+    else if (b === max) h = (2 / 3) + d_g - d_r
+
+    if (h < 0) h += 1
+    else if (h > 1) h -= 1
+  }
+  h *= 2 * PI
+  return [h, s, l]
+}
+
+exports.hex_to_rgb = function (hex) {
+  const groups = hex.match(/^#([A-Fa-f0-9]+)$/)
+  if (groups && groups[1].length % 3 === 0) {
+    hex = groups[1]
+    const bytes = hex.length / 3
+    const max = Math.pow(16, bytes) - 1
+    const r = parseInt(hex.slice(0 * bytes, 1 * bytes), 16) / max
+    const g = parseInt(hex.slice(1 * bytes, 2 * bytes), 16) / max
+    const b = parseInt(hex.slice(2 * bytes, 3 * bytes), 16) / max
+    return [r, g, b]
+  }
+  return [0, 0, 0]
+}
+
+function pad (n) {
+  if (n.length === 1) n = '0' + n
+  return n
+}
+
+exports.rgb_to_hex = function (r, g, b) {
+  r = Math.round(r * 255).toString(16)
+  g = Math.round(g * 255).toString(16)
+  b = Math.round(b * 255).toString(16)
+  return `#${pad(r)}${pad(g)}${pad(b)}`
+}

js/lib/colortriangle.js

@@ -0,0 +1,604 @@
+/*
+ * Copyright (c) 2010 Tim Baumann
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+// NOTE: Converted to ES6 by MightyPork (2017)
+
+const {
+  rgb_to_hex,
+  hex_to_rgb,
+  hsl_to_rgb,
+  rgb_to_hsl
+} = require('./color_utils')
+
+const win = window
+const doc = document
+const M = Math
+const PI = M.PI
+
+function times (i, fn) {
+  for (let j = 0; j < i; j++) {
+    fn(j)
+  }
+}
+
+function each (obj, fn) {
+  if (obj.length) {
+    times(obj.length, function (i) {
+      fn(obj[i], i)
+    })
+  } else {
+    for (let key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        fn(obj[key], key)
+      }
+    }
+  }
+}
+
+function getOffsets (el) {
+  let left = 0
+  let top = 0
+
+  while (el !== null) {
+    console.log(el)
+    console.log(el.offsetLeft, el.offsetTop)
+    left += el.offsetLeft
+    top += el.offsetTop
+    el = el.offsetParent
+  }
+
+  return [left, top]
+}
+
+module.exports = class ColorTriangle {
+  /****************
+   * ColorTriangle *
+   ****************/
+
+  // Constructor function:
+  constructor (color, options) {
+    this.options = {
+      size: 150,
+      padding: 8,
+      triangleSize: 0.8,
+      wheelPointerColor1: '#444',
+      wheelPointerColor2: '#eee',
+      trianglePointerSize: 16,
+      // wheelPointerSize: 16,
+      trianglePointerColor1: '#eee',
+      trianglePointerColor2: '#444',
+      background: 'transparent'
+    }
+
+    this._setOptions(options)
+    this._calculateProperties()
+
+    this._createContainer()
+    this._createTriangle()
+    this._createWheel()
+    this._createWheelPointer()
+    this._createTrianglePointer()
+    this._attachEvents()
+
+    color = color || '#f00'
+    if (typeof color == 'string') {
+      this.setHEX(color)
+    }
+  }
+
+  _calculateProperties () {
+    let opts = this.options
+
+    this.padding = opts.padding
+    this.innerSize = opts.size - opts.padding * 2
+    this.triangleSize = opts.triangleSize * this.innerSize
+    this.wheelThickness = (this.innerSize - this.triangleSize) / 2
+    this.wheelPointerSize = opts.wheelPointerSize || this.wheelThickness
+
+    this.wheelRadius = (this.innerSize) / 2
+    this.triangleRadius = (this.triangleSize) / 2
+    this.triangleSideLength = M.sqrt(3) * this.triangleRadius
+  }
+
+  _calculatePositions () {
+    const r = this.triangleRadius
+    const hue = this.hue
+    const third = (2 / 3) * PI
+    const s = this.saturation
+    const l = this.lightness
+
+    // Colored point
+    const hx = this.hx = M.cos(hue) * r
+    const hy = this.hy = -M.sin(hue) * r
+    // Black point
+    const sx = this.sx = M.cos(hue - third) * r
+    const sy = this.sy = -M.sin(hue - third) * r
+    // White point
+    const vx = this.vx = M.cos(hue + third) * r
+    const vy = this.vy = -M.sin(hue + third) * r
+    // Current point
+    const mx = (sx + vx) / 2
+    const my = (sy + vy) / 2
+    const a = (1 - 2 * M.abs(l - 0.5)) * s
+    this.x = sx + (vx - sx) * l + (hx - mx) * a
+    this.y = sy + (vy - sy) * l + (hy - my) * a
+  }
+
+  _createContainer () {
+    let c = this.container = doc.createElement('div')
+    c.className = 'color-triangle'
+
+    c.style.display = 'block'
+    c.style.padding = `${this.padding}px`
+    c.style.position = 'relative'
+    c.style.boxShadow = '0 1px 10px black'
+    c.style.borderRadius = '5px'
+    c.style.width = c.style.height = `${this.innerSize + 2 * this.padding}px`
+    c.style.background = this.options.background
+  }
+
+  _createWheel () {
+    let c = this.wheel = doc.createElement('canvas')
+    c.width = c.height = this.innerSize
+    c.style.position = 'absolute'
+    c.style.margin = c.style.padding = '0'
+    c.style.left = c.style.top = `${this.padding}px`
+
+    this._drawWheel(c.getContext('2d'))
+    this.container.appendChild(c)
+  }
+
+  _drawWheel (ctx) {
+    let s, i
+
+    ctx.save()
+    ctx.translate(this.wheelRadius, this.wheelRadius)
+    s = this.wheelRadius - this.triangleRadius
+    // Draw a circle for every color
+    for (i = 0; i < 360; i++) {
+      ctx.rotate(PI / -180) // rotate one degree
+      ctx.beginPath()
+      ctx.fillStyle = 'hsl(' + i + ', 100%, 50%)'
+      ctx.arc(this.wheelRadius - (s / 2), 0, s / 2, 0, PI * 2, true)
+      ctx.fill()
+    }
+    ctx.restore()
+  }
+
+  _createTriangle () {
+    let c = this.triangle = doc.createElement('canvas')
+
+    c.width = c.height = this.innerSize
+    c.style.position = 'absolute'
+    c.style.margin = c.style.padding = '0'
+    c.style.left = c.style.top = this.padding + 'px'
+
+    this.triangleCtx = c.getContext('2d')
+
+    this.container.appendChild(c)
+  }
+
+  _drawTriangle () {
+    const hx = this.hx
+    const hy = this.hy
+    const sx = this.sx
+    const sy = this.sy
+    const vx = this.vx
+    const vy = this.vy
+    const size = this.innerSize
+
+    let ctx = this.triangleCtx
+
+    // clear
+    ctx.clearRect(0, 0, size, size)
+
+    ctx.save()
+    ctx.translate(this.wheelRadius, this.wheelRadius)
+
+    // make a triangle
+    ctx.beginPath()
+    ctx.moveTo(hx, hy)
+    ctx.lineTo(sx, sy)
+    ctx.lineTo(vx, vy)
+    ctx.closePath()
+    ctx.clip()
+
+    ctx.fillStyle = '#000'
+    ctx.fillRect(-this.wheelRadius, -this.wheelRadius, size, size)
+    // => black triangle
+
+    // create gradient from hsl(hue, 1, 1) to transparent
+    let grad0 = ctx.createLinearGradient(hx, hy, (sx + vx) / 2, (sy + vy) / 2)
+    const hsla = 'hsla(' + M.round(this.hue * (180 / PI)) + ', 100%, 50%, '
+    grad0.addColorStop(0, hsla + '1)')
+    grad0.addColorStop(1, hsla + '0)')
+    ctx.fillStyle = grad0
+    ctx.fillRect(-this.wheelRadius, -this.wheelRadius, size, size)
+    // => gradient: one side of the triangle is black, the opponent angle is $color
+
+    // create color gradient from white to transparent
+    let grad1 = ctx.createLinearGradient(vx, vy, (hx + sx) / 2, (hy + sy) / 2)
+    grad1.addColorStop(0, '#fff')
+    grad1.addColorStop(1, 'rgba(255, 255, 255, 0)')
+    ctx.globalCompositeOperation = 'lighter'
+    ctx.fillStyle = grad1
+    ctx.fillRect(-this.wheelRadius, -this.wheelRadius, size, size)
+    // => white angle
+
+    ctx.restore()
+  }
+
+  // The two pointers
+  _createWheelPointer () {
+    let c = this.wheelPointer = doc.createElement('canvas')
+    const size = this.wheelPointerSize
+    c.width = c.height = size
+    c.style.position = 'absolute'
+    c.style.margin = c.style.padding = '0'
+    this._drawPointer(c.getContext('2d'), size / 2, this.options.wheelPointerColor1, this.options.wheelPointerColor2)
+    this.container.appendChild(c)
+  }
+
+  _moveWheelPointer () {
+    const r = this.wheelPointerSize / 2
+    const s = this.wheelPointer.style
+    s.top = this.padding + this.wheelRadius - M.sin(this.hue) * (this.triangleRadius + this.wheelThickness / 2) - r + 'px'
+    s.left = this.padding + this.wheelRadius + M.cos(this.hue) * (this.triangleRadius + this.wheelThickness / 2) - r + 'px'
+  }
+
+  _createTrianglePointer () { // create pointer in the triangle
+    let c = this.trianglePointer = doc.createElement('canvas')
+    const size = this.options.trianglePointerSize
+
+    c.width = c.height = size
+    c.style.position = 'absolute'
+    c.style.margin = c.style.padding = '0'
+    this._drawPointer(c.getContext('2d'), size / 2, this.options.trianglePointerColor1, this.options.trianglePointerColor2)
+    this.container.appendChild(c)
+  }
+
+  _moveTrianglePointer (x, y) {
+    const s = this.trianglePointer.style
+    const r = this.options.trianglePointerSize / 2
+    s.top = (this.y + this.wheelRadius + this.padding - r) + 'px'
+    s.left = (this.x + this.wheelRadius + this.padding - r) + 'px'
+  }
+
+  _drawPointer (ctx, r, color1, color2) {
+    ctx.fillStyle = color2
+    ctx.beginPath()
+    ctx.arc(r, r, r, 0, PI * 2, true)
+    ctx.fill() // => black circle
+    ctx.fillStyle = color1
+    ctx.beginPath()
+    ctx.arc(r, r, r - 2, 0, PI * 2, true)
+    ctx.fill() // => white circle with 1px black border
+    ctx.fillStyle = color2
+    ctx.beginPath()
+    ctx.arc(r, r, r / 4 + 2, 0, PI * 2, true)
+    ctx.fill() // => black circle with big white border and a small black border
+    ctx.globalCompositeOperation = 'destination-out'
+    ctx.beginPath()
+    ctx.arc(r, r, r / 4, 0, PI * 2, true)
+    ctx.fill() // => transparent center
+  }
+
+  // The Element and the DOM
+  inject (parent) {
+    parent.appendChild(this.container)
+
+    // calculate canvas position on page
+    const offsets = getOffsets(this.triangle)
+    this.offset = {
+      x: offsets[0],
+      y: offsets[1]
+    }
+  }
+
+  dispose () {
+    let parent = this.container.parentNode
+    if (parent) {
+      parent.removeChild(this.container)
+    }
+  }
+
+  getElement () {
+    return this.container
+  }
+
+  // Color accessors
+  getCSS () {
+    const h = Math.round(this.hue * (180 / PI))
+    const s = Math.round(this.saturation * 100)
+    const l = Math.round(this.lightness * 100)
+
+    return `hsl(${h}, ${s}%, ${l}%)`
+  }
+
+  getHEX () {
+    return rgb_to_hex(...this.getRGB())
+  }
+
+  setHEX (hex) {
+    this.setRGB(...hex_to_rgb(hex))
+  }
+
+  getRGB () {
+    return hsl_to_rgb(...this.getHSL())
+  }
+
+  setRGB (r, g, b) {
+    this.setHSL(...rgb_to_hsl(r, g, b))
+  }
+
+  getHSL () {
+    return [this.hue, this.saturation, this.lightness]
+  }
+
+  setHSL (h, s, l) {
+    this.hue = h
+    this.saturation = s
+    this.lightness = l
+
+    this._initColor()
+  }
+
+  _initColor () {
+    this._calculatePositions()
+    this._moveWheelPointer()
+    this._drawTriangle()
+    this._moveTrianglePointer()
+  }
+
+  // Mouse event handling
+  _attachEvents () {
+    this.down = null
+
+    let mousedown = (evt) => {
+      evt.stopPropagation()
+      evt.preventDefault()
+
+      doc.body.addEventListener('mousemove', mousemove, false)
+      doc.body.addEventListener('mouseup', mouseup, false)
+      this._map(evt.pageX, evt.pageY)
+    }
+
+    let mousemove = (evt) => {
+      this._move(evt.pageX, evt.pageY)
+    }
+
+    let mouseup = (evt) => {
+      if (this.down) {
+        this.down = null
+        this._fireEvent('dragend')
+      }
+      doc.body.removeEventListener('mousemove', mousemove, false)
+      doc.body.removeEventListener('mouseup', mouseup, false)
+    }
+
+    this.container.addEventListener('mousedown', mousedown, false)
+    this.container.addEventListener('mousemove', mousemove, false)
+  }
+
+  _map (x, y) {
+    const ox = x
+    const oy = y
+
+    x -= this.offset.x + this.wheelRadius
+    y -= this.offset.y + this.wheelRadius
+
+    const r = M.sqrt(x * x + y * y) // Pythagoras
+    if (r > this.triangleRadius && r < this.wheelRadius) {
+      // Wheel
+      this.down = 'wheel'
+      this._fireEvent('dragstart')
+      this._move(ox, oy)
+    } else if (r < this.triangleRadius) {
+      // Inner circle
+      this.down = 'triangle'
+      this._fireEvent('dragstart')
+      this._move(ox, oy)
+    }
+  }
+
+  _move (x, y) {
+    if (!this.down) {
+      return
+    }
+
+    x -= this.offset.x + this.wheelRadius
+    y -= this.offset.y + this.wheelRadius
+
+    let rad = M.atan2(-y, x)
+    if (rad < 0) {
+      rad += 2 * PI
+    }
+
+    if (this.down === 'wheel') {
+      this.hue = rad
+      this._initColor()
+      this._fireEvent('drag')
+    } else if (this.down === 'triangle') {
+      // get radius and max radius
+      let rad0 = (rad + 2 * PI - this.hue) % (2 * PI)
+      let rad1 = rad0 % ((2 / 3) * PI) - (PI / 3)
+      let a = 0.5 * this.triangleRadius
+      let b = M.tan(rad1) * a
+      let r = M.sqrt(x * x + y * y) // Pythagoras
+      let maxR = M.sqrt(a * a + b * b) // Pythagoras
+
+      if (r > maxR) {
+        const dx = M.tan(rad1) * r
+        let rad2 = M.atan(dx / maxR)
+        if (rad2 > PI / 3) {
+          rad2 = PI / 3
+        } else if (rad2 < -PI / 3) {
+          rad2 = -PI / 3
+        }
+        rad += rad2 - rad1
+
+        rad0 = (rad + 2 * PI - this.hue) % (2 * PI)
+        rad1 = rad0 % ((2 / 3) * PI) - (PI / 3)
+        b = M.tan(rad1) * a
+        r = maxR = M.sqrt(a * a + b * b) // Pythagoras
+      }
+
+      x = M.round(M.cos(rad) * r)
+      y = M.round(-M.sin(rad) * r)
+
+      const l = this.lightness = ((M.sin(rad0) * r) / this.triangleSideLength) + 0.5
+
+      const widthShare = 1 - (M.abs(l - 0.5) * 2)
+      let s = this.saturation = (((M.cos(rad0) * r) + (this.triangleRadius / 2)) / (1.5 * this.triangleRadius)) / widthShare
+      s = M.max(0, s) // cannot be lower than 0
+      s = M.min(1, s) // cannot be greater than 1
+
+      this.lightness = l
+      this.saturation = s
+
+      this.x = x
+      this.y = y
+      this._moveTrianglePointer()
+
+      this._fireEvent('drag')
+    }
+  }
+
+  /***************
+   * Init helpers *
+   ***************/
+
+  static initInput (input, options) {
+    options = options || {}
+
+    let ct
+    let openColorTriangle = function () {
+      let hex = input.value
+      if (options.parseColor) hex = options.parseColor(hex)
+      if (!ct) {
+        options.size = options.size || input.offsetWidth
+        options.background = win.getComputedStyle(input, null).backgroundColor
+        options.margin = options.margin || 10
+        options.event = options.event || 'dragend'
+
+        ct = new ColorTriangle(hex, options)
+        ct.addEventListener(options.event, () => {
+          const hex = ct.getHEX()
+          input.value = options.uppercase ? hex.toUpperCase() : hex
+          fireChangeEvent()
+        })
+      } else {
+        ct.setHEX(hex)
+      }
+
+      let top = input.offsetTop
+      if (win.innerHeight - input.getBoundingClientRect().top > input.offsetHeight + options.margin + options.size) {
+        top += input.offsetHeight + options.margin // below
+      } else {
+        top -= options.margin + options.size // above
+      }
+
+      let el = ct.getElement()
+      el.style.position = 'absolute'
+      el.style.left = input.offsetLeft + 'px'
+      el.style.top = top + 'px'
+      el.style.zIndex = '1338' // above everything
+
+      ct.inject(input.parentNode)
+    }
+
+    let closeColorTriangle = () => {
+      if (ct) {
+        ct.dispose()
+      }
+    }
+
+    let fireChangeEvent = () => {
+      let evt = doc.createEvent('HTMLEvents')
+      evt.initEvent('input', true, false) // bubbles = true, cancable = false
+      input.dispatchEvent(evt) // fire event
+    }
+
+    input.addEventListener('focus', openColorTriangle, false)
+    input.addEventListener('blur', closeColorTriangle, false)
+    input.addEventListener('keyup', () => {
+      const val = input.value
+      if (val.match(/^#((?:[0-9A-Fa-f]{3})|(?:[0-9A-Fa-f]{6}))$/)) {
+        openColorTriangle()
+        fireChangeEvent()
+      } else {
+        closeColorTriangle()
+      }
+    }, false)
+  }
+
+  /*******************
+   * Helper functions *
+   *******************/
+
+  _setOptions (opts) {
+    opts = opts || {}
+    let dflt = this.options
+    let options = this.options = {}
+
+    each(dflt, function (val, key) {
+      options[key] = (opts.hasOwnProperty(key))
+        ? opts[key]
+        : val
+    })
+  }
+
+  addEventListener (type, fn) {
+    if (!this.events) {
+      this.events = {}
+    }
+    if (!this.events[type]) {
+      this.events[type] = []
+    }
+    this.events[type].push(fn)
+  }
+
+  removeEventListener (type, fn) {
+    if (this.events) {
+      let fns = this.events[type]
+      const l = fns.length
+      for (let i = 0; i < l; i += 1) {
+        if (fns[i] === fn) {
+          fns.splice(i, 1)
+          break
+        }
+      }
+    }
+  }
+
+  _fireEvent (type) {
+    if (this.events) {
+      let evts = this.events[type]
+      if (evts) {
+        const args = Array.prototype.slice.call(arguments, 1)
+        each(evts, function (evt) {
+          evt(...args)
+        })
+      }
+    }
+  }
+}

js/term/themes.js

@@ -1,4 +1,5 @@
 const $ = require('../lib/chibi')
+const { rgb_to_hex } = require('../lib/color_utils')
 
 const themes = exports.themes = [
   [ // 0 - Tango - terminator
@@ -73,7 +74,7 @@ exports.buildColorTable = function () {
 
   // 256color lookup table
   // should not be used to look up 0-15 (will return transparent)
-  colorTable256 = new Array(16).fill('rgba(0, 0, 0, 0)')
+  colorTable256 = new Array(16).fill('#000000')
 
   // fill color table
   // colors 16-231 are a 6x6x6 color cube
@@ -83,14 +84,14 @@ exports.buildColorTable = function () {
         let redValue = red * 40 + (red ? 55 : 0)
         let greenValue = green * 40 + (green ? 55 : 0)
         let blueValue = blue * 40 + (blue ? 55 : 0)
-        colorTable256.push(`rgb(${redValue}, ${greenValue}, ${blueValue})`)
+        colorTable256.push(rgb_to_hex(redValue, greenValue, blueValue))
       }
     }
   }
   // colors 232-255 are a grayscale ramp, sans black and white
   for (let gray = 0; gray < 24; gray++) {
     let value = gray * 10 + 8
-    colorTable256.push(`rgb(${value}, ${value}, ${value})`)
+    colorTable256.push(rgb_to_hex(value, value, value))
   }
 
   return colorTable256
@@ -102,17 +103,17 @@ exports.SELECTION_BG = '#b2d7fe'
 exports.themePreview = function (themeN) {
   $('[data-fg]').forEach((elem) => {
     let shade = elem.dataset.fg
-    if (/^\d+$/.test(shade)) shade = exports.toCss(shade, themeN)
+    if (/^\d+$/.test(shade)) shade = exports.toHex(shade, themeN)
     elem.style.color = shade
   })
   $('[data-bg]').forEach((elem) => {
     let shade = elem.dataset.bg
-    if (/^\d+$/.test(shade)) shade = exports.toCss(shade, themeN)
+    if (/^\d+$/.test(shade)) shade = exports.toHex(shade, themeN)
     elem.style.backgroundColor = shade
   })
 }
 
-exports.toCss = function (shade, themeN) {
+exports.toHex = function (shade, themeN) {
   if (/^\d+$/.test(shade)) {
     shade = +shade
     if (shade < 16) shade = themes[themeN][shade]

js/term_conf.js

@@ -0,0 +1,105 @@
+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(
+        '<span class="preset" ' +
+        'data-xfg="' + fg + '" data-xbg="' + bg + '" ' +
+        'style="color:' + fg + ';background:' + bg + '" title="' + tit + '">&nbsp;' + lbl + '&nbsp;</span>')
+
+    if ((i + 1) % 5 === 0) $presets.htmlAppend('<br>')
+  }
+
+  $('.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()
+}

pages/cfg_term.php

@@ -26,8 +26,8 @@
 			<option value="8">Apple II</option>
 			<option value="9">Commodore</option>
 		</select>
-		<span onclick="prevTheme()" class="mq-no-phone theme-nav-btn">◀</span>
+		<span onclick="TermConf.prevTheme()" class="mq-no-phone theme-nav-btn">◀</span>
-		<span onclick="nextTheme()" class="mq-no-phone theme-nav-btn">▶</span>
+		<span onclick="TermConf.nextTheme()" class="mq-no-phone theme-nav-btn">▶</span>
 	</div>
 
 	<div class="Row color-preview">
@@ -300,30 +300,6 @@
 </form>
 
 <script>
-  function showColor() {
-    var ex = qs('.color-example');
-    var fg = $('#default_fg').val();
-    var 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';
-    }
-
-    var themeN = +$('#theme').val();
-    ex.dataset.fg = fg;
-    ex.dataset.bg = bg;
-
-    themes.themePreview(themeN);
-
-    $('.colorprev.fg span').css('background', themes.toCss(bg, themeN));
-  }
-
   $.ready(function () {
     $('#cursor_shape').val('%cursor_shape%');
     $('#theme').val('%theme%');
@@ -331,58 +307,6 @@
     $('#uart_parity').val('%uart_parity%');
     $('#uart_stopbits').val('%uart_stopbits%');
 
-    $('#theme').on('change', showColor);
+    TermConf.init();
-
+  });
-    $('#default_fg').on('input', showColor)
-    $('#default_bg').on('input', showColor)
-
-    $('.colorprev.bg span').on('click', function () {
-      var bg = this.dataset.bg;
-      if (typeof bg != 'undefined') $('#default_bg').val(bg);
-      showColor()
-    });
-
-    $('.colorprev.fg span').on('click', function () {
-      var fg = this.dataset.fg;
-      if (typeof fg != 'undefined') $('#default_fg').val(fg);
-      showColor()
-    });
-
-    var $presets = $('#fgbg_presets');
-    for (var i = 0; i < themes.fgbgThemes.length; i++) {
-      var thm = themes.fgbgThemes[i];
-      var fg = thm[0];
-      var bg = thm[1];
-      var lbl = thm[2];
-      var tit = thm[3];
-      $presets
-        .htmlAppend(
-          '<span class="preset" ' +
-          'data-xfg="' + fg + '" data-xbg="' + bg + '" ' +
-          'style="color:' + fg + ';background:' + bg + '" title="' + tit + '">&nbsp;' + lbl + '&nbsp;</span>');
-
-      if ((i + 1) % 5 == 0) $presets.htmlAppend('<br>');
-    }
-
-    $('.preset').on('click', function () {
-      $('#default_fg').val(this.dataset.xfg)
-      $('#default_bg').val(this.dataset.xbg)
-      showColor()
-    });
-
-    showColor();
-  })
-
-  function nextTheme() {
-    var sel = qs('#theme');
-    var i = sel.selectedIndex;
-    sel.options[++i % sel.options.length].selected = true;
-    showColor();
-  }
-  function prevTheme() {
-    var sel = qs('#theme');
-    var i = sel.selectedIndex;
-    sel.options[(sel.options.length+(--i)) % sel.options.length].selected = true;
-    showColor();
-  }
 </script>