From 4f72c5e113801b6f83fcd4bc1eb2d7f7872c495a Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Wed, 22 Aug 2018 09:20:19 +0200
Subject: [PATCH] Display a colored square left from values containing a color

---
 examples/01_basic_usage.html  |  1 +
 src/css/jsoneditor.css        |  9 +++++++++
 src/js/Node.js                | 28 ++++++++++++++++++++++++++--
 src/js/util.js                | 22 ++++++++++++++++++++++
 test/test_build.html          |  1 +
 test/test_build_min.html      |  1 +
 test/test_minimalist_min.html |  1 +
 7 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/examples/01_basic_usage.html b/examples/01_basic_usage.html
index 60545a1..129da23 100644
--- a/examples/01_basic_usage.html
+++ b/examples/01_basic_usage.html
@@ -31,6 +31,7 @@
     var json = {
       'array': [1, 2, 3],
       'boolean': true,
+      'color': '#82B92C',
       'null': null,
       'number': 123,
       'object': {'a': 'b', 'c': 'd'},
diff --git a/src/css/jsoneditor.css b/src/css/jsoneditor.css
index d5a28d0..718d01b 100644
--- a/src/css/jsoneditor.css
+++ b/src/css/jsoneditor.css
@@ -199,6 +199,15 @@ div.jsoneditor-tree div.jsoneditor-show-more a:focus {
   color: #ee422e;
 }
 
+div.jsoneditor-tree div.jsoneditor-color {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin: 4px;
+
+  border: 1px solid #808080;
+}
+
 div.jsoneditor {
   color: #1A1A1A;
   border: 1px solid #3883fa;
diff --git a/src/js/Node.js b/src/js/Node.js
index 95cb815..7ce5810 100644
--- a/src/js/Node.js
+++ b/src/js/Node.js
@@ -1619,7 +1619,6 @@ Node.prototype._updateDomValue = function () {
   if (domValue) {
     var classNames = ['jsoneditor-value'];
 
-
     // set text color depending on value type
     var value = this.value;
     var type = (this.type == 'auto') ? util.type(value) : this.type;
@@ -1680,8 +1679,8 @@ Node.prototype._updateDomValue = function () {
       }
     }
 
+    // create select box when this node has an enum object
     if (this.enum && this.editable.value) {
-      // create select box when this node has an enum object
       if (!this.dom.select) {
         this.dom.select = document.createElement('select');
         this.id = this.field + "_" + new Date().getUTCMilliseconds();
@@ -1737,6 +1736,31 @@ Node.prototype._updateDomValue = function () {
       }
     }
 
+    // show color picker when value is a color
+    if (this.editable.value && typeof value === 'string' && util.isValidColor(value)) {
+      if (!this.dom.color) {
+        this.dom.color = document.createElement('div');
+        this.dom.color.className = 'jsoneditor-color';
+
+        this.dom.tdColor = document.createElement('td');
+        this.dom.tdColor.className = 'jsoneditor-tree';
+        this.dom.tdColor.appendChild(this.dom.color);
+
+        this.dom.tdValue.parentNode.insertBefore(this.dom.tdColor, this.dom.tdValue);
+      }
+
+      // update the color background
+      this.dom.color.style.backgroundColor = value;
+    }
+    else {
+      // cleanup color picker when displayed
+      if (this.dom.color) {
+        this.dom.tdColor.parentNode.removeChild(this.dom.tdColor);
+        delete this.dom.tdColor;
+        delete this.dom.color;
+      }
+    }
+
     // strip formatting from the contents of the editable div
     util.stripFormatting(domValue);
   }
diff --git a/src/js/util.js b/src/js/util.js
index bce49c8..cc0e54b 100644
--- a/src/js/util.js
+++ b/src/js/util.js
@@ -976,6 +976,28 @@ exports.getPositionForPath = function(text, paths) {
   
 }
 
+/**
+ * Get the applied color given a color name or code
+ * Source: https://stackoverflow.com/questions/6386090/validating-css-color-names/33184805
+ * @param {string} color
+ * @returns {string | null} returns the color if the input is a valid
+ *                   color, and returns null otherwise. Example output:
+ *                   'rgba(255,0,0,0.7)' or 'rgb(255,0,0)'
+ */
+exports.getColorCSS = function (color) {
+  var ele = document.createElement('div');
+  ele.style.color = color;
+  return ele.style.color.split(/\s+/).join('').toLowerCase() || null;
+}
+
+/**
+ * Test if a string contains a valid color name or code.
+ * @param {string} color
+ * @returns {boolean} returns true if a valid color, false otherwise
+ */
+exports.isValidColor = function (color) {
+  return !!exports.getColorCSS(color);
+}
 
 if (typeof Element !== 'undefined') {
   // Polyfill for array remove
diff --git a/test/test_build.html b/test/test_build.html
index c8e22b3..539d88d 100644
--- a/test/test_build.html
+++ b/test/test_build.html
@@ -64,6 +64,7 @@
   json = {
     "array": [1, 2, [3,4,5]],
     "boolean": true,
+    "color": "#82B92C",
     "htmlcode": '&quot;',
     "escaped_unicode": '\\u20b9',
     "unicode": '\u20b9,\uD83D\uDCA9',
diff --git a/test/test_build_min.html b/test/test_build_min.html
index 28d777f..9f21183 100644
--- a/test/test_build_min.html
+++ b/test/test_build_min.html
@@ -50,6 +50,7 @@
   json = {
     "array": [1, 2, 3],
     "boolean": true,
+    "color": "#82B92C",
     "null": null,
     "number": 123,
     "object": {"a": "b", "c": "d"},
diff --git a/test/test_minimalist_min.html b/test/test_minimalist_min.html
index f6575a2..1e7f50f 100644
--- a/test/test_minimalist_min.html
+++ b/test/test_minimalist_min.html
@@ -50,6 +50,7 @@
   json = {
     "array": [1, 2, 3],
     "boolean": true,
+    "color": "#82B92C",
     "null": null,
     "number": 123,
     "object": {"a": "b", "c": "d"},