Extrapolating the api into api and event api to allow for shared event handling

Author: ruhley

README.md

@@ -54,13 +54,14 @@ angular.module('app', ['color.picker']);
 
 ## Options
 
-HTML - Only ```ng-model``` is required.
+HTML - Only ```ng-model``` is required. If supplying an api it must be a unique object per color picker. However the event api can be shared among color pickers.
 
 ```html
 <color-picker
     ng-model="color"
     options="options"
     api="api"
+    event-api="eventApi"
 ></color-picker>
 ```
 Javascript
@@ -70,7 +71,6 @@ $scope.color = '#FF0000';
 
 // options - if a list is given then choose one of the items. The first item in the list will be the default
 $scope.options = {
-    disabled: [false, true],
     disabled: [false, true],
     format: ['hsl', 'hsv', 'rgb', 'hex', 'hex8'],
     alpha: [true, false],
@@ -83,18 +83,19 @@ $scope.options = {
     inline: [false, true],
 };
 
-// api event handlers
-$scope.api = {
-    onChange: function($event, color) {},
-    onBlur: function() {},
-    onOpen: function() {},
-    onClose: function() {},
-    onDestroy: function() {},
-};
-
-// exposed functions
+// exposed api functions
 $scope.api.open();
 $scope.api.close();
+$scope.api.getElement();
+
+// api event handlers
+$scope.eventApi = {
+    onChange: function(api, color, $event) {},
+    onBlur: function(api, color, $event) {},
+    onOpen: function(api, color, $event) {},
+    onClose: function(api, color, $event) {},
+    onDestroy: function(api, color) {},
+};
 ```
 
 ## Requirements

examples/01-simple.html

@@ -70,7 +70,12 @@ <h1>AngularJS Color Picker</h1>
                     <label class="control-label">Color</label>
                     <button ng-click="open()">Show</button>
                     <button ng-click="close()">Hide</button>
-                    <color-picker ng-model="color" options="options" api="api"></color-picker>
+                    <color-picker
+                        ng-model="color"
+                        options="options"
+                        api="api"
+                        event-api="eventApi"
+                    ></color-picker>
                 </div>
 
                 <div class="row">

examples/app.js

@@ -8,7 +8,8 @@ angular
         $scope.caseOptions = [{label: 'Upper Case', value: 'upper'}, {label: 'Lower Case', value: 'lower'}];
 
         $scope.options = {};
-        $scope.api = {
+        $scope.api = {};
+        $scope.eventApi = {
             onChange: function() {
                 console.log('change', arguments);
             },

src/scripts/controller.js

@@ -73,7 +73,7 @@ export default class AngularColorPickerController {
             this.$document.off('mouseup', this.onMouseUp);
             this.$document.off('mousemove', this.onMouseMove);
 
-            this.callApiFunction('onDestroy');
+            this.eventApiDispatch('onDestroy');
         });
 
         //---------------------------
@@ -141,7 +141,7 @@ export default class AngularColorPickerController {
             this.api = {};
         }
 
-        this.api.open = () => {
+        this.api.open = (event) => {
             // if already visible then don't run show again
             if (this.visible) {
                 return true;
@@ -158,7 +158,7 @@ export default class AngularColorPickerController {
             this.lightnessUpdate();
             this.opacityUpdate();
 
-            this.callApiFunction('onOpen');
+            this.eventApiDispatch('onOpen', [event]);
         };
 
         this.api.close = () => {
@@ -167,9 +167,13 @@ export default class AngularColorPickerController {
                 this.visible = false;
                 this.$scope.$apply();
 
-                this.callApiFunction('onClose');
+                this.eventApiDispatch('onClose', [event]);
             }
         };
+
+        this.api.getElement = () => {
+            return this.$element;
+        };
     }
 
     reInit(newValue) {
@@ -236,7 +240,7 @@ export default class AngularColorPickerController {
     onMouseUp (event) {
         // no current mouse events and not an element in the picker
         if (!this.colorMouse && !this.hueMouse && !this.opacityMouse && this.find(event.target).length === 0) {
-            this.api.close();
+            this.api.close(event);
         // mouse event on color grid
         } else if (this.colorMouse) {
             this.colorUp(event);
@@ -299,7 +303,7 @@ export default class AngularColorPickerController {
         if (this.ngModel !== this.onChangeValue) {
             this.onChangeValue = this.ngModel;
 
-            this.callApiFunction('onChange', [event, this.ngModel]);
+            this.eventApiDispatch('onChange', [event]);
         }
     }
 
@@ -309,7 +313,7 @@ export default class AngularColorPickerController {
             this.update();
         }
 
-        this.callApiFunction('onBlur', [event, this.ngModel]);
+        this.eventApiDispatch(this.api, 'onBlur', [event]);
     }
 
     initConfig () {
@@ -643,9 +647,16 @@ export default class AngularColorPickerController {
     // helper functions
     //---------------------------
 
-    callApiFunction(name, args) {
-        if (this.api && typeof this.api[name] === 'function') {
-            this.api[name].apply(this, args);
+    eventApiDispatch(name, args) {
+        if (this.eventApi && typeof this.eventApi[name] === 'function') {
+            if (!args) {
+                args = [];
+            }
+
+            args.unshift(this.ngModel);
+            args.unshift(this.api);
+
+            this.eventApi[name].apply(this, args);
         }
     }
 

src/scripts/directive.js

@@ -8,6 +8,7 @@ export default function colorPickerDirective () {
             ngModel: '=',
             options: '=?',
             api: '=?',
+            eventApi: '=?',
         },
         bindToController: true,
         templateUrl: 'template/color-picker/directive.html',

src/scripts/template.js

@@ -6,7 +6,7 @@ export default function template($templateCache) {
         '}">\n' +
         '   <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">\n' +
         '       <span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>\n' +
-        '       <input class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open()" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}">\n' +
+        '       <input class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open($event)" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}">\n' +
         '       <span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>\n' +
         '   </div>\n' +
         '   <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{\n' +