remove colorpicker dependency - use native functionality

Author: hmsklee

package.json

@@ -61,8 +61,6 @@
   },
   "homepage": "https://github.com/CreativeCodingLab/TextAnnotationGraphs#readme",
   "dependencies": {
-    "chroma-js": "^1.3.5",
-    "colorPicker": "git+https://github.com/PitPik/colorPicker.git",
     "d3": "^4.12.2",
     "lodash": "^4.17.4",
     "svg.draggable.js": "^2.2.1",

src/css/app.css

@@ -210,8 +210,8 @@ label[for="file-input"] {
   pointer-events:none;
   opacity:0.5;
 }
-.cp-app {
-  z-index:1001;
+#taxonomy input.colorpicker:focus {
+  border-color: white;
 }
 
 body > #tree-svg {

src/js/colorpicker.js

@@ -0,0 +1,67 @@
+class ColorPicker {
+  constructor(className, options = {}) {
+    this.initialColor = options.initialColor || '#000000';
+    this.llColor = options.lightLabelColor || '#dddddd';
+    this.dlColor = options.darkLabelColor || '#333333';
+    this.changeCallback = options.changeCallback || null;
+
+    this.currentInput;
+    this.picker = document.createElement('input');
+    this.picker.type = 'color';
+    this.picker.style = 'position:absolute; display: block; opacity: 0; z-index:-100;';
+    this.picker.onchange = () => {
+      if (this.currentInput) {
+        this.setColor(this.currentInput, this.picker.value);
+        if (this.changeCallback) {
+          this.changeCallback(this.currentInput);
+        }
+      }
+    }
+    document.body.appendChild(this.picker);
+
+    const nodes = document.querySelectorAll(`input.${className}`);
+    this.registerInputs(nodes);
+  }
+
+  registerInputs(nodes) {
+    nodes.forEach(input => {
+      this.setColor(input, this.initialColor);
+
+      input.setAttribute('readonly', true);
+
+      input.onclick = () => {
+        this.currentInput = input;
+        this.picker.focus();
+        this.picker.click();
+        input.focus();
+        this.picker.value = input.colorValue;
+      }
+    });
+  }
+
+  // make label color light on a dark background and dark on a light one
+  getLabelColor(bgColor) {
+    return (this.RGBLum(bgColor) > 128) ? this.dlColor : this.llColor;
+  }
+
+  // set the color of an input
+  setColor(input, hex) {
+    input.colorValue = hex;
+    input.value = hex;
+    input.style.backgroundColor = hex;
+    input.style.color = this.getLabelColor(hex);
+  }
+
+  // return the perceptive luminescence from a hex value for color contrast
+  RGBLum(hex) {
+    let c = parseInt(hex.slice(1), 16);
+
+    let r = (c >> 16) & 0xff;
+    let g = (c >> 8) & 0xff;
+    let b = (c >> 0) & 0xff;
+
+    return 0.299 * r + 0.587 * g + 0.114 * b;
+  }
+}
+
+module.exports = ColorPicker;

src/js/main.js

@@ -139,7 +139,7 @@ const Main = (function() {
     // window event listeners
     // resize function
     function resizeWindow() {
-      body = document.body.getBoundingClientRect();
+      let body = document.body.getBoundingClientRect();
       links.forEach(l => l.hide());
       svg.width(body.width);
       rm.width(body.width);

src/js/managers/taxonomy.js

@@ -1,4 +1,4 @@
-import * as jsColorPicker from 'colorPicker/colorPicker.js';
+import ColorPicker from '../colorpicker.js';
 import Word from '../components/word.js';
 
 module.exports = (function() {
@@ -169,46 +169,10 @@ module.exports = (function() {
     // bind events to data
     attachHandlers() {
       // initialize colorpicker
-      let self = this;
-      jsColorPicker('input.colorpicker', {
-        customBG: '#000',
-        init: function(elm, colors) {
-          elm.style.backgroundColor = elm.value || '#000';
-          elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
-        },
-        renderCallback: function(colors, mode) {
-          /* ---- code taken from jsColor.js ---- */
-          var options = this,
-            input = options.input,
-            patch = options.patch,
-            RGB = colors.RND.rgb,
-            HSL = colors.RND.hsl,
-            AHEX = options.isIE8 ? (colors.alpha < 0.16 ? '0' : '') +
-              (Math.round(colors.alpha * 100)).toString(16).toUpperCase() + colors.HEX : '',
-            RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
-            RGBAText = 'rgba(' + RGBInnerText + ', ' + colors.alpha + ')',
-            isAlpha = colors.alpha !== 1 && !options.isIE8,
-            colorMode = input.getAttribute('data-colorMode');
-
-          patch.style.cssText =
-            'color:' + (colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd') + ';' + // Black...???
-            'background-color:' + RGBAText + ';' +
-            'filter:' + (options.isIE8 ? 'progid:DXImageTransform.Microsoft.gradient(' + // IE<9
-              'startColorstr=#' + AHEX + ',' + 'endColorstr=#' + AHEX + ')' : '');
-
-          input.value = (colorMode === 'HEX' && !isAlpha ? '#' + (options.isIE8 ? AHEX : colors.HEX) :
-            colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
-            (!isAlpha ? 'rgb(' + RGBInnerText + ')' : RGBAText) :
-            ('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%' +
-              (isAlpha ? ', ' + colors.alpha : '') + ')')
-          );
-
-          if (options.displayCallback) {
-            options.displayCallback(colors, mode, options);
-          }
-
-          /* -- manually invoke callback -- */
-          self.setColor(this.input.node);
+      this.colorpicker = new ColorPicker('colorpicker', {
+        initialColor: '#000000',
+        changeCallback: (input) => {
+          this.setColor(input.node);
         }
       });
 
@@ -253,10 +217,7 @@ module.exports = (function() {
 
       // manually set color
       if (color) {
-        const c = new Colors({ color: color });
-        const labelColor = c.colors.RGBLuminance > 0.22 ? '#222' : '#ddd';
-        picker.value = color;
-        picker.style.cssText = `color:${labelColor}; background-color:${color};`;
+        this.colorpicker.setColor(picker, color);
       }
 
       if (tagTypes[node.val]) {
@@ -286,7 +247,7 @@ module.exports = (function() {
     }
 
     remove(object) {
-      // TODO: fix the fuck out of this
+      // FIXME
       return;
       let tag = object.val;
       let entity = object.entity;
@@ -302,7 +263,7 @@ module.exports = (function() {
     }
 
     getColor(label, object) {
-      //FIXME: fix me the fuck up
+      //FIXME
       return;
       let keys = Object.keys(tagTypes);
       if (tagTypes[label]) {