Add an "open" and "close" events

Fixes #40
mdbassit · Apr 23, 2022 · 18064da · 18064da
1 parent 90d37b8
commit 18064da
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -172,8 +172,14 @@ Coloris({
 
 ### Events
 
-An `input` event is triggered on the bound input field whenever a new color is selected.  
-A `change` event is triggered when the color picker is closed and if the color has changed since it was opened.
+All events are triggered on the last active input field that is bound to the color picker.
+
+| Event    | Description                                                   |
+| -------- | ------------------------------------------------------------- |
+| `open`   | The color picker is opened                                    |
+| `close`  | The color picker is closed                                    |
+| `input`  | A new color is selected                                       |
+| `change` | The color picker is closed and the selected color has changed |
 
 ### Closing the color picker
 

diff --git a/src/coloris.js b/src/coloris.js
@@ -235,6 +235,9 @@
       if (settings.focusInput) {
         colorValue.focus({ preventScroll: true });
       }
+
+      // Trigger an "open" event
+      currentEl.dispatchEvent(new Event('open', { bubbles: true }));
     });
 
     // Update the color preview of the input fields that match the selector
@@ -286,8 +289,12 @@
         currentEl.dispatchEvent(new Event('change', { bubbles: true }));
       }
 
+      // Hide the picker dialog
       picker.classList.remove('clr-open');
 
+      // Trigger a "close" event
+      currentEl.dispatchEvent(new Event('close', { bubbles: true }));
+
       if (settings.focusInput) {
         currentEl.focus({ preventScroll: true });
       }