Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
angularjs-color-picker
Advanced tools
angularjs-color-picker - npm Package Compare versions
Comparing version 3.4.4 to 3.4.5
| { | ||
| "name": "angular-color-picker", | ||
| "description": "Color Picker Directive For AngularJS", | ||
| "version": "3.4.4", | ||
| "version": "3.4.5", | ||
| "homepage": "https://github.com/ruhley/angular-color-picker", | ||
@@ -6,0 +6,0 @@ "repository": { |
| # Changelog | ||
| This is a summary of the changes. For a full list of changes see https://github.com/ruhley/angular-color-picker/releases. | ||
| ## v3.4.5 | ||
| #### Breaking Changes | ||
| * None | ||
| #### New Features | ||
| * Call update function when closing popup | ||
| * Rewrote some sections to reduce code duplication and file size by over 10% | ||
| #### Bug Fixes | ||
| * Bug #146 - Sliders no longer lose position when going to black or white | ||
| * Bug #173 - Unable to Use hexString Format with restrictToFormat | ||
| * Bug #174 - Clicking on swatch when disabled still opens popup | ||
| ## v3.4.4 | ||
@@ -4,0 +20,0 @@ |
| /*! | ||
| * angularjs-color-picker v3.4.4 | ||
| * angularjs-color-picker v3.4.5 | ||
| * https://github.com/ruhley/angular-color-picker/ | ||
@@ -7,3 +7,3 @@ * | ||
| * | ||
| * 2017-08-14 10:42:13 | ||
| * 2017-09-19 08:53:31 | ||
| * | ||
@@ -80,167 +80,12 @@ */ | ||
| this.opacity = undefined; | ||
| this.basicEventTypes = ['hue', 'saturation', 'lightness', 'opacity']; | ||
| this.fullEventTypes = ['color', 'hue', 'saturation', 'lightness', 'opacity']; | ||
| } | ||
| //--------------------------- | ||
| // init functions | ||
| //--------------------------- | ||
| createClass(AngularColorPickerController, [{ | ||
| key: 'watchNgModel', | ||
| value: function watchNgModel(newValue, oldValue) { | ||
| var _this = this; | ||
| if (newValue !== undefined && oldValue !== undefined && !this.hasOwnProperty('initialNgModel')) { | ||
| this.initialNgModel = newValue; | ||
| } | ||
| // sets the field to pristine or dirty for angular | ||
| this.checkDirty(newValue); | ||
| // the mouse is still moving so don't do anything yet | ||
| if (this.colorMouse) { | ||
| return; | ||
| } | ||
| if (newValue !== undefined && newValue !== null) { | ||
| var color = tinycolor(newValue); | ||
| var isValid = this.isColorValid(color); | ||
| if (isValid) { | ||
| var hsl; | ||
| if (this.options.round) { | ||
| hsl = color.toHsl(); | ||
| this.lightness = hsl.l * 100; | ||
| } else { | ||
| hsl = color.toHsv(); | ||
| this.lightness = hsl.v * 100; | ||
| } | ||
| this.hue = hsl.h; | ||
| this.saturation = hsl.s * 100; | ||
| this.updateModel = false; | ||
| if (this.options.alpha) { | ||
| this.opacity = hsl.a * 100; | ||
| } | ||
| this.$timeout(function () { | ||
| _this.updateModel = true; | ||
| }); | ||
| } | ||
| this.$scope.control[0].$setValidity('color', isValid); | ||
| } else { | ||
| if (newValue === null || newValue === '') { | ||
| this.hue = 0; | ||
| this.saturation = undefined; | ||
| this.lightness = undefined; | ||
| this.opacity = undefined; | ||
| } | ||
| this.swatchColor = ''; | ||
| } | ||
| } | ||
| }, { | ||
| key: 'setNgModel', | ||
| value: function setNgModel(value) { | ||
| this.internalNgModel = value; | ||
| if (this.ngModelOptions.getterSetter) { | ||
| this.ngModel(value); | ||
| } else { | ||
| this.ngModel = value; | ||
| } | ||
| } | ||
| }, { | ||
| key: 'watchSwatchPos', | ||
| value: function watchSwatchPos(newValue) { | ||
| var _this2 = this; | ||
| if (newValue !== undefined) { | ||
| this.initConfig(); | ||
| this.$timeout(function () { | ||
| _this2.updateSwatchBackground(); | ||
| }); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'setupApi', | ||
| value: function setupApi() { | ||
| var _this3 = this; | ||
| if (!this.api) { | ||
| this.api = {}; | ||
| } | ||
| this.api.open = function (event) { | ||
| // if already open then don't run show again | ||
| if (_this3.is_open) { | ||
| return true; | ||
| } | ||
| _this3.is_open = true; | ||
| _this3.hueMouse = false; | ||
| _this3.opacityMouse = false; | ||
| _this3.colorMouse = false; | ||
| // force redraw | ||
| _this3.$scope.$applyAsync(); | ||
| // force the sliders to re-caculate their position | ||
| _this3.hueUpdate(); | ||
| _this3.saturationUpdate(); | ||
| _this3.lightnessUpdate(); | ||
| _this3.opacityUpdate(); | ||
| _this3.eventApiDispatch('onOpen', [event]); | ||
| }; | ||
| this.api.close = function (event) { | ||
| if (!_this3.options.inline && (_this3.is_open || _this3.$element[0].querySelector('.color-picker-panel').offsetParent !== null)) { | ||
| _this3.is_open = false; | ||
| _this3.$scope.$applyAsync(); | ||
| _this3.eventApiDispatch('onClose', [event]); | ||
| } | ||
| }; | ||
| this.api.clear = function (event) { | ||
| if (_this3.internalNgModel !== '') { | ||
| _this3.setNgModel(''); | ||
| _this3.eventApiDispatch('onClear', [event]); | ||
| } | ||
| }; | ||
| this.api.reset = function (event) { | ||
| if (_this3.internalNgModel !== _this3.initialNgModel) { | ||
| _this3.setNgModel(_this3.initialNgModel); | ||
| _this3.eventApiDispatch('onReset', [event]); | ||
| } | ||
| }; | ||
| this.api.getElement = function () { | ||
| return _this3.$element; | ||
| }; | ||
| this.api.getScope = function () { | ||
| return _this3.$scope; | ||
| }; | ||
| } | ||
| }, { | ||
| 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', | ||
@@ -274,4 +119,48 @@ value: function init() { | ||
| }, { | ||
| key: 'initConfig', | ||
| value: function initConfig() { | ||
| if (!this.options) { | ||
| this.options = {}; | ||
| } | ||
| this.mergeOptions(this.options, this.ColorPickerOptions); | ||
| this.is_open = this.options.inline; | ||
| if (this.options.inline) { | ||
| this.options.close.show = false; | ||
| } | ||
| this.pickerDimensions = { | ||
| width: 150, | ||
| height: 150 | ||
| }; | ||
| this.sliderDimensions = { | ||
| width: this.options.horizontal ? this.pickerDimensions.width : 20, | ||
| height: this.options.horizontal ? 20 : this.pickerDimensions.height | ||
| }; | ||
| } | ||
| }, { | ||
| key: 'mergeOptions', | ||
| value: function mergeOptions(options, defaultOptions) { | ||
| for (var attr in defaultOptions) { | ||
| if (defaultOptions.hasOwnProperty(attr)) { | ||
| if (!options || !options.hasOwnProperty(attr)) { | ||
| options[attr] = defaultOptions[attr]; | ||
| } else if (_typeof(defaultOptions[attr]) === 'object') { | ||
| this.mergeOptions(options[attr], defaultOptions[attr]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| //--------------------------- | ||
| // watcher functions | ||
| //--------------------------- | ||
| }, { | ||
| key: 'initWatchers', | ||
| value: function initWatchers() { | ||
| var _this = this; | ||
@@ -285,8 +174,25 @@ // ngModel | ||
| this.$scope.$watch('AngularColorPickerController.options.swatchPos', this.watchSwatchPos.bind(this)); | ||
| this.$scope.$watch('AngularColorPickerController.options.swatchPos', function (newValue) { | ||
| if (newValue !== undefined) { | ||
| _this.initConfig(); | ||
| this.$scope.$watchGroup(['AngularColorPickerController.options.format', 'AngularColorPickerController.options.alpha', 'AngularColorPickerController.options.case', 'AngularColorPickerController.options.round', 'AngularColorPickerController.options.restrictToFormat', 'AngularColorPickerController.options.preserveInputFormat', 'AngularColorPickerController.options.allowEmpty', 'AngularColorPickerController.options.horizontal'], this.reInitAndUpdate.bind(this)); | ||
| _this.$timeout(function () { | ||
| _this.updateSwatchBackground(); | ||
| }); | ||
| } | ||
| }); | ||
| this.$scope.$watchGroup(['AngularColorPickerController.options.disabled', 'AngularColorPickerController.options.swatchBootstrap', 'AngularColorPickerController.options.swatchOnly', 'AngularColorPickerController.options.swatch', 'AngularColorPickerController.options.pos', 'AngularColorPickerController.options.inline', 'AngularColorPickerController.options.placeholder'], this.reInit.bind(this)); | ||
| this.$scope.$watchGroup(['AngularColorPickerController.options.format', 'AngularColorPickerController.options.alpha', 'AngularColorPickerController.options.case', 'AngularColorPickerController.options.round', 'AngularColorPickerController.options.restrictToFormat', 'AngularColorPickerController.options.preserveInputFormat', 'AngularColorPickerController.options.allowEmpty', 'AngularColorPickerController.options.horizontal'], function (newValue) { | ||
| if (newValue !== undefined) { | ||
| _this.initConfig(); | ||
| _this.update(); | ||
| } | ||
| }); | ||
| this.$scope.$watchGroup(['AngularColorPickerController.options.disabled', 'AngularColorPickerController.options.swatchBootstrap', 'AngularColorPickerController.options.swatchOnly', 'AngularColorPickerController.options.swatch', 'AngularColorPickerController.options.pos', 'AngularColorPickerController.options.inline', 'AngularColorPickerController.options.placeholder'], function (newValue) { | ||
| if (newValue !== undefined) { | ||
| _this.initConfig(); | ||
| } | ||
| }); | ||
| // api | ||
@@ -300,14 +206,83 @@ | ||
| this.$scope.$watch('AngularColorPickerController.hue', this.hueUpdate.bind(this)); | ||
| this.$scope.$watch('AngularColorPickerController.hue', function () { | ||
| _this.valueUpdate('hue'); | ||
| }); | ||
| this.$scope.$watch('AngularColorPickerController.saturation', this.saturationUpdate.bind(this)); | ||
| this.$scope.$watch('AngularColorPickerController.saturation', function () { | ||
| _this.valueUpdate('saturation'); | ||
| }); | ||
| this.$scope.$watch('AngularColorPickerController.lightness', this.lightnessUpdate.bind(this)); | ||
| this.$scope.$watch('AngularColorPickerController.lightness', function () { | ||
| _this.valueUpdate('lightness'); | ||
| }); | ||
| this.$scope.$watch('AngularColorPickerController.opacity', this.opacityUpdate.bind(this)); | ||
| this.$scope.$watch('AngularColorPickerController.opacity', function () { | ||
| _this.valueUpdate('opacity'); | ||
| }); | ||
| } | ||
| /** Triggered on change to internal or external ngModel value */ | ||
| }, { | ||
| key: 'watchNgModel', | ||
| value: function watchNgModel(newValue, oldValue) { | ||
| // set initial value if not already set | ||
| if (newValue !== undefined && oldValue !== undefined && !this.hasOwnProperty('initialNgModel')) { | ||
| this.initialNgModel = newValue; | ||
| } | ||
| // sets the field to pristine or dirty for angular | ||
| this.checkDirty(newValue); | ||
| // the mouse is still moving so don't do anything yet | ||
| if (this.colorMouse) { | ||
| return; | ||
| } | ||
| // calculate and set color values | ||
| this.watchNgModelSet(newValue); | ||
| } | ||
| /** Helper for watchNgModel to set internal values and validity */ | ||
| }, { | ||
| key: 'watchNgModelSet', | ||
| value: function watchNgModelSet(newValue) { | ||
| var _this2 = this; | ||
| if (newValue !== undefined && newValue !== null) { | ||
| var color = tinycolor(newValue); | ||
| var isValid = this.isColorValid(color); | ||
| if (isValid) { | ||
| this.setColorValue(color); | ||
| this.updateModel = false; | ||
| this.$timeout(function () { | ||
| _this2.updateModel = true; | ||
| }); | ||
| } | ||
| this.$scope.control[0].$setValidity('color', isValid); | ||
| } else { | ||
| if (newValue === null || newValue === '') { | ||
| this.hue = 0; | ||
| this.saturation = undefined; | ||
| this.lightness = undefined; | ||
| this.opacity = undefined; | ||
| } | ||
| this.swatchColor = ''; | ||
| } | ||
| } | ||
| //--------------------------- | ||
| // mouse/touch event functions | ||
| //--------------------------- | ||
| }, { | ||
| key: 'initMouseEvents', | ||
| value: function initMouseEvents() { | ||
| var _this4 = this; | ||
| var _this3 = this; | ||
@@ -335,20 +310,40 @@ var eventHandlers = { | ||
| // grid click | ||
| this.find('.color-picker-grid').on('click', this.onColorClick.bind(this)); | ||
| this.find('.color-picker-grid').on('touchend', this.onColorClick.bind(this)); | ||
| this.find('.color-picker-grid').on('click', function (event) { | ||
| _this3.onClick('color', event); | ||
| }); | ||
| this.find('.color-picker-grid').on('touchend', function (event) { | ||
| _this3.onClick('color', event); | ||
| }); | ||
| // hue click | ||
| this.find('.color-picker-hue').on('click', this.onHueClick.bind(this)); | ||
| this.find('.color-picker-hue').on('touchend', this.onHueClick.bind(this)); | ||
| this.find('.color-picker-hue').on('click', function (event) { | ||
| _this3.onClick('hue', event); | ||
| }); | ||
| this.find('.color-picker-hue').on('touchend', function (event) { | ||
| _this3.onClick('hue', event); | ||
| }); | ||
| // saturation click | ||
| this.find('.color-picker-saturation').on('click', this.onSaturationClick.bind(this)); | ||
| this.find('.color-picker-saturation').on('touchend', this.onSaturationClick.bind(this)); | ||
| this.find('.color-picker-saturation').on('click', function (event) { | ||
| _this3.onClick('saturation', event); | ||
| }); | ||
| this.find('.color-picker-saturation').on('touchend', function (event) { | ||
| _this3.onClick('saturation', event); | ||
| }); | ||
| // lightness click | ||
| this.find('.color-picker-lightness').on('click', this.onLightnessClick.bind(this)); | ||
| this.find('.color-picker-lightness').on('touchend', this.onLightnessClick.bind(this)); | ||
| this.find('.color-picker-lightness').on('click', function (event) { | ||
| _this3.onClick('lightness', event); | ||
| }); | ||
| this.find('.color-picker-lightness').on('touchend', function (event) { | ||
| _this3.onClick('lightness', event); | ||
| }); | ||
| // opacity click | ||
| this.find('.color-picker-opacity').on('click', this.onOpacityClick.bind(this)); | ||
| this.find('.color-picker-opacity').on('touchend', this.onOpacityClick.bind(this)); | ||
| this.find('.color-picker-opacity').on('click', function (event) { | ||
| _this3.onClick('opacity', event); | ||
| }); | ||
| this.find('.color-picker-opacity').on('touchend', function (event) { | ||
| _this3.onClick('opacity', event); | ||
| }); | ||
@@ -364,15 +359,15 @@ this.find('.color-picker-input').on('focusin', this.onFocus.bind(this)); | ||
| // remove mouse events | ||
| _this4.$document.off('mousedown', eventHandlers.mouseDown); | ||
| _this4.$document.off('mouseup', eventHandlers.mouseUp); | ||
| _this4.$document.off('mousemove', eventHandlers.mouseMove); | ||
| _this3.$document.off('mousedown', eventHandlers.mouseDown); | ||
| _this3.$document.off('mouseup', eventHandlers.mouseUp); | ||
| _this3.$document.off('mousemove', eventHandlers.mouseMove); | ||
| // remove touch events | ||
| _this4.$document.off('touchstart', eventHandlers.mouseDown); | ||
| _this4.$document.off('touchend', eventHandlers.mouseUp); | ||
| _this4.$document.off('touchmove', eventHandlers.mouseMove); | ||
| _this3.$document.off('touchstart', eventHandlers.mouseDown); | ||
| _this3.$document.off('touchend', eventHandlers.mouseUp); | ||
| _this3.$document.off('touchmove', eventHandlers.mouseMove); | ||
| // remove key events | ||
| _this4.$document.off('keyup', eventHandlers.keyUp); | ||
| _this3.$document.off('keyup', eventHandlers.keyUp); | ||
| _this4.eventApiDispatch('onDestroy'); | ||
| _this3.eventApiDispatch('onDestroy'); | ||
| }); | ||
@@ -390,29 +385,20 @@ } | ||
| // 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 saturation slider | ||
| } else if (event.target.classList.contains('color-picker-saturation') || event.target.parentNode.classList.contains('color-picker-saturation')) { | ||
| this.saturationDown(event); | ||
| this.$scope.$apply(); | ||
| // mouse event on lightness slider | ||
| } else if (event.target.classList.contains('color-picker-lightness') || event.target.parentNode.classList.contains('color-picker-lightness')) { | ||
| this.lightnessDown(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(); | ||
| for (var i = 0; i < this.fullEventTypes.length; i++) { | ||
| this.onMouseDownType(this.fullEventTypes[i], event); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'onMouseDownType', | ||
| value: function onMouseDownType(type, event) { | ||
| if (type === 'color' && (event.target.classList.contains('color-picker-grid-inner') || event.target.classList.contains('color-picker-picker') || event.target.parentNode.classList.contains('color-picker-picker'))) { | ||
| this.mouseEventToggle(type, false, event); | ||
| } else if (event.target.classList.contains('color-picker-' + type) || event.target.parentNode.classList.contains('color-picker-' + type)) { | ||
| this.mouseEventToggle(type, false, event); | ||
| } | ||
| } | ||
| }, { | ||
| 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) { | ||
| if (!this.anyMouseEvents() && this.find(event.target).length === 0) { | ||
| this.setupApi(); | ||
@@ -423,27 +409,14 @@ if (this.options.hide.click) { | ||
| this.$scope.$apply(); | ||
| // mouse event on color grid | ||
| } else if (this.colorMouse && this.has_moused_moved) { | ||
| this.colorUp(event); | ||
| this.$scope.$apply(); | ||
| } else { | ||
| for (var i = 0; i < this.fullEventTypes.length; i++) { | ||
| this.onMouseUpType(this.fullEventTypes[i], event); | ||
| } | ||
| } | ||
| } | ||
| }, { | ||
| key: 'onMouseUpType', | ||
| value: function onMouseUpType(type, event) { | ||
| if (this[type + 'Mouse'] && this.has_moused_moved) { | ||
| this.mouseEventToggle(type, true, event); | ||
| this.onChange(event); | ||
| // mouse event on hue slider | ||
| } else if (this.hueMouse && this.has_moused_moved) { | ||
| this.hueUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| // mouse event on saturation slider | ||
| } else if (this.saturationMouse && this.has_moused_moved) { | ||
| this.saturationUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| // mouse event on lightness slider | ||
| } else if (this.lightnessMouse && this.has_moused_moved) { | ||
| this.lightnessUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| // mouse event on opacity slider | ||
| } else if (this.opacityMouse && this.has_moused_moved) { | ||
| this.opacityUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| } | ||
@@ -454,27 +427,13 @@ } | ||
| value: function onMouseMove(event) { | ||
| // mouse event on color grid | ||
| if (this.colorMouse) { | ||
| for (var i = 0; i < this.fullEventTypes.length; i++) { | ||
| this.onMouseMoveType(this.fullEventTypes[i], event); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'onMouseMoveType', | ||
| value: function onMouseMoveType(type, event) { | ||
| if (this[type + 'Mouse']) { | ||
| this.has_moused_moved = true; | ||
| this.colorChange(event); | ||
| this.valueChange(type, event); | ||
| this.$scope.$apply(); | ||
| // mouse event on hue slider | ||
| } else if (this.hueMouse) { | ||
| this.has_moused_moved = true; | ||
| this.hueChange(event); | ||
| this.$scope.$apply(); | ||
| // mouse event on saturation slider | ||
| } else if (this.saturationMouse) { | ||
| this.has_moused_moved = true; | ||
| this.saturationChange(event); | ||
| this.$scope.$apply(); | ||
| // mouse event on lightness slider | ||
| } else if (this.lightnessMouse) { | ||
| this.has_moused_moved = true; | ||
| this.lightnessChange(event); | ||
| this.$scope.$apply(); | ||
| // mouse event on opacity slider | ||
| } else if (this.opacityMouse) { | ||
| this.has_moused_moved = true; | ||
| this.opacityChange(event); | ||
| this.$scope.$apply(); | ||
| } | ||
@@ -491,8 +450,7 @@ } | ||
| }, { | ||
| key: 'onColorClick', | ||
| value: function onColorClick(event) { | ||
| key: 'onClick', | ||
| value: function onClick(type, event) { | ||
| if (!this.options.disabled && !this.has_moused_moved) { | ||
| this.colorChange(event); | ||
| this.colorUp(event); | ||
| this.$scope.$apply(); | ||
| this.valueChange(type, event); | ||
| this.mouseEventToggle(type, true, event); | ||
| this.onChange(event); | ||
@@ -502,42 +460,2 @@ } | ||
| }, { | ||
| key: 'onHueClick', | ||
| value: function onHueClick(event) { | ||
| if (!this.options.disabled && !this.has_moused_moved) { | ||
| this.hueChange(event); | ||
| this.hueUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'onSaturationClick', | ||
| value: function onSaturationClick(event) { | ||
| if (!this.options.disabled && !this.has_moused_moved) { | ||
| this.saturationChange(event); | ||
| this.saturationUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'onLightnessClick', | ||
| value: function onLightnessClick(event) { | ||
| if (!this.options.disabled && !this.has_moused_moved) { | ||
| this.lightnessChange(event); | ||
| this.lightnessUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'onOpacityClick', | ||
| value: function onOpacityClick(event) { | ||
| if (!this.options.disabled && !this.has_moused_moved) { | ||
| this.opacityChange(event); | ||
| this.opacityUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'onChange', | ||
@@ -570,80 +488,115 @@ value: function onChange(event) { | ||
| }, { | ||
| key: 'initConfig', | ||
| value: function initConfig() { | ||
| if (!this.options) { | ||
| this.options = {}; | ||
| key: 'onSwatchClick', | ||
| value: function onSwatchClick($event) { | ||
| if (this.options.show.swatch && !this.options.disabled) { | ||
| this.api.open($event); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'onFocus', | ||
| value: function onFocus($event) { | ||
| if (this.options.show.focus) { | ||
| this.api.open($event); | ||
| } | ||
| } | ||
| this.mergeOptions(this.options, this.ColorPickerOptions); | ||
| //--------------------------- | ||
| // api functions | ||
| //--------------------------- | ||
| this.is_open = this.options.inline; | ||
| /** Sets up the external api */ | ||
| if (this.options.inline) { | ||
| this.options.close.show = false; | ||
| }, { | ||
| key: 'setupApi', | ||
| value: function setupApi() { | ||
| var _this4 = this; | ||
| if (!this.api) { | ||
| this.api = {}; | ||
| } | ||
| this.pickerDimensions = { | ||
| width: 150, | ||
| height: 150 | ||
| this.api.open = function (event) { | ||
| // if already open then don't run show again | ||
| if (_this4.is_open) { | ||
| return true; | ||
| } | ||
| _this4.is_open = true; | ||
| _this4.hueMouse = false; | ||
| _this4.opacityMouse = false; | ||
| _this4.colorMouse = false; | ||
| // force redraw | ||
| _this4.$scope.$applyAsync(); | ||
| // force the sliders to re-caculate their position | ||
| for (var i = 0; i < _this4.basicEventTypes.length; i++) { | ||
| _this4.valueUpdate(_this4.basicEventTypes[i]); | ||
| } | ||
| _this4.eventApiDispatch('onOpen', [event]); | ||
| }; | ||
| this.sliderDimensions = { | ||
| width: this.options.horizontal ? this.pickerDimensions.width : 20, | ||
| height: this.options.horizontal ? 20 : this.pickerDimensions.height | ||
| this.api.close = function (event) { | ||
| // check that it is not already closed | ||
| if (!_this4.options.inline && (_this4.is_open || _this4.$element[0].querySelector('.color-picker-panel').offsetParent !== null)) { | ||
| _this4.is_open = false; | ||
| _this4.$scope.$applyAsync(); | ||
| _this4.update(); | ||
| _this4.eventApiDispatch('onClose', [event]); | ||
| } | ||
| }; | ||
| } | ||
| }, { | ||
| key: 'mergeOptions', | ||
| value: function mergeOptions(options, defaultOptions) { | ||
| for (var attr in defaultOptions) { | ||
| if (defaultOptions.hasOwnProperty(attr)) { | ||
| if (!options || !options.hasOwnProperty(attr)) { | ||
| options[attr] = defaultOptions[attr]; | ||
| } else if (_typeof(defaultOptions[attr]) === 'object') { | ||
| this.mergeOptions(options[attr], defaultOptions[attr]); | ||
| } | ||
| this.api.clear = function (event) { | ||
| if (_this4.internalNgModel !== '') { | ||
| _this4.setNgModel(''); | ||
| _this4.eventApiDispatch('onClear', [event]); | ||
| } | ||
| } | ||
| }; | ||
| this.api.reset = function (event) { | ||
| if (_this4.internalNgModel !== _this4.initialNgModel) { | ||
| _this4.setNgModel(_this4.initialNgModel); | ||
| _this4.eventApiDispatch('onReset', [event]); | ||
| } | ||
| }; | ||
| this.api.getElement = function () { | ||
| return _this4.$element; | ||
| }; | ||
| this.api.getScope = function () { | ||
| return _this4.$scope; | ||
| }; | ||
| } | ||
| //--------------------------- | ||
| // model functions | ||
| //--------------------------- | ||
| /** Sets the internal and external ngModel values */ | ||
| }, { | ||
| key: 'onSwatchClick', | ||
| value: function onSwatchClick($event) { | ||
| if (this.options.show.swatch) { | ||
| this.api.open($event); | ||
| key: 'setNgModel', | ||
| value: function setNgModel(value) { | ||
| this.internalNgModel = value; | ||
| if (this.ngModelOptions.getterSetter) { | ||
| this.ngModel(value); | ||
| } else { | ||
| this.ngModel = value; | ||
| } | ||
| } | ||
| }, { | ||
| key: 'onFocus', | ||
| value: function onFocus($event) { | ||
| if (this.options.show.focus) { | ||
| this.api.open($event); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'update', | ||
| value: function update() { | ||
| if (this.hue === undefined || this.saturation === undefined || this.lightness === undefined) { | ||
| if (!this.areAllValuesSet()) { | ||
| return false; | ||
| } | ||
| var color; | ||
| var color = tinycolor(this.getColorValue()); | ||
| if (this.options.round) { | ||
| color = tinycolor({ | ||
| h: this.hue, | ||
| s: this.saturation + '%', | ||
| l: this.lightness + '%' | ||
| }); | ||
| } else { | ||
| color = tinycolor({ | ||
| h: this.hue, | ||
| s: this.saturation + '%', | ||
| v: this.lightness + '%' | ||
| }); | ||
| } | ||
| if (this.options.alpha) { | ||
| color.setAlpha(this.opacity / 100); | ||
| } | ||
| this.swatchColor = color.toHslString(); | ||
@@ -658,3 +611,3 @@ | ||
| this.lightnessPosUpdate(); | ||
| this.updateAlphaBackground(color); | ||
| this.updateOpacityBackground(color); | ||
| this.opacityPosUpdate(); | ||
@@ -665,61 +618,86 @@ | ||
| if (this.updateModel && !skipUpdate) { | ||
| switch (this.options.format.toLowerCase()) { | ||
| case 'rgb': | ||
| this.setNgModel(color.toRgbString()); | ||
| break; | ||
| var formats = { | ||
| rgb: 'toRgbString', | ||
| hex: 'toHex', | ||
| hex8: 'toHex8', | ||
| hexstring: 'toHexString', | ||
| hex8string: 'toHex8String', | ||
| hsv: 'toHsvString', | ||
| hsl: 'toHslString', | ||
| raw: 'clone' | ||
| }; | ||
| case 'hex': | ||
| if (this.options.case === 'lower') { | ||
| this.setNgModel(color.toHex().toLowerCase()); | ||
| } else { | ||
| this.setNgModel(color.toHex().toUpperCase()); | ||
| } | ||
| break; | ||
| var value = color[formats[this.options.format.toLowerCase()]](); | ||
| case 'hex8': | ||
| if (this.options.case === 'lower') { | ||
| this.setNgModel(color.toHex8().toLowerCase()); | ||
| } else { | ||
| this.setNgModel(color.toHex8().toUpperCase()); | ||
| } | ||
| break; | ||
| if (this.options.format.match(/hex/i)) { | ||
| value = this.options.case === 'upper' ? value.toUpperCase() : value.toLowerCase(); | ||
| } | ||
| case 'hexstring': | ||
| if (this.options.case === 'lower') { | ||
| this.setNgModel(color.toHexString().toLowerCase()); | ||
| } else { | ||
| this.setNgModel(color.toHexString().toUpperCase()); | ||
| } | ||
| break; | ||
| this.setNgModel(value); | ||
| } | ||
| } | ||
| case 'hex8string': | ||
| if (this.options.case === 'lower') { | ||
| this.setNgModel(color.toHex8String().toLowerCase()); | ||
| } else { | ||
| this.setNgModel(color.toHex8String().toUpperCase()); | ||
| } | ||
| break; | ||
| //--------------------------- | ||
| // generic value functions | ||
| //--------------------------- | ||
| case 'hsv': | ||
| this.setNgModel(color.toHsvString()); | ||
| break; | ||
| }, { | ||
| key: 'mouseEventToggle', | ||
| value: function mouseEventToggle(type, up, event) { | ||
| this.stopEvent(event); | ||
| this[type + 'Mouse'] = !up; | ||
| this.$scope.$apply(); | ||
| } | ||
| }, { | ||
| key: 'valueChange', | ||
| value: function valueChange(type, event) { | ||
| this.stopEvent(event); | ||
| case 'raw': | ||
| this.setNgModel(color.clone()); | ||
| break; | ||
| if (type === 'color') { | ||
| return this.colorChange(event); | ||
| } | ||
| default: | ||
| this.setNgModel(color.toHslString()); | ||
| break; | ||
| } | ||
| var el = this.find('.color-picker-' + type); | ||
| var eventPos = this.getEventPos(event); | ||
| var max = this.getMaxFromType(type); | ||
| this[type] = this.calculateSliderPos(el, eventPos, max); | ||
| if (this[type] > max) { | ||
| this[type] = max; | ||
| } else if (this[type] < 0) { | ||
| this[type] = 0; | ||
| } | ||
| } | ||
| }, { | ||
| key: 'updateSwatchBackground', | ||
| value: function updateSwatchBackground() { | ||
| var el = angular.element(this.$element[0].querySelector('.color-picker-swatch')); | ||
| el.css({ | ||
| 'background-color': this.swatchColor | ||
| }); | ||
| key: 'valueUpdate', | ||
| value: function valueUpdate(type) { | ||
| if (this[type] !== undefined) { | ||
| if (type === 'saturation') { | ||
| this[type + 'Pos'] = this[type]; | ||
| } else { | ||
| var max = this.getMaxFromType(type); | ||
| this[type + 'Pos'] = (1 - this[type] / max) * 100; | ||
| } | ||
| if (this[type + 'Pos'] < 0) { | ||
| this[type + 'Pos'] = 0; | ||
| } else if (this[type + 'Pos'] > 100) { | ||
| this[type + 'Pos'] = 100; | ||
| } | ||
| if (this.options.round) { | ||
| this.getRoundPos(); | ||
| this.updateRoundPos(); | ||
| } | ||
| this[type + 'PosUpdate'](); | ||
| this.update(); | ||
| } | ||
| } | ||
| //--------------------------- | ||
| // hue functions | ||
| //--------------------------- | ||
| }, { | ||
@@ -743,2 +721,33 @@ key: 'huePosUpdate', | ||
| }, { | ||
| key: 'updateHueBackground', | ||
| value: function updateHueBackground(color) { | ||
| var el = this.find('.color-picker-hue .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'left' : 'top'; | ||
| var zero_sixths = this.getColorValue(); | ||
| var one_sixths = this.getColorValue(); | ||
| var two_sixths = this.getColorValue(); | ||
| var three_sixths = this.getColorValue(); | ||
| var four_sixths = this.getColorValue(); | ||
| var five_sixths = this.getColorValue(); | ||
| var six_sixths = this.getColorValue(); | ||
| zero_sixths.h = 0; | ||
| one_sixths.h = 60; | ||
| two_sixths.h = 120; | ||
| three_sixths.h = 180; | ||
| four_sixths.h = 240; | ||
| five_sixths.h = 300; | ||
| six_sixths.h = 359; | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + tinycolor(zero_sixths).toRgbString() + ' 0%, ' + tinycolor(one_sixths).toRgbString() + ' 17%, ' + tinycolor(two_sixths).toRgbString() + ' 33%, ' + tinycolor(three_sixths).toRgbString() + ' 50%, ' + tinycolor(four_sixths).toRgbString() + ' 67%, ' + tinycolor(five_sixths).toRgbString() + ' 83%, ' + tinycolor(six_sixths).toRgbString() + ' 100%)' | ||
| }); | ||
| } | ||
| //--------------------------- | ||
| // saturation functions | ||
| //--------------------------- | ||
| }, { | ||
| key: 'saturationPosUpdate', | ||
@@ -771,2 +780,22 @@ value: function saturationPosUpdate() { | ||
| }, { | ||
| key: 'updateSaturationBackground', | ||
| value: function updateSaturationBackground(color) { | ||
| var el = this.find('.color-picker-saturation .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'right' : 'bottom'; | ||
| var high = this.getColorValue(); | ||
| var low = this.getColorValue(); | ||
| high.s = 100; | ||
| low.s = 0; | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + tinycolor(high).toRgbString() + ' 0%, ' + tinycolor(low).toRgbString() + ' 100%)' | ||
| }); | ||
| } | ||
| //--------------------------- | ||
| // lightness functions | ||
| //--------------------------- | ||
| }, { | ||
| key: 'lightnessPosUpdate', | ||
@@ -799,2 +828,30 @@ value: function lightnessPosUpdate() { | ||
| }, { | ||
| key: 'updateLightnessBackground', | ||
| value: function updateLightnessBackground(color) { | ||
| var el = this.find('.color-picker-lightness .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'right' : 'bottom'; | ||
| var bright = this.getColorValue(); | ||
| var middle = this.getColorValue(); | ||
| var dark = this.getColorValue(); | ||
| if (this.options.round) { | ||
| bright.l = 100; | ||
| middle.l = 50; | ||
| dark.l = 0; | ||
| } else { | ||
| bright.v = 100; | ||
| middle.v = 50; | ||
| dark.v = 0; | ||
| } | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + tinycolor(bright).toRgbString() + ' 0%, ' + tinycolor(middle).toRgbString() + ' 50%, ' + tinycolor(dark).toRgbString() + ' 100%)' | ||
| }); | ||
| } | ||
| //--------------------------- | ||
| // opacity functions | ||
| //--------------------------- | ||
| }, { | ||
| key: 'opacityPosUpdate', | ||
@@ -816,87 +873,70 @@ value: function opacityPosUpdate() { | ||
| } | ||
| }, { | ||
| key: 'updateOpacityBackground', | ||
| value: function updateOpacityBackground(color) { | ||
| var el = this.find('.color-picker-opacity .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'right' : 'bottom'; | ||
| var opaque = this.getColorValue(); | ||
| var transparent = this.getColorValue(); | ||
| opaque.a = 1; | ||
| transparent.a = 0; | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + tinycolor(opaque).toRgbString() + ' 0%, ' + tinycolor(transparent).toRgbString() + ' 100%)' | ||
| }); | ||
| } | ||
| //--------------------------- | ||
| // hue functions | ||
| // color functions | ||
| //--------------------------- | ||
| }, { | ||
| key: 'hueDown', | ||
| value: function hueDown(event) { | ||
| key: 'colorChange', | ||
| value: function colorChange(event) { | ||
| this.stopEvent(event); | ||
| this.hueMouse = true; | ||
| } | ||
| }, { | ||
| key: 'hueUp', | ||
| value: function hueUp(event) { | ||
| this.stopEvent(event); | ||
| this.hueMouse = false; | ||
| } | ||
| }, { | ||
| key: 'hueChange', | ||
| value: function hueChange(event) { | ||
| this.stopEvent(event); | ||
| var el = this.find('.color-picker-hue'); | ||
| var el = this.find('.color-picker-grid-inner'); | ||
| var eventPos = this.getEventPos(event); | ||
| var offset = this.offset(el); | ||
| this.hue = this.calculateSliderPos(el, eventPos, 360); | ||
| if (this.hue > 360) { | ||
| this.hue = 360; | ||
| } else if (this.hue < 0) { | ||
| this.hue = 0; | ||
| if (this.options.round) { | ||
| this.colorChangeRound(el, offset, eventPos); | ||
| } else { | ||
| this.colorChangeSquare(el, offset, eventPos); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'hueUpdate', | ||
| value: function hueUpdate() { | ||
| if (this.hue !== undefined) { | ||
| this.huePos = (1 - this.hue / 360) * 100; | ||
| key: 'colorChangeRound', | ||
| value: function colorChangeRound(el, offset, eventPos) { | ||
| var dx = (eventPos.pageX - offset.left) * 2.0 / el.prop('offsetWidth') - 1.0; | ||
| var dy = -((eventPos.pageY - offset.top) * 2.0 / el.prop('offsetHeight')) + 1.0; | ||
| if (this.huePos < 0) { | ||
| this.huePos = 0; | ||
| } else if (this.huePos > 100) { | ||
| this.huePos = 100; | ||
| } | ||
| var tmpHue = Math.atan2(dy, dx); | ||
| var degHue = Math.round(tmpHue * 57.29577951308233); // rad to deg | ||
| if (degHue < 0) { | ||
| degHue += 360; | ||
| } | ||
| this.hue = degHue; | ||
| if (this.options.round) { | ||
| this.getRoundPos(); | ||
| this.updateRoundPos(); | ||
| } | ||
| var tmpSaturation = Math.sqrt(dx * dx + dy * dy); | ||
| this.huePosUpdate(); | ||
| this.update(); | ||
| if (tmpSaturation > 1) { | ||
| tmpSaturation = 1; | ||
| } else if (tmpSaturation < 0) { | ||
| tmpSaturation = 0; | ||
| } | ||
| } | ||
| //--------------------------- | ||
| // saturation functions | ||
| //--------------------------- | ||
| this.saturation = tmpSaturation * 100; | ||
| }, { | ||
| key: 'saturationDown', | ||
| value: function saturationDown(event) { | ||
| this.stopEvent(event); | ||
| this.saturationMouse = true; | ||
| if (this.lightness === undefined) { | ||
| this.lightness = 50; | ||
| } | ||
| } | ||
| }, { | ||
| key: 'saturationUp', | ||
| value: function saturationUp(event) { | ||
| this.stopEvent(event); | ||
| key: 'colorChangeSquare', | ||
| value: function colorChangeSquare(el, offset, eventPos) { | ||
| this.saturation = (eventPos.pageX - offset.left) / el.prop('offsetWidth') * 100; | ||
| this.lightness = (1 - (eventPos.pageY - offset.top) / el.prop('offsetHeight')) * 100; | ||
| this.saturationMouse = false; | ||
| } | ||
| }, { | ||
| key: 'saturationChange', | ||
| value: function saturationChange(event) { | ||
| this.stopEvent(event); | ||
| var el = this.find('.color-picker-saturation'); | ||
| var eventPos = this.getEventPos(event); | ||
| this.saturation = this.calculateSliderPos(el, eventPos, 100); | ||
| if (this.saturation > 100) { | ||
@@ -907,22 +947,7 @@ this.saturation = 100; | ||
| } | ||
| } | ||
| }, { | ||
| key: 'saturationUpdate', | ||
| value: function saturationUpdate() { | ||
| if (this.saturation !== undefined) { | ||
| if (this.options.round) { | ||
| this.getRoundPos(); | ||
| this.updateRoundPos(); | ||
| } | ||
| this.saturationPos = this.saturation; | ||
| if (this.saturationPos < 0) { | ||
| this.saturationPos = 0; | ||
| } else if (this.saturationPos > 100) { | ||
| this.saturationPos = 100; | ||
| } | ||
| this.saturationPosUpdate(); | ||
| this.update(); | ||
| if (this.lightness > 100) { | ||
| this.lightness = 100; | ||
| } else if (this.lightness < 0) { | ||
| this.lightness = 0; | ||
| } | ||
@@ -934,27 +959,14 @@ } | ||
| var el = this.find('.color-picker-grid .color-picker-overlay'); | ||
| var background = this.getColorValue(); | ||
| if (this.options.round) { | ||
| var center = tinycolor({ | ||
| h: this.hue, | ||
| s: 0, | ||
| l: this.lightness | ||
| }); | ||
| el.css({ | ||
| 'background-color': center.toRgbString() | ||
| }); | ||
| background.s = 0; | ||
| } else { | ||
| var background = tinycolor({ | ||
| h: this.hue, | ||
| s: 1, | ||
| v: 1, | ||
| a: 1 | ||
| }); | ||
| el.css({ | ||
| 'background-color': background.toRgbString() | ||
| }); | ||
| background.s = 1; | ||
| background.v = 1; | ||
| background.a = 1; | ||
| } | ||
| el.css({ | ||
| 'background-color': tinycolor(background).toRgbString(), | ||
| 'opacity': color.getAlpha() | ||
@@ -968,292 +980,106 @@ }); | ||
| }, { | ||
| key: 'updateHueBackground', | ||
| value: function updateHueBackground(color) { | ||
| var el = this.find('.color-picker-hue .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'left' : 'top'; | ||
| var zero_sixths = this.getCurrentColorValue(); | ||
| var one_sixths = this.getCurrentColorValue(); | ||
| var two_sixths = this.getCurrentColorValue(); | ||
| var three_sixths = this.getCurrentColorValue(); | ||
| var four_sixths = this.getCurrentColorValue(); | ||
| var five_sixths = this.getCurrentColorValue(); | ||
| var six_sixths = this.getCurrentColorValue(); | ||
| zero_sixths.h = 0; | ||
| one_sixths.h = 60; | ||
| two_sixths.h = 120; | ||
| three_sixths.h = 180; | ||
| four_sixths.h = 240; | ||
| five_sixths.h = 300; | ||
| six_sixths.h = 359; | ||
| key: 'updateSwatchBackground', | ||
| value: function updateSwatchBackground() { | ||
| var el = angular.element(this.$element[0].querySelector('.color-picker-swatch')); | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + tinycolor(zero_sixths).toRgbString() + ' 0%, ' + tinycolor(one_sixths).toRgbString() + ' 17%, ' + tinycolor(two_sixths).toRgbString() + ' 33%, ' + tinycolor(three_sixths).toRgbString() + ' 50%, ' + tinycolor(four_sixths).toRgbString() + ' 67%, ' + tinycolor(five_sixths).toRgbString() + ' 83%, ' + tinycolor(six_sixths).toRgbString() + ' 100%)' | ||
| 'background-color': this.swatchColor | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'updateSaturationBackground', | ||
| value: function updateSaturationBackground(color) { | ||
| var el = this.find('.color-picker-saturation .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'right' : 'bottom'; | ||
| var high = this.getCurrentColorValue(); | ||
| var low = this.getCurrentColorValue(); | ||
| high.s = 100; | ||
| low.s = 0; | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + tinycolor(high).toRgbString() + ' 0%, ' + tinycolor(low).toRgbString() + ' 100%)' | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'updateLightnessBackground', | ||
| value: function updateLightnessBackground(color) { | ||
| var el = this.find('.color-picker-lightness .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'right' : 'bottom'; | ||
| var bright = this.getCurrentColorValue(); | ||
| var middle = this.getCurrentColorValue(); | ||
| var dark = this.getCurrentColorValue(); | ||
| if (this.options.round) { | ||
| bright.l = 100; | ||
| middle.l = 50; | ||
| dark.l = 0; | ||
| } else { | ||
| bright.v = 100; | ||
| middle.v = 50; | ||
| dark.v = 0; | ||
| } | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + tinycolor(bright).toRgbString() + ' 0%, ' + tinycolor(middle).toRgbString() + ' 50%, ' + tinycolor(dark).toRgbString() + ' 100%)' | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'updateAlphaBackground', | ||
| value: function updateAlphaBackground(color) { | ||
| var el = this.find('.color-picker-opacity .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'right' : 'bottom'; | ||
| var opaque = this.getCurrentColorValue(); | ||
| var transparent = this.getCurrentColorValue(); | ||
| opaque.a = 1; | ||
| transparent.a = 0; | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + tinycolor(opaque).toRgbString() + ' 0%, ' + tinycolor(transparent).toRgbString() + ' 100%)' | ||
| }); | ||
| } | ||
| //--------------------------- | ||
| // lightness functions | ||
| // helper functions | ||
| //--------------------------- | ||
| }, { | ||
| key: 'lightnessDown', | ||
| value: function lightnessDown(event) { | ||
| this.stopEvent(event); | ||
| key: 'isColorValid', | ||
| value: function isColorValid(color) { | ||
| var isValid = color.isValid(); | ||
| this.lightnessMouse = true; | ||
| } | ||
| }, { | ||
| key: 'lightnessUp', | ||
| value: function lightnessUp(event) { | ||
| this.stopEvent(event); | ||
| if (isValid && this.options.restrictToFormat) { | ||
| var format = this.options.format; | ||
| isValid = color.getFormat() === this.getTinyColorFormat(); | ||
| } | ||
| this.lightnessMouse = false; | ||
| } | ||
| }, { | ||
| key: 'lightnessChange', | ||
| value: function lightnessChange(event) { | ||
| this.stopEvent(event); | ||
| if (!isValid && this.options.allowEmpty) { | ||
| var input = color.getOriginalInput(); | ||
| var el = this.find('.color-picker-lightness'); | ||
| var eventPos = this.getEventPos(event); | ||
| this.lightness = this.calculateSliderPos(el, eventPos, 100); | ||
| if (this.lightness > 100) { | ||
| this.lightness = 100; | ||
| } else if (this.lightness < 0) { | ||
| this.lightness = 0; | ||
| } | ||
| } | ||
| }, { | ||
| key: 'lightnessUpdate', | ||
| value: function lightnessUpdate() { | ||
| if (this.lightness !== undefined) { | ||
| this.lightnessPos = 100 - this.lightness; | ||
| if (this.lightnessPos < 0) { | ||
| this.lightnessPos = 0; | ||
| } else if (this.lightnessPos > 100) { | ||
| this.lightnessPos = 100; | ||
| if (input === undefined || input === null || input === '') { | ||
| isValid = true; | ||
| } | ||
| this.lightnessPosUpdate(); | ||
| this.update(); | ||
| } | ||
| } | ||
| //--------------------------- | ||
| // opacity functions | ||
| //--------------------------- | ||
| }, { | ||
| key: 'opacityDown', | ||
| value: function opacityDown(event) { | ||
| this.stopEvent(event); | ||
| this.opacityMouse = true; | ||
| return isValid; | ||
| } | ||
| }, { | ||
| key: 'opacityUp', | ||
| value: function opacityUp(event) { | ||
| this.stopEvent(event); | ||
| key: 'getTinyColorFormat', | ||
| value: function getTinyColorFormat() { | ||
| if (this.options.format === 'hexString') { | ||
| return 'hex'; | ||
| } else if (this.options.format === 'hex8String') { | ||
| return 'hex8'; | ||
| } | ||
| this.opacityMouse = false; | ||
| return this.options.format; | ||
| } | ||
| }, { | ||
| key: 'opacityChange', | ||
| value: function opacityChange(event) { | ||
| this.stopEvent(event); | ||
| var el = this.find('.color-picker-opacity'); | ||
| var eventPos = this.getEventPos(event); | ||
| this.opacity = this.calculateSliderPos(el, eventPos, 100); | ||
| if (this.opacity > 100) { | ||
| this.opacity = 100; | ||
| } else if (this.opacity < 0) { | ||
| this.opacity = 0; | ||
| key: 'areAllValuesSet', | ||
| value: function areAllValuesSet() { | ||
| if (this.hue === undefined || this.saturation === undefined || this.lightness === undefined) { | ||
| return false; | ||
| } | ||
| } | ||
| }, { | ||
| key: 'opacityUpdate', | ||
| value: function opacityUpdate() { | ||
| if (this.opacity !== undefined) { | ||
| this.opacityPos = (1 - this.opacity / 100) * 100; | ||
| if (this.opacityPos < 0) { | ||
| this.opacityPos = 0; | ||
| } else if (this.opacityPos > 100) { | ||
| this.opacityPos = 100; | ||
| } | ||
| this.opacityPosUpdate(); | ||
| this.update(); | ||
| } | ||
| return true; | ||
| } | ||
| //--------------------------- | ||
| // color functions | ||
| //--------------------------- | ||
| }, { | ||
| key: 'colorDown', | ||
| value: function colorDown(event) { | ||
| this.stopEvent(event); | ||
| key: 'getColorValue', | ||
| value: function getColorValue() { | ||
| var includeOpacity = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; | ||
| this.colorMouse = true; | ||
| } | ||
| }, { | ||
| key: 'colorUp', | ||
| value: function colorUp(event) { | ||
| this.stopEvent(event); | ||
| var value = { | ||
| h: this.hue, | ||
| s: this.saturation + '%', | ||
| v: this.lightness + '%' | ||
| }; | ||
| this.colorMouse = false; | ||
| } | ||
| }, { | ||
| key: 'colorChange', | ||
| value: function colorChange(event) { | ||
| this.stopEvent(event); | ||
| var el = this.find('.color-picker-grid-inner'); | ||
| var eventPos = this.getEventPos(event); | ||
| var offset = this.offset(el); | ||
| if (this.options.round) { | ||
| var dx = (eventPos.pageX - offset.left) * 2.0 / el.prop('offsetWidth') - 1.0; | ||
| var dy = -((eventPos.pageY - offset.top) * 2.0 / el.prop('offsetHeight')) + 1.0; | ||
| value = { | ||
| h: this.hue, | ||
| s: this.saturation + '%', | ||
| l: this.lightness + '%' | ||
| }; | ||
| } | ||
| var tmpHue = Math.atan2(dy, dx); | ||
| var degHue = Math.round(tmpHue * 57.29577951308233); // rad to deg | ||
| if (degHue < 0) { | ||
| degHue += 360; | ||
| } | ||
| this.hue = degHue; | ||
| if (includeOpacity) { | ||
| value.a = this.opacity / 100; | ||
| } | ||
| var tmpSaturation = Math.sqrt(dx * dx + dy * dy); | ||
| if (tmpSaturation > 1) { | ||
| tmpSaturation = 1; | ||
| } else if (tmpSaturation < 0) { | ||
| tmpSaturation = 0; | ||
| } | ||
| this.saturation = tmpSaturation * 100; | ||
| if (this.lightness === undefined) { | ||
| this.lightness = 50; | ||
| } | ||
| } else { | ||
| this.saturation = (eventPos.pageX - offset.left) / el.prop('offsetWidth') * 100; | ||
| this.lightness = (1 - (eventPos.pageY - offset.top) / el.prop('offsetHeight')) * 100; | ||
| if (this.saturation > 100) { | ||
| this.saturation = 100; | ||
| } else if (this.saturation < 0) { | ||
| this.saturation = 0; | ||
| } | ||
| if (this.lightness > 100) { | ||
| this.lightness = 100; | ||
| } else if (this.lightness < 0) { | ||
| this.lightness = 0; | ||
| } | ||
| } | ||
| return value; | ||
| } | ||
| //--------------------------- | ||
| // helper functions | ||
| //--------------------------- | ||
| /* eslint-disable complexity */ | ||
| }, { | ||
| key: 'isColorValid', | ||
| value: function isColorValid(color) { | ||
| var isValid = color.isValid(); | ||
| key: 'setColorValue', | ||
| value: function setColorValue(color) { | ||
| var noMouseEvents = !this.anyMouseEvents(); | ||
| var hsl = this.options.round ? color.toHsl() : color.toHsv(); | ||
| if (isValid && this.options.restrictToFormat) { | ||
| isValid = color.getFormat() === this.options.format; | ||
| if (noMouseEvents || this.hueMouse) { | ||
| this.hue = hsl.h; | ||
| } | ||
| if (!isValid && this.options.allowEmpty) { | ||
| var input = color.getOriginalInput(); | ||
| if (noMouseEvents || this.saturationMouse) { | ||
| this.saturation = hsl.s * 100; | ||
| } | ||
| if (input === undefined || input === null || input === '') { | ||
| isValid = true; | ||
| } | ||
| if (noMouseEvents || this.lightnessMouse) { | ||
| this.lightness = (this.options.round ? hsl.l : hsl.v) * 100; | ||
| } | ||
| return isValid; | ||
| if (this.options.alpha && (noMouseEvents || this.opacityMouse)) { | ||
| this.opacity = hsl.a * 100; | ||
| } | ||
| } | ||
| }, { | ||
| key: 'getCurrentColorValue', | ||
| value: function getCurrentColorValue() { | ||
| if (this.options.round) { | ||
| return { | ||
| h: this.hue, | ||
| s: this.saturation, | ||
| l: this.lightness | ||
| }; | ||
| } | ||
| /* eslint-enable complexity */ | ||
| return { | ||
| h: this.hue, | ||
| s: this.saturation, | ||
| v: this.lightness | ||
| }; | ||
| } | ||
| }, { | ||
@@ -1356,3 +1182,3 @@ key: 'checkDirty', | ||
| // taken and modified from jQuery's find | ||
| /** taken and modified from jQuery's find */ | ||
@@ -1387,3 +1213,3 @@ }, { | ||
| // taken and modified from jQuery's offset | ||
| /** taken and modified from jQuery's offset */ | ||
@@ -1418,3 +1244,3 @@ }, { | ||
| doc = elem.ownerDocument; | ||
| win = doc !== null && doc === doc.window ? doc : doc.nodeType === 9 && doc.defaultView; | ||
| win = this.getWindowElements(doc); | ||
| docElem = doc.documentElement; | ||
@@ -1438,2 +1264,17 @@ | ||
| } | ||
| }, { | ||
| key: 'getWindowElements', | ||
| value: function getWindowElements(doc) { | ||
| return doc !== null && doc === doc.window ? doc : doc.nodeType === 9 && doc.defaultView; | ||
| } | ||
| }, { | ||
| key: 'anyMouseEvents', | ||
| value: function anyMouseEvents() { | ||
| return this.colorMouse || this.hueMouse || this.saturationMouse || this.lightnessMouse || this.opacityMouse; | ||
| } | ||
| }, { | ||
| key: 'getMaxFromType', | ||
| value: function getMaxFromType(type) { | ||
| return type === 'hue' ? 360 : 100; | ||
| } | ||
| }]); | ||
@@ -1440,0 +1281,0 @@ return AngularColorPickerController; |
| /*! | ||
| * angularjs-color-picker v3.4.4 | ||
| * angularjs-color-picker v3.4.5 | ||
| * https://github.com/ruhley/angular-color-picker/ | ||
@@ -7,5 +7,5 @@ * | ||
| * | ||
| * 2017-08-14 10:42:13 | ||
| * 2017-09-19 08:53:31 | ||
| * | ||
| */ | ||
| !function(o,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("tinycolor2")):"function"==typeof define&&define.amd?define(["tinycolor2"],t):o.AngularjsColorPicker=t(o.tinycolor)}(this,function(o){"use strict";function t(o){o.put("template/color-picker/directive.html",'<div class="color-picker-wrapper" ng-class="{\'color-picker-disabled\': AngularColorPickerController.options.disabled,\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,\'color-picker-open\': AngularColorPickerController.is_open,\'color-picker-closed\': !AngularColorPickerController.is_open,\'color-picker-horizontal\': AngularColorPickerController.options.horizontal,}"><div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}"><span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.onSwatchClick($event)" 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><input ng-attr-id="{{AngularColorPickerController.options.id}}" ng-attr-name="{{AngularColorPickerController.options.name}}" class="color-picker-input {{AngularColorPickerController.options.inputClass}}" type="text" ng-model="AngularColorPickerController.internalNgModel" ng-model-options="AngularColorPickerController.ngModelOptions" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}" ng-required="AngularColorPickerController.options.required"><span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.onSwatchClick($event)" 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></div><div class="color-picker-panel" ng-class="{\'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',\'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',\'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',\'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',\'color-picker-panel-round\': AngularColorPickerController.options.round,\'color-picker-show-hue\': AngularColorPickerController.options.hue,\'color-picker-show-saturation\': AngularColorPickerController.options.saturation,\'color-picker-show-lightness\': AngularColorPickerController.options.lightness,\'color-picker-show-alpha\': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\',\'color-picker-show-inline\': AngularColorPickerController.options.inline,}"><div class="color-picker-grid-wrapper"><div class="color-picker-row"><div class="color-picker-grid"><div class="color-picker-overlay"></div><div class="color-picker-grid-inner"></div><div class="color-picker-picker"><div></div></div></div><div class="color-picker-hue" ng-show="AngularColorPickerController.options.hue"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div><div class="color-picker-saturation" ng-show="AngularColorPickerController.options.saturation"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div><div class="color-picker-lightness" ng-show="AngularColorPickerController.options.lightness"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div><div class="color-picker-opacity" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div></div></div><div class="color-picker-actions"><button type="button"class="color-picker-action color-picker-action-clear"tabindex="-1"ng-class="AngularColorPickerController.options.clear.class"ng-show="AngularColorPickerController.options.clear.show"ng-click="AngularColorPickerController.api.clear($event)">{{AngularColorPickerController.options.clear.label}}</button><button type="button"class="color-picker-action color-picker-action-reset"tabindex="-1"ng-class="AngularColorPickerController.options.reset.class"ng-show="AngularColorPickerController.options.reset.show"ng-click="AngularColorPickerController.api.reset($event)">{{AngularColorPickerController.options.reset.label}}</button><button type="button"class="color-picker-action color-picker-action-close"tabindex="-1"ng-class="AngularColorPickerController.options.close.class"ng-show="AngularColorPickerController.options.close.show"ng-click="AngularColorPickerController.api.close($event)">{{AngularColorPickerController.options.close.label}}</button></div></div></div>')}o=o&&o.hasOwnProperty("default")?o.default:o;var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},e=function(o,t){if(!(o instanceof t))throw new TypeError("Cannot call a class as a function")},s=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}}(),n=function(){function t(o,i,s,n,r){e(this,t),this.$scope=o,this.$element=i,this.$document=s,this.$timeout=n,this.ColorPickerOptions=r,this.$scope.init=this.init.bind(this),this.ngModelOptions={},this.hue=0,this.saturation=void 0,this.lightness=void 0,this.opacity=void 0}return s(t,[{key:"watchNgModel",value:function(t,i){var e=this;if(void 0===t||void 0===i||this.hasOwnProperty("initialNgModel")||(this.initialNgModel=t),this.checkDirty(t),!this.colorMouse)if(void 0!==t&&null!==t){var s=o(t),n=this.isColorValid(s);if(n){var r;this.options.round?(r=s.toHsl(),this.lightness=100*r.l):(r=s.toHsv(),this.lightness=100*r.v),this.hue=r.h,this.saturation=100*r.s,this.updateModel=!1,this.options.alpha&&(this.opacity=100*r.a),this.$timeout(function(){e.updateModel=!0})}this.$scope.control[0].$setValidity("color",n)}else null!==t&&""!==t||(this.hue=0,this.saturation=void 0,this.lightness=void 0,this.opacity=void 0),this.swatchColor=""}},{key:"setNgModel",value:function(o){this.internalNgModel=o,this.ngModelOptions.getterSetter?this.ngModel(o):this.ngModel=o}},{key:"watchSwatchPos",value:function(o){var t=this;void 0!==o&&(this.initConfig(),this.$timeout(function(){t.updateSwatchBackground()}))}},{key:"setupApi",value:function(){var o=this;this.api||(this.api={}),this.api.open=function(t){if(o.is_open)return!0;o.is_open=!0,o.hueMouse=!1,o.opacityMouse=!1,o.colorMouse=!1,o.$scope.$applyAsync(),o.hueUpdate(),o.saturationUpdate(),o.lightnessUpdate(),o.opacityUpdate(),o.eventApiDispatch("onOpen",[t])},this.api.close=function(t){o.options.inline||!o.is_open&&null===o.$element[0].querySelector(".color-picker-panel").offsetParent||(o.is_open=!1,o.$scope.$applyAsync(),o.eventApiDispatch("onClose",[t]))},this.api.clear=function(t){""!==o.internalNgModel&&(o.setNgModel(""),o.eventApiDispatch("onClear",[t]))},this.api.reset=function(t){o.internalNgModel!==o.initialNgModel&&(o.setNgModel(o.initialNgModel),o.eventApiDispatch("onReset",[t]))},this.api.getElement=function(){return o.$element},this.api.getScope=function(){return o.$scope}}},{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(){this.$scope.control[0].$options&&this.$scope.control[0].$options.$$options&&(this.ngModelOptions=this.$scope.control[0].$options.$$options),this.internalNgModel=this.ngModelOptions.getterSetter?this.ngModel():this.ngModel,this.chrome=Boolean(window.chrome);var o=window.navigator.userAgent.match(/Android\s([0-9\.]*)/i);this.android_version=o&&o.length>1?parseFloat(o[1]):NaN,this.updateModel=!0,this.initWatchers(),this.initConfig(),this.initMouseEvents()}},{key:"initWatchers",value:function(){this.$scope.$watch("AngularColorPickerController.internalNgModel",this.watchNgModel.bind(this)),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","AngularColorPickerController.options.round","AngularColorPickerController.options.restrictToFormat","AngularColorPickerController.options.preserveInputFormat","AngularColorPickerController.options.allowEmpty","AngularColorPickerController.options.horizontal"],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","AngularColorPickerController.options.placeholder"],this.reInit.bind(this)),this.$scope.$watch("AngularColorPickerController.api",this.setupApi.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))}},{key:"initMouseEvents",value:function(){var o=this,t={mouseDown:this.onMouseDown.bind(this),mouseUp:this.onMouseUp.bind(this),mouseMove:this.onMouseMove.bind(this),keyUp:this.onKeyUp.bind(this)};this.$document.on("mousedown",t.mouseDown),this.$document.on("mouseup",t.mouseUp),this.$document.on("mousemove",t.mouseMove),this.$document.on("touchstart",t.mouseDown),this.$document.on("touchend",t.mouseUp),this.$document.on("touchmove",t.mouseMove),this.$document.on("keyup",t.keyUp),this.find(".color-picker-grid").on("click",this.onColorClick.bind(this)),this.find(".color-picker-grid").on("touchend",this.onColorClick.bind(this)),this.find(".color-picker-hue").on("click",this.onHueClick.bind(this)),this.find(".color-picker-hue").on("touchend",this.onHueClick.bind(this)),this.find(".color-picker-saturation").on("click",this.onSaturationClick.bind(this)),this.find(".color-picker-saturation").on("touchend",this.onSaturationClick.bind(this)),this.find(".color-picker-lightness").on("click",this.onLightnessClick.bind(this)),this.find(".color-picker-lightness").on("touchend",this.onLightnessClick.bind(this)),this.find(".color-picker-opacity").on("click",this.onOpacityClick.bind(this)),this.find(".color-picker-opacity").on("touchend",this.onOpacityClick.bind(this)),this.find(".color-picker-input").on("focusin",this.onFocus.bind(this)),this.find(".color-picker-input").on("focusout",this.onBlur.bind(this)),this.$scope.$on("$destroy",function(){o.$document.off("mousedown",t.mouseDown),o.$document.off("mouseup",t.mouseUp),o.$document.off("mousemove",t.mouseMove),o.$document.off("touchstart",t.mouseDown),o.$document.off("touchend",t.mouseUp),o.$document.off("touchmove",t.mouseMove),o.$document.off("keyup",t.keyUp),o.eventApiDispatch("onDestroy")})}},{key:"onMouseDown",value:function(o){if(this.has_moused_moved=!1,this.options.disabled||0===this.find(o.target).length)return!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-saturation")||o.target.parentNode.classList.contains("color-picker-saturation")?(this.saturationDown(o),this.$scope.$apply()):o.target.classList.contains("color-picker-lightness")||o.target.parentNode.classList.contains("color-picker-lightness")?(this.lightnessDown(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.has_moused_moved?(this.colorUp(o),this.$scope.$apply(),this.onChange(o)):this.hueMouse&&this.has_moused_moved?(this.hueUp(o),this.$scope.$apply(),this.onChange(o)):this.saturationMouse&&this.has_moused_moved?(this.saturationUp(o),this.$scope.$apply(),this.onChange(o)):this.lightnessMouse&&this.has_moused_moved?(this.lightnessUp(o),this.$scope.$apply(),this.onChange(o)):this.opacityMouse&&this.has_moused_moved&&(this.opacityUp(o),this.$scope.$apply(),this.onChange(o)):(this.setupApi(),this.options.hide.click&&this.api.close(o),this.$scope.$apply())}},{key:"onMouseMove",value:function(o){this.colorMouse?(this.has_moused_moved=!0,this.colorChange(o),this.$scope.$apply()):this.hueMouse?(this.has_moused_moved=!0,this.hueChange(o),this.$scope.$apply()):this.saturationMouse?(this.has_moused_moved=!0,this.saturationChange(o),this.$scope.$apply()):this.lightnessMouse?(this.has_moused_moved=!0,this.lightnessChange(o),this.$scope.$apply()):this.opacityMouse&&(this.has_moused_moved=!0,this.opacityChange(o),this.$scope.$apply())}},{key:"onKeyUp",value:function(o){this.options.hide.escape&&27===o.keyCode&&this.api.close(o)}},{key:"onColorClick",value:function(o){this.options.disabled||this.has_moused_moved||(this.colorChange(o),this.colorUp(o),this.$scope.$apply(),this.onChange(o))}},{key:"onHueClick",value:function(o){this.options.disabled||this.has_moused_moved||(this.hueChange(o),this.hueUp(o),this.$scope.$apply(),this.onChange(o))}},{key:"onSaturationClick",value:function(o){this.options.disabled||this.has_moused_moved||(this.saturationChange(o),this.saturationUp(o),this.$scope.$apply(),this.onChange(o))}},{key:"onLightnessClick",value:function(o){this.options.disabled||this.has_moused_moved||(this.lightnessChange(o),this.lightnessUp(o),this.$scope.$apply(),this.onChange(o))}},{key:"onOpacityClick",value:function(o){this.options.disabled||this.has_moused_moved||(this.opacityChange(o),this.opacityUp(o),this.$scope.$apply(),this.onChange(o))}},{key:"onChange",value:function(o){this.internalNgModel!==this.onChangeValue&&(this.onChangeValue=this.internalNgModel,this.eventApiDispatch("onChange",[o]))}},{key:"onBlur",value:function(o){this.internalNgModel!==this.onChangeValue&&(this.updateModel=!0,this.update()),this.$scope.control[0].$setTouched(),this.eventApiDispatch("onBlur",[o]),this.options.hide.blur&&0===this.find(o.relatedTarget).length&&this.api.close(o)}},{key:"initConfig",value:function(){this.options||(this.options={}),this.mergeOptions(this.options,this.ColorPickerOptions),this.is_open=this.options.inline,this.options.inline&&(this.options.close.show=!1),this.pickerDimensions={width:150,height:150},this.sliderDimensions={width:this.options.horizontal?this.pickerDimensions.width:20,height:this.options.horizontal?20:this.pickerDimensions.height}}},{key:"mergeOptions",value:function(o,t){for(var e in t)t.hasOwnProperty(e)&&(o&&o.hasOwnProperty(e)?"object"===i(t[e])&&this.mergeOptions(o[e],t[e]):o[e]=t[e])}},{key:"onSwatchClick",value:function(o){this.options.show.swatch&&this.api.open(o)}},{key:"onFocus",value:function(o){this.options.show.focus&&this.api.open(o)}},{key:"update",value:function(){if(void 0===this.hue||void 0===this.saturation||void 0===this.lightness)return!1;var t;t=o(this.options.round?{h:this.hue,s:this.saturation+"%",l:this.lightness+"%"}:{h:this.hue,s:this.saturation+"%",v:this.lightness+"%"}),this.options.alpha&&t.setAlpha(this.opacity/100),this.swatchColor=t.toHslString(),this.updateGridBackground(t),this.updateHueBackground(t),this.huePosUpdate(),this.updateSaturationBackground(t),this.saturationPosUpdate(),this.updateLightnessBackground(t),this.lightnessPosUpdate(),this.updateAlphaBackground(t),this.opacityPosUpdate();var i=this.options.preserveInputFormat&&o(this.internalNgModel).toHsvString()===t.toHsvString();if(this.updateModel&&!i)switch(this.options.format.toLowerCase()){case"rgb":this.setNgModel(t.toRgbString());break;case"hex":"lower"===this.options.case?this.setNgModel(t.toHex().toLowerCase()):this.setNgModel(t.toHex().toUpperCase());break;case"hex8":"lower"===this.options.case?this.setNgModel(t.toHex8().toLowerCase()):this.setNgModel(t.toHex8().toUpperCase());break;case"hexstring":"lower"===this.options.case?this.setNgModel(t.toHexString().toLowerCase()):this.setNgModel(t.toHexString().toUpperCase());break;case"hex8string":"lower"===this.options.case?this.setNgModel(t.toHex8String().toLowerCase()):this.setNgModel(t.toHex8String().toUpperCase());break;case"hsv":this.setNgModel(t.toHsvString());break;case"raw":this.setNgModel(t.clone());break;default:this.setNgModel(t.toHslString())}}},{key:"updateSwatchBackground",value:function(){angular.element(this.$element[0].querySelector(".color-picker-swatch")).css({"background-color":this.swatchColor})}},{key:"huePosUpdate",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-hue .color-picker-slider"));this.options.horizontal?o.css({left:this.sliderDimensions.width*this.huePos/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*this.huePos/100+"px"})}},{key:"saturationPosUpdate",value:function(){var o;this.options.round||(o=angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker"))).css({left:this.pickerDimensions.height*this.saturationPos/100+"px"}),o=angular.element(this.$element[0].querySelector(".color-picker-saturation .color-picker-slider")),this.options.horizontal?o.css({left:this.sliderDimensions.width*(100-this.saturationPos)/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*(100-this.saturationPos)/100+"px"})}},{key:"lightnessPosUpdate",value:function(){var o;this.options.round||(o=angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker"))).css({top:this.pickerDimensions.width*this.lightnessPos/100+"px"}),o=angular.element(this.$element[0].querySelector(".color-picker-lightness .color-picker-slider")),this.options.horizontal?o.css({left:this.sliderDimensions.width*this.lightnessPos/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*this.lightnessPos/100+"px"})}},{key:"opacityPosUpdate",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-opacity .color-picker-slider"));this.options.horizontal?o.css({left:this.sliderDimensions.width*this.opacityPos/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*this.opacityPos/100+"px"})}},{key:"hueDown",value:function(o){this.stopEvent(o),this.hueMouse=!0}},{key:"hueUp",value:function(o){this.stopEvent(o),this.hueMouse=!1}},{key:"hueChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-hue"),i=this.getEventPos(o);this.hue=this.calculateSliderPos(t,i,360),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.huePos<0?this.huePos=0:this.huePos>100&&(this.huePos=100),this.options.round&&(this.getRoundPos(),this.updateRoundPos()),this.huePosUpdate(),this.update())}},{key:"saturationDown",value:function(o){this.stopEvent(o),this.saturationMouse=!0}},{key:"saturationUp",value:function(o){this.stopEvent(o),this.saturationMouse=!1}},{key:"saturationChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-saturation"),i=this.getEventPos(o);this.saturation=this.calculateSliderPos(t,i,100),this.saturation>100?this.saturation=100:this.saturation<0&&(this.saturation=0)}},{key:"saturationUpdate",value:function(){void 0!==this.saturation&&(this.options.round&&(this.getRoundPos(),this.updateRoundPos()),this.saturationPos=this.saturation,this.saturationPos<0?this.saturationPos=0:this.saturationPos>100&&(this.saturationPos=100),this.saturationPosUpdate(),this.update())}},{key:"updateGridBackground",value:function(t){var i=this.find(".color-picker-grid .color-picker-overlay");if(this.options.round){var e=o({h:this.hue,s:0,l:this.lightness});i.css({"background-color":e.toRgbString()})}else{var s=o({h:this.hue,s:1,v:1,a:1});i.css({"background-color":s.toRgbString()})}i.css({opacity:t.getAlpha()}),this.find(".color-picker-grid .color-picker-grid-inner").css({opacity:t.getAlpha()})}},{key:"updateHueBackground",value:function(t){var i=this.find(".color-picker-hue .color-picker-overlay"),e=this.options.horizontal?"left":"top",s=this.getCurrentColorValue(),n=this.getCurrentColorValue(),r=this.getCurrentColorValue(),l=this.getCurrentColorValue(),a=this.getCurrentColorValue(),h=this.getCurrentColorValue(),c=this.getCurrentColorValue();s.h=0,n.h=60,r.h=120,l.h=180,a.h=240,h.h=300,c.h=359,i.css({background:"linear-gradient(to "+e+", "+o(s).toRgbString()+" 0%, "+o(n).toRgbString()+" 17%, "+o(r).toRgbString()+" 33%, "+o(l).toRgbString()+" 50%, "+o(a).toRgbString()+" 67%, "+o(h).toRgbString()+" 83%, "+o(c).toRgbString()+" 100%)"})}},{key:"updateSaturationBackground",value:function(t){var i=this.find(".color-picker-saturation .color-picker-overlay"),e=this.options.horizontal?"right":"bottom",s=this.getCurrentColorValue(),n=this.getCurrentColorValue();s.s=100,n.s=0,i.css({background:"linear-gradient(to "+e+", "+o(s).toRgbString()+" 0%, "+o(n).toRgbString()+" 100%)"})}},{key:"updateLightnessBackground",value:function(t){var i=this.find(".color-picker-lightness .color-picker-overlay"),e=this.options.horizontal?"right":"bottom",s=this.getCurrentColorValue(),n=this.getCurrentColorValue(),r=this.getCurrentColorValue();this.options.round?(s.l=100,n.l=50,r.l=0):(s.v=100,n.v=50,r.v=0),i.css({background:"linear-gradient(to "+e+", "+o(s).toRgbString()+" 0%, "+o(n).toRgbString()+" 50%, "+o(r).toRgbString()+" 100%)"})}},{key:"updateAlphaBackground",value:function(t){var i=this.find(".color-picker-opacity .color-picker-overlay"),e=this.options.horizontal?"right":"bottom",s=this.getCurrentColorValue(),n=this.getCurrentColorValue();s.a=1,n.a=0,i.css({background:"linear-gradient(to "+e+", "+o(s).toRgbString()+" 0%, "+o(n).toRgbString()+" 100%)"})}},{key:"lightnessDown",value:function(o){this.stopEvent(o),this.lightnessMouse=!0}},{key:"lightnessUp",value:function(o){this.stopEvent(o),this.lightnessMouse=!1}},{key:"lightnessChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-lightness"),i=this.getEventPos(o);this.lightness=this.calculateSliderPos(t,i,100),this.lightness>100?this.lightness=100:this.lightness<0&&(this.lightness=0)}},{key:"lightnessUpdate",value:function(){void 0!==this.lightness&&(this.lightnessPos=100-this.lightness,this.lightnessPos<0?this.lightnessPos=0:this.lightnessPos>100&&(this.lightnessPos=100),this.lightnessPosUpdate(),this.update())}},{key:"opacityDown",value:function(o){this.stopEvent(o),this.opacityMouse=!0}},{key:"opacityUp",value:function(o){this.stopEvent(o),this.opacityMouse=!1}},{key:"opacityChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-opacity"),i=this.getEventPos(o);this.opacity=this.calculateSliderPos(t,i,100),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){this.stopEvent(o),this.colorMouse=!0}},{key:"colorUp",value:function(o){this.stopEvent(o),this.colorMouse=!1}},{key:"colorChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-grid-inner"),i=this.getEventPos(o),e=this.offset(t);if(this.options.round){var s=2*(i.pageX-e.left)/t.prop("offsetWidth")-1,n=-2*(i.pageY-e.top)/t.prop("offsetHeight")+1,r=Math.atan2(n,s),l=Math.round(57.29577951308233*r);l<0&&(l+=360),this.hue=l;var a=Math.sqrt(s*s+n*n);a>1?a=1:a<0&&(a=0),this.saturation=100*a,void 0===this.lightness&&(this.lightness=50)}else this.saturation=(i.pageX-e.left)/t.prop("offsetWidth")*100,this.lightness=100*(1-(i.pageY-e.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:"isColorValid",value:function(o){var t=o.isValid();if(t&&this.options.restrictToFormat&&(t=o.getFormat()===this.options.format),!t&&this.options.allowEmpty){var i=o.getOriginalInput();void 0!==i&&null!==i&&""!==i||(t=!0)}return t}},{key:"getCurrentColorValue",value:function(){return this.options.round?{h:this.hue,s:this.saturation,l:this.lightness}:{h:this.hue,s:this.saturation,v:this.lightness}}},{key:"checkDirty",value:function(o){this.hasOwnProperty("initialNgModel")&&(o===this.initialNgModel?"function"==typeof this.$scope.control[0].$setPristine&&this.$scope.control[0].$setPristine():"function"==typeof this.$scope.control[0].$setDirty&&this.$scope.control[0].$setDirty())}},{key:"stopEvent",value:function(o){o.stopPropagation(),o.preventDefault()}},{key:"getRoundPos",value:function(){var o=.01745329251994*this.hue,t=Math.cos(o)*this.saturation,i=-Math.sin(o)*this.saturation;this.xPos=.5*(t+100),this.yPos=.5*(i+100);if(Math.pow(50-this.xPos,2)+Math.pow(50-this.yPos,2)>Math.pow(50,2)){var e=Math.atan2(this.yPos-50,this.xPos-50);this.xPos=50*Math.cos(e)+50,this.yPos=50*Math.sin(e)+50}}},{key:"updateRoundPos",value:function(){angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker")).css({left:this.pickerDimensions.width*this.xPos/100+"px",top:this.pickerDimensions.height*this.yPos/100+"px"})}},{key:"getEventPos",value:function(o){if(0===o.type.search("touch")){if(o.originalEvent&&o.originalEvent.changedTouches)return o.originalEvent.changedTouches[0];if(o.changedTouches)return o.changedTouches[0]}return o}},{key:"calculateSliderPos",value:function(o,t,i){return this.options.horizontal?Math.round((1-(t.pageX-this.offset(o).left)/o.prop("offsetWidth"))*i):Math.round((1-(t.pageY-this.offset(o).top)/o.prop("offsetHeight"))*i)}},{key:"eventApiDispatch",value:function(o,t){this.eventApi&&"function"==typeof this.eventApi[o]&&(t||(t=[]),t.unshift(this.internalNgModel),t.unshift(this.api),this.eventApi[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()).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}}}]),t}();n.$inject=["$scope","$element","$document","$timeout","ColorPickerOptions"],t.$inject=["$templateCache"];return angular.module("color.picker",[]).service("ColorPickerOptions",function o(){return e(this,o),{id:void 0,name:void 0,required:!1,disabled:!1,placeholder:"",inputClass:"",restrictToFormat:!1,preserveInputFormat:!1,allowEmpty:!1,format:"hsl",case:"upper",hue:!0,saturation:!1,lightness:!1,alpha:!0,round:!1,pos:"bottom left",inline:!1,horizontal:!1,swatch:!0,swatchOnly:!1,swatchPos:"left",swatchBootstrap:!0,show:{swatch:!0,focus:!0},hide:{blur:!0,escape:!0,click:!0},close:{show:!1,label:"Close",class:""},clear:{show:!1,label:"Clear",class:""},reset:{show:!1,label:"Reset",class:""}}}).directive("colorPicker",function(){return{restrict:"E",require:["^ngModel"],scope:{ngModel:"=",options:"=?",api:"=?",eventApi:"=?"},bindToController:!0,templateUrl:"template/color-picker/directive.html",controller:n,controllerAs:"AngularColorPickerController",link:function(o,t,i,e){o.control=e,o.init()}}}).run(t)}); | ||
| !function(o,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("tinycolor2")):"function"==typeof define&&define.amd?define(["tinycolor2"],t):o.AngularjsColorPicker=t(o.tinycolor)}(this,function(o){"use strict";function t(o){o.put("template/color-picker/directive.html",'<div class="color-picker-wrapper" ng-class="{\'color-picker-disabled\': AngularColorPickerController.options.disabled,\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,\'color-picker-open\': AngularColorPickerController.is_open,\'color-picker-closed\': !AngularColorPickerController.is_open,\'color-picker-horizontal\': AngularColorPickerController.options.horizontal,}"><div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}"><span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.onSwatchClick($event)" 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><input ng-attr-id="{{AngularColorPickerController.options.id}}" ng-attr-name="{{AngularColorPickerController.options.name}}" class="color-picker-input {{AngularColorPickerController.options.inputClass}}" type="text" ng-model="AngularColorPickerController.internalNgModel" ng-model-options="AngularColorPickerController.ngModelOptions" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}" ng-required="AngularColorPickerController.options.required"><span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.onSwatchClick($event)" 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></div><div class="color-picker-panel" ng-class="{\'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',\'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',\'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',\'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',\'color-picker-panel-round\': AngularColorPickerController.options.round,\'color-picker-show-hue\': AngularColorPickerController.options.hue,\'color-picker-show-saturation\': AngularColorPickerController.options.saturation,\'color-picker-show-lightness\': AngularColorPickerController.options.lightness,\'color-picker-show-alpha\': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\',\'color-picker-show-inline\': AngularColorPickerController.options.inline,}"><div class="color-picker-grid-wrapper"><div class="color-picker-row"><div class="color-picker-grid"><div class="color-picker-overlay"></div><div class="color-picker-grid-inner"></div><div class="color-picker-picker"><div></div></div></div><div class="color-picker-hue" ng-show="AngularColorPickerController.options.hue"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div><div class="color-picker-saturation" ng-show="AngularColorPickerController.options.saturation"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div><div class="color-picker-lightness" ng-show="AngularColorPickerController.options.lightness"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div><div class="color-picker-opacity" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div></div></div><div class="color-picker-actions"><button type="button"class="color-picker-action color-picker-action-clear"tabindex="-1"ng-class="AngularColorPickerController.options.clear.class"ng-show="AngularColorPickerController.options.clear.show"ng-click="AngularColorPickerController.api.clear($event)">{{AngularColorPickerController.options.clear.label}}</button><button type="button"class="color-picker-action color-picker-action-reset"tabindex="-1"ng-class="AngularColorPickerController.options.reset.class"ng-show="AngularColorPickerController.options.reset.show"ng-click="AngularColorPickerController.api.reset($event)">{{AngularColorPickerController.options.reset.label}}</button><button type="button"class="color-picker-action color-picker-action-close"tabindex="-1"ng-class="AngularColorPickerController.options.close.class"ng-show="AngularColorPickerController.options.close.show"ng-click="AngularColorPickerController.api.close($event)">{{AngularColorPickerController.options.close.label}}</button></div></div></div>')}o=o&&o.hasOwnProperty("default")?o.default:o;var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},i=function(o,t){if(!(o instanceof t))throw new TypeError("Cannot call a class as a function")},n=function(){function o(o,t){for(var e=0;e<t.length;e++){var i=t[e];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(o,i.key,i)}}return function(t,e,i){return e&&o(t.prototype,e),i&&o(t,i),t}}(),s=function(){function t(o,e,n,s,r){i(this,t),this.$scope=o,this.$element=e,this.$document=n,this.$timeout=s,this.ColorPickerOptions=r,this.$scope.init=this.init.bind(this),this.ngModelOptions={},this.hue=0,this.saturation=void 0,this.lightness=void 0,this.opacity=void 0,this.basicEventTypes=["hue","saturation","lightness","opacity"],this.fullEventTypes=["color","hue","saturation","lightness","opacity"]}return n(t,[{key:"init",value:function(){this.$scope.control[0].$options&&this.$scope.control[0].$options.$$options&&(this.ngModelOptions=this.$scope.control[0].$options.$$options),this.internalNgModel=this.ngModelOptions.getterSetter?this.ngModel():this.ngModel,this.chrome=Boolean(window.chrome);var o=window.navigator.userAgent.match(/Android\s([0-9\.]*)/i);this.android_version=o&&o.length>1?parseFloat(o[1]):NaN,this.updateModel=!0,this.initWatchers(),this.initConfig(),this.initMouseEvents()}},{key:"initConfig",value:function(){this.options||(this.options={}),this.mergeOptions(this.options,this.ColorPickerOptions),this.is_open=this.options.inline,this.options.inline&&(this.options.close.show=!1),this.pickerDimensions={width:150,height:150},this.sliderDimensions={width:this.options.horizontal?this.pickerDimensions.width:20,height:this.options.horizontal?20:this.pickerDimensions.height}}},{key:"mergeOptions",value:function(o,t){for(var i in t)t.hasOwnProperty(i)&&(o&&o.hasOwnProperty(i)?"object"===e(t[i])&&this.mergeOptions(o[i],t[i]):o[i]=t[i])}},{key:"initWatchers",value:function(){var o=this;this.$scope.$watch("AngularColorPickerController.internalNgModel",this.watchNgModel.bind(this)),this.$scope.$watch("AngularColorPickerController.ngModel",this.watchNgModel.bind(this)),this.$scope.$watch("AngularColorPickerController.options.swatchPos",function(t){void 0!==t&&(o.initConfig(),o.$timeout(function(){o.updateSwatchBackground()}))}),this.$scope.$watchGroup(["AngularColorPickerController.options.format","AngularColorPickerController.options.alpha","AngularColorPickerController.options.case","AngularColorPickerController.options.round","AngularColorPickerController.options.restrictToFormat","AngularColorPickerController.options.preserveInputFormat","AngularColorPickerController.options.allowEmpty","AngularColorPickerController.options.horizontal"],function(t){void 0!==t&&(o.initConfig(),o.update())}),this.$scope.$watchGroup(["AngularColorPickerController.options.disabled","AngularColorPickerController.options.swatchBootstrap","AngularColorPickerController.options.swatchOnly","AngularColorPickerController.options.swatch","AngularColorPickerController.options.pos","AngularColorPickerController.options.inline","AngularColorPickerController.options.placeholder"],function(t){void 0!==t&&o.initConfig()}),this.$scope.$watch("AngularColorPickerController.api",this.setupApi.bind(this)),this.$scope.$watch("AngularColorPickerController.swatchColor",this.updateSwatchBackground.bind(this)),this.$scope.$watch("AngularColorPickerController.hue",function(){o.valueUpdate("hue")}),this.$scope.$watch("AngularColorPickerController.saturation",function(){o.valueUpdate("saturation")}),this.$scope.$watch("AngularColorPickerController.lightness",function(){o.valueUpdate("lightness")}),this.$scope.$watch("AngularColorPickerController.opacity",function(){o.valueUpdate("opacity")})}},{key:"watchNgModel",value:function(o,t){void 0===o||void 0===t||this.hasOwnProperty("initialNgModel")||(this.initialNgModel=o),this.checkDirty(o),this.colorMouse||this.watchNgModelSet(o)}},{key:"watchNgModelSet",value:function(t){var e=this;if(void 0!==t&&null!==t){var i=o(t),n=this.isColorValid(i);n&&(this.setColorValue(i),this.updateModel=!1,this.$timeout(function(){e.updateModel=!0})),this.$scope.control[0].$setValidity("color",n)}else null!==t&&""!==t||(this.hue=0,this.saturation=void 0,this.lightness=void 0,this.opacity=void 0),this.swatchColor=""}},{key:"initMouseEvents",value:function(){var o=this,t={mouseDown:this.onMouseDown.bind(this),mouseUp:this.onMouseUp.bind(this),mouseMove:this.onMouseMove.bind(this),keyUp:this.onKeyUp.bind(this)};this.$document.on("mousedown",t.mouseDown),this.$document.on("mouseup",t.mouseUp),this.$document.on("mousemove",t.mouseMove),this.$document.on("touchstart",t.mouseDown),this.$document.on("touchend",t.mouseUp),this.$document.on("touchmove",t.mouseMove),this.$document.on("keyup",t.keyUp),this.find(".color-picker-grid").on("click",function(t){o.onClick("color",t)}),this.find(".color-picker-grid").on("touchend",function(t){o.onClick("color",t)}),this.find(".color-picker-hue").on("click",function(t){o.onClick("hue",t)}),this.find(".color-picker-hue").on("touchend",function(t){o.onClick("hue",t)}),this.find(".color-picker-saturation").on("click",function(t){o.onClick("saturation",t)}),this.find(".color-picker-saturation").on("touchend",function(t){o.onClick("saturation",t)}),this.find(".color-picker-lightness").on("click",function(t){o.onClick("lightness",t)}),this.find(".color-picker-lightness").on("touchend",function(t){o.onClick("lightness",t)}),this.find(".color-picker-opacity").on("click",function(t){o.onClick("opacity",t)}),this.find(".color-picker-opacity").on("touchend",function(t){o.onClick("opacity",t)}),this.find(".color-picker-input").on("focusin",this.onFocus.bind(this)),this.find(".color-picker-input").on("focusout",this.onBlur.bind(this)),this.$scope.$on("$destroy",function(){o.$document.off("mousedown",t.mouseDown),o.$document.off("mouseup",t.mouseUp),o.$document.off("mousemove",t.mouseMove),o.$document.off("touchstart",t.mouseDown),o.$document.off("touchend",t.mouseUp),o.$document.off("touchmove",t.mouseMove),o.$document.off("keyup",t.keyUp),o.eventApiDispatch("onDestroy")})}},{key:"onMouseDown",value:function(o){if(this.has_moused_moved=!1,this.options.disabled||0===this.find(o.target).length)return!0;for(var t=0;t<this.fullEventTypes.length;t++)this.onMouseDownType(this.fullEventTypes[t],o)}},{key:"onMouseDownType",value:function(o,t){"color"===o&&(t.target.classList.contains("color-picker-grid-inner")||t.target.classList.contains("color-picker-picker")||t.target.parentNode.classList.contains("color-picker-picker"))?this.mouseEventToggle(o,!1,t):(t.target.classList.contains("color-picker-"+o)||t.target.parentNode.classList.contains("color-picker-"+o))&&this.mouseEventToggle(o,!1,t)}},{key:"onMouseUp",value:function(o){if(this.anyMouseEvents()||0!==this.find(o.target).length)for(var t=0;t<this.fullEventTypes.length;t++)this.onMouseUpType(this.fullEventTypes[t],o);else this.setupApi(),this.options.hide.click&&this.api.close(o),this.$scope.$apply()}},{key:"onMouseUpType",value:function(o,t){this[o+"Mouse"]&&this.has_moused_moved&&(this.mouseEventToggle(o,!0,t),this.onChange(t))}},{key:"onMouseMove",value:function(o){for(var t=0;t<this.fullEventTypes.length;t++)this.onMouseMoveType(this.fullEventTypes[t],o)}},{key:"onMouseMoveType",value:function(o,t){this[o+"Mouse"]&&(this.has_moused_moved=!0,this.valueChange(o,t),this.$scope.$apply())}},{key:"onKeyUp",value:function(o){this.options.hide.escape&&27===o.keyCode&&this.api.close(o)}},{key:"onClick",value:function(o,t){this.options.disabled||this.has_moused_moved||(this.valueChange(o,t),this.mouseEventToggle(o,!0,t),this.onChange(t))}},{key:"onChange",value:function(o){this.internalNgModel!==this.onChangeValue&&(this.onChangeValue=this.internalNgModel,this.eventApiDispatch("onChange",[o]))}},{key:"onBlur",value:function(o){this.internalNgModel!==this.onChangeValue&&(this.updateModel=!0,this.update()),this.$scope.control[0].$setTouched(),this.eventApiDispatch("onBlur",[o]),this.options.hide.blur&&0===this.find(o.relatedTarget).length&&this.api.close(o)}},{key:"onSwatchClick",value:function(o){this.options.show.swatch&&!this.options.disabled&&this.api.open(o)}},{key:"onFocus",value:function(o){this.options.show.focus&&this.api.open(o)}},{key:"setupApi",value:function(){var o=this;this.api||(this.api={}),this.api.open=function(t){if(o.is_open)return!0;o.is_open=!0,o.hueMouse=!1,o.opacityMouse=!1,o.colorMouse=!1,o.$scope.$applyAsync();for(var e=0;e<o.basicEventTypes.length;e++)o.valueUpdate(o.basicEventTypes[e]);o.eventApiDispatch("onOpen",[t])},this.api.close=function(t){o.options.inline||!o.is_open&&null===o.$element[0].querySelector(".color-picker-panel").offsetParent||(o.is_open=!1,o.$scope.$applyAsync(),o.update(),o.eventApiDispatch("onClose",[t]))},this.api.clear=function(t){""!==o.internalNgModel&&(o.setNgModel(""),o.eventApiDispatch("onClear",[t]))},this.api.reset=function(t){o.internalNgModel!==o.initialNgModel&&(o.setNgModel(o.initialNgModel),o.eventApiDispatch("onReset",[t]))},this.api.getElement=function(){return o.$element},this.api.getScope=function(){return o.$scope}}},{key:"setNgModel",value:function(o){this.internalNgModel=o,this.ngModelOptions.getterSetter?this.ngModel(o):this.ngModel=o}},{key:"update",value:function(){if(!this.areAllValuesSet())return!1;var t=o(this.getColorValue());this.swatchColor=t.toHslString(),this.updateGridBackground(t),this.updateHueBackground(t),this.huePosUpdate(),this.updateSaturationBackground(t),this.saturationPosUpdate(),this.updateLightnessBackground(t),this.lightnessPosUpdate(),this.updateOpacityBackground(t),this.opacityPosUpdate();var e=this.options.preserveInputFormat&&o(this.internalNgModel).toHsvString()===t.toHsvString();if(this.updateModel&&!e){var i=t[{rgb:"toRgbString",hex:"toHex",hex8:"toHex8",hexstring:"toHexString",hex8string:"toHex8String",hsv:"toHsvString",hsl:"toHslString",raw:"clone"}[this.options.format.toLowerCase()]]();this.options.format.match(/hex/i)&&(i="upper"===this.options.case?i.toUpperCase():i.toLowerCase()),this.setNgModel(i)}}},{key:"mouseEventToggle",value:function(o,t,e){this.stopEvent(e),this[o+"Mouse"]=!t,this.$scope.$apply()}},{key:"valueChange",value:function(o,t){if(this.stopEvent(t),"color"===o)return this.colorChange(t);var e=this.find(".color-picker-"+o),i=this.getEventPos(t),n=this.getMaxFromType(o);this[o]=this.calculateSliderPos(e,i,n),this[o]>n?this[o]=n:this[o]<0&&(this[o]=0)}},{key:"valueUpdate",value:function(o){if(void 0!==this[o]){if("saturation"===o)this[o+"Pos"]=this[o];else{var t=this.getMaxFromType(o);this[o+"Pos"]=100*(1-this[o]/t)}this[o+"Pos"]<0?this[o+"Pos"]=0:this[o+"Pos"]>100&&(this[o+"Pos"]=100),this.options.round&&(this.getRoundPos(),this.updateRoundPos()),this[o+"PosUpdate"](),this.update()}}},{key:"huePosUpdate",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-hue .color-picker-slider"));this.options.horizontal?o.css({left:this.sliderDimensions.width*this.huePos/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*this.huePos/100+"px"})}},{key:"updateHueBackground",value:function(t){var e=this.find(".color-picker-hue .color-picker-overlay"),i=this.options.horizontal?"left":"top",n=this.getColorValue(),s=this.getColorValue(),r=this.getColorValue(),l=this.getColorValue(),a=this.getColorValue(),c=this.getColorValue(),h=this.getColorValue();n.h=0,s.h=60,r.h=120,l.h=180,a.h=240,c.h=300,h.h=359,e.css({background:"linear-gradient(to "+i+", "+o(n).toRgbString()+" 0%, "+o(s).toRgbString()+" 17%, "+o(r).toRgbString()+" 33%, "+o(l).toRgbString()+" 50%, "+o(a).toRgbString()+" 67%, "+o(c).toRgbString()+" 83%, "+o(h).toRgbString()+" 100%)"})}},{key:"saturationPosUpdate",value:function(){var o;this.options.round||(o=angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker"))).css({left:this.pickerDimensions.height*this.saturationPos/100+"px"}),o=angular.element(this.$element[0].querySelector(".color-picker-saturation .color-picker-slider")),this.options.horizontal?o.css({left:this.sliderDimensions.width*(100-this.saturationPos)/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*(100-this.saturationPos)/100+"px"})}},{key:"updateSaturationBackground",value:function(t){var e=this.find(".color-picker-saturation .color-picker-overlay"),i=this.options.horizontal?"right":"bottom",n=this.getColorValue(),s=this.getColorValue();n.s=100,s.s=0,e.css({background:"linear-gradient(to "+i+", "+o(n).toRgbString()+" 0%, "+o(s).toRgbString()+" 100%)"})}},{key:"lightnessPosUpdate",value:function(){var o;this.options.round||(o=angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker"))).css({top:this.pickerDimensions.width*this.lightnessPos/100+"px"}),o=angular.element(this.$element[0].querySelector(".color-picker-lightness .color-picker-slider")),this.options.horizontal?o.css({left:this.sliderDimensions.width*this.lightnessPos/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*this.lightnessPos/100+"px"})}},{key:"updateLightnessBackground",value:function(t){var e=this.find(".color-picker-lightness .color-picker-overlay"),i=this.options.horizontal?"right":"bottom",n=this.getColorValue(),s=this.getColorValue(),r=this.getColorValue();this.options.round?(n.l=100,s.l=50,r.l=0):(n.v=100,s.v=50,r.v=0),e.css({background:"linear-gradient(to "+i+", "+o(n).toRgbString()+" 0%, "+o(s).toRgbString()+" 50%, "+o(r).toRgbString()+" 100%)"})}},{key:"opacityPosUpdate",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-opacity .color-picker-slider"));this.options.horizontal?o.css({left:this.sliderDimensions.width*this.opacityPos/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*this.opacityPos/100+"px"})}},{key:"updateOpacityBackground",value:function(t){var e=this.find(".color-picker-opacity .color-picker-overlay"),i=this.options.horizontal?"right":"bottom",n=this.getColorValue(),s=this.getColorValue();n.a=1,s.a=0,e.css({background:"linear-gradient(to "+i+", "+o(n).toRgbString()+" 0%, "+o(s).toRgbString()+" 100%)"})}},{key:"colorChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-grid-inner"),e=this.getEventPos(o),i=this.offset(t);this.options.round?this.colorChangeRound(t,i,e):this.colorChangeSquare(t,i,e)}},{key:"colorChangeRound",value:function(o,t,e){var i=2*(e.pageX-t.left)/o.prop("offsetWidth")-1,n=-2*(e.pageY-t.top)/o.prop("offsetHeight")+1,s=Math.atan2(n,i),r=Math.round(57.29577951308233*s);r<0&&(r+=360),this.hue=r;var l=Math.sqrt(i*i+n*n);l>1?l=1:l<0&&(l=0),this.saturation=100*l,void 0===this.lightness&&(this.lightness=50)}},{key:"colorChangeSquare",value:function(o,t,e){this.saturation=(e.pageX-t.left)/o.prop("offsetWidth")*100,this.lightness=100*(1-(e.pageY-t.top)/o.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:"updateGridBackground",value:function(t){var e=this.find(".color-picker-grid .color-picker-overlay"),i=this.getColorValue();this.options.round?i.s=0:(i.s=1,i.v=1,i.a=1),e.css({"background-color":o(i).toRgbString(),opacity:t.getAlpha()}),this.find(".color-picker-grid .color-picker-grid-inner").css({opacity:t.getAlpha()})}},{key:"updateSwatchBackground",value:function(){angular.element(this.$element[0].querySelector(".color-picker-swatch")).css({"background-color":this.swatchColor})}},{key:"isColorValid",value:function(o){var t=o.isValid();if(t&&this.options.restrictToFormat){this.options.format;t=o.getFormat()===this.getTinyColorFormat()}if(!t&&this.options.allowEmpty){var e=o.getOriginalInput();void 0!==e&&null!==e&&""!==e||(t=!0)}return t}},{key:"getTinyColorFormat",value:function(){return"hexString"===this.options.format?"hex":"hex8String"===this.options.format?"hex8":this.options.format}},{key:"areAllValuesSet",value:function(){return void 0!==this.hue&&void 0!==this.saturation&&void 0!==this.lightness}},{key:"getColorValue",value:function(){var o=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t={h:this.hue,s:this.saturation+"%",v:this.lightness+"%"};return this.options.round&&(t={h:this.hue,s:this.saturation+"%",l:this.lightness+"%"}),o&&(t.a=this.opacity/100),t}},{key:"setColorValue",value:function(o){var t=!this.anyMouseEvents(),e=this.options.round?o.toHsl():o.toHsv();(t||this.hueMouse)&&(this.hue=e.h),(t||this.saturationMouse)&&(this.saturation=100*e.s),(t||this.lightnessMouse)&&(this.lightness=100*(this.options.round?e.l:e.v)),this.options.alpha&&(t||this.opacityMouse)&&(this.opacity=100*e.a)}},{key:"checkDirty",value:function(o){this.hasOwnProperty("initialNgModel")&&(o===this.initialNgModel?"function"==typeof this.$scope.control[0].$setPristine&&this.$scope.control[0].$setPristine():"function"==typeof this.$scope.control[0].$setDirty&&this.$scope.control[0].$setDirty())}},{key:"stopEvent",value:function(o){o.stopPropagation(),o.preventDefault()}},{key:"getRoundPos",value:function(){var o=.01745329251994*this.hue,t=Math.cos(o)*this.saturation,e=-Math.sin(o)*this.saturation;this.xPos=.5*(t+100),this.yPos=.5*(e+100);if(Math.pow(50-this.xPos,2)+Math.pow(50-this.yPos,2)>Math.pow(50,2)){var i=Math.atan2(this.yPos-50,this.xPos-50);this.xPos=50*Math.cos(i)+50,this.yPos=50*Math.sin(i)+50}}},{key:"updateRoundPos",value:function(){angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker")).css({left:this.pickerDimensions.width*this.xPos/100+"px",top:this.pickerDimensions.height*this.yPos/100+"px"})}},{key:"getEventPos",value:function(o){if(0===o.type.search("touch")){if(o.originalEvent&&o.originalEvent.changedTouches)return o.originalEvent.changedTouches[0];if(o.changedTouches)return o.changedTouches[0]}return o}},{key:"calculateSliderPos",value:function(o,t,e){return this.options.horizontal?Math.round((1-(t.pageX-this.offset(o).left)/o.prop("offsetWidth"))*e):Math.round((1-(t.pageY-this.offset(o).top)/o.prop("offsetHeight"))*e)}},{key:"eventApiDispatch",value:function(o,t){this.eventApi&&"function"==typeof this.eventApi[o]&&(t||(t=[]),t.unshift(this.internalNgModel),t.unshift(this.api),this.eventApi[o].apply(this,t))}},{key:"find",value:function(o){var t,e=this.wrapper?this.wrapper[0]:this.$element[0],i=[];if(!o)return i;if("string"==typeof o){if(1!==(t=e.nodeType)&&9!==t)return[];i=e.querySelectorAll(o)}else e.contains(o)&&i.push(o);return angular.element(i)}},{key:"offset",value:function(o){var t,e,i,n,s=o[0];if(s)return s.getClientRects().length?(i=s.getBoundingClientRect()).width||i.height?(n=s.ownerDocument,e=this.getWindowElements(n),t=n.documentElement,this.chrome&&this.android_version<6&&screen.width<=768?{top:i.top-t.clientTop,left:i.left-t.clientLeft}:{top:i.top+e.pageYOffset-t.clientTop,left:i.left+e.pageXOffset-t.clientLeft}):i:{top:0,left:0}}},{key:"getWindowElements",value:function(o){return null!==o&&o===o.window?o:9===o.nodeType&&o.defaultView}},{key:"anyMouseEvents",value:function(){return this.colorMouse||this.hueMouse||this.saturationMouse||this.lightnessMouse||this.opacityMouse}},{key:"getMaxFromType",value:function(o){return"hue"===o?360:100}}]),t}();s.$inject=["$scope","$element","$document","$timeout","ColorPickerOptions"],t.$inject=["$templateCache"];return angular.module("color.picker",[]).service("ColorPickerOptions",function o(){return i(this,o),{id:void 0,name:void 0,required:!1,disabled:!1,placeholder:"",inputClass:"",restrictToFormat:!1,preserveInputFormat:!1,allowEmpty:!1,format:"hsl",case:"upper",hue:!0,saturation:!1,lightness:!1,alpha:!0,round:!1,pos:"bottom left",inline:!1,horizontal:!1,swatch:!0,swatchOnly:!1,swatchPos:"left",swatchBootstrap:!0,show:{swatch:!0,focus:!0},hide:{blur:!0,escape:!0,click:!0},close:{show:!1,label:"Close",class:""},clear:{show:!1,label:"Clear",class:""},reset:{show:!1,label:"Reset",class:""}}}).directive("colorPicker",function(){return{restrict:"E",require:["^ngModel"],scope:{ngModel:"=",options:"=?",api:"=?",eventApi:"=?"},bindToController:!0,templateUrl:"template/color-picker/directive.html",controller:s,controllerAs:"AngularColorPickerController",link:function(o,t,e,i){o.control=i,o.init()}}}).run(t)}); |
| angular | ||
| .module('app', ['color.picker']) | ||
| .config(function($provide) { | ||
| $provide.decorator('ColorPickerOptions', function($delegate) { | ||
| var options = angular.copy($delegate); | ||
| options.inputClass = 'form-control'; | ||
| return options; | ||
| }); | ||
| }) | ||
| .controller('AppCtrl', function($scope) { | ||
@@ -4,0 +11,0 @@ $scope.eventApi = { |
@@ -13,2 +13,3 @@ angular | ||
| options.format = 'hsl'; | ||
| options.inputClass = 'form-control'; | ||
| return options; | ||
@@ -15,0 +16,0 @@ }); |
| { | ||
| "name": "angularjs-color-picker", | ||
| "description": "Color Picker Directive For AngularJS", | ||
| "version": "3.4.4", | ||
| "version": "3.4.5", | ||
| "license": "MIT", | ||
@@ -17,2 +17,3 @@ "main": "dist/angularjs-color-picker.min.js", | ||
| "devDependencies": { | ||
| "babel-core": "^6.25.0", | ||
| "babel-preset-es2015-rollup": "^3.0.0", | ||
@@ -27,3 +28,3 @@ "glob": "^7.0.0", | ||
| "grunt-notify": "^0.4.1", | ||
| "grunt-run": "^0.7.0", | ||
| "grunt-run": "^0.8.0", | ||
| "load-grunt-tasks": "^3.5.0", | ||
@@ -30,0 +31,0 @@ "moment": "^2.14.1", |
@@ -21,154 +21,11 @@ import tinycolor from 'tinycolor2'; | ||
| this.opacity = undefined; | ||
| } | ||
| watchNgModel(newValue, oldValue) { | ||
| if (newValue !== undefined && oldValue !== undefined && !this.hasOwnProperty('initialNgModel')) { | ||
| this.initialNgModel = newValue; | ||
| } | ||
| // sets the field to pristine or dirty for angular | ||
| this.checkDirty(newValue); | ||
| // the mouse is still moving so don't do anything yet | ||
| if (this.colorMouse) { | ||
| return; | ||
| } | ||
| if (newValue !== undefined && newValue !== null) { | ||
| var color = tinycolor(newValue); | ||
| var isValid = this.isColorValid(color); | ||
| if (isValid) { | ||
| var hsl; | ||
| if (this.options.round) { | ||
| hsl = color.toHsl(); | ||
| this.lightness = hsl.l * 100; | ||
| } else { | ||
| hsl = color.toHsv(); | ||
| this.lightness = hsl.v * 100; | ||
| } | ||
| this.hue = hsl.h; | ||
| this.saturation = hsl.s * 100; | ||
| this.updateModel = false; | ||
| if (this.options.alpha) { | ||
| this.opacity = hsl.a * 100; | ||
| } | ||
| this.$timeout(() => { | ||
| this.updateModel = true; | ||
| }); | ||
| } | ||
| this.$scope.control[0].$setValidity('color', isValid); | ||
| } else { | ||
| if (newValue === null || newValue === '') { | ||
| this.hue = 0; | ||
| this.saturation = undefined; | ||
| this.lightness = undefined; | ||
| this.opacity = undefined; | ||
| } | ||
| this.swatchColor = ''; | ||
| } | ||
| this.basicEventTypes = ['hue', 'saturation', 'lightness', 'opacity']; | ||
| this.fullEventTypes = ['color', 'hue', 'saturation', 'lightness', 'opacity']; | ||
| } | ||
| setNgModel(value) { | ||
| this.internalNgModel = value; | ||
| //--------------------------- | ||
| // init functions | ||
| //--------------------------- | ||
| if (this.ngModelOptions.getterSetter) { | ||
| this.ngModel(value); | ||
| } else { | ||
| this.ngModel = value; | ||
| } | ||
| } | ||
| watchSwatchPos(newValue) { | ||
| if (newValue !== undefined) { | ||
| this.initConfig(); | ||
| this.$timeout(() => { | ||
| this.updateSwatchBackground(); | ||
| }); | ||
| } | ||
| } | ||
| setupApi() { | ||
| if (!this.api) { | ||
| this.api = {}; | ||
| } | ||
| this.api.open = (event) => { | ||
| // if already open then don't run show again | ||
| if (this.is_open) { | ||
| return true; | ||
| } | ||
| this.is_open = true; | ||
| this.hueMouse = false; | ||
| this.opacityMouse = false; | ||
| this.colorMouse = false; | ||
| // force redraw | ||
| this.$scope.$applyAsync(); | ||
| // force the sliders to re-caculate their position | ||
| this.hueUpdate(); | ||
| this.saturationUpdate(); | ||
| this.lightnessUpdate(); | ||
| this.opacityUpdate(); | ||
| this.eventApiDispatch('onOpen', [event]); | ||
| }; | ||
| this.api.close = (event) => { | ||
| if (!this.options.inline && (this.is_open || this.$element[0].querySelector('.color-picker-panel').offsetParent !== null)) { | ||
| this.is_open = false; | ||
| this.$scope.$applyAsync(); | ||
| this.eventApiDispatch('onClose', [event]); | ||
| } | ||
| }; | ||
| this.api.clear = (event) => { | ||
| if (this.internalNgModel !== '') { | ||
| this.setNgModel(''); | ||
| this.eventApiDispatch('onClear', [event]); | ||
| } | ||
| }; | ||
| this.api.reset = (event) => { | ||
| if (this.internalNgModel !== this.initialNgModel) { | ||
| this.setNgModel(this.initialNgModel); | ||
| this.eventApiDispatch('onReset', [event]); | ||
| } | ||
| }; | ||
| this.api.getElement = () => { | ||
| return this.$element; | ||
| }; | ||
| this.api.getScope = () => { | ||
| return this.$scope; | ||
| }; | ||
| } | ||
| reInit(newValue) { | ||
| if (newValue !== undefined) { | ||
| this.initConfig(); | ||
| } | ||
| } | ||
| reInitAndUpdate(newValue) { | ||
| if (newValue !== undefined) { | ||
| this.initConfig(); | ||
| this.update(); | ||
| } | ||
| } | ||
| init() { | ||
@@ -201,2 +58,42 @@ | ||
| initConfig() { | ||
| if (!this.options) { | ||
| this.options = {}; | ||
| } | ||
| this.mergeOptions(this.options, this.ColorPickerOptions); | ||
| this.is_open = this.options.inline; | ||
| if (this.options.inline) { | ||
| this.options.close.show = false; | ||
| } | ||
| this.pickerDimensions = { | ||
| width: 150, | ||
| height: 150 | ||
| }; | ||
| this.sliderDimensions = { | ||
| width: this.options.horizontal ? this.pickerDimensions.width : 20, | ||
| height: this.options.horizontal ? 20 : this.pickerDimensions.height, | ||
| }; | ||
| } | ||
| mergeOptions(options, defaultOptions) { | ||
| for (var attr in defaultOptions) { | ||
| if (defaultOptions.hasOwnProperty(attr)) { | ||
| if (!options || !options.hasOwnProperty(attr)) { | ||
| options[attr] = defaultOptions[attr]; | ||
| } else if (typeof defaultOptions[attr] === 'object') { | ||
| this.mergeOptions(options[attr], defaultOptions[attr]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| //--------------------------- | ||
| // watcher functions | ||
| //--------------------------- | ||
| initWatchers() { | ||
@@ -211,4 +108,12 @@ | ||
| this.$scope.$watch('AngularColorPickerController.options.swatchPos', this.watchSwatchPos.bind(this)); | ||
| this.$scope.$watch('AngularColorPickerController.options.swatchPos', (newValue) => { | ||
| if (newValue !== undefined) { | ||
| this.initConfig(); | ||
| this.$timeout(() => { | ||
| this.updateSwatchBackground(); | ||
| }); | ||
| } | ||
| }); | ||
| this.$scope.$watchGroup( | ||
@@ -225,3 +130,8 @@ [ | ||
| ], | ||
| this.reInitAndUpdate.bind(this) | ||
| (newValue) => { | ||
| if (newValue !== undefined) { | ||
| this.initConfig(); | ||
| this.update(); | ||
| } | ||
| } | ||
| ); | ||
@@ -239,3 +149,7 @@ | ||
| ], | ||
| this.reInit.bind(this) | ||
| (newValue) => { | ||
| if (newValue !== undefined) { | ||
| this.initConfig(); | ||
| } | ||
| } | ||
| ); | ||
@@ -251,11 +165,71 @@ | ||
| this.$scope.$watch('AngularColorPickerController.hue', this.hueUpdate.bind(this)); | ||
| this.$scope.$watch('AngularColorPickerController.hue', () => { | ||
| this.valueUpdate('hue'); | ||
| }); | ||
| this.$scope.$watch('AngularColorPickerController.saturation', this.saturationUpdate.bind(this)); | ||
| this.$scope.$watch('AngularColorPickerController.saturation', () => { | ||
| this.valueUpdate('saturation'); | ||
| }); | ||
| this.$scope.$watch('AngularColorPickerController.lightness', this.lightnessUpdate.bind(this)); | ||
| this.$scope.$watch('AngularColorPickerController.lightness', () => { | ||
| this.valueUpdate('lightness'); | ||
| }); | ||
| this.$scope.$watch('AngularColorPickerController.opacity', this.opacityUpdate.bind(this)); | ||
| this.$scope.$watch('AngularColorPickerController.opacity', () => { | ||
| this.valueUpdate('opacity'); | ||
| }); | ||
| } | ||
| /** Triggered on change to internal or external ngModel value */ | ||
| watchNgModel(newValue, oldValue) { | ||
| // set initial value if not already set | ||
| if (newValue !== undefined && oldValue !== undefined && !this.hasOwnProperty('initialNgModel')) { | ||
| this.initialNgModel = newValue; | ||
| } | ||
| // sets the field to pristine or dirty for angular | ||
| this.checkDirty(newValue); | ||
| // the mouse is still moving so don't do anything yet | ||
| if (this.colorMouse) { | ||
| return; | ||
| } | ||
| // calculate and set color values | ||
| this.watchNgModelSet(newValue); | ||
| } | ||
| /** Helper for watchNgModel to set internal values and validity */ | ||
| watchNgModelSet(newValue) { | ||
| if (newValue !== undefined && newValue !== null) { | ||
| var color = tinycolor(newValue); | ||
| var isValid = this.isColorValid(color); | ||
| if (isValid) { | ||
| this.setColorValue(color); | ||
| this.updateModel = false; | ||
| this.$timeout(() => { | ||
| this.updateModel = true; | ||
| }); | ||
| } | ||
| this.$scope.control[0].$setValidity('color', isValid); | ||
| } else { | ||
| if (newValue === null || newValue === '') { | ||
| this.hue = 0; | ||
| this.saturation = undefined; | ||
| this.lightness = undefined; | ||
| this.opacity = undefined; | ||
| } | ||
| this.swatchColor = ''; | ||
| } | ||
| } | ||
| //--------------------------- | ||
| // mouse/touch event functions | ||
| //--------------------------- | ||
| initMouseEvents() { | ||
@@ -283,20 +257,40 @@ const eventHandlers = { | ||
| // grid click | ||
| this.find('.color-picker-grid').on('click', this.onColorClick.bind(this)); | ||
| this.find('.color-picker-grid').on('touchend', this.onColorClick.bind(this)); | ||
| this.find('.color-picker-grid').on('click', (event) => { | ||
| this.onClick('color', event); | ||
| }); | ||
| this.find('.color-picker-grid').on('touchend', (event) => { | ||
| this.onClick('color', event); | ||
| }); | ||
| // hue click | ||
| this.find('.color-picker-hue').on('click', this.onHueClick.bind(this)); | ||
| this.find('.color-picker-hue').on('touchend', this.onHueClick.bind(this)); | ||
| this.find('.color-picker-hue').on('click', (event) => { | ||
| this.onClick('hue', event); | ||
| }); | ||
| this.find('.color-picker-hue').on('touchend', (event) => { | ||
| this.onClick('hue', event); | ||
| }); | ||
| // saturation click | ||
| this.find('.color-picker-saturation').on('click', this.onSaturationClick.bind(this)); | ||
| this.find('.color-picker-saturation').on('touchend', this.onSaturationClick.bind(this)); | ||
| this.find('.color-picker-saturation').on('click', (event) => { | ||
| this.onClick('saturation', event); | ||
| }); | ||
| this.find('.color-picker-saturation').on('touchend', (event) => { | ||
| this.onClick('saturation', event); | ||
| }); | ||
| // lightness click | ||
| this.find('.color-picker-lightness').on('click', this.onLightnessClick.bind(this)); | ||
| this.find('.color-picker-lightness').on('touchend', this.onLightnessClick.bind(this)); | ||
| this.find('.color-picker-lightness').on('click', (event) => { | ||
| this.onClick('lightness', event); | ||
| }); | ||
| this.find('.color-picker-lightness').on('touchend', (event) => { | ||
| this.onClick('lightness', event); | ||
| }); | ||
| // opacity click | ||
| this.find('.color-picker-opacity').on('click', this.onOpacityClick.bind(this)); | ||
| this.find('.color-picker-opacity').on('touchend', this.onOpacityClick.bind(this)); | ||
| this.find('.color-picker-opacity').on('click', (event) => { | ||
| this.onClick('opacity', event); | ||
| }); | ||
| this.find('.color-picker-opacity').on('touchend', (event) => { | ||
| this.onClick('opacity', event); | ||
| }); | ||
@@ -336,28 +330,23 @@ this.find('.color-picker-input').on('focusin', this.onFocus.bind(this)); | ||
| // 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 saturation slider | ||
| } else if (event.target.classList.contains('color-picker-saturation') || event.target.parentNode.classList.contains('color-picker-saturation')) { | ||
| this.saturationDown(event); | ||
| this.$scope.$apply(); | ||
| // mouse event on lightness slider | ||
| } else if (event.target.classList.contains('color-picker-lightness') || event.target.parentNode.classList.contains('color-picker-lightness')) { | ||
| this.lightnessDown(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(); | ||
| for (var i = 0; i < this.fullEventTypes.length; i++) { | ||
| this.onMouseDownType(this.fullEventTypes[i], event); | ||
| } | ||
| } | ||
| onMouseDownType(type, event) { | ||
| if ( | ||
| type === 'color' && | ||
| (event.target.classList.contains('color-picker-grid-inner') || | ||
| event.target.classList.contains('color-picker-picker') || | ||
| event.target.parentNode.classList.contains('color-picker-picker')) | ||
| ) { | ||
| this.mouseEventToggle(type, false, event); | ||
| } else if (event.target.classList.contains(`color-picker-${type}`) || event.target.parentNode.classList.contains(`color-picker-${type}`)) { | ||
| this.mouseEventToggle(type, false, event); | ||
| } | ||
| } | ||
| 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) { | ||
| if (!this.anyMouseEvents() && this.find(event.target).length === 0) { | ||
| this.setupApi(); | ||
@@ -368,27 +357,13 @@ if (this.options.hide.click) { | ||
| this.$scope.$apply(); | ||
| // mouse event on color grid | ||
| } else if (this.colorMouse && this.has_moused_moved) { | ||
| this.colorUp(event); | ||
| this.$scope.$apply(); | ||
| } else { | ||
| for (var i = 0; i < this.fullEventTypes.length; i++) { | ||
| this.onMouseUpType(this.fullEventTypes[i], event); | ||
| } | ||
| } | ||
| } | ||
| onMouseUpType(type, event) { | ||
| if (this[`${type}Mouse`] && this.has_moused_moved) { | ||
| this.mouseEventToggle(type, true, event); | ||
| this.onChange(event); | ||
| // mouse event on hue slider | ||
| } else if (this.hueMouse && this.has_moused_moved) { | ||
| this.hueUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| // mouse event on saturation slider | ||
| } else if (this.saturationMouse && this.has_moused_moved) { | ||
| this.saturationUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| // mouse event on lightness slider | ||
| } else if (this.lightnessMouse && this.has_moused_moved) { | ||
| this.lightnessUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| // mouse event on opacity slider | ||
| } else if (this.opacityMouse && this.has_moused_moved) { | ||
| this.opacityUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| } | ||
@@ -398,27 +373,12 @@ } | ||
| onMouseMove(event) { | ||
| // mouse event on color grid | ||
| if (this.colorMouse) { | ||
| for (var i = 0; i < this.fullEventTypes.length; i++) { | ||
| this.onMouseMoveType(this.fullEventTypes[i], event); | ||
| } | ||
| } | ||
| onMouseMoveType(type, event) { | ||
| if (this[`${type}Mouse`]) { | ||
| this.has_moused_moved = true; | ||
| this.colorChange(event); | ||
| this.valueChange(type, event); | ||
| this.$scope.$apply(); | ||
| // mouse event on hue slider | ||
| } else if (this.hueMouse) { | ||
| this.has_moused_moved = true; | ||
| this.hueChange(event); | ||
| this.$scope.$apply(); | ||
| // mouse event on saturation slider | ||
| } else if (this.saturationMouse) { | ||
| this.has_moused_moved = true; | ||
| this.saturationChange(event); | ||
| this.$scope.$apply(); | ||
| // mouse event on lightness slider | ||
| } else if (this.lightnessMouse) { | ||
| this.has_moused_moved = true; | ||
| this.lightnessChange(event); | ||
| this.$scope.$apply(); | ||
| // mouse event on opacity slider | ||
| } else if (this.opacityMouse) { | ||
| this.has_moused_moved = true; | ||
| this.opacityChange(event); | ||
| this.$scope.$apply(); | ||
| } | ||
@@ -434,7 +394,6 @@ } | ||
| onColorClick(event) { | ||
| onClick(type, event) { | ||
| if (!this.options.disabled && !this.has_moused_moved) { | ||
| this.colorChange(event); | ||
| this.colorUp(event); | ||
| this.$scope.$apply(); | ||
| this.valueChange(type, event); | ||
| this.mouseEventToggle(type, true, event); | ||
| this.onChange(event); | ||
@@ -444,38 +403,2 @@ } | ||
| onHueClick(event) { | ||
| if (!this.options.disabled && !this.has_moused_moved) { | ||
| this.hueChange(event); | ||
| this.hueUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| } | ||
| } | ||
| onSaturationClick(event) { | ||
| if (!this.options.disabled && !this.has_moused_moved) { | ||
| this.saturationChange(event); | ||
| this.saturationUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| } | ||
| } | ||
| onLightnessClick(event) { | ||
| if (!this.options.disabled && !this.has_moused_moved) { | ||
| this.lightnessChange(event); | ||
| this.lightnessUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| } | ||
| } | ||
| onOpacityClick(event) { | ||
| if (!this.options.disabled && !this.has_moused_moved) { | ||
| this.opacityChange(event); | ||
| this.opacityUp(event); | ||
| this.$scope.$apply(); | ||
| this.onChange(event); | ||
| } | ||
| } | ||
| onChange(event) { | ||
@@ -506,47 +429,94 @@ // don't fire if it hasn't actually changed | ||
| initConfig() { | ||
| if (!this.options) { | ||
| this.options = {}; | ||
| onSwatchClick($event) { | ||
| if (this.options.show.swatch && !this.options.disabled) { | ||
| this.api.open($event); | ||
| } | ||
| } | ||
| this.mergeOptions(this.options, this.ColorPickerOptions); | ||
| onFocus($event) { | ||
| if (this.options.show.focus) { | ||
| this.api.open($event); | ||
| } | ||
| } | ||
| this.is_open = this.options.inline; | ||
| //--------------------------- | ||
| // api functions | ||
| //--------------------------- | ||
| if (this.options.inline) { | ||
| this.options.close.show = false; | ||
| /** Sets up the external api */ | ||
| setupApi() { | ||
| if (!this.api) { | ||
| this.api = {}; | ||
| } | ||
| this.pickerDimensions = { | ||
| width: 150, | ||
| height: 150 | ||
| this.api.open = (event) => { | ||
| // if already open then don't run show again | ||
| if (this.is_open) { | ||
| return true; | ||
| } | ||
| this.is_open = true; | ||
| this.hueMouse = false; | ||
| this.opacityMouse = false; | ||
| this.colorMouse = false; | ||
| // force redraw | ||
| this.$scope.$applyAsync(); | ||
| // force the sliders to re-caculate their position | ||
| for (var i = 0; i < this.basicEventTypes.length; i++) { | ||
| this.valueUpdate(this.basicEventTypes[i]); | ||
| } | ||
| this.eventApiDispatch('onOpen', [event]); | ||
| }; | ||
| this.sliderDimensions = { | ||
| width: this.options.horizontal ? this.pickerDimensions.width : 20, | ||
| height: this.options.horizontal ? 20 : this.pickerDimensions.height, | ||
| this.api.close = (event) => { | ||
| // check that it is not already closed | ||
| if (!this.options.inline && (this.is_open || this.$element[0].querySelector('.color-picker-panel').offsetParent !== null)) { | ||
| this.is_open = false; | ||
| this.$scope.$applyAsync(); | ||
| this.update(); | ||
| this.eventApiDispatch('onClose', [event]); | ||
| } | ||
| }; | ||
| } | ||
| mergeOptions(options, defaultOptions) { | ||
| for (var attr in defaultOptions) { | ||
| if (defaultOptions.hasOwnProperty(attr)) { | ||
| if (!options || !options.hasOwnProperty(attr)) { | ||
| options[attr] = defaultOptions[attr]; | ||
| } else if (typeof defaultOptions[attr] === 'object') { | ||
| this.mergeOptions(options[attr], defaultOptions[attr]); | ||
| } | ||
| this.api.clear = (event) => { | ||
| if (this.internalNgModel !== '') { | ||
| this.setNgModel(''); | ||
| this.eventApiDispatch('onClear', [event]); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| onSwatchClick($event) { | ||
| if (this.options.show.swatch) { | ||
| this.api.open($event); | ||
| } | ||
| this.api.reset = (event) => { | ||
| if (this.internalNgModel !== this.initialNgModel) { | ||
| this.setNgModel(this.initialNgModel); | ||
| this.eventApiDispatch('onReset', [event]); | ||
| } | ||
| }; | ||
| this.api.getElement = () => { | ||
| return this.$element; | ||
| }; | ||
| this.api.getScope = () => { | ||
| return this.$scope; | ||
| }; | ||
| } | ||
| onFocus($event) { | ||
| if (this.options.show.focus) { | ||
| this.api.open($event); | ||
| //--------------------------- | ||
| // model functions | ||
| //--------------------------- | ||
| /** Sets the internal and external ngModel values */ | ||
| setNgModel(value) { | ||
| this.internalNgModel = value; | ||
| if (this.ngModelOptions.getterSetter) { | ||
| this.ngModel(value); | ||
| } else { | ||
| this.ngModel = value; | ||
| } | ||
@@ -556,26 +526,8 @@ } | ||
| update() { | ||
| if (this.hue === undefined || this.saturation === undefined || this.lightness === undefined) { | ||
| if (!this.areAllValuesSet()) { | ||
| return false; | ||
| } | ||
| var color; | ||
| var color = tinycolor(this.getColorValue()); | ||
| if (this.options.round) { | ||
| color = tinycolor({ | ||
| h: this.hue, | ||
| s: `${this.saturation}%`, | ||
| l: `${this.lightness}%` | ||
| }); | ||
| } else { | ||
| color = tinycolor({ | ||
| h: this.hue, | ||
| s: `${this.saturation}%`, | ||
| v: `${this.lightness}%` | ||
| }); | ||
| } | ||
| if (this.options.alpha) { | ||
| color.setAlpha(this.opacity / 100); | ||
| } | ||
| this.swatchColor = color.toHslString(); | ||
@@ -590,3 +542,3 @@ | ||
| this.lightnessPosUpdate(); | ||
| this.updateAlphaBackground(color); | ||
| this.updateOpacityBackground(color); | ||
| this.opacityPosUpdate(); | ||
@@ -597,63 +549,82 @@ | ||
| if (this.updateModel && !skipUpdate) { | ||
| switch (this.options.format.toLowerCase()) { | ||
| case 'rgb': | ||
| this.setNgModel(color.toRgbString()); | ||
| break; | ||
| let formats = { | ||
| rgb: 'toRgbString', | ||
| hex: 'toHex', | ||
| hex8: 'toHex8', | ||
| hexstring: 'toHexString', | ||
| hex8string: 'toHex8String', | ||
| hsv: 'toHsvString', | ||
| hsl: 'toHslString', | ||
| raw: 'clone', | ||
| }; | ||
| case 'hex': | ||
| if (this.options.case === 'lower') { | ||
| this.setNgModel(color.toHex().toLowerCase()); | ||
| } else { | ||
| this.setNgModel(color.toHex().toUpperCase()); | ||
| } | ||
| break; | ||
| let value = color[formats[this.options.format.toLowerCase()]](); | ||
| case 'hex8': | ||
| if (this.options.case === 'lower') { | ||
| this.setNgModel(color.toHex8().toLowerCase()); | ||
| } else { | ||
| this.setNgModel(color.toHex8().toUpperCase()); | ||
| } | ||
| break; | ||
| if (this.options.format.match(/hex/i)) { | ||
| value = this.options.case === 'upper' ? value.toUpperCase() : value.toLowerCase(); | ||
| } | ||
| case 'hexstring': | ||
| if (this.options.case === 'lower') { | ||
| this.setNgModel(color.toHexString().toLowerCase()); | ||
| } else { | ||
| this.setNgModel(color.toHexString().toUpperCase()); | ||
| } | ||
| break; | ||
| this.setNgModel(value); | ||
| } | ||
| } | ||
| case 'hex8string': | ||
| if (this.options.case === 'lower') { | ||
| this.setNgModel(color.toHex8String().toLowerCase()); | ||
| } else { | ||
| this.setNgModel(color.toHex8String().toUpperCase()); | ||
| } | ||
| break; | ||
| //--------------------------- | ||
| // generic value functions | ||
| //--------------------------- | ||
| case 'hsv': | ||
| this.setNgModel(color.toHsvString()); | ||
| break; | ||
| mouseEventToggle(type, up, event) { | ||
| this.stopEvent(event); | ||
| this[`${type}Mouse`] = !up; | ||
| this.$scope.$apply(); | ||
| } | ||
| case 'raw': | ||
| this.setNgModel(color.clone()); | ||
| break; | ||
| valueChange(type, event) { | ||
| this.stopEvent(event); | ||
| default: | ||
| this.setNgModel(color.toHslString()); | ||
| break; | ||
| } | ||
| if (type === 'color') { | ||
| return this.colorChange(event); | ||
| } | ||
| var el = this.find(`.color-picker-${type}`); | ||
| var eventPos = this.getEventPos(event); | ||
| var max = this.getMaxFromType(type); | ||
| this[type] = this.calculateSliderPos(el, eventPos, max); | ||
| if (this[type] > max) { | ||
| this[type] = max; | ||
| } else if (this[type] < 0) { | ||
| this[type] = 0; | ||
| } | ||
| } | ||
| updateSwatchBackground() { | ||
| var el = angular.element(this.$element[0].querySelector('.color-picker-swatch')); | ||
| el.css({ | ||
| 'background-color': this.swatchColor | ||
| }); | ||
| valueUpdate(type) { | ||
| if (this[type] !== undefined) { | ||
| if (type === 'saturation') { | ||
| this[`${type}Pos`] = this[type]; | ||
| } else { | ||
| var max = this.getMaxFromType(type); | ||
| this[`${type}Pos`] = (1 - (this[type] / max)) * 100; | ||
| } | ||
| if (this[`${type}Pos`] < 0) { | ||
| this[`${type}Pos`] = 0; | ||
| } else if (this[`${type}Pos`] > 100) { | ||
| this[`${type}Pos`] = 100; | ||
| } | ||
| if (this.options.round) { | ||
| this.getRoundPos(); | ||
| this.updateRoundPos(); | ||
| } | ||
| this[`${type}PosUpdate`](); | ||
| this.update(); | ||
| } | ||
| } | ||
| //--------------------------- | ||
| // hue functions | ||
| //--------------------------- | ||
| huePosUpdate() { | ||
@@ -675,2 +646,38 @@ var el = angular.element(this.$element[0].querySelector('.color-picker-hue .color-picker-slider')); | ||
| updateHueBackground(color) { | ||
| var el = this.find('.color-picker-hue .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'left' : 'top'; | ||
| var zero_sixths = this.getColorValue(); | ||
| var one_sixths = this.getColorValue(); | ||
| var two_sixths = this.getColorValue(); | ||
| var three_sixths = this.getColorValue(); | ||
| var four_sixths = this.getColorValue(); | ||
| var five_sixths = this.getColorValue(); | ||
| var six_sixths = this.getColorValue(); | ||
| zero_sixths.h = 0; | ||
| one_sixths.h = 60; | ||
| two_sixths.h = 120; | ||
| three_sixths.h = 180; | ||
| four_sixths.h = 240; | ||
| five_sixths.h = 300; | ||
| six_sixths.h = 359; | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + | ||
| tinycolor(zero_sixths).toRgbString() + ' 0%, ' + | ||
| tinycolor(one_sixths).toRgbString() + ' 17%, ' + | ||
| tinycolor(two_sixths).toRgbString() + ' 33%, ' + | ||
| tinycolor(three_sixths).toRgbString() + ' 50%, ' + | ||
| tinycolor(four_sixths).toRgbString() + ' 67%, ' + | ||
| tinycolor(five_sixths).toRgbString() + ' 83%, ' + | ||
| tinycolor(six_sixths).toRgbString() + ' 100%)' | ||
| }); | ||
| } | ||
| //--------------------------- | ||
| // saturation functions | ||
| //--------------------------- | ||
| saturationPosUpdate() { | ||
@@ -702,2 +709,20 @@ var el; | ||
| updateSaturationBackground(color) { | ||
| var el = this.find('.color-picker-saturation .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'right' : 'bottom'; | ||
| var high = this.getColorValue(); | ||
| var low = this.getColorValue(); | ||
| high.s = 100; | ||
| low.s = 0; | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + tinycolor(high).toRgbString() + ' 0%, ' + tinycolor(low).toRgbString() + ' 100%)' | ||
| }); | ||
| } | ||
| //--------------------------- | ||
| // lightness functions | ||
| //--------------------------- | ||
| lightnessPosUpdate() { | ||
@@ -729,2 +754,28 @@ var el; | ||
| updateLightnessBackground(color) { | ||
| var el = this.find('.color-picker-lightness .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'right' : 'bottom'; | ||
| var bright = this.getColorValue(); | ||
| var middle = this.getColorValue(); | ||
| var dark = this.getColorValue(); | ||
| if (this.options.round) { | ||
| bright.l = 100; | ||
| middle.l = 50; | ||
| dark.l = 0; | ||
| } else { | ||
| bright.v = 100; | ||
| middle.v = 50; | ||
| dark.v = 0; | ||
| } | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + tinycolor(bright).toRgbString() + ' 0%, ' + tinycolor(middle).toRgbString() + ' 50%, ' + tinycolor(dark).toRgbString() + ' 100%)' | ||
| }); | ||
| } | ||
| //--------------------------- | ||
| // opacity functions | ||
| //--------------------------- | ||
| opacityPosUpdate() { | ||
@@ -746,77 +797,64 @@ var el = angular.element(this.$element[0].querySelector('.color-picker-opacity .color-picker-slider')); | ||
| //--------------------------- | ||
| // hue functions | ||
| //--------------------------- | ||
| updateOpacityBackground(color) { | ||
| var el = this.find('.color-picker-opacity .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'right' : 'bottom'; | ||
| var opaque = this.getColorValue(); | ||
| var transparent = this.getColorValue(); | ||
| hueDown(event) { | ||
| this.stopEvent(event); | ||
| opaque.a = 1; | ||
| transparent.a = 0; | ||
| this.hueMouse = true; | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + tinycolor(opaque).toRgbString() + ' 0%, ' + tinycolor(transparent).toRgbString() + ' 100%)' | ||
| }); | ||
| } | ||
| hueUp(event) { | ||
| this.stopEvent(event); | ||
| //--------------------------- | ||
| // color functions | ||
| //--------------------------- | ||
| this.hueMouse = false; | ||
| } | ||
| hueChange(event) { | ||
| colorChange(event) { | ||
| this.stopEvent(event); | ||
| var el = this.find('.color-picker-hue'); | ||
| var el = this.find('.color-picker-grid-inner'); | ||
| var eventPos = this.getEventPos(event); | ||
| var offset = this.offset(el); | ||
| this.hue = this.calculateSliderPos(el, eventPos, 360); | ||
| if (this.hue > 360) { | ||
| this.hue = 360; | ||
| } else if (this.hue < 0) { | ||
| this.hue = 0; | ||
| if (this.options.round) { | ||
| this.colorChangeRound(el, offset, eventPos); | ||
| } else { | ||
| this.colorChangeSquare(el, offset, eventPos); | ||
| } | ||
| } | ||
| hueUpdate() { | ||
| if (this.hue !== undefined) { | ||
| this.huePos = (1 - (this.hue / 360)) * 100; | ||
| colorChangeRound(el, offset, eventPos) { | ||
| var dx = ((eventPos.pageX - offset.left) * 2.0 / el.prop('offsetWidth')) - 1.0; | ||
| var dy = -((eventPos.pageY - offset.top) * 2.0 / el.prop('offsetHeight')) + 1.0; | ||
| if (this.huePos < 0) { | ||
| this.huePos = 0; | ||
| } else if (this.huePos > 100) { | ||
| this.huePos = 100; | ||
| } | ||
| var tmpHue = Math.atan2(dy, dx); | ||
| var degHue = Math.round(tmpHue * 57.29577951308233); // rad to deg | ||
| if (degHue < 0) { | ||
| degHue += 360; | ||
| } | ||
| this.hue = degHue; | ||
| if (this.options.round) { | ||
| this.getRoundPos(); | ||
| this.updateRoundPos(); | ||
| } | ||
| var tmpSaturation = Math.sqrt(dx * dx + dy * dy); | ||
| this.huePosUpdate(); | ||
| this.update(); | ||
| if (tmpSaturation > 1) { | ||
| tmpSaturation = 1; | ||
| } else if (tmpSaturation < 0) { | ||
| tmpSaturation = 0; | ||
| } | ||
| } | ||
| //--------------------------- | ||
| // saturation functions | ||
| //--------------------------- | ||
| this.saturation = tmpSaturation * 100; | ||
| saturationDown(event) { | ||
| this.stopEvent(event); | ||
| this.saturationMouse = true; | ||
| if (this.lightness === undefined) { | ||
| this.lightness = 50; | ||
| } | ||
| } | ||
| saturationUp(event) { | ||
| this.stopEvent(event); | ||
| colorChangeSquare(el, offset, eventPos) { | ||
| this.saturation = ((eventPos.pageX - offset.left) / el.prop('offsetWidth')) * 100; | ||
| this.lightness = (1 - ((eventPos.pageY - offset.top) / el.prop('offsetHeight'))) * 100; | ||
| this.saturationMouse = false; | ||
| } | ||
| saturationChange(event) { | ||
| this.stopEvent(event); | ||
| var el = this.find('.color-picker-saturation'); | ||
| var eventPos = this.getEventPos(event); | ||
| this.saturation = this.calculateSliderPos(el, eventPos, 100); | ||
| if (this.saturation > 100) { | ||
@@ -827,21 +865,7 @@ this.saturation = 100; | ||
| } | ||
| } | ||
| saturationUpdate() { | ||
| if (this.saturation !== undefined) { | ||
| if (this.options.round) { | ||
| this.getRoundPos(); | ||
| this.updateRoundPos(); | ||
| } | ||
| this.saturationPos = this.saturation; | ||
| if (this.saturationPos < 0) { | ||
| this.saturationPos = 0; | ||
| } else if (this.saturationPos > 100) { | ||
| this.saturationPos = 100; | ||
| } | ||
| this.saturationPosUpdate(); | ||
| this.update(); | ||
| if (this.lightness > 100) { | ||
| this.lightness = 100; | ||
| } else if (this.lightness < 0) { | ||
| this.lightness = 0; | ||
| } | ||
@@ -852,27 +876,14 @@ } | ||
| var el = this.find('.color-picker-grid .color-picker-overlay'); | ||
| var background = this.getColorValue(); | ||
| if (this.options.round) { | ||
| var center = tinycolor({ | ||
| h: this.hue, | ||
| s: 0, | ||
| l: this.lightness | ||
| }); | ||
| el.css({ | ||
| 'background-color': center.toRgbString() | ||
| }); | ||
| background.s = 0; | ||
| } else { | ||
| var background = tinycolor({ | ||
| h: this.hue, | ||
| s: 1, | ||
| v: 1, | ||
| a: 1 | ||
| }); | ||
| el.css({ | ||
| 'background-color': background.toRgbString() | ||
| }); | ||
| background.s = 1; | ||
| background.v = 1; | ||
| background.a = 1; | ||
| } | ||
| el.css({ | ||
| 'background-color': tinycolor(background).toRgbString(), | ||
| 'opacity': color.getAlpha() | ||
@@ -886,278 +897,94 @@ }); | ||
| updateHueBackground(color) { | ||
| var el = this.find('.color-picker-hue .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'left' : 'top'; | ||
| var zero_sixths = this.getCurrentColorValue(); | ||
| var one_sixths = this.getCurrentColorValue(); | ||
| var two_sixths = this.getCurrentColorValue(); | ||
| var three_sixths = this.getCurrentColorValue(); | ||
| var four_sixths = this.getCurrentColorValue(); | ||
| var five_sixths = this.getCurrentColorValue(); | ||
| var six_sixths = this.getCurrentColorValue(); | ||
| zero_sixths.h = 0; | ||
| one_sixths.h = 60; | ||
| two_sixths.h = 120; | ||
| three_sixths.h = 180; | ||
| four_sixths.h = 240; | ||
| five_sixths.h = 300; | ||
| six_sixths.h = 359; | ||
| updateSwatchBackground() { | ||
| var el = angular.element(this.$element[0].querySelector('.color-picker-swatch')); | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + | ||
| tinycolor(zero_sixths).toRgbString() + ' 0%, ' + | ||
| tinycolor(one_sixths).toRgbString() + ' 17%, ' + | ||
| tinycolor(two_sixths).toRgbString() + ' 33%, ' + | ||
| tinycolor(three_sixths).toRgbString() + ' 50%, ' + | ||
| tinycolor(four_sixths).toRgbString() + ' 67%, ' + | ||
| tinycolor(five_sixths).toRgbString() + ' 83%, ' + | ||
| tinycolor(six_sixths).toRgbString() + ' 100%)' | ||
| 'background-color': this.swatchColor | ||
| }); | ||
| } | ||
| updateSaturationBackground(color) { | ||
| var el = this.find('.color-picker-saturation .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'right' : 'bottom'; | ||
| var high = this.getCurrentColorValue(); | ||
| var low = this.getCurrentColorValue(); | ||
| high.s = 100; | ||
| low.s = 0; | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + tinycolor(high).toRgbString() + ' 0%, ' + tinycolor(low).toRgbString() + ' 100%)' | ||
| }); | ||
| } | ||
| updateLightnessBackground(color) { | ||
| var el = this.find('.color-picker-lightness .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'right' : 'bottom'; | ||
| var bright = this.getCurrentColorValue(); | ||
| var middle = this.getCurrentColorValue(); | ||
| var dark = this.getCurrentColorValue(); | ||
| if (this.options.round) { | ||
| bright.l = 100; | ||
| middle.l = 50; | ||
| dark.l = 0; | ||
| } else { | ||
| bright.v = 100; | ||
| middle.v = 50; | ||
| dark.v = 0; | ||
| } | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + tinycolor(bright).toRgbString() + ' 0%, ' + tinycolor(middle).toRgbString() + ' 50%, ' + tinycolor(dark).toRgbString() + ' 100%)' | ||
| }); | ||
| } | ||
| updateAlphaBackground(color) { | ||
| var el = this.find('.color-picker-opacity .color-picker-overlay'); | ||
| var direction = this.options.horizontal ? 'right' : 'bottom'; | ||
| var opaque = this.getCurrentColorValue(); | ||
| var transparent = this.getCurrentColorValue(); | ||
| opaque.a = 1; | ||
| transparent.a = 0; | ||
| el.css({ | ||
| 'background': 'linear-gradient(to ' + direction + ', ' + tinycolor(opaque).toRgbString() + ' 0%, ' + tinycolor(transparent).toRgbString() + ' 100%)' | ||
| }); | ||
| } | ||
| //--------------------------- | ||
| // lightness functions | ||
| // helper functions | ||
| //--------------------------- | ||
| lightnessDown(event) { | ||
| this.stopEvent(event); | ||
| isColorValid(color) { | ||
| let isValid = color.isValid(); | ||
| this.lightnessMouse = true; | ||
| } | ||
| lightnessUp(event) { | ||
| this.stopEvent(event); | ||
| this.lightnessMouse = false; | ||
| } | ||
| lightnessChange(event) { | ||
| this.stopEvent(event); | ||
| var el = this.find('.color-picker-lightness'); | ||
| var eventPos = this.getEventPos(event); | ||
| this.lightness = this.calculateSliderPos(el, eventPos, 100); | ||
| if (this.lightness > 100) { | ||
| this.lightness = 100; | ||
| } else if (this.lightness < 0) { | ||
| this.lightness = 0; | ||
| if (isValid && this.options.restrictToFormat) { | ||
| let format = this.options.format; | ||
| isValid = color.getFormat() === this.getTinyColorFormat(); | ||
| } | ||
| } | ||
| lightnessUpdate() { | ||
| if (this.lightness !== undefined) { | ||
| this.lightnessPos = 100 - this.lightness; | ||
| if (!isValid && this.options.allowEmpty) { | ||
| let input = color.getOriginalInput(); | ||
| if (this.lightnessPos < 0) { | ||
| this.lightnessPos = 0; | ||
| } else if (this.lightnessPos > 100) { | ||
| this.lightnessPos = 100; | ||
| if (input === undefined || input === null || input === '') { | ||
| isValid = true; | ||
| } | ||
| } | ||
| this.lightnessPosUpdate(); | ||
| this.update(); | ||
| } | ||
| return isValid; | ||
| } | ||
| //--------------------------- | ||
| // opacity functions | ||
| //--------------------------- | ||
| getTinyColorFormat() { | ||
| if (this.options.format === 'hexString') { | ||
| return 'hex'; | ||
| } else if (this.options.format === 'hex8String') { | ||
| return 'hex8'; | ||
| } | ||
| opacityDown(event) { | ||
| this.stopEvent(event); | ||
| this.opacityMouse = true; | ||
| return this.options.format; | ||
| } | ||
| opacityUp(event) { | ||
| this.stopEvent(event); | ||
| areAllValuesSet() { | ||
| if (this.hue === undefined || this.saturation === undefined || this.lightness === undefined) { | ||
| return false; | ||
| } | ||
| this.opacityMouse = false; | ||
| return true; | ||
| } | ||
| opacityChange(event) { | ||
| this.stopEvent(event); | ||
| getColorValue(includeOpacity = true) { | ||
| let value = { | ||
| h: this.hue, | ||
| s: `${this.saturation}%`, | ||
| v: `${this.lightness}%` | ||
| }; | ||
| var el = this.find('.color-picker-opacity'); | ||
| var eventPos = this.getEventPos(event); | ||
| this.opacity = this.calculateSliderPos(el, eventPos, 100); | ||
| if (this.opacity > 100) { | ||
| this.opacity = 100; | ||
| } else if (this.opacity < 0) { | ||
| this.opacity = 0; | ||
| if (this.options.round) { | ||
| value = { | ||
| h: this.hue, | ||
| s: `${this.saturation}%`, | ||
| l: `${this.lightness}%`, | ||
| }; | ||
| } | ||
| } | ||
| opacityUpdate() { | ||
| if (this.opacity !== undefined) { | ||
| this.opacityPos = (1 - (this.opacity / 100)) * 100; | ||
| if (this.opacityPos < 0) { | ||
| this.opacityPos = 0; | ||
| } else if (this.opacityPos > 100) { | ||
| this.opacityPos = 100; | ||
| } | ||
| this.opacityPosUpdate(); | ||
| this.update(); | ||
| if (includeOpacity) { | ||
| value.a = this.opacity / 100; | ||
| } | ||
| } | ||
| //--------------------------- | ||
| // color functions | ||
| //--------------------------- | ||
| colorDown(event) { | ||
| this.stopEvent(event); | ||
| this.colorMouse = true; | ||
| return value; | ||
| } | ||
| colorUp(event) { | ||
| this.stopEvent(event); | ||
| /* eslint-disable complexity */ | ||
| setColorValue(color) { | ||
| let noMouseEvents = !this.anyMouseEvents(); | ||
| let hsl = this.options.round ? color.toHsl() : color.toHsv(); | ||
| this.colorMouse = false; | ||
| } | ||
| colorChange(event) { | ||
| this.stopEvent(event); | ||
| var el = this.find('.color-picker-grid-inner'); | ||
| var eventPos = this.getEventPos(event); | ||
| var offset = this.offset(el); | ||
| if (this.options.round) { | ||
| var dx = ((eventPos.pageX - offset.left) * 2.0 / el.prop('offsetWidth')) - 1.0; | ||
| var dy = -((eventPos.pageY - offset.top) * 2.0 / el.prop('offsetHeight')) + 1.0; | ||
| var tmpHue = Math.atan2(dy, dx); | ||
| var degHue = Math.round(tmpHue * 57.29577951308233); // rad to deg | ||
| if (degHue < 0) { | ||
| degHue += 360; | ||
| } | ||
| this.hue = degHue; | ||
| var tmpSaturation = Math.sqrt(dx * dx + dy * dy); | ||
| if (tmpSaturation > 1) { | ||
| tmpSaturation = 1; | ||
| } else if (tmpSaturation < 0) { | ||
| tmpSaturation = 0; | ||
| } | ||
| this.saturation = tmpSaturation * 100; | ||
| if (this.lightness === undefined) { | ||
| this.lightness = 50; | ||
| } | ||
| } else { | ||
| this.saturation = ((eventPos.pageX - offset.left) / el.prop('offsetWidth')) * 100; | ||
| this.lightness = (1 - ((eventPos.pageY - offset.top) / el.prop('offsetHeight'))) * 100; | ||
| if (this.saturation > 100) { | ||
| this.saturation = 100; | ||
| } else if (this.saturation < 0) { | ||
| this.saturation = 0; | ||
| } | ||
| if (this.lightness > 100) { | ||
| this.lightness = 100; | ||
| } else if (this.lightness < 0) { | ||
| this.lightness = 0; | ||
| } | ||
| if (noMouseEvents || this.hueMouse) { | ||
| this.hue = hsl.h; | ||
| } | ||
| } | ||
| //--------------------------- | ||
| // helper functions | ||
| //--------------------------- | ||
| isColorValid(color) { | ||
| let isValid = color.isValid(); | ||
| if (isValid && this.options.restrictToFormat) { | ||
| isValid = color.getFormat() === this.options.format; | ||
| if (noMouseEvents || this.saturationMouse) { | ||
| this.saturation = hsl.s * 100; | ||
| } | ||
| if (!isValid && this.options.allowEmpty) { | ||
| let input = color.getOriginalInput(); | ||
| if (input === undefined || input === null || input === '') { | ||
| isValid = true; | ||
| } | ||
| if (noMouseEvents || this.lightnessMouse) { | ||
| this.lightness = (this.options.round ? hsl.l : hsl.v) * 100; | ||
| } | ||
| return isValid; | ||
| } | ||
| getCurrentColorValue() { | ||
| if (this.options.round) { | ||
| return { | ||
| h: this.hue, | ||
| s: this.saturation, | ||
| l: this.lightness | ||
| }; | ||
| if (this.options.alpha && (noMouseEvents || this.opacityMouse)) { | ||
| this.opacity = hsl.a * 100; | ||
| } | ||
| return { | ||
| h: this.hue, | ||
| s: this.saturation, | ||
| v: this.lightness | ||
| }; | ||
| } | ||
| /* eslint-enable complexity */ | ||
@@ -1253,3 +1080,3 @@ checkDirty(color) { | ||
| // taken and modified from jQuery's find | ||
| /** taken and modified from jQuery's find */ | ||
| find(selector) { | ||
@@ -1282,3 +1109,3 @@ var context = this.wrapper ? this.wrapper[0] : this.$element[0], | ||
| // taken and modified from jQuery's offset | ||
| /** taken and modified from jQuery's offset */ | ||
| offset(el) { | ||
@@ -1306,3 +1133,3 @@ var docElem, win, rect, doc, elem = el[0]; | ||
| doc = elem.ownerDocument; | ||
| win = doc !== null && doc === doc.window ? doc : doc.nodeType === 9 && doc.defaultView; | ||
| win = this.getWindowElements(doc); | ||
| docElem = doc.documentElement; | ||
@@ -1327,4 +1154,16 @@ | ||
| } | ||
| getWindowElements(doc) { | ||
| return doc !== null && doc === doc.window ? doc : doc.nodeType === 9 && doc.defaultView; | ||
| } | ||
| anyMouseEvents() { | ||
| return this.colorMouse || this.hueMouse || this.saturationMouse || this.lightnessMouse || this.opacityMouse; | ||
| } | ||
| getMaxFromType(type) { | ||
| return type === 'hue' ? 360 : 100; | ||
| } | ||
| } | ||
| AngularColorPickerController.$inject = ['$scope', '$element', '$document', '$timeout', 'ColorPickerOptions']; |
@@ -14,6 +14,2 @@ var Page = require('../page-object.js'); | ||
| Page.blurColorPicker(); | ||
| // value is still what the user typed in. | ||
| expect(Page.input_field.getAttribute('value')).toEqual('red'); | ||
| // value suddenly changes when re-opening the color picker. | ||
| Page.openColorPicker(); | ||
| expect(Page.input_field.getAttribute('value')).toEqual('#FF0000'); | ||
@@ -27,3 +23,2 @@ }); | ||
| Page.blurColorPicker(); | ||
| Page.openColorPicker(); | ||
| expect(Page.input_field.getAttribute('value')).toEqual('red'); | ||
@@ -30,0 +25,0 @@ }); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-3.6%
349486
- Dev dependency count
- increased by5.88%
18
- Lines of code
- decreased by-6.71%
4034
No dependency changes