Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

angularjs-color-picker

Package Overview
Dependencies
Maintainers
2
Versions
58
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angularjs-color-picker - npm Package Compare versions

Comparing version 1.1.7 to 2.0.0

grunt/options/rollup.js
grunt/options/run.js
grunt/rollup.js
src/scripts/controller.js
src/scripts/directive.js
src/scripts/module.js
src/scripts/template.js
src/styles/angularjs-color-picker.less
src/styles/themes/angularjs-color-picker-bootstrap.less

2

bower.json
{
"name": "angular-color-picker",
"description": "Color Picker Directive For AngularJS",
"version": "1.1.7",
"version": "2.0.0",
"homepage": "https://github.com/ruhley/angular-color-picker",

@@ -6,0 +6,0 @@ "repository": {

1335

dist/angularjs-color-picker.js
/*!
* angularjs-color-picker v1.1.7
* angularjs-color-picker v2.0.0
* https://github.com/ruhley/angular-color-picker/

@@ -7,763 +7,838 @@ *

*
* 2016-06-29 10:55:04
* 2016-07-11 16:31:21
*
*/
if (typeof module !== "undefined" && typeof exports !== "undefined" && module.exports === exports){
module.exports = 'color.picker';
}
(function() {
'use strict';
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.AngularjsColorPicker = factory());
}(this, function () { 'use strict';
angular.module('color.picker', []);
})();
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
(function() {
'use strict';
var createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
var colorPicker = function ($document, $timeout) {
return {
restrict: 'E',
require: ['^ngModel'],
scope: {
ngModel: '=',
colorPickerDisabled: '=',
colorPickerAlpha: '=',
colorPickerCase: '=',
colorPickerFormat: '=',
colorPickerPos: '=',
colorPickerSwatch: '=',
colorPickerSwatchOnly: '=',
colorPickerSwatchPos: '=',
colorPickerSwatchBootstrap: '=',
colorPickerInline: '=',
colorPickerOnChange: '&',
},
templateUrl: 'template/color-picker/directive.html',
link: function ($scope, element, attrs, control) {
$scope.onChangeValue = null;
$scope.updateModel = true;
$scope.chrome = Boolean(window.chrome);
$scope.android_version = window.navigator.userAgent.match(/Android\s([0-9\.]*)/i);
$scope.android_version = $scope.android_version && $scope.android_version.length > 1 ? parseFloat($scope.android_version[1]) : NaN;
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
$scope.init = function () {
// if no color provided
if ($scope.ngModel === undefined) {
$scope.setDefaults();
} else {
var color = tinycolor($scope.ngModel);
var AngularColorPickerController = function () {
function AngularColorPickerController(_$scope, _$element, _$document, _$timeout) {
var _this = this;
if (color.isValid()) {
var hsl = color.toHsv();
$scope.hue = hsl.h;
$scope.saturation = hsl.s * 100;
$scope.lightness = hsl.v * 100;
$scope.opacity = hsl.a * 100;
}
}
classCallCheck(this, AngularColorPickerController);
// set default config settings
$scope.initConfig();
// set angular injected variables
this.$scope = _$scope;
this.$element = _$element;
this.$document = _$document;
this.$timeout = _$timeout;
// setup mouse events
$document.on('mousedown', $scope.onMouseDown);
$document.on('mouseup', $scope.onMouseUp);
$document.on('mousemove', $scope.onMouseMove);
// browser variables
this.chrome = Boolean(window.chrome);
var _android_version = window.navigator.userAgent.match(/Android\s([0-9\.]*)/i);
this.android_version = _android_version && _android_version.length > 1 ? parseFloat(_android_version[1]) : NaN;
$scope.find('.color-picker-grid').on('click', $scope.onColorClick);
$scope.find('.color-picker-hue').on('click', $scope.onHueClick);
$scope.find('.color-picker-opacity').on('click', $scope.onOpacityClick);
};
// needed variables
this.onChangeValue = null;
this.updateModel = true;
$scope.onMouseDown = function(event) {
// an element in this picker
if (!$scope.config.disabled && $scope.find(event.target).length > 0) {
// mouse event on color grid
if (event.target.classList.contains('color-picker-grid-inner') || event.target.classList.contains('color-picker-picker') || event.target.parentNode.classList.contains('color-picker-picker')) {
$scope.colorDown(event);
$scope.$apply();
// mouse event on hue slider
} else if (event.target.classList.contains('color-picker-hue') || event.target.parentNode.classList.contains('color-picker-hue')) {
$scope.hueDown(event);
$scope.$apply();
// mouse event on opacity slider
} else if (event.target.classList.contains('color-picker-opacity') || event.target.parentNode.classList.contains('color-picker-opacity')) {
$scope.opacityDown(event);
$scope.$apply();
}
}
};
//---------------------------
// watchers
//---------------------------
$scope.onMouseUp = function(event) {
// no current mouse events and not an element in the picker
if (!$scope.colorMouse && !$scope.hueMouse && !$scope.opacityMouse && $scope.find(event.target).length === 0) {
$scope.log('Document Click Event');
$scope.hide();
// mouse event on color grid
} else if ($scope.colorMouse) {
$scope.colorUp(event);
$scope.$apply();
$scope.onChange(event);
// mouse event on hue slider
} else if ($scope.hueMouse) {
$scope.hueUp(event);
$scope.$apply();
$scope.onChange(event);
// mouse event on opacity slider
} else if ($scope.opacityMouse) {
$scope.opacityUp(event);
$scope.$apply();
$scope.onChange(event);
}
};
// ngModel
$scope.onMouseMove = function(event) {
// mouse event on color grid
if ($scope.colorMouse) {
$scope.colorChange(event);
$scope.$apply();
// mouse event on hue slider
} else if ($scope.hueMouse) {
$scope.hueChange(event);
$scope.$apply();
// mouse event on opacity slider
} else if ($scope.opacityMouse) {
$scope.opacityChange(event);
$scope.$apply();
}
};
this.$scope.$watch('AngularColorPickerController.ngModel', this.watchNgModel.bind(this));
$scope.onColorClick = function(event) {
if (!$scope.config.disabled) {
$scope.colorChange(event);
$scope.$apply();
$scope.onChange(event);
}
};
// options
$scope.onHueClick = function(event) {
if (!$scope.config.disabled) {
$scope.hueChange(event);
$scope.$apply();
$scope.onChange(event);
}
};
this.$scope.$watch('AngularColorPickerController.options.swatchPos', this.watchSwatchPos.bind(this));
$scope.onOpacityClick = function(event) {
if (!$scope.config.disabled) {
$scope.opacityChange(event);
$scope.$apply();
$scope.onChange(event);
}
};
this.$scope.$watchGroup(['AngularColorPickerController.options.format', 'AngularColorPickerController.options.alpha', 'AngularColorPickerController.options.case'], this.reInitAndUpdate.bind(this));
$scope.onChange = function(event) {
if ($scope.ngModel !== $scope.onChangeValue) {
$scope.onChangeValue = $scope.ngModel;
$scope.colorPickerOnChange({$event: event, color: $scope.ngModel});
}
};
this.$scope.$watchGroup(['AngularColorPickerController.options.disabled', 'AngularColorPickerController.options.swatchBootstrap', 'AngularColorPickerController.options.swatchOnly', 'AngularColorPickerController.options.swatch', 'AngularColorPickerController.options.pos', 'AngularColorPickerController.options.inline'], this.reInit.bind(this));
$scope.onBlur = function() {
if ($scope.ngModel !== $scope.onChangeValue) {
$scope.updateModel = true;
$scope.update();
}
};
// api
$scope.initConfig = function() {
$scope.config = {};
$scope.config.disabled = $scope.colorPickerDisabled === undefined ? false : $scope.colorPickerDisabled;
$scope.config.alpha = $scope.colorPickerAlpha === undefined ? true : $scope.colorPickerAlpha;
$scope.config.case = $scope.colorPickerCase === undefined ? 'upper' : $scope.colorPickerCase;
$scope.config.format = $scope.colorPickerFormat === undefined ? 'hsl' : $scope.colorPickerFormat;
$scope.config.pos = $scope.colorPickerPos === undefined ? 'bottom left' : $scope.colorPickerPos;
$scope.config.swatch = $scope.colorPickerSwatch === undefined ? true : $scope.colorPickerSwatch;
$scope.config.swatchOnly = $scope.colorPickerSwatchOnly === undefined ? false : $scope.colorPickerSwatchOnly;
$scope.config.swatchPos = $scope.colorPickerSwatchPos === undefined ? 'left' : $scope.colorPickerSwatchPos;
$scope.config.swatchBootstrap = $scope.colorPickerSwatchBootstrap === undefined ? true : $scope.colorPickerSwatchBootstrap;
$scope.config.inline = $scope.colorPickerInline === undefined ? false : $scope.colorPickerInline;
this.$scope.$watch('AngularColorPickerController.api', this.watchApi.bind(this));
$scope.visible = $scope.config.inline;
// internal
$scope.log('Config', $scope.config);
};
this.$scope.$watch('AngularColorPickerController.swatchColor', this.updateSwatchBackground.bind(this));
$scope.focus = function () {
$scope.log('Focus Event');
$scope.find('.color-picker-input')[0].focus();
};
this.$scope.$watch('AngularColorPickerController.hue', this.hueUpdate.bind(this));
$scope.show = function () {
// if already visible then don't run show again
if ($scope.visible) {
return true;
}
this.$scope.$watch('AngularColorPickerController.saturation', this.saturationUpdate.bind(this));
$scope.log('Show Event');
$scope.visible = true;
$scope.hueMouse = false;
$scope.opacityMouse = false;
$scope.colorMouse = false;
this.$scope.$watch('AngularColorPickerController.lightness', this.lightnessUpdate.bind(this));
// force the sliders to re-caculate their position
$scope.hueUpdate();
$scope.saturationUpdate();
$scope.lightnessUpdate();
$scope.opacityUpdate();
};
this.$scope.$watch('AngularColorPickerController.opacity', this.opacityUpdate.bind(this));
$scope.hide = function () {
if (!$scope.config.inline && ($scope.visible || element[0].querySelector('.color-picker-panel').offsetParent !== null)) {
$scope.log('Hide Event');
//---------------------------
// destroy
//---------------------------
$scope.visible = false;
$scope.$apply();
}
};
this.$scope.$on('$destroy', function () {
_this.$document.off('mousedown', _this.onMouseDown);
_this.$document.off('mouseup', _this.onMouseUp);
_this.$document.off('mousemove', _this.onMouseMove);
$scope.setDefaults = function() {
if ($scope.hue === undefined) {
$scope.hue = 0;
}
_this.callApiFunction('onDestroy');
});
if ($scope.saturation === undefined) {
$scope.saturation = 0;
}
//---------------------------
// Init
//---------------------------
if ($scope.lightness === undefined) {
$scope.lightness = 100;
}
this.init();
}
if ($scope.opacity === undefined) {
$scope.opacity = 100;
}
};
createClass(AngularColorPickerController, [{
key: 'watchNgModel',
value: function watchNgModel(newValue, oldValue) {
var _this2 = this;
$scope.update = function () {
if ($scope.hue === undefined && $scope.saturation === undefined && $scope.lightness === undefined) {
return false;
}
if (newValue !== undefined && newValue !== null && newValue !== oldValue && newValue.length > 4) {
var color = tinycolor(newValue);
$scope.setDefaults();
if (color.isValid()) {
var hsl = color.toHsv();
var color = tinycolor({h: $scope.hue, s: $scope.saturation / 100, v: $scope.lightness / 100}),
colorString;
this.updateModel = false;
if ($scope.config.alpha) {
color.setAlpha($scope.opacity / 100);
}
this.hue = hsl.h;
this.saturation = hsl.s * 100;
this.lightness = hsl.v * 100;
$scope.log('COLOR CHANGED TO ', color, $scope.hue, $scope.saturation, $scope.lightness, $scope.opacity);
if (this.options.alpha) {
this.opacity = hsl.a * 100;
}
$scope.swatchColor = color.toHslString();
this.$timeout(function () {
_this2.updateModel = true;
});
switch ($scope.config.format) {
case 'rgb':
colorString = color.toRgbString();
break;
this.isValid = true;
} else {
this.isValid = false;
}
case 'hex':
colorString = color.toHexString();
if ($scope.config.case === 'lower') {
colorString = colorString.toLowerCase();
} else {
colorString = colorString.toUpperCase();
}
break;
this.$scope.control[0].$setValidity(this.$element.attr('name'), this.isValid);
case 'hex8':
colorString = color.toHex8String();
if ($scope.config.case === 'lower') {
colorString = colorString.toLowerCase();
} else {
colorString = colorString.toUpperCase();
}
break;
if (oldValue !== undefined && typeof this.$scope.control[0].$setDirty === 'function') {
this.$scope.control[0].$setDirty();
}
} else {
if (newValue === null || newValue === '') {
this.hue = undefined;
this.saturation = undefined;
this.lightness = undefined;
this.opacity = undefined;
}
case 'hsv':
colorString = color.toHsvString();
break;
this.swatchColor = '';
}
}
}, {
key: 'watchSwatchPos',
value: function watchSwatchPos(newValue) {
var _this3 = this;
default:
colorString = color.toHslString();
break;
}
if (newValue !== undefined) {
this.initConfig();
if ($scope.updateModel) {
$scope.ngModel = colorString;
}
};
this.$timeout(function () {
_this3.updateSwatchBackground();
});
}
}
}, {
key: 'watchApi',
value: function watchApi() {
var _this4 = this;
$scope.updateSwatchBackground = function () {
var el = angular.element(element[0].querySelector('.color-picker-swatch'));
el.css({
'background-color': $scope.swatchColor,
});
};
if (!this.api) {
this.api = {};
}
$scope.$watch('ngModel', function (newValue, oldValue) {
if (newValue !== undefined && newValue !== null && newValue !== oldValue && newValue.length > 4) {
$scope.log('MODEL - CHANGED', newValue);
var color = tinycolor(newValue);
this.api.open = function () {
// if already visible then don't run show again
if (_this4.visible) {
return true;
}
if (color.isValid()) {
var hsl = color.toHsv();
_this4.visible = true;
_this4.hueMouse = false;
_this4.opacityMouse = false;
_this4.colorMouse = false;
$scope.updateModel = false;
// force the sliders to re-caculate their position
_this4.hueUpdate();
_this4.saturationUpdate();
_this4.lightnessUpdate();
_this4.opacityUpdate();
$scope.hue = hsl.h;
$scope.saturation = hsl.s * 100;
$scope.lightness = hsl.v * 100;
_this4.callApiFunction('onOpen');
};
if ($scope.config.alpha) {
$scope.opacity = hsl.a * 100;
}
this.api.close = function () {
if (!_this4.options.inline && (_this4.visible || _this4.$element[0].querySelector('.color-picker-panel').offsetParent !== null)) {
$timeout(function() {
$scope.updateModel = true;
});
_this4.visible = false;
_this4.$scope.$apply();
$scope.isValid = true;
} else {
$scope.isValid = false;
}
_this4.callApiFunction('onClose');
}
};
}
}, {
key: 'reInit',
value: function reInit(newValue) {
if (newValue !== undefined) {
this.initConfig();
}
}
}, {
key: 'reInitAndUpdate',
value: function reInitAndUpdate(newValue) {
if (newValue !== undefined) {
this.initConfig();
this.update();
}
}
}, {
key: 'init',
value: function init() {
// if no color provided
if (this.ngModel === undefined) {
this.setDefaults();
} else {
var color = tinycolor(this.ngModel);
control[0].$setValidity(attrs.name, $scope.isValid);
if (color.isValid()) {
var hsl = color.toHsv();
this.hue = hsl.h;
this.saturation = hsl.s * 100;
this.lightness = hsl.v * 100;
this.opacity = hsl.a * 100;
}
}
if (oldValue !== undefined && typeof control[0].$setDirty === 'function') {
control[0].$setDirty();
}
} else {
if (newValue === null || newValue === '') {
$scope.hue = undefined;
$scope.saturation = undefined;
$scope.lightness = undefined;
$scope.opacity = undefined;
}
// set default config settings
this.initConfig();
$scope.swatchColor = '';
}
});
// setup mouse events
this.$document.on('mousedown', this.onMouseDown.bind(this));
this.$document.on('mouseup', this.onMouseUp.bind(this));
this.$document.on('mousemove', this.onMouseMove.bind(this));
$scope.$watchGroup(
['colorPickerFormat', 'colorPickerAlpha', 'colorPickerCase'],
function (newValue, oldValue) {
if (newValue !== undefined) {
$scope.initConfig();
$scope.update();
}
}
);
this.find('.color-picker-grid').on('click', this.onColorClick.bind(this));
this.find('.color-picker-hue').on('click', this.onHueClick.bind(this));
this.find('.color-picker-opacity').on('click', this.onOpacityClick.bind(this));
}
}, {
key: 'onMouseDown',
value: function onMouseDown(event) {
// an element in this picker
if (!this.options.disabled && this.find(event.target).length > 0) {
// mouse event on color grid
if (event.target.classList.contains('color-picker-grid-inner') || event.target.classList.contains('color-picker-picker') || event.target.parentNode.classList.contains('color-picker-picker')) {
this.colorDown(event);
this.$scope.$apply();
// mouse event on hue slider
} else if (event.target.classList.contains('color-picker-hue') || event.target.parentNode.classList.contains('color-picker-hue')) {
this.hueDown(event);
this.$scope.$apply();
// mouse event on opacity slider
} else if (event.target.classList.contains('color-picker-opacity') || event.target.parentNode.classList.contains('color-picker-opacity')) {
this.opacityDown(event);
this.$scope.$apply();
}
}
}
}, {
key: 'onMouseUp',
value: function 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();
// mouse event on color grid
} else if (this.colorMouse) {
this.colorUp(event);
this.$scope.$apply();
this.onChange(event);
// mouse event on hue slider
} else if (this.hueMouse) {
this.hueUp(event);
this.$scope.$apply();
this.onChange(event);
// mouse event on opacity slider
} else if (this.opacityMouse) {
this.opacityUp(event);
this.$scope.$apply();
this.onChange(event);
}
}
}, {
key: 'onMouseMove',
value: function onMouseMove(event) {
// mouse event on color grid
if (this.colorMouse) {
this.colorChange(event);
this.$scope.$apply();
// mouse event on hue slider
} else if (this.hueMouse) {
this.hueChange(event);
this.$scope.$apply();
// mouse event on opacity slider
} else if (this.opacityMouse) {
this.opacityChange(event);
this.$scope.$apply();
}
}
}, {
key: 'onColorClick',
value: function onColorClick(event) {
if (!this.options.disabled) {
this.colorChange(event);
this.$scope.$apply();
this.onChange(event);
}
}
}, {
key: 'onHueClick',
value: function onHueClick(event) {
if (!this.options.disabled) {
this.hueChange(event);
this.$scope.$apply();
this.onChange(event);
}
}
}, {
key: 'onOpacityClick',
value: function onOpacityClick(event) {
if (!this.options.disabled) {
this.opacityChange(event);
this.$scope.$apply();
this.onChange(event);
}
}
}, {
key: 'onChange',
value: function onChange(event) {
if (this.ngModel !== this.onChangeValue) {
this.onChangeValue = this.ngModel;
$scope.$watchGroup(
['colorPickerDisabled', 'colorPickerSwatchBootstrap', 'colorPickerSwatchOnly', 'colorPickerSwatch', 'colorPickerPos', 'colorPickerInline'],
function (newValue, oldValue) {
if (newValue !== undefined) {
$scope.initConfig();
}
}
);
this.callApiFunction('onChange', [event, this.ngModel]);
}
}
}, {
key: 'onBlur',
value: function onBlur(event) {
if (this.ngModel !== this.onChangeValue) {
this.updateModel = true;
this.update();
}
$scope.$watch('colorPickerSwatchPos', function (newValue, oldValue) {
if (newValue !== undefined) {
$scope.initConfig();
this.callApiFunction('onBlur', [event, this.ngModel]);
}
}, {
key: 'initConfig',
value: function initConfig() {
if (!this.options) {
this.options = {};
}
$timeout(function() {
$scope.updateSwatchBackground();
});
}
});
this.options.disabled = this.options.disabled === undefined ? false : this.options.disabled;
this.options.alpha = this.options.alpha === undefined ? true : this.options.alpha;
this.options.case = this.options.case === undefined ? 'upper' : this.options.case;
this.options.format = this.options.format === undefined ? 'hsl' : this.options.format;
this.options.pos = this.options.pos === undefined ? 'bottom left' : this.options.pos;
this.options.swatch = this.options.swatch === undefined ? true : this.options.swatch;
this.options.swatchOnly = this.options.swatchOnly === undefined ? false : this.options.swatchOnly;
this.options.swatchPos = this.options.swatchPos === undefined ? 'left' : this.options.swatchPos;
this.options.swatchBootstrap = this.options.swatchBootstrap === undefined ? true : this.options.swatchBootstrap;
this.options.inline = this.options.inline === undefined ? false : this.options.inline;
this.visible = this.options.inline;
}
}, {
key: 'focus',
value: function focus() {
this.find('.color-picker-input')[0].focus();
}
}, {
key: 'setDefaults',
value: function setDefaults() {
if (this.hue === undefined) {
this.hue = 0;
}
if (this.saturation === undefined) {
this.saturation = 0;
}
//---------------------------
// Update Positions And Colors On Elements
//---------------------------
if (this.lightness === undefined) {
this.lightness = 100;
}
$scope.$watch('swatchColor', function() {
$scope.updateSwatchBackground();
});
if (this.opacity === undefined) {
this.opacity = 100;
}
}
}, {
key: 'update',
value: function update() {
if (this.hue === undefined && this.saturation === undefined && this.lightness === undefined) {
return false;
}
$scope.huePosUpdate = function() {
$timeout(function() {
var container = element[0].querySelector('.color-picker-hue');
var el = angular.element(element[0].querySelector('.color-picker-hue .color-picker-slider'));
var bounding = container.getBoundingClientRect();
this.setDefaults();
el.css({
'top': (bounding.height * $scope.huePos / 100) + 'px',
});
});
};
var color = tinycolor({ h: this.hue, s: this.saturation / 100, v: this.lightness / 100 }),
colorString;
$scope.opacityPosUpdate = function() {
$timeout(function() {
var container = element[0].querySelector('.color-picker-opacity');
var el = angular.element(element[0].querySelector('.color-picker-opacity .color-picker-slider'));
var bounding = container.getBoundingClientRect();
if (this.options.alpha) {
color.setAlpha(this.opacity / 100);
}
el.css({
'top': (bounding.height * $scope.opacityPos / 100) + 'px',
});
});
};
this.swatchColor = color.toHslString();
$scope.lightnessPosUpdate = function() {
$timeout(function() {
var container = element[0].querySelector('.color-picker-grid');
var el = angular.element(element[0].querySelector('.color-picker-grid .color-picker-picker'));
var bounding = container.getBoundingClientRect();
switch (this.options.format) {
case 'rgb':
colorString = color.toRgbString();
break;
el.css({
'top': (bounding.height * $scope.lightnessPos / 100) + 'px',
});
});
};
case 'hex':
colorString = color.toHexString();
if (this.options.case === 'lower') {
colorString = colorString.toLowerCase();
} else {
colorString = colorString.toUpperCase();
}
break;
$scope.saturationPosUpdate = function() {
$timeout(function() {
var container = element[0].querySelector('.color-picker-grid');
var el = angular.element(element[0].querySelector('.color-picker-grid .color-picker-picker'));
var bounding = container.getBoundingClientRect();
case 'hex8':
colorString = color.toHex8String();
if (this.options.case === 'lower') {
colorString = colorString.toLowerCase();
} else {
colorString = colorString.toUpperCase();
}
break;
el.css({
'left': (bounding.width * $scope.saturationPos / 100) + 'px',
});
});
};
case 'hsv':
colorString = color.toHsvString();
break;
$scope.gridUpdate = function() {
var el = angular.element(element[0].querySelector('.color-picker-grid'));
default:
colorString = color.toHslString();
break;
}
el.css({
'background-color': $scope.grid,
});
};
if (this.updateModel) {
this.ngModel = colorString;
}
}
}, {
key: 'updateSwatchBackground',
value: function updateSwatchBackground() {
var el = angular.element(this.$element[0].querySelector('.color-picker-swatch'));
el.css({
'background-color': this.swatchColor
});
}
}, {
key: 'huePosUpdate',
value: function huePosUpdate() {
var _this5 = this;
//---------------------------
// HUE
//---------------------------
$scope.hueDown = function (event) {
event.stopPropagation();
event.preventDefault();
this.$timeout(function () {
var container = _this5.$element[0].querySelector('.color-picker-hue');
var el = angular.element(_this5.$element[0].querySelector('.color-picker-hue .color-picker-slider'));
var bounding = container.getBoundingClientRect();
$scope.log('HUE - MOUSE DOWN');
$scope.hueMouse = true;
};
el.css({
'top': bounding.height * _this5.huePos / 100 + 'px'
});
});
}
}, {
key: 'opacityPosUpdate',
value: function opacityPosUpdate() {
var _this6 = this;
$scope.hueUp = function (event) {
event.stopPropagation();
event.preventDefault();
this.$timeout(function () {
var container = _this6.$element[0].querySelector('.color-picker-opacity');
var el = angular.element(_this6.$element[0].querySelector('.color-picker-opacity .color-picker-slider'));
var bounding = container.getBoundingClientRect();
$scope.log('HUE - MOUSE UP');
$scope.hueMouse = false;
};
el.css({
'top': bounding.height * _this6.opacityPos / 100 + 'px'
});
});
}
}, {
key: 'lightnessPosUpdate',
value: function lightnessPosUpdate() {
var _this7 = this;
$scope.hueChange = function (event) {
event.stopPropagation();
event.preventDefault();
this.$timeout(function () {
var container = _this7.$element[0].querySelector('.color-picker-grid');
var el = angular.element(_this7.$element[0].querySelector('.color-picker-grid .color-picker-picker'));
var bounding = container.getBoundingClientRect();
$scope.log('HUE - MOUSE CHANGE');
var el = $scope.find('.color-picker-hue');
$scope.hue = (1 - ((event.pageY - $scope.offset(el).top) / el.prop('offsetHeight'))) * 360;
el.css({
'top': bounding.height * _this7.lightnessPos / 100 + 'px'
});
});
}
}, {
key: 'saturationPosUpdate',
value: function saturationPosUpdate() {
var _this8 = this;
if ($scope.hue > 360) {
$scope.hue = 360;
} else if ($scope.hue < 0) {
$scope.hue = 0;
}
};
this.$timeout(function () {
var container = _this8.$element[0].querySelector('.color-picker-grid');
var el = angular.element(_this8.$element[0].querySelector('.color-picker-grid .color-picker-picker'));
var bounding = container.getBoundingClientRect();
$scope.hueUpdate = function() {
if ($scope.hue !== undefined) {
$scope.log('HUE - CHANGED');
$scope.huePos = (1 - ($scope.hue / 360)) * 100;
$scope.grid = tinycolor({h: $scope.hue, s: 100, v: 1}).toHslString();
el.css({
'left': bounding.width * _this8.saturationPos / 100 + 'px'
});
});
}
}, {
key: 'gridUpdate',
value: function gridUpdate() {
var el = angular.element(this.$element[0].querySelector('.color-picker-grid'));
if ($scope.huePos < 0) {
$scope.huePos = 0;
} else if ($scope.huePos > 100) {
$scope.huePos = 100;
}
el.css({
'background-color': this.grid
});
}
$scope.huePosUpdate();
$scope.gridUpdate();
$scope.update();
}
};
//---------------------------
// hue functions
//---------------------------
$scope.$watch('hue', function () {
$scope.hueUpdate();
});
}, {
key: 'hueDown',
value: function hueDown(event) {
event.stopPropagation();
event.preventDefault();
//---------------------------
// OPACITY
//---------------------------
$scope.opacityDown = function (event) {
event.stopPropagation();
event.preventDefault();
this.hueMouse = true;
}
}, {
key: 'hueUp',
value: function hueUp(event) {
event.stopPropagation();
event.preventDefault();
$scope.log('OPACITY - MOUSE DOWN');
$scope.opacityMouse = true;
};
this.hueMouse = false;
}
}, {
key: 'hueChange',
value: function hueChange(event) {
event.stopPropagation();
event.preventDefault();
$scope.opacityUp = function (event) {
event.stopPropagation();
event.preventDefault();
var el = this.find('.color-picker-hue');
this.hue = (1 - (event.pageY - this.offset(el).top) / el.prop('offsetHeight')) * 360;
$scope.log('OPACITY - MOUSE UP');
$scope.opacityMouse = false;
};
if (this.hue > 360) {
this.hue = 360;
} else if (this.hue < 0) {
this.hue = 0;
}
}
}, {
key: 'hueUpdate',
value: function hueUpdate() {
if (this.hue !== undefined) {
this.huePos = (1 - this.hue / 360) * 100;
this.grid = tinycolor({ h: this.hue, s: 100, v: 1 }).toHslString();
$scope.opacityChange = function (event) {
event.stopPropagation();
event.preventDefault();
if (this.huePos < 0) {
this.huePos = 0;
} else if (this.huePos > 100) {
this.huePos = 100;
}
$scope.log('OPACITY - MOUSE CHANGE');
var el = $scope.find('.color-picker-opacity');
$scope.opacity = (1 - ((event.pageY - $scope.offset(el).top) / el.prop('offsetHeight'))) * 100;
this.huePosUpdate();
this.gridUpdate();
this.update();
}
}
if ($scope.opacity > 100) {
$scope.opacity = 100;
} else if ($scope.opacity < 0) {
$scope.opacity = 0;
}
};
//---------------------------
// opacity functions
//---------------------------
$scope.opacityUpdate = function() {
if ($scope.opacity !== undefined) {
$scope.log('OPACITY - CHANGED');
$scope.opacityPos = (1 - ($scope.opacity / 100)) * 100;
}, {
key: 'opacityDown',
value: function opacityDown(event) {
event.stopPropagation();
event.preventDefault();
if ($scope.opacityPos < 0) {
$scope.opacityPos = 0;
} else if ($scope.opacityPos > 100) {
$scope.opacityPos = 100;
}
this.opacityMouse = true;
}
}, {
key: 'opacityUp',
value: function opacityUp(event) {
event.stopPropagation();
event.preventDefault();
$scope.opacityPosUpdate();
$scope.update();
}
};
this.opacityMouse = false;
}
}, {
key: 'opacityChange',
value: function opacityChange(event) {
event.stopPropagation();
event.preventDefault();
$scope.$watch('opacity', function () {
$scope.opacityUpdate();
});
var el = this.find('.color-picker-opacity');
this.opacity = (1 - (event.pageY - this.offset(el).top) / el.prop('offsetHeight')) * 100;
//---------------------------
// COLOR
//---------------------------
$scope.colorDown = function (event) {
event.stopPropagation();
event.preventDefault();
if (this.opacity > 100) {
this.opacity = 100;
} else if (this.opacity < 0) {
this.opacity = 0;
}
}
}, {
key: 'opacityUpdate',
value: function opacityUpdate() {
if (this.opacity !== undefined) {
this.opacityPos = (1 - this.opacity / 100) * 100;
$scope.log('COLOR - MOUSE DOWN');
$scope.colorMouse = true;
};
if (this.opacityPos < 0) {
this.opacityPos = 0;
} else if (this.opacityPos > 100) {
this.opacityPos = 100;
}
$scope.colorUp = function (event) {
event.stopPropagation();
event.preventDefault();
this.opacityPosUpdate();
this.update();
}
}
$scope.log('COLOR - MOUSE UP');
$scope.colorMouse = false;
};
//---------------------------
// color functions
//---------------------------
$scope.colorChange = function (event) {
event.stopPropagation();
event.preventDefault();
}, {
key: 'colorDown',
value: function colorDown(event) {
event.stopPropagation();
event.preventDefault();
$scope.log('COLOR - MOUSE CHANGE');
var el = $scope.find('.color-picker-grid-inner');
var offset = $scope.offset(el);
this.colorMouse = true;
}
}, {
key: 'colorUp',
value: function colorUp(event) {
event.stopPropagation();
event.preventDefault();
$scope.saturation = ((event.pageX - offset.left) / el.prop('offsetWidth')) * 100;
$scope.lightness = (1 - ((event.pageY - offset.top) / el.prop('offsetHeight'))) * 100;
this.colorMouse = false;
}
}, {
key: 'colorChange',
value: function colorChange(event) {
event.stopPropagation();
event.preventDefault();
if ($scope.saturation > 100) {
$scope.saturation = 100;
} else if ($scope.saturation < 0) {
$scope.saturation = 0;
}
var el = this.find('.color-picker-grid-inner');
var offset = this.offset(el);
if ($scope.lightness > 100) {
$scope.lightness = 100;
} else if ($scope.lightness < 0) {
$scope.lightness = 0;
}
};
this.saturation = (event.pageX - offset.left) / el.prop('offsetWidth') * 100;
this.lightness = (1 - (event.pageY - offset.top) / el.prop('offsetHeight')) * 100;
$scope.saturationUpdate = function(oldValue) {
if ($scope.saturation !== undefined) {
$scope.log('SATURATION - CHANGED');
$scope.saturationPos = ($scope.saturation / 100) * 100;
if (this.saturation > 100) {
this.saturation = 100;
} else if (this.saturation < 0) {
this.saturation = 0;
}
if ($scope.saturationPos < 0) {
$scope.saturationPos = 0;
} else if ($scope.saturationPos > 100) {
$scope.saturationPos = 100;
}
if (this.lightness > 100) {
this.lightness = 100;
} else if (this.lightness < 0) {
this.lightness = 0;
}
}
}, {
key: 'saturationUpdate',
value: function saturationUpdate(oldValue) {
if (this.saturation !== undefined) {
this.saturationPos = this.saturation / 100 * 100;
$scope.saturationPosUpdate();
$scope.update();
}
};
if (this.saturationPos < 0) {
this.saturationPos = 0;
} else if (this.saturationPos > 100) {
this.saturationPos = 100;
}
$scope.$watch('saturation', function () {
$scope.saturationUpdate();
});
this.saturationPosUpdate();
this.update();
}
}
}, {
key: 'lightnessUpdate',
value: function lightnessUpdate() {
if (this.lightness !== undefined) {
this.lightnessPos = (1 - this.lightness / 100) * 100;
$scope.lightnessUpdate = function() {
if ($scope.lightness !== undefined) {
$scope.log('LIGHTNESS - CHANGED');
$scope.lightnessPos = (1 - ($scope.lightness / 100)) * 100;
if (this.lightnessPos < 0) {
this.lightnessPos = 0;
} else if (this.lightnessPos > 100) {
this.lightnessPos = 100;
}
if ($scope.lightnessPos < 0) {
$scope.lightnessPos = 0;
} else if ($scope.lightnessPos > 100) {
$scope.lightnessPos = 100;
}
this.lightnessPosUpdate();
this.update();
}
}
$scope.lightnessPosUpdate();
$scope.update();
}
};
//---------------------------
// helper functions
//---------------------------
$scope.$watch('lightness', function () {
$scope.lightnessUpdate();
});
}, {
key: 'callApiFunction',
value: function callApiFunction(name, args) {
if (this.api && typeof this.api[name] === 'function') {
this.api[name].apply(this, args);
}
}
// taken and modified from jQuery's find
//---------------------------
// HELPER FUNCTIONS
//---------------------------
$scope.log = function () {
// arguments[0] = 'Color Picker: ' + arguments[0];
// console.log.apply(console, arguments);
// console.trace();
};
}, {
key: 'find',
value: function find(selector) {
var context = this.wrapper ? this.wrapper[0] : this.$element[0],
results = [],
nodeType;
// taken and modified from jQuery's find
$scope.find = function (selector) {
var context = $scope.wrapper ? $scope.wrapper[0] : element[0],
results = [],
nodeType;
// Same basic safeguard as Sizzle
if (!selector) {
return results;
}
if (typeof selector === 'string') {
// Early return if context is not an element or document
if ((nodeType = context.nodeType) !== 1 && nodeType !== 9) {
return [];
}
// Same basic safeguard as Sizzle
if (!selector) {
return results;
}
results = context.querySelectorAll(selector);
} else {
if (context.contains(selector)) {
results.push(selector);
}
}
if (typeof selector === 'string') {
// Early return if context is not an element or document
if ((nodeType = context.nodeType) !== 1 && nodeType !== 9) {
return [];
}
return angular.element(results);
}
results = context.querySelectorAll(selector);
// taken and modified from jQuery's offset
} else {
if (context.contains(selector)) {
results.push(selector);
}
}
}, {
key: 'offset',
value: function offset(el) {
var docElem,
win,
rect,
doc,
elem = el[0];
return angular.element(results);
};
if (!elem) {
return;
}
// taken and modified from jQuery's offset
$scope.offset = function (el) {
var docElem, win, rect, doc, elem = el[0];
// Support: IE<=11+
// Running getBoundingClientRect on a
// disconnected node in IE throws an error
if (!elem.getClientRects().length) {
return { top: 0, left: 0 };
}
if (!elem) {
return;
}
rect = elem.getBoundingClientRect();
// Support: IE<=11+
// Running getBoundingClientRect on a
// disconnected node in IE throws an error
if (!elem.getClientRects().length) {
return {top: 0, left: 0};
}
// Make sure element is not hidden (display: none)
if (rect.width || rect.height) {
doc = elem.ownerDocument;
win = doc !== null && doc === doc.window ? doc : doc.nodeType === 9 && doc.defaultView;
docElem = doc.documentElement;
rect = elem.getBoundingClientRect();
// hack for small chrome screens not position the clicks properly when the page is scrolled
if (this.chrome && this.android_version < 6 && screen.width <= 768) {
return {
top: rect.top - docElem.clientTop,
left: rect.left - docElem.clientLeft
};
}
// Make sure element is not hidden (display: none)
if ( rect.width || rect.height ) {
doc = elem.ownerDocument;
win = doc !== null && doc === doc.window ? doc : doc.nodeType === 9 && doc.defaultView;
docElem = doc.documentElement;
return {
top: rect.top + win.pageYOffset - docElem.clientTop,
left: rect.left + win.pageXOffset - docElem.clientLeft
};
}
// hack for small chrome screens not position the clicks properly when the page is scrolled
if ($scope.chrome && $scope.android_version < 6 && screen.width <= 768) {
return {
top: rect.top - docElem.clientTop,
left: rect.left - docElem.clientLeft
};
}
return rect;
}
}]);
return AngularColorPickerController;
}();
return {
top: rect.top + win.pageYOffset - docElem.clientTop,
left: rect.left + win.pageXOffset - docElem.clientLeft
};
}
AngularColorPickerController.$inject = ['$scope', '$element', '$document', '$timeout'];
function colorPickerDirective() {
return {
restrict: 'E',
require: ['^ngModel'],
scope: {
ngModel: '=',
options: '=?',
api: '=?'
},
bindToController: true,
templateUrl: 'template/color-picker/directive.html',
controller: AngularColorPickerController,
controllerAs: 'AngularColorPickerController',
link: function link($scope, element, attrs, control) {
$scope.control = control;
}
};
}
return rect;
};
function template($templateCache) {
$templateCache.put('template/color-picker/directive.html', '<div class="color-picker-wrapper" ng-class="{\n' + '\'color-picker-disabled\': AngularColorPickerController.options.disabled,\n' + '\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,\n' + '}">\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' + ' <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' + ' \'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',\n' + ' \'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',\n' + ' \'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',\n' + ' \'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',\n' + ' \'color-picker-show-alpha\': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\',\n' + ' \'color-picker-show-inline\': AngularColorPickerController.options.inline,\n' + ' }">\n' + ' <div class="color-picker-row">\n' + ' <div class="color-picker-grid color-picker-sprite">\n' + ' <div class="color-picker-grid-inner"></div>\n' + ' <div class="color-picker-picker">\n' + ' <div></div>\n' + ' </div>\n' + ' </div>\n' + ' <div class="color-picker-hue color-picker-sprite">\n' + ' <div class="color-picker-slider"></div>\n' + ' </div>\n' + ' <div class="color-picker-opacity color-picker-sprite" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'">\n' + ' <div class="color-picker-slider"></div>\n' + ' </div>\n' + ' </div>\n' + ' </div>\n' + '</div>');
}
template.$inject = ['$templateCache'];
var colorPicker = angular.module('color.picker', []).directive('colorPicker', colorPickerDirective).run(template);
$scope.init();
return colorPicker;
$scope.$on('$destroy', function() {
$document.off('mousedown', $scope.onMouseDown);
$document.off('mouseup', $scope.onMouseUp);
$document.off('mousemove', $scope.onMouseMove);
});
}
};
};
colorPicker.$inject = ['$document', '$timeout'];
angular.module('color.picker').directive('colorPicker', colorPicker);
})();
angular.module('color.picker').run(['$templateCache', function($templateCache) {
$templateCache.put('template/color-picker/directive.html',
'<div class="color-picker-wrapper" ng-class="{\'color-picker-swatch-only\': config.swatchOnly}">\n' +
' <div class="color-picker-input-wrapper" ng-class="{\'input-group\': config.swatchBootstrap && config.swatch}">\n' +
' <span ng-if="config.swatchPos === \'left\'" class="color-picker-swatch" ng-click="focus()" ng-show="config.swatch" ng-class="{\'color-picker-swatch-left\': config.swatchPos !== \'right\', \'color-picker-swatch-right\': config.swatchPos === \'right\', \'input-group-addon\': config.swatchBootstrap}"></span>\n' +
' <input class="color-picker-input form-control" type="text" ng-model="ngModel" ng-readonly="config.swatchOnly" ng-disabled="config.disabled" ng-blur="onBlur()" ng-change="onChange($event)" size="7" ng-focus="show()" ng-class="{\'color-picker-input-swatch\': config.swatch && !config.swatchOnly && config.swatchPos === \'left\'}">\n' +
' <span ng-if="config.swatchPos === \'right\'" class="color-picker-swatch" ng-click="focus()" ng-show="config.swatch" ng-class="{\'color-picker-swatch-left\': config.swatchPos !== \'right\', \'color-picker-swatch-right\': config.swatchPos === \'right\', \'input-group-addon\': config.swatchBootstrap}"></span>\n' +
' </div>\n' +
' <div class="color-picker-panel" ng-show="visible" ng-class="{\n' +
' \'color-picker-panel-top color-picker-panel-right\': config.pos === \'top right\',\n' +
' \'color-picker-panel-top color-picker-panel-left\': config.pos === \'top left\',\n' +
' \'color-picker-panel-bottom color-picker-panel-right\': config.pos === \'bottom right\',\n' +
' \'color-picker-panel-bottom color-picker-panel-left\': config.pos === \'bottom left\',\n' +
' \'color-picker-show-alpha\': config.alpha && config.format !== \'hex\',\n' +
' \'color-picker-show-inline\': config.inline,\n' +
' }">\n' +
' <div class="color-picker-row">\n' +
' <div class="color-picker-grid color-picker-sprite">\n' +
' <div class="color-picker-grid-inner"></div>\n' +
' <div class="color-picker-picker">\n' +
' <div></div>\n' +
' </div>\n' +
' </div>\n' +
' <div class="color-picker-hue color-picker-sprite">\n' +
' <div class="color-picker-slider"></div>\n' +
' </div>\n' +
' <div class="color-picker-opacity color-picker-sprite" ng-show="config.alpha && config.format !== \'hex\'">\n' +
' <div class="color-picker-slider"></div>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
'</div>'
);
}]);
}));

