angularjs-color-picker.min.js

/*!
 * angular-color-picker v0.6.4
 * https://github.com/ruhley/angular-color-picker/
 *
 * Copyright 2015 ruhley
 *
 * 2015-07-29 13:11:21
 *
 */
!function(){"use strict";angular.module("color.picker",[])}(),function(){"use strict";var a=function(a,b){return{restrict:"E",require:["^ngModel"],scope:{ngModel:"=",colorPickerAlpha:"=",colorPickerCase:"=",colorPickerFormat:"=",colorPickerPos:"=",colorPickerSwatch:"=",colorPickerSwatchOnly:"=",colorPickerSwatchPos:"=",colorPickerSwatchBootstrap:"="},templateUrl:"template/color-picker/directive.html",link:function(b,c,d,e){b.init=function(){if(void 0===b.ngModel)b.hue=0,b.saturation=0,b.lightness=100;else{var c=tinycolor(b.ngModel);if(c.isValid()){var d=c.toHsv();b.hue=d.h,b.saturation=100*d.s,b.lightness=100*d.v,b.opacity=100*d.a}}b.initConfig(),a.on("click",function(a){0===b.find(a.target).length&&(b.log("Color Picker: Document Hide Event"),b.hide())})},b.initConfig=function(){b.config={},b.config.alpha=void 0===b.colorPickerAlpha?!0:b.colorPickerAlpha,b.config.case=void 0===b.colorPickerCase?"upper":b.colorPickerCase,b.config.format=void 0===b.colorPickerFormat?"hsl":b.colorPickerFormat,b.config.pos=void 0===b.colorPickerPos?"bottom left":b.colorPickerPos,b.config.swatch=void 0===b.colorPickerSwatch?!0:b.colorPickerSwatch,b.config.swatchOnly=void 0===b.colorPickerSwatchOnly?!1:b.colorPickerSwatchOnly,b.config.swatchPos=void 0===b.colorPickerSwatchPos?"left":b.colorPickerSwatchPos,b.config.swatchBootstrap=void 0===b.colorPickerSwatchBootstrap?!0:b.colorPickerSwatchBootstrap,b.log("Color Picker: Config",b.config)},b.focus=function(){b.log("Color Picker: Focus Event"),b.find(".color-picker-input")[0].focus()},b.show=function(){b.log("Color Picker: Show Event"),b.visible=!0,b.hueMouse=!1,b.opacityMouse=!1,b.colorMouse=!1,b.saturationUpdate(),b.lightnessUpdate()},b.hide=function(a){b.log("Color Picker: Hide Event"),b.visible=!1,a!==!1&&b.$apply()},b.update=function(){if(void 0!==b.hue&&void 0!==b.saturation&&void 0!==b.lightness){var a,c=tinycolor({h:b.hue,s:b.saturation/100,v:b.lightness/100});switch(b.config.alpha&&c.setAlpha(b.opacity/100),b.log("Color Picker: COLOR CHANGED TO ",c,b.hue,b.saturation,b.lightness,b.opacity),b.swatchColor=c.toHslString(),b.config.format){case"rgb":a=c.toRgbString();break;case"hex":a=c.toHexString(),a="lower"===b.config.case?a.toLowerCase():a.toUpperCase();break;case"hex8":a=c.toHex8String(),a="lower"===b.config.case?a.toLowerCase():a.toUpperCase();break;case"hsv":a=c.toHsvString();break;default:a=c.toHslString()}b.ngModel=a}},b.$watch("ngModel",function(a,c){if(void 0!==a&&a!==c&&a.length>4){b.log("Color Picker: MODEL - CHANGED",a);var f=tinycolor(a);if(f.isValid()){var g=f.toHsv();b.hue=g.h,b.saturation=100*g.s,b.lightness=100*g.v,b.config.alpha&&(b.opacity=100*g.a),b.isValid=!0}else b.isValid=!1;e[0].$setValidity(d.name,b.isValid),void 0!==c&&e[0].$setDirty()}}),b.$watch("colorPickerFormat",function(a,c){void 0!==a&&a!==c&&("hex"===a&&(b.colorPickerAlpha=!1),b.initConfig(),b.update())}),b.$watchGroup(["colorPickerAlpha","colorPickerCase"],function(a,c){void 0!==a&&(b.initConfig(),b.update())}),b.$watchGroup(["colorPickerSwatchPos","colorPickerSwatchBootstrap","colorPickerSwatchOnly","colorPickerSwatch","colorPickerPos"],function(a,c){void 0!==a&&b.initConfig()}),b.hueDown=function(){b.log("Color Picker: HUE - MOUSE DOWN"),b.hueMouse=!0},b.hueUp=function(){b.log("Color Picker: HUE - MOUSE UP"),b.hueMouse=!1},b.hueChange=function(a,c){if(b.hueMouse||c){b.log("Color Picker: HUE - MOUSE CHANGE");var d=b.find(".color-picker-hue");b.hue=360*(1-(a.pageY-b.offset(d,"top"))/d.prop("offsetHeight"))}},b.hueUpdate=function(){void 0!==b.hue&&(b.log("Color Picker: HUE - CHANGED"),b.huePos=100*(1-b.hue/360),b.grid=tinycolor({h:b.hue,s:100,v:1}).toHslString(),b.huePos<0?b.huePos=0:b.huePos>100&&(b.huePos=100),b.update())},b.$watch("hue",function(a,c){b.hueUpdate()}),b.opacityDown=function(){b.log("Color Picker: OPACITY - MOUSE DOWN"),b.opacityMouse=!0},b.opacityUp=function(){b.log("Color Picker: OPACITY - MOUSE UP"),b.opacityMouse=!1},b.opacityChange=function(a,c){if(b.opacityMouse||c){b.log("Color Picker: OPACITY - MOUSE CHANGE");var d=b.find(".color-picker-opacity");b.opacity=100*(1-(a.pageY-b.offset(d,"top"))/d.prop("offsetHeight"))}},b.opacityUpdate=function(){void 0!==b.opacity&&(b.log("Color Picker: OPACITY - CHANGED"),b.opacityPos=100*(1-b.opacity/100),b.opacityPos<0?b.opacityPos=0:b.opacityPos>100&&(b.opacityPos=100),b.update())},b.$watch("opacity",function(a,c){b.opacityUpdate()}),b.colorDown=function(){b.log("Color Picker: COLOR - MOUSE DOWN"),b.colorMouse=!0},b.colorUp=function(){b.log("Color Picker: COLOR - MOUSE UP"),b.colorMouse=!1},b.colorChange=function(a,c){if(b.colorMouse||c){b.log("Color Picker: COLOR - MOUSE CHANGE");var d=b.find(".color-picker-grid-inner");b.saturation=(a.pageX-b.offset(d,"left"))/d.prop("offsetWidth")*100,b.lightness=100*(1-(a.pageY-b.offset(d,"top"))/d.prop("offsetHeight"))}},b.saturationUpdate=function(a){void 0!==b.saturation&&b.saturation!==a&&(b.log("Color Picker: SATURATION - CHANGED"),b.saturationPos=b.saturation/100*100,b.saturationPos<0?b.saturationPos=0:b.saturationPos>100&&(b.saturationPos=100),b.update())},b.$watch("saturation",function(a,c){b.saturationUpdate(c)}),b.lightnessUpdate=function(a){void 0!==b.lightness&&b.lightness!==a&&(b.log("Color Picker: LIGHTNESS - CHANGED"),b.lightnessPos=100*(1-b.lightness/100),b.lightnessPos<0?b.lightnessPos=0:b.lightnessPos>100&&(b.lightnessPos=100),b.update())},b.$watch("lightness",function(a,c){b.lightnessUpdate(c)}),b.log=function(){},b.find=function(a){var d,e=b.wrapper?b.wrapper[0]:c[0],f=[];if(!a)return f;if("string"==typeof a){if(1!==(d=e.nodeType)&&9!==d)return[];f=e.querySelectorAll(a)}else b.contains(e,a)&&f.push(a);return angular.element(f)},b.contains=function(a,b){if(b)for(;b=b.parentNode;)if(b===a)return!0;return!1},b.offset=function(a,b){var c,d=0,e=0,f=document.documentElement||document.body;return 0===a.length?null:(d=a[0].getBoundingClientRect().left+(window.pageXOffset||f.scrollLeft),e=a[0].getBoundingClientRect().top+(window.pageYOffset||f.scrollTop),c={left:d,top:e},void 0!==b?c[b]:c)},b.init()}}};a.$inject=["$document","$timeout"],angular.module("color.picker").directive("colorPicker",a)}(),angular.module("color.picker").run(["$templateCache",function(a){a.put("template/color-picker/directive.html",'<div class="color-picker-wrapper" ng-class="{\'color-picker-swatch-only\': config.swatchOnly}">\n   <div ng-class="{\'input-group\': config.swatchBootstrap}">\n       <span ng-if="config.swatchPos === \'left\'" class="color-picker-swatch" ng-click="focus()" ng-show="config.swatch" ng-class="{\'color-picker-swatch-left\': config.swatchPos !== \'right\', \'color-picker-swatch-right\': config.swatchPos === \'right\', \'input-group-addon\': config.swatchBootstrap}">\n           <span class="color-picker-swatch-color" ng-attr-style="background-color: {{swatchColor}};"></span>\n       </span>\n       <input class="color-picker-input form-control" type="text" ng-model="ngModel" size="7" ng-focus="show()" ng-class="{\'color-picker-input-swatch\': config.swatch && !config.swatchOnly && config.swatchPos === \'left\'}">\n       <span ng-if="config.swatchPos === \'right\'" class="color-picker-swatch" ng-click="focus()" ng-show="config.swatch" ng-class="{\'color-picker-swatch-left\': config.swatchPos !== \'right\', \'color-picker-swatch-right\': config.swatchPos === \'right\', \'input-group-addon\': config.swatchBootstrap}">\n           <span class="color-picker-swatch-color" ng-attr-style="background-color: {{swatchColor}};"></span>\n       </span>\n   </div>\n   <div class="color-picker-panel" ng-show="visible" ng-class="{\n       \'color-picker-panel-top color-picker-panel-right\': config.pos === \'top right\',\n       \'color-picker-panel-top color-picker-panel-left\': config.pos === \'top left\',\n       \'color-picker-panel-bottom color-picker-panel-right\': config.pos === \'bottom right\',\n       \'color-picker-panel-bottom color-picker-panel-left\': config.pos === \'bottom left\',\n   }">\n       <div class="color-picker-hue color-picker-sprite" ng-click="hueChange($event, true)" ng-mousemove="hueChange($event, false)" ng-mousedown="hueDown()" ng-mouseup="hueUp()">\n           <div class="color-picker-slider" ng-attr-style="top: {{huePos}}%;"></div>\n       </div>\n       <div class="color-picker-opacity color-picker-sprite" ng-show="config.alpha" ng-click="opacityChange($event, true)" ng-mousemove="opacityChange($event, false)" ng-mousedown="opacityDown()" ng-mouseup="opacityUp()">\n           <div class="color-picker-slider" ng-attr-style="top: {{opacityPos}}%;"></div>\n           </div>\n       <div class="color-picker-grid color-picker-sprite" ng-attr-style="background-color: {{grid}};" ng-click="colorChange($event, true)" ng-mousemove="colorChange($event, false)" ng-mousedown="colorDown()" ng-mouseup="colorUp()">\n           <div class="color-picker-grid-inner"></div>\n           <div class="color-picker-picker" ng-attr-style="top: {{lightnessPos}}%; left: {{saturationPos}}%;">\n               <div></div>\n           </div>\n       </div>\n   </div>\n</div>')}]);
//# sourceMappingURL=angularjs-color-picker.min.map