Handle show, hide and changestop events

astronomersiva · Jul 27, 2019 · 6a40f53 · 6a40f53
1 parent a38c1ff
commit 6a40f53
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 1 deletion.
diff --git a/addon/components/color-picker.js b/addon/components/color-picker.js
@@ -10,7 +10,26 @@ import { assert } from '@ember/debug';
 
 import Pickr from 'pickr';
 
-const optionFields = ["theme", "closeOnScroll", "appClass", "useAsButton", "inline", "autoReposition", "sliders", "disabled", "lockOpacity", "outputPrecision", "comparison", "default", "swatches", "defaultRepresentation", "showAlways", "closeWithKey", "position", "adjustableNumbers"];
+const optionFields = [
+  "theme",
+  "closeOnScroll",
+  "appClass",
+  "useAsButton",
+  "inline",
+  "autoReposition",
+  "sliders",
+  "disabled",
+  "lockOpacity",
+  "outputPrecision",
+  "comparison",
+  "default",
+  "swatches",
+  "defaultRepresentation",
+  "showAlways",
+  "closeWithKey",
+  "position",
+  "adjustableNumbers"
+];
 
 /**
  * class ColorPicker
@@ -183,6 +202,20 @@ const ColorPicker = Component.extend({
    */
   adjustableNumbers: true,
 
+  /**
+   * Pickr got closed
+   * @argument onHide
+   * @type {Function}
+   */
+  onHide: undefined,
+
+  /**
+   * Pickr got opened
+   * @argument onShow
+   * @type {Function}
+   */
+  onShow: undefined,
+
   /**
    * User clicked the save / clear button. Also fired on clear with `null` as color.
    * @argument onSave
@@ -206,6 +239,14 @@ const ColorPicker = Component.extend({
    */
   onChange: undefined,
 
+  /**
+   * User has stopped changing the color.
+   * @argument onChangeStop
+   * @type {Function}
+   * @param {HSVaColorObject} colorObject
+   */
+  onChangeStop: undefined,
+
   /**
    * Called after user clicked the cancel button (return to previous color).
    * @argument onCancel
@@ -272,6 +313,14 @@ const ColorPicker = Component.extend({
       if (this.onSave) {
         this.onSave(hsva, instance);
       }
+    }).on('hide', (...args) => {
+      if (this.onHide) {
+        this.onHide(...args);
+      }
+    }).on('show', (...args) => {
+      if (this.onShow) {
+        this.onShow(...args);
+      }
     }).on('clear', (...args) => {
       if (this.onClear) {
         this.onClear(...args);
@@ -280,6 +329,10 @@ const ColorPicker = Component.extend({
       if (this.onChange) {
         this.onChange(...args);
       }
+    }).on('changestop', (...args) => {
+      if (this.onChangeStop) {
+        this.onChangeStop(...args);
+      }
     }).on('cancel', (...args) => {
       if (this.onCancel) {
         this.onCancel(...args);

diff --git a/tests/integration/components/color-picker-test.js b/tests/integration/components/color-picker-test.js
@@ -175,6 +175,8 @@ module('Integration | Component | color-picker', function(hooks) {
 
     this.set('color', '#123');
     this.set('onSave', spyCall('onSave'));
+    this.set('onShow', spyCall('onShow'));
+    this.set('onHide', spyCall('onHide'));
     this.set('onClear', spyCall('onClear'));
     this.set('onChange', spyCall('onChange'));
     this.set('onCancel', spyCall('onCancel'));
@@ -209,6 +211,8 @@ module('Integration | Component | color-picker', function(hooks) {
         onClear=onClear
         onChange=onChange
         onCancel=onCancel
+        onShow=onShow
+        onHide=onHide
         onSwatchSelect=onSwatchSelect
       }}
     `);
@@ -230,6 +234,8 @@ module('Integration | Component | color-picker', function(hooks) {
     await click(inPickr('.pcr-clear[value="Cancel"]'));
 
     assert.ok(calls.onSave, 'called onSave');
+    assert.ok(calls.onShow, 'called onShow');
+    assert.ok(calls.onHide, 'called onHide');
     assert.ok(calls.onClear, 'called onClear');
     assert.ok(calls.onChange, 'called onChange');
     assert.ok(calls.onCancel, 'called onCancel');