61

dist/angularjs-color-picker.min.js
/*!
* angularjs-color-picker v1.1.7
* angularjs-color-picker v2.0.0
* https://github.com/ruhley/angular-color-picker/

@@ -7,60 +7,5 @@ *

*
* 2016-06-29 10:55:04
* 2016-07-11 16:31:21
*
*/
"undefined"!=typeof module&&"undefined"!=typeof exports&&module.exports===exports&&(module.exports="color.picker"),function(){"use strict";angular.module("color.picker",[])}(),function(){"use strict";var a=function(a,b){return{restrict:"E",require:["^ngModel"],scope:{ngModel:"=",colorPickerDisabled:"=",colorPickerAlpha:"=",colorPickerCase:"=",colorPickerFormat:"=",colorPickerPos:"=",colorPickerSwatch:"=",colorPickerSwatchOnly:"=",colorPickerSwatchPos:"=",colorPickerSwatchBootstrap:"=",colorPickerInline:"=",colorPickerOnChange:"&"},templateUrl:"template/color-picker/directive.html",link:function(c,d,e,f){c.onChangeValue=null,c.updateModel=!0,c.chrome=Boolean(window.chrome),c.android_version=window.navigator.userAgent.match(/Android\s([0-9\.]*)/i),c.android_version=c.android_version&&c.android_version.length>1?parseFloat(c.android_version[1]):NaN,c.init=function(){
// if no color provided
if(void 0===c.ngModel)c.setDefaults();else{var b=tinycolor(c.ngModel);if(b.isValid()){var d=b.toHsv();c.hue=d.h,c.saturation=100*d.s,c.lightness=100*d.v,c.opacity=100*d.a}}
// set default config settings
c.initConfig(),
// setup mouse events
a.on("mousedown",c.onMouseDown),a.on("mouseup",c.onMouseUp),a.on("mousemove",c.onMouseMove),c.find(".color-picker-grid").on("click",c.onColorClick),c.find(".color-picker-hue").on("click",c.onHueClick),c.find(".color-picker-opacity").on("click",c.onOpacityClick)},c.onMouseDown=function(a){
// an element in this picker
!c.config.disabled&&c.find(a.target).length>0&&(
// mouse event on color grid
a.target.classList.contains("color-picker-grid-inner")||a.target.classList.contains("color-picker-picker")||a.target.parentNode.classList.contains("color-picker-picker")?(c.colorDown(a),c.$apply()):a.target.classList.contains("color-picker-hue")||a.target.parentNode.classList.contains("color-picker-hue")?(c.hueDown(a),c.$apply()):(a.target.classList.contains("color-picker-opacity")||a.target.parentNode.classList.contains("color-picker-opacity"))&&(c.opacityDown(a),c.$apply()))},c.onMouseUp=function(a){
// no current mouse events and not an element in the picker
c.colorMouse||c.hueMouse||c.opacityMouse||0!==c.find(a.target).length?c.colorMouse?(c.colorUp(a),c.$apply(),c.onChange(a)):c.hueMouse?(c.hueUp(a),c.$apply(),c.onChange(a)):c.opacityMouse&&(c.opacityUp(a),c.$apply(),c.onChange(a)):(c.log("Document Click Event"),c.hide())},c.onMouseMove=function(a){
// mouse event on color grid
c.colorMouse?(c.colorChange(a),c.$apply()):c.hueMouse?(c.hueChange(a),c.$apply()):c.opacityMouse&&(c.opacityChange(a),c.$apply())},c.onColorClick=function(a){c.config.disabled||(c.colorChange(a),c.$apply(),c.onChange(a))},c.onHueClick=function(a){c.config.disabled||(c.hueChange(a),c.$apply(),c.onChange(a))},c.onOpacityClick=function(a){c.config.disabled||(c.opacityChange(a),c.$apply(),c.onChange(a))},c.onChange=function(a){c.ngModel!==c.onChangeValue&&(c.onChangeValue=c.ngModel,c.colorPickerOnChange({$event:a,color:c.ngModel}))},c.onBlur=function(){c.ngModel!==c.onChangeValue&&(c.updateModel=!0,c.update())},c.initConfig=function(){c.config={},c.config.disabled=void 0===c.colorPickerDisabled?!1:c.colorPickerDisabled,c.config.alpha=void 0===c.colorPickerAlpha?!0:c.colorPickerAlpha,c.config.case=void 0===c.colorPickerCase?"upper":c.colorPickerCase,c.config.format=void 0===c.colorPickerFormat?"hsl":c.colorPickerFormat,c.config.pos=void 0===c.colorPickerPos?"bottom left":c.colorPickerPos,c.config.swatch=void 0===c.colorPickerSwatch?!0:c.colorPickerSwatch,c.config.swatchOnly=void 0===c.colorPickerSwatchOnly?!1:c.colorPickerSwatchOnly,c.config.swatchPos=void 0===c.colorPickerSwatchPos?"left":c.colorPickerSwatchPos,c.config.swatchBootstrap=void 0===c.colorPickerSwatchBootstrap?!0:c.colorPickerSwatchBootstrap,c.config.inline=void 0===c.colorPickerInline?!1:c.colorPickerInline,c.visible=c.config.inline,c.log("Config",c.config)},c.focus=function(){c.log("Focus Event"),c.find(".color-picker-input")[0].focus()},c.show=function(){
// if already visible then don't run show again
// if already visible then don't run show again
// force the sliders to re-caculate their position
return c.visible?!0:(c.log("Show Event"),c.visible=!0,c.hueMouse=!1,c.opacityMouse=!1,c.colorMouse=!1,c.hueUpdate(),c.saturationUpdate(),c.lightnessUpdate(),void c.opacityUpdate())},c.hide=function(){c.config.inline||!c.visible&&null===d[0].querySelector(".color-picker-panel").offsetParent||(c.log("Hide Event"),c.visible=!1,c.$apply())},c.setDefaults=function(){void 0===c.hue&&(c.hue=0),void 0===c.saturation&&(c.saturation=0),void 0===c.lightness&&(c.lightness=100),void 0===c.opacity&&(c.opacity=100)},c.update=function(){if(void 0===c.hue&&void 0===c.saturation&&void 0===c.lightness)return!1;c.setDefaults();var a,b=tinycolor({h:c.hue,s:c.saturation/100,v:c.lightness/100});switch(c.config.alpha&&b.setAlpha(c.opacity/100),c.log("COLOR CHANGED TO ",b,c.hue,c.saturation,c.lightness,c.opacity),c.swatchColor=b.toHslString(),c.config.format){case"rgb":a=b.toRgbString();break;case"hex":a=b.toHexString(),a="lower"===c.config.case?a.toLowerCase():a.toUpperCase();break;case"hex8":a=b.toHex8String(),a="lower"===c.config.case?a.toLowerCase():a.toUpperCase();break;case"hsv":a=b.toHsvString();break;default:a=b.toHslString()}c.updateModel&&(c.ngModel=a)},c.updateSwatchBackground=function(){var a=angular.element(d[0].querySelector(".color-picker-swatch"));a.css({"background-color":c.swatchColor})},c.$watch("ngModel",function(a,d){if(void 0!==a&&null!==a&&a!==d&&a.length>4){c.log("MODEL - CHANGED",a);var g=tinycolor(a);if(g.isValid()){var h=g.toHsv();c.updateModel=!1,c.hue=h.h,c.saturation=100*h.s,c.lightness=100*h.v,c.config.alpha&&(c.opacity=100*h.a),b(function(){c.updateModel=!0}),c.isValid=!0}else c.isValid=!1;f[0].$setValidity(e.name,c.isValid),void 0!==d&&"function"==typeof f[0].$setDirty&&f[0].$setDirty()}else null!==a&&""!==a||(c.hue=void 0,c.saturation=void 0,c.lightness=void 0,c.opacity=void 0),c.swatchColor=""}),c.$watchGroup(["colorPickerFormat","colorPickerAlpha","colorPickerCase"],function(a,b){void 0!==a&&(c.initConfig(),c.update())}),c.$watchGroup(["colorPickerDisabled","colorPickerSwatchBootstrap","colorPickerSwatchOnly","colorPickerSwatch","colorPickerPos","colorPickerInline"],function(a,b){void 0!==a&&c.initConfig()}),c.$watch("colorPickerSwatchPos",function(a,d){void 0!==a&&(c.initConfig(),b(function(){c.updateSwatchBackground()}))}),
//---------------------------
// Update Positions And Colors On Elements
//---------------------------
c.$watch("swatchColor",function(){c.updateSwatchBackground()}),c.huePosUpdate=function(){b(function(){var a=d[0].querySelector(".color-picker-hue"),b=angular.element(d[0].querySelector(".color-picker-hue .color-picker-slider")),e=a.getBoundingClientRect();b.css({top:e.height*c.huePos/100+"px"})})},c.opacityPosUpdate=function(){b(function(){var a=d[0].querySelector(".color-picker-opacity"),b=angular.element(d[0].querySelector(".color-picker-opacity .color-picker-slider")),e=a.getBoundingClientRect();b.css({top:e.height*c.opacityPos/100+"px"})})},c.lightnessPosUpdate=function(){b(function(){var a=d[0].querySelector(".color-picker-grid"),b=angular.element(d[0].querySelector(".color-picker-grid .color-picker-picker")),e=a.getBoundingClientRect();b.css({top:e.height*c.lightnessPos/100+"px"})})},c.saturationPosUpdate=function(){b(function(){var a=d[0].querySelector(".color-picker-grid"),b=angular.element(d[0].querySelector(".color-picker-grid .color-picker-picker")),e=a.getBoundingClientRect();b.css({left:e.width*c.saturationPos/100+"px"})})},c.gridUpdate=function(){var a=angular.element(d[0].querySelector(".color-picker-grid"));a.css({"background-color":c.grid})},
//---------------------------
// HUE
//---------------------------
c.hueDown=function(a){a.stopPropagation(),a.preventDefault(),c.log("HUE - MOUSE DOWN"),c.hueMouse=!0},c.hueUp=function(a){a.stopPropagation(),a.preventDefault(),c.log("HUE - MOUSE UP"),c.hueMouse=!1},c.hueChange=function(a){a.stopPropagation(),a.preventDefault(),c.log("HUE - MOUSE CHANGE");var b=c.find(".color-picker-hue");c.hue=360*(1-(a.pageY-c.offset(b).top)/b.prop("offsetHeight")),c.hue>360?c.hue=360:c.hue<0&&(c.hue=0)},c.hueUpdate=function(){void 0!==c.hue&&(c.log("HUE - CHANGED"),c.huePos=100*(1-c.hue/360),c.grid=tinycolor({h:c.hue,s:100,v:1}).toHslString(),c.huePos<0?c.huePos=0:c.huePos>100&&(c.huePos=100),c.huePosUpdate(),c.gridUpdate(),c.update())},c.$watch("hue",function(){c.hueUpdate()}),
//---------------------------
// OPACITY
//---------------------------
c.opacityDown=function(a){a.stopPropagation(),a.preventDefault(),c.log("OPACITY - MOUSE DOWN"),c.opacityMouse=!0},c.opacityUp=function(a){a.stopPropagation(),a.preventDefault(),c.log("OPACITY - MOUSE UP"),c.opacityMouse=!1},c.opacityChange=function(a){a.stopPropagation(),a.preventDefault(),c.log("OPACITY - MOUSE CHANGE");var b=c.find(".color-picker-opacity");c.opacity=100*(1-(a.pageY-c.offset(b).top)/b.prop("offsetHeight")),c.opacity>100?c.opacity=100:c.opacity<0&&(c.opacity=0)},c.opacityUpdate=function(){void 0!==c.opacity&&(c.log("OPACITY - CHANGED"),c.opacityPos=100*(1-c.opacity/100),c.opacityPos<0?c.opacityPos=0:c.opacityPos>100&&(c.opacityPos=100),c.opacityPosUpdate(),c.update())},c.$watch("opacity",function(){c.opacityUpdate()}),
//---------------------------
// COLOR
//---------------------------
c.colorDown=function(a){a.stopPropagation(),a.preventDefault(),c.log("COLOR - MOUSE DOWN"),c.colorMouse=!0},c.colorUp=function(a){a.stopPropagation(),a.preventDefault(),c.log("COLOR - MOUSE UP"),c.colorMouse=!1},c.colorChange=function(a){a.stopPropagation(),a.preventDefault(),c.log("COLOR - MOUSE CHANGE");var b=c.find(".color-picker-grid-inner"),d=c.offset(b);c.saturation=(a.pageX-d.left)/b.prop("offsetWidth")*100,c.lightness=100*(1-(a.pageY-d.top)/b.prop("offsetHeight")),c.saturation>100?c.saturation=100:c.saturation<0&&(c.saturation=0),c.lightness>100?c.lightness=100:c.lightness<0&&(c.lightness=0)},c.saturationUpdate=function(a){void 0!==c.saturation&&(c.log("SATURATION - CHANGED"),c.saturationPos=c.saturation/100*100,c.saturationPos<0?c.saturationPos=0:c.saturationPos>100&&(c.saturationPos=100),c.saturationPosUpdate(),c.update())},c.$watch("saturation",function(){c.saturationUpdate()}),c.lightnessUpdate=function(){void 0!==c.lightness&&(c.log("LIGHTNESS - CHANGED"),c.lightnessPos=100*(1-c.lightness/100),c.lightnessPos<0?c.lightnessPos=0:c.lightnessPos>100&&(c.lightnessPos=100),c.lightnessPosUpdate(),c.update())},c.$watch("lightness",function(){c.lightnessUpdate()}),
//---------------------------
// HELPER FUNCTIONS
//---------------------------
c.log=function(){},
// taken and modified from jQuery's find
c.find=function(a){var b,e=c.wrapper?c.wrapper[0]:d[0],f=[];
// Same basic safeguard as Sizzle
if(!a)return f;if("string"==typeof a){
// Early return if context is not an element or document
if(1!==(b=e.nodeType)&&9!==b)return[];f=e.querySelectorAll(a)}else e.contains(a)&&f.push(a);return angular.element(f)},
// taken and modified from jQuery's offset
c.offset=function(a){var b,d,e,f,g=a[0];if(g)
// Support: IE<=11+
// Running getBoundingClientRect on a
// disconnected node in IE throws an error
// Support: IE<=11+
// Running getBoundingClientRect on a
// disconnected node in IE throws an error
// Make sure element is not hidden (display: none)
// hack for small chrome screens not position the clicks properly when the page is scrolled
return g.getClientRects().length?(e=g.getBoundingClientRect(),e.width||e.height?(f=g.ownerDocument,d=null!==f&&f===f.window?f:9===f.nodeType&&f.defaultView,b=f.documentElement,c.chrome&&c.android_version<6&&screen.width<=768?{top:e.top-b.clientTop,left:e.left-b.clientLeft}:{top:e.top+d.pageYOffset-b.clientTop,left:e.left+d.pageXOffset-b.clientLeft}):e):{top:0,left:0}},c.init(),c.$on("$destroy",function(){a.off("mousedown",c.onMouseDown),a.off("mouseup",c.onMouseUp),a.off("mousemove",c.onMouseMove)})}}};a.$inject=["$document","$timeout"],angular.module("color.picker").directive("colorPicker",a)}(),angular.module("color.picker").run(["$templateCache",function(a){a.put("template/color-picker/directive.html",'<div class="color-picker-wrapper" ng-class="{\'color-picker-swatch-only\': config.swatchOnly}">\n <div class="color-picker-input-wrapper" ng-class="{\'input-group\': config.swatchBootstrap && config.swatch}">\n <span ng-if="config.swatchPos === \'left\'" class="color-picker-swatch" ng-click="focus()" ng-show="config.swatch" ng-class="{\'color-picker-swatch-left\': config.swatchPos !== \'right\', \'color-picker-swatch-right\': config.swatchPos === \'right\', \'input-group-addon\': config.swatchBootstrap}"></span>\n <input class="color-picker-input form-control" type="text" ng-model="ngModel" ng-readonly="config.swatchOnly" ng-disabled="config.disabled" ng-blur="onBlur()" ng-change="onChange($event)" size="7" ng-focus="show()" ng-class="{\'color-picker-input-swatch\': config.swatch && !config.swatchOnly && config.swatchPos === \'left\'}">\n <span ng-if="config.swatchPos === \'right\'" class="color-picker-swatch" ng-click="focus()" ng-show="config.swatch" ng-class="{\'color-picker-swatch-left\': config.swatchPos !== \'right\', \'color-picker-swatch-right\': config.swatchPos === \'right\', \'input-group-addon\': config.swatchBootstrap}"></span>\n </div>\n <div class="color-picker-panel" ng-show="visible" ng-class="{\n'+" 'color-picker-panel-top color-picker-panel-right': config.pos === 'top right',\n 'color-picker-panel-top color-picker-panel-left': config.pos === 'top left',\n 'color-picker-panel-bottom color-picker-panel-right': config.pos === 'bottom right',\n 'color-picker-panel-bottom color-picker-panel-left': config.pos === 'bottom left',\n 'color-picker-show-alpha': config.alpha && config.format !== 'hex',\n 'color-picker-show-inline': config.inline,\n }\">\n <div class=\"color-picker-row\">\n <div class=\"color-picker-grid color-picker-sprite\">\n <div class=\"color-picker-grid-inner\"></div>\n <div class=\"color-picker-picker\">\n <div></div>\n </div>\n </div>\n <div class=\"color-picker-hue color-picker-sprite\">\n <div class=\"color-picker-slider\"></div>\n </div>\n <div class=\"color-picker-opacity color-picker-sprite\" ng-show=\"config.alpha && config.format !== 'hex'\">\n <div class=\"color-picker-slider\"></div>\n </div>\n </div>\n </div>\n</div>")}]);
!function(o,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):o.AngularjsColorPicker=t()}(this,function(){"use strict";function o(){return{restrict:"E",require:["^ngModel"],scope:{ngModel:"=",options:"=?",api:"=?"},bindToController:!0,templateUrl:"template/color-picker/directive.html",controller:s,controllerAs:"AngularColorPickerController",link:function(o,t,i,e){o.control=e}}}function t(o){o.put("template/color-picker/directive.html",'<div class="color-picker-wrapper" ng-class="{\n\'color-picker-disabled\': AngularColorPickerController.options.disabled,\n\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,\n}">\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 <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'+" 'color-picker-panel-top color-picker-panel-right': AngularColorPickerController.options.pos === 'top right',\n 'color-picker-panel-top color-picker-panel-left': AngularColorPickerController.options.pos === 'top left',\n 'color-picker-panel-bottom color-picker-panel-right': AngularColorPickerController.options.pos === 'bottom right',\n 'color-picker-panel-bottom color-picker-panel-left': AngularColorPickerController.options.pos === 'bottom left',\n 'color-picker-show-alpha': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== 'hex',\n 'color-picker-show-inline': AngularColorPickerController.options.inline,\n }\">\n <div class=\"color-picker-row\">\n <div class=\"color-picker-grid color-picker-sprite\">\n <div class=\"color-picker-grid-inner\"></div>\n <div class=\"color-picker-picker\">\n <div></div>\n </div>\n </div>\n <div class=\"color-picker-hue color-picker-sprite\">\n <div class=\"color-picker-slider\"></div>\n </div>\n <div class=\"color-picker-opacity color-picker-sprite\" ng-show=\"AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== 'hex'\">\n <div class=\"color-picker-slider\"></div>\n </div>\n </div>\n </div>\n</div>")}var i=function(o,t){if(!(o instanceof t))throw new TypeError("Cannot call a class as a function")},e=function(){function o(o,t){for(var i=0;i<t.length;i++){var e=t[i];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(o,e.key,e)}}return function(t,i,e){return i&&o(t.prototype,i),e&&o(t,e),t}}(),s=function(){function o(t,e,s,n){var r=this;i(this,o),this.$scope=t,this.$element=e,this.$document=s,this.$timeout=n,this.chrome=Boolean(window.chrome);var l=window.navigator.userAgent.match(/Android\s([0-9\.]*)/i);this.android_version=l&&l.length>1?parseFloat(l[1]):NaN,this.onChangeValue=null,this.updateModel=!0,this.$scope.$watch("AngularColorPickerController.ngModel",this.watchNgModel.bind(this)),this.$scope.$watch("AngularColorPickerController.options.swatchPos",this.watchSwatchPos.bind(this)),this.$scope.$watchGroup(["AngularColorPickerController.options.format","AngularColorPickerController.options.alpha","AngularColorPickerController.options.case"],this.reInitAndUpdate.bind(this)),this.$scope.$watchGroup(["AngularColorPickerController.options.disabled","AngularColorPickerController.options.swatchBootstrap","AngularColorPickerController.options.swatchOnly","AngularColorPickerController.options.swatch","AngularColorPickerController.options.pos","AngularColorPickerController.options.inline"],this.reInit.bind(this)),this.$scope.$watch("AngularColorPickerController.api",this.watchApi.bind(this)),this.$scope.$watch("AngularColorPickerController.swatchColor",this.updateSwatchBackground.bind(this)),this.$scope.$watch("AngularColorPickerController.hue",this.hueUpdate.bind(this)),this.$scope.$watch("AngularColorPickerController.saturation",this.saturationUpdate.bind(this)),this.$scope.$watch("AngularColorPickerController.lightness",this.lightnessUpdate.bind(this)),this.$scope.$watch("AngularColorPickerController.opacity",this.opacityUpdate.bind(this)),this.$scope.$on("$destroy",function(){r.$document.off("mousedown",r.onMouseDown),r.$document.off("mouseup",r.onMouseUp),r.$document.off("mousemove",r.onMouseMove),r.callApiFunction("onDestroy")}),this.init()}return e(o,[{key:"watchNgModel",value:function(o,t){var i=this;if(void 0!==o&&null!==o&&o!==t&&o.length>4){var e=tinycolor(o);if(e.isValid()){var s=e.toHsv();this.updateModel=!1,this.hue=s.h,this.saturation=100*s.s,this.lightness=100*s.v,this.options.alpha&&(this.opacity=100*s.a),this.$timeout(function(){i.updateModel=!0}),this.isValid=!0}else this.isValid=!1;this.$scope.control[0].$setValidity(this.$element.attr("name"),this.isValid),void 0!==t&&"function"==typeof this.$scope.control[0].$setDirty&&this.$scope.control[0].$setDirty()}else null!==o&&""!==o||(this.hue=void 0,this.saturation=void 0,this.lightness=void 0,this.opacity=void 0),this.swatchColor=""}},{key:"watchSwatchPos",value:function(o){var t=this;void 0!==o&&(this.initConfig(),this.$timeout(function(){t.updateSwatchBackground()}))}},{key:"watchApi",value:function(){var o=this;this.api||(this.api={}),this.api.open=function(){return!!o.visible||(o.visible=!0,o.hueMouse=!1,o.opacityMouse=!1,o.colorMouse=!1,o.hueUpdate(),o.saturationUpdate(),o.lightnessUpdate(),o.opacityUpdate(),void o.callApiFunction("onOpen"))},this.api.close=function(){o.options.inline||!o.visible&&null===o.$element[0].querySelector(".color-picker-panel").offsetParent||(o.visible=!1,o.$scope.$apply(),o.callApiFunction("onClose"))}}},{key:"reInit",value:function(o){void 0!==o&&this.initConfig()}},{key:"reInitAndUpdate",value:function(o){void 0!==o&&(this.initConfig(),this.update())}},{key:"init",value:function(){if(void 0===this.ngModel)this.setDefaults();else{var o=tinycolor(this.ngModel);if(o.isValid()){var t=o.toHsv();this.hue=t.h,this.saturation=100*t.s,this.lightness=100*t.v,this.opacity=100*t.a}}this.initConfig(),this.$document.on("mousedown",this.onMouseDown.bind(this)),this.$document.on("mouseup",this.onMouseUp.bind(this)),this.$document.on("mousemove",this.onMouseMove.bind(this)),this.find(".color-picker-grid").on("click",this.onColorClick.bind(this)),this.find(".color-picker-hue").on("click",this.onHueClick.bind(this)),this.find(".color-picker-opacity").on("click",this.onOpacityClick.bind(this))}},{key:"onMouseDown",value:function(o){!this.options.disabled&&this.find(o.target).length>0&&(o.target.classList.contains("color-picker-grid-inner")||o.target.classList.contains("color-picker-picker")||o.target.parentNode.classList.contains("color-picker-picker")?(this.colorDown(o),this.$scope.$apply()):o.target.classList.contains("color-picker-hue")||o.target.parentNode.classList.contains("color-picker-hue")?(this.hueDown(o),this.$scope.$apply()):(o.target.classList.contains("color-picker-opacity")||o.target.parentNode.classList.contains("color-picker-opacity"))&&(this.opacityDown(o),this.$scope.$apply()))}},{key:"onMouseUp",value:function(o){this.colorMouse||this.hueMouse||this.opacityMouse||0!==this.find(o.target).length?this.colorMouse?(this.colorUp(o),this.$scope.$apply(),this.onChange(o)):this.hueMouse?(this.hueUp(o),this.$scope.$apply(),this.onChange(o)):this.opacityMouse&&(this.opacityUp(o),this.$scope.$apply(),this.onChange(o)):this.api.close()}},{key:"onMouseMove",value:function(o){this.colorMouse?(this.colorChange(o),this.$scope.$apply()):this.hueMouse?(this.hueChange(o),this.$scope.$apply()):this.opacityMouse&&(this.opacityChange(o),this.$scope.$apply())}},{key:"onColorClick",value:function(o){this.options.disabled||(this.colorChange(o),this.$scope.$apply(),this.onChange(o))}},{key:"onHueClick",value:function(o){this.options.disabled||(this.hueChange(o),this.$scope.$apply(),this.onChange(o))}},{key:"onOpacityClick",value:function(o){this.options.disabled||(this.opacityChange(o),this.$scope.$apply(),this.onChange(o))}},{key:"onChange",value:function(o){this.ngModel!==this.onChangeValue&&(this.onChangeValue=this.ngModel,this.callApiFunction("onChange",[o,this.ngModel]))}},{key:"onBlur",value:function(o){this.ngModel!==this.onChangeValue&&(this.updateModel=!0,this.update()),this.callApiFunction("onBlur",[o,this.ngModel])}},{key:"initConfig",value:function(){this.options||(this.options={}),this.options.disabled=void 0!==this.options.disabled&&this.options.disabled,this.options.alpha=void 0===this.options.alpha||this.options.alpha,this.options.case=void 0===this.options.case?"upper":this.options.case,this.options.format=void 0===this.options.format?"hsl":this.options.format,this.options.pos=void 0===this.options.pos?"bottom left":this.options.pos,this.options.swatch=void 0===this.options.swatch||this.options.swatch,this.options.swatchOnly=void 0!==this.options.swatchOnly&&this.options.swatchOnly,this.options.swatchPos=void 0===this.options.swatchPos?"left":this.options.swatchPos,this.options.swatchBootstrap=void 0===this.options.swatchBootstrap||this.options.swatchBootstrap,this.options.inline=void 0!==this.options.inline&&this.options.inline,this.visible=this.options.inline}},{key:"focus",value:function(){this.find(".color-picker-input")[0].focus()}},{key:"setDefaults",value:function(){void 0===this.hue&&(this.hue=0),void 0===this.saturation&&(this.saturation=0),void 0===this.lightness&&(this.lightness=100),void 0===this.opacity&&(this.opacity=100)}},{key:"update",value:function(){if(void 0===this.hue&&void 0===this.saturation&&void 0===this.lightness)return!1;this.setDefaults();var o,t=tinycolor({h:this.hue,s:this.saturation/100,v:this.lightness/100});switch(this.options.alpha&&t.setAlpha(this.opacity/100),this.swatchColor=t.toHslString(),this.options.format){case"rgb":o=t.toRgbString();break;case"hex":o=t.toHexString(),o="lower"===this.options.case?o.toLowerCase():o.toUpperCase();break;case"hex8":o=t.toHex8String(),o="lower"===this.options.case?o.toLowerCase():o.toUpperCase();break;case"hsv":o=t.toHsvString();break;default:o=t.toHslString()}this.updateModel&&(this.ngModel=o)}},{key:"updateSwatchBackground",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-swatch"));o.css({"background-color":this.swatchColor})}},{key:"huePosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-hue"),i=angular.element(o.$element[0].querySelector(".color-picker-hue .color-picker-slider")),e=t.getBoundingClientRect();i.css({top:e.height*o.huePos/100+"px"})})}},{key:"opacityPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-opacity"),i=angular.element(o.$element[0].querySelector(".color-picker-opacity .color-picker-slider")),e=t.getBoundingClientRect();i.css({top:e.height*o.opacityPos/100+"px"})})}},{key:"lightnessPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-grid"),i=angular.element(o.$element[0].querySelector(".color-picker-grid .color-picker-picker")),e=t.getBoundingClientRect();i.css({top:e.height*o.lightnessPos/100+"px"})})}},{key:"saturationPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-grid"),i=angular.element(o.$element[0].querySelector(".color-picker-grid .color-picker-picker")),e=t.getBoundingClientRect();i.css({left:e.width*o.saturationPos/100+"px"})})}},{key:"gridUpdate",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-grid"));o.css({"background-color":this.grid})}},{key:"hueDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.hueMouse=!0}},{key:"hueUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.hueMouse=!1}},{key:"hueChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-hue");this.hue=360*(1-(o.pageY-this.offset(t).top)/t.prop("offsetHeight")),this.hue>360?this.hue=360:this.hue<0&&(this.hue=0)}},{key:"hueUpdate",value:function(){void 0!==this.hue&&(this.huePos=100*(1-this.hue/360),this.grid=tinycolor({h:this.hue,s:100,v:1}).toHslString(),this.huePos<0?this.huePos=0:this.huePos>100&&(this.huePos=100),this.huePosUpdate(),this.gridUpdate(),this.update())}},{key:"opacityDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.opacityMouse=!0}},{key:"opacityUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.opacityMouse=!1}},{key:"opacityChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-opacity");this.opacity=100*(1-(o.pageY-this.offset(t).top)/t.prop("offsetHeight")),this.opacity>100?this.opacity=100:this.opacity<0&&(this.opacity=0)}},{key:"opacityUpdate",value:function(){void 0!==this.opacity&&(this.opacityPos=100*(1-this.opacity/100),this.opacityPos<0?this.opacityPos=0:this.opacityPos>100&&(this.opacityPos=100),this.opacityPosUpdate(),this.update())}},{key:"colorDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.colorMouse=!0}},{key:"colorUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.colorMouse=!1}},{key:"colorChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-grid-inner"),i=this.offset(t);this.saturation=(o.pageX-i.left)/t.prop("offsetWidth")*100,this.lightness=100*(1-(o.pageY-i.top)/t.prop("offsetHeight")),this.saturation>100?this.saturation=100:this.saturation<0&&(this.saturation=0),this.lightness>100?this.lightness=100:this.lightness<0&&(this.lightness=0)}},{key:"saturationUpdate",value:function(o){void 0!==this.saturation&&(this.saturationPos=this.saturation/100*100,this.saturationPos<0?this.saturationPos=0:this.saturationPos>100&&(this.saturationPos=100),this.saturationPosUpdate(),this.update())}},{key:"lightnessUpdate",value:function(){void 0!==this.lightness&&(this.lightnessPos=100*(1-this.lightness/100),this.lightnessPos<0?this.lightnessPos=0:this.lightnessPos>100&&(this.lightnessPos=100),this.lightnessPosUpdate(),this.update())}},{key:"callApiFunction",value:function(o,t){this.api&&"function"==typeof this.api[o]&&this.api[o].apply(this,t)}},{key:"find",value:function(o){var t,i=this.wrapper?this.wrapper[0]:this.$element[0],e=[];if(!o)return e;if("string"==typeof o){if(1!==(t=i.nodeType)&&9!==t)return[];e=i.querySelectorAll(o)}else i.contains(o)&&e.push(o);return angular.element(e)}},{key:"offset",value:function(o){var t,i,e,s,n=o[0];if(n)return n.getClientRects().length?(e=n.getBoundingClientRect(),e.width||e.height?(s=n.ownerDocument,i=null!==s&&s===s.window?s:9===s.nodeType&&s.defaultView,t=s.documentElement,this.chrome&&this.android_version<6&&screen.width<=768?{top:e.top-t.clientTop,left:e.left-t.clientLeft}:{top:e.top+i.pageYOffset-t.clientTop,left:e.left+i.pageXOffset-t.clientLeft}):e):{top:0,left:0}}}]),o}();s.$inject=["$scope","$element","$document","$timeout"],t.$inject=["$templateCache"];var n=angular.module("color.picker",[]).directive("colorPicker",o).run(t);return n});

