Skip to content

Commit 341d727

Browse files
committed
Extrapolating the api into api and event api to allow for shared event handling
1 parent 280f084 commit 341d727

File tree

6 files changed

+44
-25
lines changed

6 files changed

+44
-25
lines changed

README.md

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,14 @@ angular.module('app', ['color.picker']);
5454

5555
## Options
5656

57-
HTML - Only ```ng-model``` is required.
57+
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.
5858

5959
```html
6060
<color-picker
6161
ng-model="color"
6262
options="options"
6363
api="api"
64+
event-api="eventApi"
6465
></color-picker>
6566
```
6667
Javascript
@@ -70,7 +71,6 @@ $scope.color = '#FF0000';
7071

7172
// options - if a list is given then choose one of the items. The first item in the list will be the default
7273
$scope.options = {
73-
disabled: [false, true],
7474
disabled: [false, true],
7575
format: ['hsl', 'hsv', 'rgb', 'hex', 'hex8'],
7676
alpha: [true, false],
@@ -83,18 +83,19 @@ $scope.options = {
8383
inline: [false, true],
8484
};
8585

86-
// api event handlers
87-
$scope.api = {
88-
onChange: function($event, color) {},
89-
onBlur: function() {},
90-
onOpen: function() {},
91-
onClose: function() {},
92-
onDestroy: function() {},
93-
};
94-
95-
// exposed functions
86+
// exposed api functions
9687
$scope.api.open();
9788
$scope.api.close();
89+
$scope.api.getElement();
90+
91+
// api event handlers
92+
$scope.eventApi = {
93+
onChange: function(api, color, $event) {},
94+
onBlur: function(api, color, $event) {},
95+
onOpen: function(api, color, $event) {},
96+
onClose: function(api, color, $event) {},
97+
onDestroy: function(api, color) {},
98+
};
9899
```
99100

100101
## Requirements

examples/01-simple.html

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,12 @@ <h1>AngularJS Color Picker</h1>
7070
<label class="control-label">Color</label>
7171
<button ng-click="open()">Show</button>
7272
<button ng-click="close()">Hide</button>
73-
<color-picker ng-model="color" options="options" api="api"></color-picker>
73+
<color-picker
74+
ng-model="color"
75+
options="options"
76+
api="api"
77+
event-api="eventApi"
78+
></color-picker>
7479
</div>
7580

7681
<div class="row">

examples/app.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ angular
88
$scope.caseOptions = [{label: 'Upper Case', value: 'upper'}, {label: 'Lower Case', value: 'lower'}];
99

1010
$scope.options = {};
11-
$scope.api = {
11+
$scope.api = {};
12+
$scope.eventApi = {
1213
onChange: function() {
1314
console.log('change', arguments);
1415
},

src/scripts/controller.js

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export default class AngularColorPickerController {
7373
this.$document.off('mouseup', this.onMouseUp);
7474
this.$document.off('mousemove', this.onMouseMove);
7575

76-
this.callApiFunction('onDestroy');
76+
this.eventApiDispatch('onDestroy');
7777
});
7878

7979
//---------------------------
@@ -141,7 +141,7 @@ export default class AngularColorPickerController {
141141
this.api = {};
142142
}
143143

144-
this.api.open = () => {
144+
this.api.open = (event) => {
145145
// if already visible then don't run show again
146146
if (this.visible) {
147147
return true;
@@ -158,7 +158,7 @@ export default class AngularColorPickerController {
158158
this.lightnessUpdate();
159159
this.opacityUpdate();
160160

161-
this.callApiFunction('onOpen');
161+
this.eventApiDispatch('onOpen', [event]);
162162
};
163163

164164
this.api.close = () => {
@@ -167,9 +167,13 @@ export default class AngularColorPickerController {
167167
this.visible = false;
168168
this.$scope.$apply();
169169

170-
this.callApiFunction('onClose');
170+
this.eventApiDispatch('onClose', [event]);
171171
}
172172
};
173+
174+
this.api.getElement = () => {
175+
return this.$element;
176+
};
173177
}
174178

175179
reInit(newValue) {
@@ -236,7 +240,7 @@ export default class AngularColorPickerController {
236240
onMouseUp (event) {
237241
// no current mouse events and not an element in the picker
238242
if (!this.colorMouse && !this.hueMouse && !this.opacityMouse && this.find(event.target).length === 0) {
239-
this.api.close();
243+
this.api.close(event);
240244
// mouse event on color grid
241245
} else if (this.colorMouse) {
242246
this.colorUp(event);
@@ -299,7 +303,7 @@ export default class AngularColorPickerController {
299303
if (this.ngModel !== this.onChangeValue) {
300304
this.onChangeValue = this.ngModel;
301305

302-
this.callApiFunction('onChange', [event, this.ngModel]);
306+
this.eventApiDispatch('onChange', [event]);
303307
}
304308
}
305309

@@ -309,7 +313,7 @@ export default class AngularColorPickerController {
309313
this.update();
310314
}
311315

312-
this.callApiFunction('onBlur', [event, this.ngModel]);
316+
this.eventApiDispatch(this.api, 'onBlur', [event]);
313317
}
314318

315319
initConfig () {
@@ -643,9 +647,16 @@ export default class AngularColorPickerController {
643647
// helper functions
644648
//---------------------------
645649

646-
callApiFunction(name, args) {
647-
if (this.api && typeof this.api[name] === 'function') {
648-
this.api[name].apply(this, args);
650+
eventApiDispatch(name, args) {
651+
if (this.eventApi && typeof this.eventApi[name] === 'function') {
652+
if (!args) {
653+
args = [];
654+
}
655+
656+
args.unshift(this.ngModel);
657+
args.unshift(this.api);
658+
659+
this.eventApi[name].apply(this, args);
649660
}
650661
}
651662

src/scripts/directive.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export default function colorPickerDirective () {
88
ngModel: '=',
99
options: '=?',
1010
api: '=?',
11+
eventApi: '=?',
1112
},
1213
bindToController: true,
1314
templateUrl: 'template/color-picker/directive.html',

src/scripts/template.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function template($templateCache) {
66
'}">\n' +
77
' <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">\n' +
88
' <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' +
9-
' <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' +
9+
' <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' +
1010
' <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' +
1111
' </div>\n' +
1212
' <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{\n' +

0 commit comments

Comments
 (0)