parent
d85f6c6ea0
commit
0468b3adf5
GPG Key ID:
2C5FD5035250423D
@ -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)}` |
||||
} |
||||
@ -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) |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -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 + '"> ' + lbl + ' </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() |
||||
} |
||||
Loading…
Reference in new issue