6

examples/app-06.js

@@ -19,2 +19,8 @@ var app = angular.module('app', ['ui.bootstrap', 'color.picker']);

modal.options = {
format: 'hex',
swatchPos: 'right',
swatchBootstrap: false
}
});

12

examples/app-08.js

@@ -11,4 +11,12 @@ angular

$scope.color = '#00FF00';
$scope.format = 'hex';
$scope.inline = true;
$scope.options = {
format: 'hex',
inline: true,
};
$scope.api = {
onChange: function(event, ngModel) {
console.log(event, ngModel);
}
};
});

18

examples/app-preset-hex.js

@@ -8,9 +8,13 @@ angular

$scope.$watch('color', function(newValue, oldValue) {
// console.log(newValue, oldValue);
});
$scope.onColorChange = function($event, color) {
console.log($event, color);
}
$scope.options = {
format: 'hex',
swatchOnly: false,
alpha: false,
swatchBootstrap: false,
};
$scope.api = {
onChange: function(event, ngModel) {
console.log(event, ngModel);
}
};
});

14

examples/app-preset.js

@@ -11,10 +11,8 @@ angular

$scope.color = 'rgba(50, 75, 150, 0.4)';
$scope.$watch('color', function(newValue, oldValue) {
// console.log(newValue, oldValue);
});
$scope.onColorChange = function($event, color) {
console.log($event, color);
}
$scope.options = {};
$scope.api = {
onChange: function(event, ngModel) {
console.log(event, ngModel);
}
};
});

