Fixed #17, #18

index.html

@@ -617,6 +617,10 @@ <h3>Chrome Devtool Style</h3>
         <h3>Sketch Style</h3>
         <div class="colorpicker-style" data-type="sketch"></div>
     </div>
+    <div class="colorpicker-type">
+        <h3>MacOS Style</h3>
+        <div class="colorpicker-style" data-type="macos"></div>
+    </div>    
     <div class="colorpicker-type">
         <h3>Only Palette Style</h3>
         <div class="colorpicker-style" data-type="palette"></div>
@@ -907,7 +911,7 @@ <h3>white, red 0.2, blue 0.6, magenta 0.95, yellow - count 100</h3>
 </section>
 
 
-<section style="display: none">
+<section>
 <h1 class="title">Default Html Sample </h1>
 
 <div>
@@ -989,7 +993,8 @@ <h1 class="title">Default Html Sample </h1>
           }
         },
         colorpicker : {
-            mode : 'edit'
+            mode : 'edit',
+            hideDelay: 0
         }
     });
 
@@ -1006,8 +1011,9 @@ <h1 class="title">Default Html Sample </h1>
 
         colorpicker.show({
             left : (target.offsetWidth + target.offsetLeft),
-            top : event.clientY 
-        }, color, function (newColor) {
+            top : event.clientY,
+            hideDelay: 0
+        }, 'hsla(0,100%,54%,0.67)', function (newColor) {
 
             var temp = Color.parse(newColor);
 
@@ -1016,8 +1022,6 @@ <h1 class="title">Default Html Sample </h1>
             target.style.backgroundColor = newColor;
             target.style.color = textColor;
             target.textContent = newColor;
-            //console.log(color, newColor);
-
 
             var rgb = Color.RGBtoGray(temp);
 
@@ -1114,7 +1118,7 @@ <h1 class="title">Default Html Sample </h1>
         var type = item.getAttribute('data-type');
 
         for(var j = 0; j < 1; j++) {
-            var picker = new CodeMirrorColorPicker.ColorPicker({
+            var picker = new CodeMirrorColorPicker.create({
                 position: 'inline',
                 container: item,
                 type: type,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codemirror-colorpicker",
-  "version": "1.9.20",
+  "version": "1.9.21",
   "description": "simple colorpicker used anywhere",
   "main": "./dist/codemirror-colorpicker.js",
   "scripts": {

src/colorpicker/BaseColorPicker.js

@@ -23,7 +23,7 @@ export default class BaseColorPicker extends EventMachin {
 
         this.isColorPickerShow = false;
         this.isShortCut = false;
-        this.hideDelay = this.opt.hideDeplay || 2000;
+        this.hideDelay = +(typeof this.opt.hideDeplay == 'undefined' ? 2000 : this.opt.hideDelay);
         this.timerCloseColorPicker;
         this.autoHide = this.opt.autoHide || true;
 
@@ -149,16 +149,18 @@ export default class BaseColorPicker extends EventMachin {
         this.colorpickerCallback = callback;
 
         // define hide delay
-        this.hideDelay = opt.hideDelay || 2000;
-        if (this.hideDelay > 0) {
+        this.hideDelay = +(typeof opt.hideDelay == 'undefined' ? 2000 : opt.hideDelay );
+        // if (this.hideDelay > 0) {
             this.setHideDelay(this.hideDelay);
-        }
+        // }
 
     }
 
     setHideDelay(delayTime) {
         delayTime = delayTime || 0;
 
+        const hideCallback = this.hide.bind(this);
+
         this.$root.off('mouseenter');
         this.$root.off('mouseleave');
 
@@ -168,11 +170,11 @@ export default class BaseColorPicker extends EventMachin {
 
         this.$root.on('mouseleave', () => {
             clearTimeout(this.timerCloseColorPicker);
-            this.timerCloseColorPicker = setTimeout(this.hide.bind(this), delayTime);
+            this.timerCloseColorPicker = setTimeout(hideCallback, delayTime);
         });
 
         clearTimeout(this.timerCloseColorPicker);
-        this.timerCloseColorPicker = setTimeout(this.hide.bind(this), delayTime);
+        // this.timerCloseColorPicker = setTimeout(hideCallback, delayTime);
     }
 
     hide() {

src/colorpicker/chromedevtool/ColorInformation.js

@@ -51,7 +51,7 @@ export default class ColorInformation extends EventMachin {
                 <div class="input-field hsl-s">
                     <input ref="$hsl_s" class="input" type="number" step="1" min="0" max="100" />
                     <div class="postfix">%</div>
-                    <div class="title">H</div>
+                    <div class="title">S</div>
                 </div>
                 <div class="input-field hsl-l">
                     <input ref="$hsl_l" class="input" type="number" step="1" min="0" max="100" />

src/colorpicker/chromedevtool/control/Hue.js

@@ -7,7 +7,7 @@ import EventMachin from '../../../util/EventMachin'
 export default class Hue extends EventMachin {
     constructor (parent) {
         super();
-        this.parent = parent; 
+        this.parent = parent ; 
         this.initialize();
     } 
 

src/colorpicker/chromedevtool/index.js

@@ -1,5 +1,4 @@
 import Color from '../../util/Color'
-import Dom from '../../util/Dom'
 
 import BaseColorPicker from '../BaseColorPicker'
 
@@ -105,106 +104,7 @@ export default class ColorPicker extends BaseColorPicker {
         return rgb;
     }
 
-    definePositionForArrow(opt, elementScreenLeft, elementScreenTop) {
-        //this.$arrow.css({})
-    }
-
-    definePosition(opt) {
-
-        var width = this.$root.width();
-        var height = this.$root.height();
-
-        // set left position for color picker
-        var elementScreenLeft = opt.left - this.$body.scrollLeft();
-        if (width + elementScreenLeft > window.innerWidth) {
-            elementScreenLeft -= (width + elementScreenLeft) - window.innerWidth;
-        }
-        if (elementScreenLeft < 0) { elementScreenLeft = 0; }
-
-        // set top position for color picker
-        var elementScreenTop = opt.top - this.$body.scrollTop();
-        if (height + elementScreenTop > window.innerHeight) {
-            elementScreenTop -= (height + elementScreenTop) - window.innerHeight;
-        }
-        if (elementScreenTop < 0) { elementScreenTop = 0; }
-
-        // set position
-        this.$root.css({
-            left: (elementScreenLeft) + 'px',
-            top: (elementScreenTop) + 'px'
-        });
-    }
-
-    getInitalizePosition() {
-        if (this.opt.position == 'inline') {
-            return {
-                position: 'relative',
-                left: 'auto',
-                top: 'auto',
-                display: 'inline-block'
-            }
-        } else {
-           return {
-                position: 'fixed',  // color picker has fixed position
-                left: '-10000px',
-                top: '-10000px'
-            }
-        }
-    }
-
-    show(opt, color, callback) {
-        this.destroy();
-        this.initializeEvent();
-        this.$root.appendTo(this.$body);
-
-        this.$root.css(this.getInitalizePosition()).show();
-
-        this.definePosition(opt);
-
-        this.isColorPickerShow = true;
-
-        this.isShortCut = opt.isShortCut || false;
-
-        this.initColor(color);
 
-        // define colorpicker callback
-        this.colorpickerCallback = callback;
-
-        // define hide delay
-        this.hideDelay = opt.hideDelay || 2000;
-        if (this.hideDelay > 0) {
-            this.setHideDelay(this.hideDelay);
-        }
-
-    }
-
-    setHideDelay(delayTime) {
-        delayTime = delayTime || 0;
-
-        this.$root.off('mouseenter');
-        this.$root.off('mouseleave');
-
-        this.$root.on('mouseenter', () => {
-            clearTimeout(this.timerCloseColorPicker);
-        });
-
-        this.$root.on('mouseleave', () => {
-            clearTimeout(this.timerCloseColorPicker);
-            this.timerCloseColorPicker = setTimeout(this.hide.bind(this), delayTime);
-        });
-
-        clearTimeout(this.timerCloseColorPicker);
-        this.timerCloseColorPicker = setTimeout(this.hide.bind(this), delayTime);
-    }
-
-    hide() {
-        if (this.isColorPickerShow) {
-            this.destroy();
-            this.$root.hide();
-            this.$root.remove();  // not empty 
-            this.isColorPickerShow = false;
-        }
-    }
 
     convertRGB() {
         return Color.HSVtoRGB(this.currentH, this.currentS, this.currentV);
@@ -336,10 +236,10 @@ export default class ColorPicker extends BaseColorPicker {
         let c = newColor || "#FF0000", colorObj = Color.parse(c);
         format = format || colorObj.type;
 
-
         this.setCurrentFormat(format);
 
         let hsv = this.getHSV(colorObj);
+
         this.setCurrentHSV(hsv.h, hsv.s, hsv.v, colorObj.a);
         this.setColorUI();
         this.setHueColor();
@@ -400,18 +300,6 @@ export default class ColorPicker extends BaseColorPicker {
         this.colorSetsList.setUserList(list);
     }
 
-    destroy() {
-        super.destroy();
-
-        this.control.destroy();
-        this.palette.destroy();
-        this.information.destroy();
-        this.colorSetsChooser.destroy();
-        this.colorSetsList.destroy();
-        this.currentColorSets.destroy();
-        this.contextMenu.destroy();
-    }
-
      // Event Bindings 
      'mouseup document' (e) {
 

src/colorpicker/index.js

@@ -1,14 +1,18 @@
+import MacOSColorPicker from './macos/index'
 import ChromeDevToolColorPicker from './chromedevtool/index'
 
 export default {
     create (opts) {
         switch(opts.type) {
+        case 'macos': 
+            return new MacOSColorPicker(opts);
         case 'sketch':
         case 'palette':
         default: 
             return new ChromeDevToolColorPicker(opts);
         }
     },
     ColorPicker: ChromeDevToolColorPicker,
-    ChromeDevToolColorPicker
+    ChromeDevToolColorPicker,
+    MacOSColorPicker
 }