Place third party libs inside of lib, use another color picker lib

bower.json

@@ -3,17 +3,13 @@
   "main": "chrome-options.js",
   "version": "0.1.1",
   "description": "Options page for your Chrome extension",
+  "author": "fent (https://github.com/fent)",
   "keywords": [
     "chrome",
     "extension"
   ],
+  "homepage": "https://github.com/fent/chrome-options",
   "license": "MIT",
-  "dependencies": {
-    "jquery": "~2.2.2",
-    "chrome-bootstrap": "~1.5.0",
-    "spectrum": "~1.8.0",
-    "dragula.js": "dragula#^3.7.2"
-  },
   "ignore": [
     "images"
   ]

chrome-options.css

@@ -217,15 +217,50 @@
   margin-right: 0.65em;
 }
 
+.chrome-bootstrap .color .color-alpha {
+  background-color: #ccc;
+  background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), 
+  linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
+  background-size: 8px 8px;
+  background-position: 0 0, 4px 4px
+}
+
+.chrome-bootstrap .color .color-alpha,
+.chrome-bootstrap .color .color-box {
+  position: absolute;
+  margin: 3px 4px;
+  width: 19px;
+  height: 19px;
+  border-radius: 3px;
+  cursor: text;
+}
+
+.chrome-bootstrap .color input[type=text] {
+  padding-left: 27px;
+}
+
+.chrome-bootstrap .color-picker {
+  background: #fff;
+  border: 1px solid #000;
+  border-radius: 5px;
+}
+
+.chrome-bootstrap .color-picker .extra-options {
+  display: flex;
+}
+
+.chrome-bootstrap .color-picker input[type=range] {
+  flex-grow: 1;
+}
+
 .chrome-bootstrap .color-reset {
-  vertical-align: top;
-  border: 3px #000 solid;
-  border-top-right-radius: 35%;
-  border-bottom-right-radius: 35%;
+  border: 1px #000 solid;
   background-color: #fff;
   display: inline-block;
-  width: 15px;
-  height: 19px;
+  width: 20px;
+  height: 20px;
+  box-sizing: content-box;
+  margin-left: auto;
   cursor: pointer;
 }
 

chrome-options.js

@@ -1,4 +1,4 @@
-/* global chrome, $, dragula */
+/* global chrome, dragula, CP */
 /* global h, slideYShow, slideYHide, slideXShow, slideXHide, hideTR, showTR */
 /* global flashClass, util */
 
@@ -867,27 +867,84 @@ chrome.options.fields.text = function(value, save) {
 };
 
 chrome.options.fields.color = function(value, save, option) {
+  var first = true;
+  var format = option.format || 'rgba';
+  if (!['rgb', 'rgba', 'hsl', 'hsla', 'hex'].includes(format)) {
+    throw TypeError('Unsupported format given for color field: ' + format);
+  }
+  var showAlpha = ['rgba', 'hsla'].includes(format);
+  var hsv2hsl = function(d) {
+    return [
+      Math.round(d[0] * 360),
+      Math.round(d[1] * 100) + '%',
+      Math.round(d[2] * 100) + '%'
+    ];
+  };
+  var fn = {
+    rgb: CP._HSV2RGB, rgba: CP._HSV2RGB,
+    hsl: hsv2hsl, hsv2hsl,
+    hex: CP._HSV2HEX,
+  }[format];
+  var debouncedSave = util.debounce(500, save);
+  var onchange = function() {
+    if (first) { return first = false; }
+    var v = fn(picker.set());
+    var color = /^hex/.test(format) ?
+      `#${v}` :
+      `${format}(${v.join(', ')}${showAlpha ? `, ${$alpha.value}` : ''})`;
+    $field.value = color;
+    $color.style.backgroundColor = color;
+    debouncedSave(color);
+  };
+
+  function getAlpha(value) {
+    var r = /(?:rgba|hsla)\(\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(\d?(?:\.\d+)?)\s*\)/
+      .exec(value);
+    return r && r[1] != '' ? r[1] : 1;
+  }
+
   var $container = h('span.color');
-  var $color = $container.appendChild(chrome.options.fields.text(value, save));
-  $($color)
-    .spectrum($.extend({
-      showInput: true,
-      showAlpha: true,
-      showInitial: true,
-    }, option));
+  $container.append(h('span.color-alpha'));
+  var $color = $container.appendChild(h('span.color-box', {
+    style: value ? `background-color: ${value};` : '',
+    onclick: function() { picker.enter(); },
+  }));
+  var $field = chrome.options.fields.text(value, function() {
+    if ($alpha) {
+      $alpha.value = getAlpha($field.value);
+    }
+
+    // color-picker doesn't accept alpha, so take it out.
+    var s = $field.value .split(',');
+    s = s.length >=4 ? s.slice(0, 3).join(',') + ')' : s.join(',');
+    s = s.replace('rgba', 'rgb').replace('hsla', 'hsv').replace('hsl', 'hsv');
+    console.log('set it', $field.value, s);
+    picker.set(s);
+  });
+  $container.append($field);
+  var picker = new CP($field);
+  picker.on('change', onchange);
+
+  var $extraOptions = picker.picker.appendChild(h('.extra-options'));
+  if (showAlpha) {
+    var $alpha = h('input[type=range][min=0][max=1][step=.1]', {
+      'data-title': 'Alpha',
+      onchange,
+      oninput: onchange,
+      value: value != null ? getAlpha(value) : 1,
+    });
+    $extraOptions.append($alpha);
+  }
+
   if (option.default) {
-    var $reset = $container.appendChild(h('span.color-reset', {
+    $extraOptions.append(h('span.color-reset', {
       'data-title': 'Reset to default',
-      onclick: function(e) {
-        $color.spectrum('set', option.default);
-        save(option.default, e);
+      onclick: function() {
+        picker.set(option.default);
+        picker.trigger('change', [option.default]);
       },
+      style: `background-color: ${option.default};`,
     }));
-
-    // There's a bug with jquery where it will save a field's value.
-    requestAnimationFrame(function() {
-      $reset.style.backgroundColor = option.default;
-    });
   }
   return $container;
 };

options.html

@@ -3,10 +3,10 @@
 <head>
   <meta charset="utf-8" />
   <title>chrome options</title>
-  <link rel="stylesheet" type="text/css" href="bower_components/chrome-bootstrap/chrome-bootstrap.min.css" />
+  <link rel="stylesheet" type="text/css" href="bower_components/chrome-options/third_party/chrome-bootstrap.min.css" />
+  <link rel="stylesheet" type="text/css" href="bower_components/chrome-options/third_party/dragula.min.css" />
+  <link rel="stylesheet" type="text/css" href="bower_components/chrome-options/third_party/color-picker.min.css" />
   <link rel="stylesheet" type="text/css" href="bower_components/chrome-options/chrome-options.css" />
-  <link rel="stylesheet" type="text/css" href="bower_components/dragula.js/dist/dragula.min.css" />
-  <link rel="stylesheet" type="text/css" href="bower_components/spectrum/spectrum.css" />
   <link rel="stylesheet" type="text/css" href="custom.css" />
 </head>
 <body class="chrome-bootstrap">
@@ -36,9 +36,8 @@ <h1>About</h1>
       <button disabled>Save</button>
     </div>
   </div>
-  <script src="bower_components/jquery/dist/jquery.min.js"></script>
-  <script src="bower_components/dragula.js/dist/dragula.min.js"></script>
-  <script src="bower_components/spectrum/spectrum.js"></script>
+  <script src="bower_components/chrome-options/third_party/dragula.min.js"></script>
+  <script src="bower_components/chrome-options/third_party/color-picker.min.js"></script>
   <script src="bower_components/chrome-options/dom.js"></script>
   <script src="bower_components/chrome-options/util.js"></script>
   <script src="bower_components/chrome-options/chrome-options.js"></script>

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "chrome-options",
+  "main": "chrome-options.js",
+  "version": "0.1.1",
+  "description": "Options page for your Chrome extension",
+  "author": "fent (https://github.com/fent)",
+  "keywords": [
+    "chrome",
+    "extension",
+    "options"
+  ],
+  "homepage": "https://github.com/fent/chrome-options",
+  "license": "MIT",
+  "ignore": [
+    "images"
+  ]
+}

third_party/README.md

@@ -0,0 +1 @@
+Decided to put dependencies into their own folder, the minified versions. Since installing via bower or npm also installs many unneeded resources that add up to almost 2MB.