diff --git a/README.md b/README.md index ed80458..8659b69 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,7 @@ $scope.scopeVariable.options = { | openOnInput | open-on-input | Boolean | true | Open color picker when user clicks on the input field. If disabled, color picker will only open when clicking on the preview. | | hasBackdrop | has-backdrop | Boolean | true | Dialog Backdrop. https://material.angularjs.org/latest/api/service/$mdDialog | | clickOutsideToClose | click-outside-to-close | Boolean | true | Dialog click outside to close. https://material.angularjs.org/latest/api/service/$mdDialog | -| skipHide | skip-hide | Boolean | true | Allows for opening multiple dialogs. https://github.com/angular/material/issues/7262 | +| multiple `(skipHide)` | multiple | Boolean | true | Allows for opening multiple dialogs. https://github.com/angular/material/issues/7262 | | preserveScope | preserve-scope | Boolean | true | Dialog preserveScope. https://material.angularjs.org/latest/api/service/$mdDialog | | clearButton | md-color-clear-button | Boolean | true | Show the "clear" button inside of the input. | | preview | md-color-preview | Boolean | true | Show the color preview circle next to the input. | diff --git a/demo/js/app.js b/demo/js/app.js index 5f44aed..015bc00 100644 --- a/demo/js/app.js +++ b/demo/js/app.js @@ -1,36 +1,47 @@ -var app = angular.module('plunker', ['ngMaterial','ngCookies', 'mdColorPicker']); +var app = angular.module('plunker', ['ngMaterial', 'ngCookies', 'mdColorPicker']); -app.controller('MainCtrl', function($scope) { +app.controller('MainCtrl', function ($scope, $mdDialog) { $scope.textConfig = {}; $scope.textConfig.fonts = [ - 'Arial', - 'Arial Black', - 'Comic Sans MS', - 'Courier New', - 'Georgia', - 'Impact', - 'Times New Roman', - 'Trebuchet MS', - 'Verdana' - ]; - - $scope.textConfig.font; - $scope.textConfig.textColor; - $scope.textConfig.textBackground; - - $scope.textConfig.backgroundOptions = { - label: "Text Background", - icon: "font_download", - - hasBackdrop: true, - clickOutsideToClose: true, - random: true, - openOnInput: true, - - alphaChannel: false, - history: false, - defaultTab: 1, - }; - $scope.textConfig.showPreview = true; + 'Arial', + 'Arial Black', + 'Comic Sans MS', + 'Courier New', + 'Georgia', + 'Impact', + 'Times New Roman', + 'Trebuchet MS', + 'Verdana' + ]; + + $scope.textConfig.font; + $scope.textConfig.textColor; + $scope.textConfig.textBackground; + + $scope.textConfig.backgroundOptions = { + label: "Text Background", + icon: "font_download", + + hasBackdrop: true, + clickOutsideToClose: true, + random: true, + openOnInput: true, + + alphaChannel: false, + history: false, + defaultTab: 1, + }; + $scope.textConfig.showPreview = true; + + $scope.openDialog = function (event) { + $mdDialog.show({ + scope: $scope.$new(), + template: '
', + parent: angular.element(document.body), + targetEvent: event, + clickOutsideToClose: true + }); + + } }); diff --git a/dist/mdColorPicker.js b/dist/mdColorPicker.js index 6e49b61..9c33ef9 100644 --- a/dist/mdColorPicker.js +++ b/dist/mdColorPicker.js @@ -452,7 +452,7 @@ angular.module('mdColorPicker', []) openOnInput: '=?', hasBackdrop: '=?', clickOutsideToClose: '=?', - skipHide: '=?', + multiple: '=?', preserveScope: '=?', // Advanced options @@ -533,7 +533,7 @@ angular.module('mdColorPicker', []) // The only other ngModel changes $scope.clearValue = function clearValue() { - $scope.value = ''; + ngModel.$setViewValue(''); }; $scope.showColorPicker = function showColorPicker($event) { if ( didJustClose ) { @@ -548,7 +548,7 @@ angular.module('mdColorPicker', []) random: $scope.random, clickOutsideToClose: $scope.clickOutsideToClose, hasBackdrop: $scope.hasBackdrop, - skipHide: $scope.skipHide, + multiple: $scope.multiple, preserveScope: $scope.preserveScope, mdColorAlphaChannel: $scope.mdColorAlphaChannel, @@ -876,7 +876,7 @@ angular.module('mdColorPicker', []) options.defaultValue = options.defaultValue === undefined ? '#FFFFFF' : options.defaultValue; options.focusOnOpen = options.focusOnOpen === undefined ? false : options.focusOnOpen; options.preserveScope = options.preserveScope === undefined ? true : options.preserveScope; - options.skipHide = options.skipHide === undefined ? true : options.skipHide; + options.multiple = options.multiple === undefined ? true : options.multiple; // mdColorPicker Properties options.mdColorAlphaChannel = options.mdColorAlphaChannel === undefined ? false : options.mdColorAlphaChannel; @@ -930,7 +930,7 @@ angular.module('mdColorPicker', []) options: options, }, preserveScope: options.preserveScope, - skipHide: options.skipHide, + multiple: options.multiple, targetEvent: options.$event, focusOnOpen: options.focusOnOpen, @@ -959,7 +959,7 @@ angular.module('mdColorPicker', []) }]); })( window, window.angular ); -angular.module("mdColorPicker").run(["$templateCache", function($templateCache) {$templateCache.put("mdColorPicker.tpl.html","
\n
\n
\n
\n \n \n \n \n \n \n \n
\n"); -$templateCache.put("mdColorPickerContainer.tpl.html","
\n
\n\n
\n\n
\n \n
\n \n
\n
\n \n \n \n \n \n \n
\n
\n
\n\n
\n \n \n \n \n \n \n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n
\n
\n
\n R\n
\n \n \n
\n \n
\n
\n
\n
\n G\n
\n \n \n
\n \n
\n
\n
\n
\n B\n
\n \n \n
\n \n
\n
\n
\n
\n A\n
\n \n \n
\n \n
\n
\n
\n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n
\n\n\n \n \n \n
\n \n \n \n
\n\n
\n"); -$templateCache.put("mdColorPickerDialog.tpl.html","\n
\n \n Cancel\n Select\n \n\n");}]); +angular.module("mdColorPicker").run(["$templateCache", function($templateCache) {$templateCache.put("mdColorPicker.tpl.html","
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n"); +$templateCache.put("mdColorPickerContainer.tpl.html","
\r\n
\r\n\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n R\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n G\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n B\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n A\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n\r\n
\r\n"); +$templateCache.put("mdColorPickerDialog.tpl.html","\r\n
\r\n \r\n Cancel\r\n Select\r\n \r\n\r\n");}]); })(angular, window, tinycolor); \ No newline at end of file diff --git a/dist/mdColorPicker.min.js b/dist/mdColorPicker.min.js index e452857..e28ddb1 100644 --- a/dist/mdColorPicker.min.js +++ b/dist/mdColorPicker.min.js @@ -4,4 +4,4 @@ * @link https://github.com/brianpkelley/md-color-picker * @license MIT */ -!function(e,o,t){!function(e,o,r){"use strict";function l(){return function(e){var t=new a(e,"spectrum"!=e);return t=o.merge(t,n[e]),{template:'
',link:t.get,controller:function(){}}}}function a(e,t){this.type=e,this.restrictX=t,this.offset={x:null,y:null},this.height=255,this.$scope=null,this.$element=null,this.get=o.bind(this,function(e,t,r){this.$scope=e,this.$element=t,this.canvas=this.$element.children()[0],this.marker=this.$element.children()[1],this.context=this.canvas.getContext("2d"),this.currentColor=this.$scope.color.toRgb(),this.currentHue=this.$scope.color.toHsv().h,this.$element.on("touchstart mousedown",o.bind(this,this.onMouseDown)),this.$scope.$on("mdColorPicker:colorSet",o.bind(this,this.onColorSet)),this.extra&&this.extra(),this.draw()})}var n={hue:{getColorByPoint:function(e,o){var r=this.getImageData(e,o);this.setMarkerCenter(o);var l=new t({r:r[0],g:r[1],b:r[2]});return l.toHsl().h},draw:function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var e=this.context.createLinearGradient(90,0,90,this.height);e.addColorStop(.01,"rgba(255, 0, 0, 1.000)"),e.addColorStop(.167,"rgba(255, 0, 255, 1.000)"),e.addColorStop(.333,"rgba(0, 0, 255, 1.000)"),e.addColorStop(.5,"rgba(0, 255, 255, 1.000)"),e.addColorStop(.666,"rgba(0, 255, 0, 1.000)"),e.addColorStop(.828,"rgba(255, 255, 0, 1.000)"),e.addColorStop(.999,"rgba(255, 0, 0, 1.000)"),this.context.fillStyle=e,this.context.fillRect(0,0,this.canvas.width,this.height)}},alpha:{getColorByPoint:function(e,o){var t=this.getImageData(e,o);return this.setMarkerCenter(o),t[3]/255},draw:function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var e=this.context.createLinearGradient(90,0,90,this.height);e.addColorStop(.01,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 1.000)"),e.addColorStop(.99,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 0.000)"),this.context.fillStyle=e,this.context.fillRect(-1,-1,this.canvas.width+2,this.height+2)},extra:function(){this.$scope.$on("mdColorPicker:spectrumColorChange",o.bind(this,function(e,o){this.currentColor=o.color,this.draw()}))}},spectrum:{getColorByPoint:function(e,o){var t=this.getImageData(e,o);return this.setMarkerCenter(e,o),{r:t[0],g:t[1],b:t[2]}},draw:function(){this.canvas.height=this.height,this.canvas.width=this.height,this.context.clearRect(0,0,this.canvas.width,this.canvas.height);var e=this.context.createLinearGradient(0,0,this.canvas.width,0);e.addColorStop(.01,"rgba(255, 255, 255, 1.000)"),e.addColorStop(.99,"rgba(255, 255, 255, 0.000)");var o=this.context.createLinearGradient(0,0,0,this.canvas.height);o.addColorStop(.01,"rgba(0, 0, 0, 0.000)"),o.addColorStop(.99,"rgba(0, 0, 0, 1.000)"),this.context.fillStyle="hsl( "+this.currentHue+", 100%, 50%)",this.context.fillRect(0,0,this.canvas.width,this.canvas.height),this.context.fillStyle=e,this.context.fillRect(-1,-1,this.canvas.width+2,this.canvas.height+2),this.context.fillStyle=o,this.context.fillRect(-1,-1,this.canvas.width+2,this.canvas.height+2)},extra:function(){this.$scope.$on("mdColorPicker:spectrumHueChange",o.bind(this,function(e,o){this.currentHue=o.hue,this.draw();var t=this.getMarkerCenter(),r=this.getColorByPoint(t.x,t.y);this.setColor(r)}))}}};a.prototype.$window=o.element(e),a.prototype.getColorByMouse=function(e){var o=e.touches&&e.touches[0],t=o&&o.pageX||e.pageX,r=o&&o.pageY||e.pageY,l=Math.round(t-this.offset.x),a=Math.round(r-this.offset.y);return this.getColorByPoint(l,a)},a.prototype.setMarkerCenter=function(e,t){var l,a,n,i,d=-1*this.marker.offsetWidth/2,c=-1*this.marker.offsetHeight/2;t===r?(n=e+c,i=Math.round(Math.max(Math.min(this.height-1+c,n),c)),a=0):(l=e+d,n=t+c,a=Math.floor(Math.max(Math.min(this.height+d,l),d)),i=Math.floor(Math.max(Math.min(this.height+c,n),c))),o.element(this.marker).css({left:a+"px"}),o.element(this.marker).css({top:i+"px"})},a.prototype.getMarkerCenter=function(){var e={x:this.marker.offsetLeft+Math.floor(this.marker.offsetWidth/2),y:this.marker.offsetTop+Math.floor(this.marker.offsetHeight/2)};return e},a.prototype.getImageData=function(e,o){e=Math.max(0,Math.min(e,this.canvas.width-1)),o=Math.max(0,Math.min(o,this.canvas.height-1));var t=this.context.getImageData(e,o,1,1).data;return t},a.prototype.onMouseDown=function(e){e.preventDefault(),e.stopImmediatePropagation(),this.$scope.previewUnfocus(),this.$element.css({cursor:"none"}),this.offset.x=this.canvas.getBoundingClientRect().left,this.offset.y=this.canvas.getBoundingClientRect().top;var t=o.bind(this,function(e){switch(this.type){case"hue":var o=this.getColorByMouse(e);this.$scope.$broadcast("mdColorPicker:spectrumHueChange",{hue:o});break;case"alpha":var t=this.getColorByMouse(e);this.$scope.color.setAlpha(t),this.$scope.alpha=t,this.$scope.$apply();break;case"spectrum":var r=this.getColorByMouse(e);this.setColor(r)}});this.$window.on("touchmove mousemove",t),this.$window.one("touchend mouseup",o.bind(this,function(e){this.$window.off("touchmove mousemove",t),this.$element.css({cursor:"crosshair"})})),t(e)},a.prototype.setColor=function(e){this.$scope.color._r=e.r,this.$scope.color._g=e.g,this.$scope.color._b=e.b,this.$scope.$apply(),this.$scope.$broadcast("mdColorPicker:spectrumColorChange",{color:e})},a.prototype.onColorSet=function(e,o){switch(this.type){case"hue":var t=this.$scope.color.toHsv();this.setMarkerCenter(this.canvas.height-this.canvas.height*(t.h/360));break;case"alpha":this.currentColor=o.color.toRgb(),this.draw();var r=o.color.getAlpha(),l=this.canvas.height-this.canvas.height*r;this.setMarkerCenter(l);break;case"spectrum":var t=o.color.toHsv();this.currentHue=t.h,this.draw();var a=this.canvas.width*t.s,n=this.canvas.height-this.canvas.height*t.v;this.setMarkerCenter(a,n)}},o.module("mdColorPicker",[]).run(["$templateCache",function(e){var o={clear:'',gradient:'',tune:'',view_module:'',view_headline:'',history:'',clear_all:''};for(var t in o)o.hasOwnProperty(t)&&e.put([t,"svg"].join("."),['',o[t],""].join(""))}]).factory("mdColorGradientCanvas",l).factory("mdColorPickerHistory",["$injector",function(e){var o=[],r=[],l=!1;try{l=e.get("$cookies")}catch(a){}if(l)for(var n=l.getObject("mdColorPickerHistory")||[],i=0;id&&(o.pop(),r.pop()),l&&l.putObject("mdColorPickerHistory",r)},get:function(){return o},reset:function(){o=[],r=[],l&&l.putObject("mdColorPickerHistory",r)}}}]).directive("mdColorPicker",["$timeout","mdColorPickerHistory",function(e,o){return{templateUrl:"mdColorPicker.tpl.html",require:"^ngModel",scope:{options:"=mdColorPicker",type:"@",label:"@?",icon:"@?",random:"@?","default":"@?",openOnInput:"=?",hasBackdrop:"=?",clickOutsideToClose:"=?",skipHide:"=?",preserveScope:"=?",mdColorClearButton:"=?",mdColorPreview:"=?",mdColorAlphaChannel:"=?",mdColorSpectrum:"=?",mdColorSliders:"=?",mdColorGenericPalette:"=?",mdColorMaterialPalette:"=?",mdColorHistory:"=?",mdColorHex:"=?",mdColorRgb:"=?",mdColorHsl:"=?",mdColorDefaultTab:"=?"},controller:["$scope","$element","$attrs","$mdDialog","$mdColorPicker",function(e,o,t,l,a){var n=!1;if(e.options!==r)for(var i in e.options)if(e.options.hasOwnProperty(i)){var d;d=i,e.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(d="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),!d||e[d]!==r&&""!==e[d]||(e[d]=e.options[i])}var c=o.controller("ngModel"),s=function(o){e.value=o||c.$viewValue||""};e.mdColorClearButton=e.mdColorClearButton===r?!0:e.mdColorClearButton,e.mdColorPreview=e.mdColorPreview===r?!0:e.mdColorPreview,e.mdColorAlphaChannel=e.mdColorAlphaChannel===r?!0:e.mdColorAlphaChannel,e.mdColorSpectrum=e.mdColorSpectrum===r?!0:e.mdColorSpectrum,e.mdColorSliders=e.mdColorSliders===r?!0:e.mdColorSliders,e.mdColorGenericPalette=e.mdColorGenericPalette===r?!0:e.mdColorGenericPalette,e.mdColorMaterialPalette=e.mdColorMaterialPalette===r?!0:e.mdColorMaterialPalette,e.mdColorHistory=e.mdColorHistory===r?!0:e.mdColorHistory,e.mdColorHex=e.mdColorHex===r?!0:e.mdColorHex,e.mdColorRgb=e.mdColorRgb===r?!0:e.mdColorRgb,e.mdColorHsl=e.mdColorHsl===r?!0:e.mdColorHsl,s(),e.$watch(function(){return c.$modelValue},function(e){s(e)}),e.$watch("value",function(e,o){""!==e&&"undefined"!=typeof e&&e&&e!==o&&c.$setViewValue(e)}),e.clearValue=function(){e.value=""},e.showColorPicker=function(o){n||a.show({value:e.value,defaultValue:e["default"],random:e.random,clickOutsideToClose:e.clickOutsideToClose,hasBackdrop:e.hasBackdrop,skipHide:e.skipHide,preserveScope:e.preserveScope,mdColorAlphaChannel:e.mdColorAlphaChannel,mdColorSpectrum:e.mdColorSpectrum,mdColorSliders:e.mdColorSliders,mdColorGenericPalette:e.mdColorGenericPalette,mdColorMaterialPalette:e.mdColorMaterialPalette,mdColorHistory:e.mdColorHistory,mdColorHex:e.mdColorHex,mdColorRgb:e.mdColorRgb,mdColorHsl:e.mdColorHsl,mdColorDefaultTab:e.mdColorDefaultTab,$event:o}).then(function(o){e.value=o})}}],compile:function(e,o){o.type=o.type!==r?o.type:0}}}]).directive("mdColorPickerContainer",["$compile","$timeout","$mdColorPalette","mdColorPickerHistory",function(e,r,l,a){return{templateUrl:"mdColorPickerContainer.tpl.html",scope:{value:"=?","default":"@",random:"@",ok:"=?",mdColorAlphaChannel:"=",mdColorSpectrum:"=",mdColorSliders:"=",mdColorGenericPalette:"=",mdColorMaterialPalette:"=",mdColorHistory:"=",mdColorHex:"=",mdColorRgb:"=",mdColorHsl:"=",mdColorDefaultTab:"="},controller:["$scope","$element","$attrs",function(e,n,i){function d(o){var t=0;if(o&&"string"==typeof o){for(var r="mdColor"+o.slice(0,1).toUpperCase()+o.slice(1),l=["mdColorSpectrum","mdColorSliders","mdColorGenericPalette","mdColorMaterialPalette","mdColorHistory"],a=0;a=0?e.type=0:e.value.search("rgb")>=0?e.type=1:e.value.search("hsl")>=0&&(e.type=2),e.color=new t(e.value||e["default"]),e.alpha=e.color.getAlpha(),e.history=a,e.materialFamily=[],e.whichPane=d(e.mdColorDefaultTab),e.inputFocus=!1;var h=9;2*Math.PI/h;e.palette=[["rgb(255, 204, 204)","rgb(255, 230, 204)","rgb(255, 255, 204)","rgb(204, 255, 204)","rgb(204, 255, 230)","rgb(204, 255, 255)","rgb(204, 230, 255)","rgb(204, 204, 255)","rgb(230, 204, 255)","rgb(255, 204, 255)"],["rgb(255, 153, 153)","rgb(255, 204, 153)","rgb(255, 255, 153)","rgb(153, 255, 153)","rgb(153, 255, 204)","rgb(153, 255, 255)","rgb(153, 204, 255)","rgb(153, 153, 255)","rgb(204, 153, 255)","rgb(255, 153, 255)"],["rgb(255, 102, 102)","rgb(255, 179, 102)","rgb(255, 255, 102)","rgb(102, 255, 102)","rgb(102, 255, 179)","rgb(102, 255, 255)","rgb(102, 179, 255)","rgb(102, 102, 255)","rgb(179, 102, 255)","rgb(255, 102, 255)"],["rgb(255, 51, 51)","rgb(255, 153, 51)","rgb(255, 255, 51)","rgb(51, 255, 51)","rgb(51, 255, 153)","rgb(51, 255, 255)","rgb(51, 153, 255)","rgb(51, 51, 255)","rgb(153, 51, 255)","rgb(255, 51, 255)"],["rgb(255, 0, 0)","rgb(255, 128, 0)","rgb(255, 255, 0)","rgb(0, 255, 0)","rgb(0, 255, 128)","rgb(0, 255, 255)","rgb(0, 128, 255)","rgb(0, 0, 255)","rgb(128, 0, 255)","rgb(255, 0, 255)"],["rgb(245, 0, 0)","rgb(245, 123, 0)","rgb(245, 245, 0)","rgb(0, 245, 0)","rgb(0, 245, 123)","rgb(0, 245, 245)","rgb(0, 123, 245)","rgb(0, 0, 245)","rgb(123, 0, 245)","rgb(245, 0, 245)"],["rgb(214, 0, 0)","rgb(214, 108, 0)","rgb(214, 214, 0)","rgb(0, 214, 0)","rgb(0, 214, 108)","rgb(0, 214, 214)","rgb(0, 108, 214)","rgb(0, 0, 214)","rgb(108, 0, 214)","rgb(214, 0, 214)"],["rgb(163, 0, 0)","rgb(163, 82, 0)","rgb(163, 163, 0)","rgb(0, 163, 0)","rgb(0, 163, 82)","rgb(0, 163, 163)","rgb(0, 82, 163)","rgb(0, 0, 163)","rgb(82, 0, 163)","rgb(163, 0, 163)"],["rgb(92, 0, 0)","rgb(92, 46, 0)","rgb(92, 92, 0)","rgb(0, 92, 0)","rgb(0, 92, 46)","rgb(0, 92, 92)","rgb(0, 46, 92)","rgb(0, 0, 92)","rgb(46, 0, 92)","rgb(92, 0, 92)"],["rgb(255, 255, 255)","rgb(205, 205, 205)","rgb(178, 178, 178)","rgb(153, 153, 153)","rgb(127, 127, 127)","rgb(102, 102, 102)","rgb(76, 76, 76)","rgb(51, 51, 51)","rgb(25, 25, 25)","rgb(0, 0, 0)"]],e.materialPalette=l,e.isDark=function(e){return o.isArray(e)?t({r:e[0],g:e[1],b:e[2]}).isDark():t(e).isDark()},e.previewFocus=function(){e.inputFocus=!0,r(function(){s[0].setSelectionRange(0,s[0].value.length)})},e.previewUnfocus=function(){e.inputFocus=!1,s[0].blur()},e.previewBlur=function(){e.inputFocus=!1,e.setValue()},e.previewKeyDown=function(o){13==o.keyCode&&e.ok&&e.ok()},e.setPaletteColor=function(o){r(function(){e.color=t(o.target.style.backgroundColor)})},e.setValue=function(){e.color&&e.color&&m[e.type]&&"rgba(0, 0, 0, 0)"!==e.color.toRgbString()&&(e.value=e.color[m[e.type]]())},e.changeValue=function(){e.color=t(e.value),e.$broadcast("mdColorPicker:colorSet",{color:e.color})},e.$watch("color._a",function(o){e.color.setAlpha(o)},!0),e.$watch("whichPane",function(o){e.$broadcast("mdColorPicker:colorSet",{color:e.color})}),e.$watch("type",function(){s.removeClass("switch"),r(function(){s.addClass("switch")})}),e.$watchGroup(["color.toRgbString()","type"],function(o){e.inputFocus||e.setValue()}),r(function(){e.$broadcast("mdColorPicker:colorSet",{color:e.color}),s.focus(),e.previewFocus()})}],link:function(e,t,l){function a(){var r=o.element(t[0].querySelector(".md-color-picker-palette")),l=o.element(t[0].querySelector(".md-color-picker-material-palette")),a=o.element('
'),n=o.element('
'),i=o.element('
'),d=o.element('
');o.forEach(e.palette,function(t,l){var i=a.clone();o.forEach(t,function(o){var t=n.clone();t.css({height:"25.5px",backgroundColor:o}),t.bind("click",e.setPaletteColor),i.append(t)}),r.append(i)}),o.forEach(e.materialPalette,function(t,r){var a=i.clone();a.html(""+r.replace("-"," ")+""),a.css({height:"75px",backgroundColor:"rgb("+t[500].value[0]+","+t[500].value[1]+","+t[500].value[2]+")"}),e.isDark(t[500].value)&&a.addClass("dark"),l.append(a),o.forEach(t,function(o,t){var r=d.clone();r.css({height:"33px",backgroundColor:"rgb("+o.value[0]+","+o.value[1]+","+o.value[2]+")"}),e.isDark(o.value)&&r.addClass("dark"),r.html(""+t+""),r.bind("click",e.setPaletteColor),l.append(r)})})}t[0].getElementsByTagName("md-tab");r(function(){a()})}}}]).directive("mdColorPickerHue",["mdColorGradientCanvas",function(e){return new e("hue")}]).directive("mdColorPickerAlpha",["mdColorGradientCanvas",function(e){return new e("alpha")}]).directive("mdColorPickerSpectrum",["mdColorGradientCanvas",function(e){return new e("spectrum")}]).factory("$mdColorPicker",["$q","$mdDialog","mdColorPickerHistory",function(e,o,l){var a;return{show:function(e){return e===r&&(e={}),e.hasBackdrop=e.hasBackdrop===r?!0:e.hasBackdrop,e.clickOutsideToClose=e.clickOutsideToClose===r?!0:e.clickOutsideToClose,e.defaultValue=e.defaultValue===r?"#FFFFFF":e.defaultValue,e.focusOnOpen=e.focusOnOpen===r?!1:e.focusOnOpen,e.preserveScope=e.preserveScope===r?!0:e.preserveScope,e.skipHide=e.skipHide===r?!0:e.skipHide,e.mdColorAlphaChannel=e.mdColorAlphaChannel===r?!1:e.mdColorAlphaChannel,e.mdColorSpectrum=e.mdColorSpectrum===r?!0:e.mdColorSpectrum,e.mdColorSliders=e.mdColorSliders===r?!0:e.mdColorSliders,e.mdColorGenericPalette=e.mdColorGenericPalette===r?!0:e.mdColorGenericPalette,e.mdColorMaterialPalette=e.mdColorMaterialPalette===r?!0:e.mdColorMaterialPalette,e.mdColorHistory=e.mdColorHistory===r?!0:e.mdColorHistory,e.mdColorRgb=e.mdColorRgb===r?!0:e.mdColorRgb,e.mdColorHsl=e.mdColorHsl===r?!0:e.mdColorHsl,e.mdColorHex=e.mdColorHex===r||!e.mdColorRgb&&!e.mdColorHsl?!0:e.mdColorHex,e.mdColorAlphaChannel=e.mdColorRgb||e.mdColorHsl?e.mdColorAlphaChannel:!1,a=o.show({templateUrl:"mdColorPickerDialog.tpl.html",hasBackdrop:e.hasBackdrop,clickOutsideToClose:e.clickOutsideToClose,controller:["$scope","options",function(e,t){e.close=function(){o.cancel()},e.ok=function(){o.hide(e.value)},e.hide=e.ok,e.value=t.value,e["default"]=t.defaultValue,e.random=t.random,e.mdColorAlphaChannel=t.mdColorAlphaChannel,e.mdColorSpectrum=t.mdColorSpectrum,e.mdColorSliders=t.mdColorSliders,e.mdColorGenericPalette=t.mdColorGenericPalette,e.mdColorMaterialPalette=t.mdColorMaterialPalette,e.mdColorHistory=t.mdColorHistory,e.mdColorHex=t.mdColorHex,e.mdColorRgb=t.mdColorRgb,e.mdColorHsl=t.mdColorHsl,e.mdColorDefaultTab=t.mdColorDefaultTab}],locals:{options:e},preserveScope:e.preserveScope,skipHide:e.skipHide,targetEvent:e.$event,focusOnOpen:e.focusOnOpen,autoWrap:!1,onShowing:function(){},onComplete:function(){}}),a.then(function(e){l.add(new t(e))},function(){}),a},hide:function(){return a.hide()},cancel:function(){return a.cancel()}}}])}(o,o.angular),e.module("mdColorPicker").run(["$templateCache",function(e){e.put("mdColorPicker.tpl.html",'
\n
\n
\n
\n \n \n \n \n \n \n \n
\n'),e.put("mdColorPickerContainer.tpl.html",'
\n
\n\n
\n\n
\n \n
\n \n
\n
\n \n \n \n \n \n \n
\n
\n
\n\n
\n \n \n \n \n \n \n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n
\n
\n
\n R\n
\n \n \n
\n \n
\n
\n
\n
\n G\n
\n \n \n
\n \n
\n
\n
\n
\n B\n
\n \n \n
\n \n
\n
\n
\n
\n A\n
\n \n \n
\n \n
\n
\n
\n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n
\n\n\n \n \n \n
\n \n \n \n
\n\n
\n'),e.put("mdColorPickerDialog.tpl.html",'\n
\n \n Cancel\n Select\n \n\n')}])}(angular,window,tinycolor); \ No newline at end of file +!function(t,e,r){!function(t,e,o){"use strict";function l(){return function(t){var r=new a(t,"spectrum"!=t);return r=e.merge(r,n[t]),{template:'
',link:r.get,controller:function(){}}}}function a(t,r){this.type=t,this.restrictX=r,this.offset={x:null,y:null},this.height=255,this.$scope=null,this.$element=null,this.get=e.bind(this,function(t,r,o){this.$scope=t,this.$element=r,this.canvas=this.$element.children()[0],this.marker=this.$element.children()[1],this.context=this.canvas.getContext("2d"),this.currentColor=this.$scope.color.toRgb(),this.currentHue=this.$scope.color.toHsv().h,this.$element.on("touchstart mousedown",e.bind(this,this.onMouseDown)),this.$scope.$on("mdColorPicker:colorSet",e.bind(this,this.onColorSet)),this.extra&&this.extra(),this.draw()})}var n={hue:{getColorByPoint:function(t,e){var o=this.getImageData(t,e);this.setMarkerCenter(e);var l=new r({r:o[0],g:o[1],b:o[2]});return l.toHsl().h},draw:function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var t=this.context.createLinearGradient(90,0,90,this.height);t.addColorStop(.01,"rgba(255, 0, 0, 1.000)"),t.addColorStop(.167,"rgba(255, 0, 255, 1.000)"),t.addColorStop(.333,"rgba(0, 0, 255, 1.000)"),t.addColorStop(.5,"rgba(0, 255, 255, 1.000)"),t.addColorStop(.666,"rgba(0, 255, 0, 1.000)"),t.addColorStop(.828,"rgba(255, 255, 0, 1.000)"),t.addColorStop(.999,"rgba(255, 0, 0, 1.000)"),this.context.fillStyle=t,this.context.fillRect(0,0,this.canvas.width,this.height)}},alpha:{getColorByPoint:function(t,e){var r=this.getImageData(t,e);return this.setMarkerCenter(e),r[3]/255},draw:function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var t=this.context.createLinearGradient(90,0,90,this.height);t.addColorStop(.01,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 1.000)"),t.addColorStop(.99,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 0.000)"),this.context.fillStyle=t,this.context.fillRect(-1,-1,this.canvas.width+2,this.height+2)},extra:function(){this.$scope.$on("mdColorPicker:spectrumColorChange",e.bind(this,function(t,e){this.currentColor=e.color,this.draw()}))}},spectrum:{getColorByPoint:function(t,e){var r=this.getImageData(t,e);return this.setMarkerCenter(t,e),{r:r[0],g:r[1],b:r[2]}},draw:function(){this.canvas.height=this.height,this.canvas.width=this.height,this.context.clearRect(0,0,this.canvas.width,this.canvas.height);var t=this.context.createLinearGradient(0,0,this.canvas.width,0);t.addColorStop(.01,"rgba(255, 255, 255, 1.000)"),t.addColorStop(.99,"rgba(255, 255, 255, 0.000)");var e=this.context.createLinearGradient(0,0,0,this.canvas.height);e.addColorStop(.01,"rgba(0, 0, 0, 0.000)"),e.addColorStop(.99,"rgba(0, 0, 0, 1.000)"),this.context.fillStyle="hsl( "+this.currentHue+", 100%, 50%)",this.context.fillRect(0,0,this.canvas.width,this.canvas.height),this.context.fillStyle=t,this.context.fillRect(-1,-1,this.canvas.width+2,this.canvas.height+2),this.context.fillStyle=e,this.context.fillRect(-1,-1,this.canvas.width+2,this.canvas.height+2)},extra:function(){this.$scope.$on("mdColorPicker:spectrumHueChange",e.bind(this,function(t,e){this.currentHue=e.hue,this.draw();var r=this.getMarkerCenter(),o=this.getColorByPoint(r.x,r.y);this.setColor(o)}))}}};a.prototype.$window=e.element(t),a.prototype.getColorByMouse=function(t){var e=t.touches&&t.touches[0],r=e&&e.pageX||t.pageX,o=e&&e.pageY||t.pageY,l=Math.round(r-this.offset.x),a=Math.round(o-this.offset.y);return this.getColorByPoint(l,a)},a.prototype.setMarkerCenter=function(t,r){var l,a,n,i,c=-1*this.marker.offsetWidth/2,d=-1*this.marker.offsetHeight/2;r===o?(n=t+d,i=Math.round(Math.max(Math.min(this.height-1+d,n),d)),a=0):(l=t+c,n=r+d,a=Math.floor(Math.max(Math.min(this.height+c,l),c)),i=Math.floor(Math.max(Math.min(this.height+d,n),d))),e.element(this.marker).css({left:a+"px"}),e.element(this.marker).css({top:i+"px"})},a.prototype.getMarkerCenter=function(){var t={x:this.marker.offsetLeft+Math.floor(this.marker.offsetWidth/2),y:this.marker.offsetTop+Math.floor(this.marker.offsetHeight/2)};return t},a.prototype.getImageData=function(t,e){t=Math.max(0,Math.min(t,this.canvas.width-1)),e=Math.max(0,Math.min(e,this.canvas.height-1));var r=this.context.getImageData(t,e,1,1).data;return r},a.prototype.onMouseDown=function(t){t.preventDefault(),t.stopImmediatePropagation(),this.$scope.previewUnfocus(),this.$element.css({cursor:"none"}),this.offset.x=this.canvas.getBoundingClientRect().left,this.offset.y=this.canvas.getBoundingClientRect().top;var r=e.bind(this,function(t){switch(this.type){case"hue":var e=this.getColorByMouse(t);this.$scope.$broadcast("mdColorPicker:spectrumHueChange",{hue:e});break;case"alpha":var r=this.getColorByMouse(t);this.$scope.color.setAlpha(r),this.$scope.alpha=r,this.$scope.$apply();break;case"spectrum":var o=this.getColorByMouse(t);this.setColor(o)}});this.$window.on("touchmove mousemove",r),this.$window.one("touchend mouseup",e.bind(this,function(t){this.$window.off("touchmove mousemove",r),this.$element.css({cursor:"crosshair"})})),r(t)},a.prototype.setColor=function(t){this.$scope.color._r=t.r,this.$scope.color._g=t.g,this.$scope.color._b=t.b,this.$scope.$apply(),this.$scope.$broadcast("mdColorPicker:spectrumColorChange",{color:t})},a.prototype.onColorSet=function(t,e){switch(this.type){case"hue":var r=this.$scope.color.toHsv();this.setMarkerCenter(this.canvas.height-this.canvas.height*(r.h/360));break;case"alpha":this.currentColor=e.color.toRgb(),this.draw();var o=e.color.getAlpha(),l=this.canvas.height-this.canvas.height*o;this.setMarkerCenter(l);break;case"spectrum":var r=e.color.toHsv();this.currentHue=r.h,this.draw();var a=this.canvas.width*r.s,n=this.canvas.height-this.canvas.height*r.v;this.setMarkerCenter(a,n)}},e.module("mdColorPicker",[]).run(["$templateCache",function(t){var e={clear:'',gradient:'',tune:'',view_module:'',view_headline:'',history:'',clear_all:''};for(var r in e)e.hasOwnProperty(r)&&t.put([r,"svg"].join("."),['',e[r],""].join(""))}]).factory("mdColorGradientCanvas",l).factory("mdColorPickerHistory",["$injector",function(t){var e=[],o=[],l=!1;try{l=t.get("$cookies")}catch(a){}if(l)for(var n=l.getObject("mdColorPickerHistory")||[],i=0;ic&&(e.pop(),o.pop()),l&&l.putObject("mdColorPickerHistory",o)},get:function(){return e},reset:function(){e=[],o=[],l&&l.putObject("mdColorPickerHistory",o)}}}]).directive("mdColorPicker",["$timeout","mdColorPickerHistory",function(t,e){return{templateUrl:"mdColorPicker.tpl.html",require:"^ngModel",scope:{options:"=mdColorPicker",type:"@",label:"@?",icon:"@?",random:"@?","default":"@?",openOnInput:"=?",hasBackdrop:"=?",clickOutsideToClose:"=?",multiple:"=?",preserveScope:"=?",mdColorClearButton:"=?",mdColorPreview:"=?",mdColorAlphaChannel:"=?",mdColorSpectrum:"=?",mdColorSliders:"=?",mdColorGenericPalette:"=?",mdColorMaterialPalette:"=?",mdColorHistory:"=?",mdColorHex:"=?",mdColorRgb:"=?",mdColorHsl:"=?",mdColorDefaultTab:"=?"},controller:["$scope","$element","$attrs","$mdDialog","$mdColorPicker",function(t,e,r,l,a){var n=!1;if(t.options!==o)for(var i in t.options)if(t.options.hasOwnProperty(i)){var c;c=i,t.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(c="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),!c||t[c]!==o&&""!==t[c]||(t[c]=t.options[i])}var d=e.controller("ngModel"),s=function(e){t.value=e||d.$viewValue||""};t.mdColorClearButton=t.mdColorClearButton===o||t.mdColorClearButton,t.mdColorPreview=t.mdColorPreview===o||t.mdColorPreview,t.mdColorAlphaChannel=t.mdColorAlphaChannel===o||t.mdColorAlphaChannel,t.mdColorSpectrum=t.mdColorSpectrum===o||t.mdColorSpectrum,t.mdColorSliders=t.mdColorSliders===o||t.mdColorSliders,t.mdColorGenericPalette=t.mdColorGenericPalette===o||t.mdColorGenericPalette,t.mdColorMaterialPalette=t.mdColorMaterialPalette===o||t.mdColorMaterialPalette,t.mdColorHistory=t.mdColorHistory===o||t.mdColorHistory,t.mdColorHex=t.mdColorHex===o||t.mdColorHex,t.mdColorRgb=t.mdColorRgb===o||t.mdColorRgb,t.mdColorHsl=t.mdColorHsl===o||t.mdColorHsl,s(),t.$watch(function(){return d.$modelValue},function(t){s(t)}),t.$watch("value",function(t,e){""!==t&&"undefined"!=typeof t&&t&&t!==e&&d.$setViewValue(t)}),t.clearValue=function(){d.$setViewValue("")},t.showColorPicker=function(e){n||a.show({value:t.value,defaultValue:t["default"],random:t.random,clickOutsideToClose:t.clickOutsideToClose,hasBackdrop:t.hasBackdrop,multiple:t.multiple,preserveScope:t.preserveScope,mdColorAlphaChannel:t.mdColorAlphaChannel,mdColorSpectrum:t.mdColorSpectrum,mdColorSliders:t.mdColorSliders,mdColorGenericPalette:t.mdColorGenericPalette,mdColorMaterialPalette:t.mdColorMaterialPalette,mdColorHistory:t.mdColorHistory,mdColorHex:t.mdColorHex,mdColorRgb:t.mdColorRgb,mdColorHsl:t.mdColorHsl,mdColorDefaultTab:t.mdColorDefaultTab,$event:e}).then(function(e){t.value=e})}}],compile:function(t,e){e.type=e.type!==o?e.type:0}}}]).directive("mdColorPickerContainer",["$compile","$timeout","$mdColorPalette","mdColorPickerHistory",function(t,o,l,a){return{templateUrl:"mdColorPickerContainer.tpl.html",scope:{value:"=?","default":"@",random:"@",ok:"=?",mdColorAlphaChannel:"=",mdColorSpectrum:"=",mdColorSliders:"=",mdColorGenericPalette:"=",mdColorMaterialPalette:"=",mdColorHistory:"=",mdColorHex:"=",mdColorRgb:"=",mdColorHsl:"=",mdColorDefaultTab:"="},controller:["$scope","$element","$attrs",function(t,n,i){function c(e){var r=0;if(e&&"string"==typeof e){for(var o="mdColor"+e.slice(0,1).toUpperCase()+e.slice(1),l=["mdColorSpectrum","mdColorSliders","mdColorGenericPalette","mdColorMaterialPalette","mdColorHistory"],a=0;a=0?t.type=0:t.value.search("rgb")>=0?t.type=1:t.value.search("hsl")>=0&&(t.type=2),t.color=new r(t.value||t["default"]),t.alpha=t.color.getAlpha(),t.history=a,t.materialFamily=[],t.whichPane=c(t.mdColorDefaultTab),t.inputFocus=!1;var h=9;2*Math.PI/h;t.palette=[["rgb(255, 204, 204)","rgb(255, 230, 204)","rgb(255, 255, 204)","rgb(204, 255, 204)","rgb(204, 255, 230)","rgb(204, 255, 255)","rgb(204, 230, 255)","rgb(204, 204, 255)","rgb(230, 204, 255)","rgb(255, 204, 255)"],["rgb(255, 153, 153)","rgb(255, 204, 153)","rgb(255, 255, 153)","rgb(153, 255, 153)","rgb(153, 255, 204)","rgb(153, 255, 255)","rgb(153, 204, 255)","rgb(153, 153, 255)","rgb(204, 153, 255)","rgb(255, 153, 255)"],["rgb(255, 102, 102)","rgb(255, 179, 102)","rgb(255, 255, 102)","rgb(102, 255, 102)","rgb(102, 255, 179)","rgb(102, 255, 255)","rgb(102, 179, 255)","rgb(102, 102, 255)","rgb(179, 102, 255)","rgb(255, 102, 255)"],["rgb(255, 51, 51)","rgb(255, 153, 51)","rgb(255, 255, 51)","rgb(51, 255, 51)","rgb(51, 255, 153)","rgb(51, 255, 255)","rgb(51, 153, 255)","rgb(51, 51, 255)","rgb(153, 51, 255)","rgb(255, 51, 255)"],["rgb(255, 0, 0)","rgb(255, 128, 0)","rgb(255, 255, 0)","rgb(0, 255, 0)","rgb(0, 255, 128)","rgb(0, 255, 255)","rgb(0, 128, 255)","rgb(0, 0, 255)","rgb(128, 0, 255)","rgb(255, 0, 255)"],["rgb(245, 0, 0)","rgb(245, 123, 0)","rgb(245, 245, 0)","rgb(0, 245, 0)","rgb(0, 245, 123)","rgb(0, 245, 245)","rgb(0, 123, 245)","rgb(0, 0, 245)","rgb(123, 0, 245)","rgb(245, 0, 245)"],["rgb(214, 0, 0)","rgb(214, 108, 0)","rgb(214, 214, 0)","rgb(0, 214, 0)","rgb(0, 214, 108)","rgb(0, 214, 214)","rgb(0, 108, 214)","rgb(0, 0, 214)","rgb(108, 0, 214)","rgb(214, 0, 214)"],["rgb(163, 0, 0)","rgb(163, 82, 0)","rgb(163, 163, 0)","rgb(0, 163, 0)","rgb(0, 163, 82)","rgb(0, 163, 163)","rgb(0, 82, 163)","rgb(0, 0, 163)","rgb(82, 0, 163)","rgb(163, 0, 163)"],["rgb(92, 0, 0)","rgb(92, 46, 0)","rgb(92, 92, 0)","rgb(0, 92, 0)","rgb(0, 92, 46)","rgb(0, 92, 92)","rgb(0, 46, 92)","rgb(0, 0, 92)","rgb(46, 0, 92)","rgb(92, 0, 92)"],["rgb(255, 255, 255)","rgb(205, 205, 205)","rgb(178, 178, 178)","rgb(153, 153, 153)","rgb(127, 127, 127)","rgb(102, 102, 102)","rgb(76, 76, 76)","rgb(51, 51, 51)","rgb(25, 25, 25)","rgb(0, 0, 0)"]],t.materialPalette=l,t.isDark=function(t){return e.isArray(t)?r({r:t[0],g:t[1],b:t[2]}).isDark():r(t).isDark()},t.previewFocus=function(){t.inputFocus=!0,o(function(){s[0].setSelectionRange(0,s[0].value.length)})},t.previewUnfocus=function(){t.inputFocus=!1,s[0].blur()},t.previewBlur=function(){t.inputFocus=!1,t.setValue()},t.previewKeyDown=function(e){13==e.keyCode&&t.ok&&t.ok()},t.setPaletteColor=function(e){o(function(){t.color=r(e.target.style.backgroundColor)})},t.setValue=function(){t.color&&t.color&&m[t.type]&&"rgba(0, 0, 0, 0)"!==t.color.toRgbString()&&(t.value=t.color[m[t.type]]())},t.changeValue=function(){t.color=r(t.value),t.$broadcast("mdColorPicker:colorSet",{color:t.color})},t.$watch("color._a",function(e){t.color.setAlpha(e)},!0),t.$watch("whichPane",function(e){t.$broadcast("mdColorPicker:colorSet",{color:t.color})}),t.$watch("type",function(){s.removeClass("switch"),o(function(){s.addClass("switch")})}),t.$watchGroup(["color.toRgbString()","type"],function(e){t.inputFocus||t.setValue()}),o(function(){t.$broadcast("mdColorPicker:colorSet",{color:t.color}),s.focus(),t.previewFocus()})}],link:function(t,r,l){function a(){var o=e.element(r[0].querySelector(".md-color-picker-palette")),l=e.element(r[0].querySelector(".md-color-picker-material-palette")),a=e.element('
'),n=e.element('
'),i=e.element('
'),c=e.element('
');e.forEach(t.palette,function(r,l){var i=a.clone();e.forEach(r,function(e){var r=n.clone();r.css({height:"25.5px",backgroundColor:e}),r.bind("click",t.setPaletteColor),i.append(r)}),o.append(i)}),e.forEach(t.materialPalette,function(r,o){var a=i.clone();a.html(""+o.replace("-"," ")+""),a.css({height:"75px",backgroundColor:"rgb("+r[500].value[0]+","+r[500].value[1]+","+r[500].value[2]+")"}),t.isDark(r[500].value)&&a.addClass("dark"),l.append(a),e.forEach(r,function(e,r){var o=c.clone();o.css({height:"33px",backgroundColor:"rgb("+e.value[0]+","+e.value[1]+","+e.value[2]+")"}),t.isDark(e.value)&&o.addClass("dark"),o.html(""+r+""),o.bind("click",t.setPaletteColor),l.append(o)})})}r[0].getElementsByTagName("md-tab");o(function(){a()})}}}]).directive("mdColorPickerHue",["mdColorGradientCanvas",function(t){return new t("hue")}]).directive("mdColorPickerAlpha",["mdColorGradientCanvas",function(t){return new t("alpha")}]).directive("mdColorPickerSpectrum",["mdColorGradientCanvas",function(t){return new t("spectrum")}]).factory("$mdColorPicker",["$q","$mdDialog","mdColorPickerHistory",function(t,e,l){var a;return{show:function(t){return t===o&&(t={}),t.hasBackdrop=t.hasBackdrop===o||t.hasBackdrop,t.clickOutsideToClose=t.clickOutsideToClose===o||t.clickOutsideToClose,t.defaultValue=t.defaultValue===o?"#FFFFFF":t.defaultValue,t.focusOnOpen=t.focusOnOpen!==o&&t.focusOnOpen,t.preserveScope=t.preserveScope===o||t.preserveScope,t.multiple=t.multiple===o||t.multiple,t.mdColorAlphaChannel=t.mdColorAlphaChannel!==o&&t.mdColorAlphaChannel,t.mdColorSpectrum=t.mdColorSpectrum===o||t.mdColorSpectrum,t.mdColorSliders=t.mdColorSliders===o||t.mdColorSliders,t.mdColorGenericPalette=t.mdColorGenericPalette===o||t.mdColorGenericPalette,t.mdColorMaterialPalette=t.mdColorMaterialPalette===o||t.mdColorMaterialPalette,t.mdColorHistory=t.mdColorHistory===o||t.mdColorHistory,t.mdColorRgb=t.mdColorRgb===o||t.mdColorRgb,t.mdColorHsl=t.mdColorHsl===o||t.mdColorHsl,t.mdColorHex=t.mdColorHex===o||!t.mdColorRgb&&!t.mdColorHsl||t.mdColorHex,t.mdColorAlphaChannel=!(!t.mdColorRgb&&!t.mdColorHsl)&&t.mdColorAlphaChannel,a=e.show({templateUrl:"mdColorPickerDialog.tpl.html",hasBackdrop:t.hasBackdrop,clickOutsideToClose:t.clickOutsideToClose,controller:["$scope","options",function(t,r){t.close=function(){e.cancel()},t.ok=function(){e.hide(t.value)},t.hide=t.ok,t.value=r.value,t["default"]=r.defaultValue,t.random=r.random,t.mdColorAlphaChannel=r.mdColorAlphaChannel,t.mdColorSpectrum=r.mdColorSpectrum,t.mdColorSliders=r.mdColorSliders,t.mdColorGenericPalette=r.mdColorGenericPalette,t.mdColorMaterialPalette=r.mdColorMaterialPalette,t.mdColorHistory=r.mdColorHistory,t.mdColorHex=r.mdColorHex,t.mdColorRgb=r.mdColorRgb,t.mdColorHsl=r.mdColorHsl,t.mdColorDefaultTab=r.mdColorDefaultTab}],locals:{options:t},preserveScope:t.preserveScope,multiple:t.multiple,targetEvent:t.$event,focusOnOpen:t.focusOnOpen,autoWrap:!1,onShowing:function(){},onComplete:function(){}}),a.then(function(t){l.add(new r(t))},function(){}),a},hide:function(){return a.hide()},cancel:function(){return a.cancel()}}}])}(e,e.angular),t.module("mdColorPicker").run(["$templateCache",function(t){t.put("mdColorPicker.tpl.html",'
\r\n\t
\r\n\t\t
\r\n\t
\r\n\t\r\n\t\t\r\n\t\t\r\n\t\r\n\t\r\n\t\t\r\n\t\r\n
\r\n'),t.put("mdColorPickerContainer.tpl.html",'
\r\n\t
\r\n\r\n\t
\r\n\r\n\t\t
\r\n\t\t\t\r\n\t\t\t
\r\n\t\t\t\t\r\n\t\t\t
\r\n\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t
\r\n\t\t
\r\n\t
\r\n\r\n\t
\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\tR\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\tG\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\tB\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\tA\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t
\r\n\r\n
\r\n'),t.put("mdColorPickerDialog.tpl.html",'\r\n\t
\r\n\t\r\n\t\tCancel\r\n\t\tSelect\r\n\t\r\n\r\n')}])}(angular,window,tinycolor); \ No newline at end of file diff --git a/index.html b/index.html index 8bed5a9..ff6016c 100644 --- a/index.html +++ b/index.html @@ -1,116 +1,115 @@ - - - - AngularJS Plunker - - - + + + AngularJS Plunker + + + + + + + + + + + + + + + + + +
+

Angular md-color-picker

+
*** BETA ***
+

A pop up color chooser featuring:

+
    +
  • HSL Specturm
    • +
  • RGBA Sliders
    • +
  • Palette Selection
    • +
  • $cookie based history
    • +
  • Multiple output formats
    • +
+
Spectrum Selector
+

Canvas based spectrum selection tool, no images or tricky css.

+
RGBA Sliders
+

Angular Material sliders and manual input.

+ +
$cookie Based History
+

If $cookies is not included in your app, the history function will fall back to an array based history + that is reset on each reload.

+ +
Multiple Output Formats
+

Using tinycolor.js we can output hexadecimal, rgb(a), or hsl(a) formats.

+ +
Misc.
+
    +
  • Random Color on open (optional)
    • +
  • Input focus opens color chooser (optional)
    • +
  • Default color on open (optional)
    • +
  • Specify output type
    • +
  • Accepts label and icon for use in the generated md-input-container
    • +
+
+
+

Demo

+ +

*** Text Color ***

+

The text color field is not using the openOnInput attribute and you must click on the preview circle to + open the color chooser. This allows you to manually type a color value without opening the color chooser.

+

This field has a label and icon specified.

+ +

*** Text Background ***

+

The text background field is using the openOnInput and the random attributes. This will maket + he field open to a random color if one is not already selected when the input field receives focus.

+

This field only has the label specified.

+

Text Style

+ + + + {{font}} + + + Color picker inside Dialog +
+
+
+
+
+
+ +
+
Text Preview
+
+
+ The five boxing wizards jump quickly. +
+
+
+
- - + + - - - - + - + + + + + - - -
-

Angular md-color-picker

-
*** BETA ***
-

A pop up color chooser featuring:

-
    -
  • HSL Specturm
    • -
  • RGBA Sliders
    • -
  • Palette Selection
    • -
  • $cookie based history
    • -
  • Multiple output formats
    • -
-
Spectrum Selector
-

Canvas based spectrum selection tool, no images or tricky css.

-
RGBA Sliders
-

Angular Material sliders and manual input.

-
$cookie Based History
-

If $cookies is not included in your app, the history function will fall back to an array based history that is reset on each reload.

+ + -
Multiple Output Formats
-

Using tinycolor.js we can output hexadecimal, rgb(a), or hsl(a) formats.

+ + + + -
Misc.
-
    -
  • Random Color on open (optional)
    • -
  • Input focus opens color chooser (optional)
    • -
  • Default color on open (optional)
    • -
  • Specify output type
    • -
  • Accepts label and icon for use in the generated md-input-container
    • -
-
-
-

Demo

- -

*** Text Color ***

-

The text color field is not using the openOnInput attribute and you must click on the preview circle to open the color chooser. This allows you to manually type a color value without opening the color chooser.

-

This field has a label and icon specified.

- -

*** Text Background ***

-

The text background field is using the openOnInput and the random attributes. This will maket he field open to a random color if one is not already selected when the input field receives focus.

-

This field only has the label specified.

-

Text Style

- - - - {{font}} - - -
-
-
-
-
-
- -
-
Text Preview
-
-
- The five boxing wizards jump quickly. -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/src/js/mdColorPicker.js b/src/js/mdColorPicker.js index 9d29097..f2d6ce6 100644 --- a/src/js/mdColorPicker.js +++ b/src/js/mdColorPicker.js @@ -445,7 +445,7 @@ angular.module('mdColorPicker', []) openOnInput: '=?', hasBackdrop: '=?', clickOutsideToClose: '=?', - skipHide: '=?', + multiple: '=?', preserveScope: '=?', // Advanced options @@ -541,7 +541,7 @@ angular.module('mdColorPicker', []) random: $scope.random, clickOutsideToClose: $scope.clickOutsideToClose, hasBackdrop: $scope.hasBackdrop, - skipHide: $scope.skipHide, + multiple: $scope.multiple, preserveScope: $scope.preserveScope, mdColorAlphaChannel: $scope.mdColorAlphaChannel, @@ -869,7 +869,7 @@ angular.module('mdColorPicker', []) options.defaultValue = options.defaultValue === undefined ? '#FFFFFF' : options.defaultValue; options.focusOnOpen = options.focusOnOpen === undefined ? false : options.focusOnOpen; options.preserveScope = options.preserveScope === undefined ? true : options.preserveScope; - options.skipHide = options.skipHide === undefined ? true : options.skipHide; + options.multiple = options.multiple === undefined ? true : options.multiple; // mdColorPicker Properties options.mdColorAlphaChannel = options.mdColorAlphaChannel === undefined ? false : options.mdColorAlphaChannel; @@ -923,7 +923,7 @@ angular.module('mdColorPicker', []) options: options, }, preserveScope: options.preserveScope, - skipHide: options.skipHide, + multiple: options.multiple, targetEvent: options.$event, focusOnOpen: options.focusOnOpen,