31

examples/app.js

@@ -10,9 +10,28 @@ angular

$scope.$watch('color', function(newValue, oldValue) {
// console.log(newValue, oldValue);
});
$scope.options = {};
$scope.api = {
onChange: function() {
console.log('change', arguments);
},
onBlur: function() {
console.log('blur', arguments);
},
onOpen: function() {
console.info('open', arguments);
},
onClose: function() {
console.info('close', arguments);
},
onDestroy: function() {
console.info('destroy', arguments);
}
};
$scope.onColorChange = function($event, color) {
console.log($event, color, $scope.color);
}
$scope.open = function() {
$scope.api.open();
};
$scope.close = function() {
$scope.api.close();
};
});

7

grunt/build.js
module.exports = function(grunt) {
grunt.registerTask('build', [
'notify:build',
'jshint:lib',
// 'jshint:tests',
'jshint:src',
'jshint:grunt',
//'karma:build',
'clean:build',
'concat:build',
'run:rollup',
'less:build',
'uglify:build',
'cssmin:build',

@@ -13,0 +10,0 @@ 'notify:buildComplete'

4

grunt/options/jshint.js
module.exports = {
options: {
esversion: 6,
globals: {

@@ -14,5 +15,4 @@ // js globals

},
lib: ['<%= config.lib %>/**/*.js'],
tests: ['karma.conf.js', '<%= config.tests %>/**/*.js'],
src: ['<%= config.src %>/**/*.js'],
grunt: ['Gruntfile.js', '<%= config.grunt %>/**/*.js']
};

2

grunt/options/less.js

@@ -12,3 +12,3 @@ module.exports = function() {

expand: true,
cwd: '<%= config.lib %>/<%= config.styles %>',
cwd: '<%= config.src %>/<%= config.styles %>',
src: ['**/*.less'],

@@ -15,0 +15,0 @@ dest: '<%= config.dist %>',

2

Gruntfile.js

@@ -14,3 +14,3 @@ (function(module) {

// folders
lib: 'lib',
src: 'src',
dist: 'dist',

@@ -17,0 +17,0 @@ tests: 'tests',

13

package.json
{
"name": "angularjs-color-picker",
"description": "Color Picker Directive For AngularJS",
"version": "1.1.7",
"version": "2.0.0",
"license": "MIT",

@@ -22,19 +22,22 @@ "main": "dist/angularjs-color-picker.min.js",

"devDependencies": {
"babel-preset-es2015-rollup": "^1.1.1",
"glob": "^7.0.0",
"grunt": "~1.0.0",
"grunt-contrib-clean": "~1.0.0",
"grunt-contrib-concat": "~1.0.0",
"grunt-contrib-cssmin": "~1.0.0",
"grunt-contrib-jshint": "~1.0.0",
"grunt-contrib-less": "~1.3.0",
"grunt-contrib-uglify": "~1.0.0",
"grunt-karma": "~2.0.0",
"grunt-notify": "~0.4.1",
"grunt-run": "^0.6.0",
"load-grunt-tasks": "~3.5.0",
"moment": "^2.14.1",
"rollup": "^0.34.1",
"rollup-plugin-babel": "^2.6.1",
"rollup-plugin-uglify": "^1.0.1",
"time-grunt": "~1.3.0"
},
"engines": {
"node": ">=0.10.0"
"node": ">=4.4.0"
},
"scripts": {}
}
grunt/options/concat.js
grunt/options/karma.js
grunt/options/uglify.js
grunt/test.js
lib/scripts/directive.js
lib/scripts/module.js
lib/scripts/template.js
lib/styles/angularjs-color-picker.less
lib/styles/themes/angularjs-color-picker-bootstrap.less
dist/angularjs-color-picker.css

Sorry, the diff of this file is not supported yet

dist/angularjs-color-picker.min.css

Sorry, the diff of this file is not supported yet

dist/themes/angularjs-color-picker-bootstrap.css

Sorry, the diff of this file is not supported yet

dist/themes/angularjs-color-picker-bootstrap.min.css

Sorry, the diff of this file is not supported yet

examples/01-simple.html

Sorry, the diff of this file is not supported yet

examples/02-testing-lib.html

Sorry, the diff of this file is not supported yet

examples/03-testing-preset-value.html

Sorry, the diff of this file is not supported yet

examples/04-testing-lib-angularjs-1.3.html

Sorry, the diff of this file is not supported yet

examples/05-testing-bootstrap.html

Sorry, the diff of this file is not supported yet

examples/06-non-assignable-bug-#65.html

Sorry, the diff of this file is not supported yet

examples/07-testing-preset-value-hex-Bug-#81.html

Sorry, the diff of this file is not supported yet

examples/08-testing-inline.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc