#56

taufik-nurrohman · May 27, 2020 · bb7051a · bb7051a
1 parent 3db1625
commit bb7051a
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -46,6 +46,11 @@ This project exists thanks to all the people who contribute.
 Release Notes
 -------------
 
+### 2.1.0
+
+ - Added ability to clear the hook storage object if it’s empty.
+ - Added `blur` and `focus` hook that removed `state.e` option.
+
 ### 2.0.3
 
  - Added `CP.state` property to set initial state globally.

diff --git a/color-picker.button.html b/color-picker.button.html
@@ -11,10 +11,14 @@
     <script src="color-picker.min.js"></script>
     <script>
 
-    var picker = new CP(document.querySelector('input'), false),
+    var picker = new CP(document.querySelector('input')),
         button = document.querySelector('button'),
         text = button.textContent;
 
+    // Disable the default blur and focus behavior
+    picker.on('blur', function() {});
+    picker.on('focus', function() {});
+
     picker.on('change', function(r, g, b, a) {
         this.source.value = this.color(r, g, b, a);
     });

diff --git a/color-picker.close.html b/color-picker.close.html
@@ -14,6 +14,9 @@
 
     var picker = new CP(document.querySelector('input'));
 
+    // Disable the default blur behavior
+    picker.on('blur', function() {});
+
     picker.on('change', function(r, g, b, a) {
         this.source.value = this.color(r, g, b, a);
     });

diff --git a/color-picker.e.html b/color-picker.e.html
diff --git a/color-picker.events.html b/color-picker.events.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta content="width=device-width" name="viewport">
+    <title>Color Picker</title>
+    <link href="color-picker.min.css" rel="stylesheet">
+  </head>
+  <body>
+    <p>Show and hide color picker panel with double click.</p>
+    <p><input type="text"></p>
+    <script src="color-picker.min.js"></script>
+    <script>
+
+    var picker = new CP(document.querySelector('input'));
+
+    // Disable the default blur and focus behavior
+    picker.on('blur', function() {});
+    picker.on('focus', function() {});
+
+    picker.on('change', function(r, g, b, a) {
+        this.source.value = this.color(r, g, b, a);
+    });
+
+    picker.source.addEventListener('dblclick', function(e) {
+        picker.enter();
+        e.stopPropagation();
+    }, false);
+
+    document.documentElement.addEventListener('dblclick', function() {
+        picker.exit();
+    }, false);
+
+    </script>
+  </body>
+</html>
diff --git a/color-picker.js b/color-picker.js
@@ -1,6 +1,6 @@
 /*!
  * ==============================================================
- *  COLOR PICKER 2.0.3
+ *  COLOR PICKER 2.1.0
  * ==============================================================
  * Author: Taufik Nurrohman <https://github.com/taufik-nurrohman>
  * License: MIT
@@ -185,12 +185,11 @@
 
     (function($$) {
 
-        $$.version = '2.0.3';
+        $$.version = '2.1.0';
 
         $$.state = {
             'class': 'color-picker',
             'color': HEX,
-            'e': downEvents,
             'parent': null
         };
 
@@ -230,8 +229,8 @@
             $$ = win[name],
             hooks = {},
             self = doc.createElement('div'),
-            state = Object.assign({}, $$.state, false === o || o instanceof Array ? {
-                'e': o
+            state = Object.assign({}, $$.state, isString(o) ? {
+                'color': o
             } : (o || {})),
             cn = state['class'];
 
@@ -291,6 +290,10 @@
                             hooks[name].splice(i, 1);
                         }
                     }
+                    // Clean-up empty hook(s)
+                    if (0 === j) {
+                        delete hooks[name];
+                    }
                 } else {
                     delete hooks[name];
                 }
@@ -328,7 +331,6 @@
             body = doc.body,
             color = value(),
             data = RGB2HSV(color),
-            events = state.e,
             C = self.firstChild,
             SV = C[children][0],
             H = C[children][1],
@@ -359,20 +361,23 @@
         }
 
         function doClick(e) {
-            var t = e.target,
-                isSource = source === closestGet(t, source);
-            if (isSource) {
-                !isVisible() && doEnter(state.parent);
+            if (hooks.focus) {
+                hookFire('focus', color);
             } else {
-                doExit();
+                var t = e.target,
+                    isSource = source === closestGet(t, source);
+                if (isSource) {
+                    !isVisible() && doEnter(state.parent);
+                } else {
+                    doExit();
+                }
             }
         }
 
         function doApply(isFirst, to) {
 
             // Refresh value
             data = RGB2HSV(color = value());
-            events = state.e;
 
             if (!isFirst) {
                 (to || state.parent || body).appendChild(self), ($.visible = true);
@@ -442,9 +447,7 @@
                 ACursorSizeHeight = sizeGet(ACursor)[1];
 
             if (isFirst) {
-                if (false !== events) {
-                    eventsSet(source, events, doClick);
-                }
+                eventsSet(source, downEvents, doClick);
                 delay(function() {
                     hookFire('change', color);
                 }, 1);
@@ -477,9 +480,11 @@
                     isSelf = self === closestGet(t, self);
                 $.current = null;
                 if (!isSource && !isSelf) {
-                    // Click outside the source or picker element to exit
-                    if (isVisible() && false !== events) {
-                        doExit();
+                    if (hooks.blur) {
+                        hookFire('blur', color);
+                    } else {
+                        // Click outside the source or picker element to exit
+                        isVisible() && doExit();
                     }
                 } else {
                     if (isSelf) {
@@ -575,9 +580,7 @@
                 return $; // Already ejected
             }
             delete source[name];
-            if (false !== events) {
-                eventsLet(source, events, doClick);
-            }
+            eventsLet(source, downEvents, doClick);
             return doExit(), hookFire('pop', color);
         };
 

diff --git a/color-picker.min.js b/color-picker.min.js