From 283db571977637e8195b52eddba7384d43298db2 Mon Sep 17 00:00:00 2001 From: mustafahlvc Date: Fri, 22 Apr 2016 16:53:43 +0300 Subject: [PATCH 01/29] Touch device support. --- dist/mdColorPicker.js | 27 ++++++++++++++++----------- dist/mdColorPicker.min.js | 2 +- src/js/mdColorPicker.js | 21 +++++++++++++-------- 3 files changed, 30 insertions(+), 20 deletions(-) diff --git a/dist/mdColorPicker.js b/dist/mdColorPicker.js index ee4d18a..adfa057 100644 --- a/dist/mdColorPicker.js +++ b/dist/mdColorPicker.js @@ -44,8 +44,7 @@ var GradientCanvas = function( type, restrictX ) { //$scope.$watch( function() { return color.getRgb(); }, hslObserver, true ); - - this.$element.on( 'mousedown', angular.bind( this, this.onMouseDown ) ); + this.$element.on('touchstart mousedown', angular.bind(this, this.onMouseDown)); this.$scope.$on('mdColorPicker:colorSet', angular.bind( this, this.onColorSet ) ); if ( this.extra ) { this.extra(); @@ -63,10 +62,16 @@ var GradientCanvas = function( type, restrictX ) { GradientCanvas.prototype.$window = angular.element( window ); GradientCanvas.prototype.getColorByMouse = function( e ) { - var x = e.pageX - this.offset.x; - var y = e.pageY - this.offset.y; - return this.getColorByPoint( x, y ); + var te = e.touches && e.touches[0]; + + var pageX = te && te.pageX || e.pageX; + var pageY = te && te.pageY || e.pageY; + + var x = pageX - this.offset.x; + var y = pageY - this.offset.y; + + return this.getColorByPoint(x, y); }; GradientCanvas.prototype.setMarkerCenter = function( x, y ) { @@ -138,9 +143,9 @@ GradientCanvas.prototype.onMouseDown = function( e ) { } }); - this.$window.on( 'mousemove', fn ); - this.$window.one( 'mouseup', angular.bind(this, function( e ) { - this.$window.off( 'mousemove', fn ); + this.$window.on('touchmove mousemove', fn); + this.$window.one('touchend mouseup', angular.bind(this, function (e) { + this.$window.off('touchmove mousemove', fn); this.$element.css({ 'cursor': 'crosshair' }); })); @@ -931,7 +936,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 2585231..5c2d797 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,t,o){!function(e,t,r){"use strict";var l=function(e,o){this.type=e,this.restrictX=o,this.offset={x:null,y:null},this.height=255,this.$scope=null,this.$element=null,this.get=t.bind(this,function(e,o,r){this.$scope=e,this.$element=o,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("mousedown",t.bind(this,this.onMouseDown)),this.$scope.$on("mdColorPicker:colorSet",t.bind(this,this.onColorSet)),this.extra&&this.extra(),this.draw()})};l.prototype.$window=t.element(e),l.prototype.getColorByMouse=function(e){var t=e.pageX-this.offset.x,o=e.pageY-this.offset.y;return this.getColorByPoint(t,o)},l.prototype.setMarkerCenter=function(e,o){var l=-1*this.marker.offsetWidth/2,a=-1*this.marker.offsetHeight/2;o===r?(o=e+a,o=Math.max(Math.min(this.height-1+a,o),Math.ceil(a)),e=0):(e+=l,o+=a,e=Math.max(Math.min(this.height+l,e),Math.ceil(l)),o=Math.max(Math.min(this.height+a,o),Math.ceil(a))),t.element(this.marker).css({left:e+"px"}),t.element(this.marker).css({top:o+"px"})},l.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},l.prototype.getImageData=function(e,t){e=Math.max(0,Math.min(e,this.canvas.width-1)),t=Math.max(0,Math.min(t,this.canvas.height-1));var o=this.context.getImageData(e,t,1,1).data;return o},l.prototype.onMouseDown=function(e){e.preventDefault(),e.stopImmediatePropagation(),this.$scope.previewUnfocus(),this.$element.css({cursor:"none"}),this.offset.x=this.canvas.getBoundingClientRect().left+1,this.offset.y=this.canvas.getBoundingClientRect().top;var o=t.bind(this,function(e){switch(this.type){case"hue":var t=this.getColorByMouse(e);this.$scope.$broadcast("mdColorPicker:spectrumHueChange",{hue:t});break;case"alpha":var o=this.getColorByMouse(e);this.$scope.color.setAlpha(o),this.$scope.alpha=o,this.$scope.$apply();break;case"spectrum":var r=this.getColorByMouse(e);this.setColor(r)}});this.$window.on("mousemove",o),this.$window.one("mouseup",t.bind(this,function(e){this.$window.off("mousemove",o),this.$element.css({cursor:"crosshair"})})),o(e)},l.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})},l.prototype.onColorSet=function(e,t){switch(this.type){case"hue":var o=this.$scope.color.toHsv();this.setMarkerCenter(this.canvas.height-this.canvas.height*(o.h/360));break;case"alpha":this.currentColor=t.color.toRgb(),this.draw();var r=t.color.getAlpha(),l=this.canvas.height-this.canvas.height*r;this.setMarkerCenter(l);break;case"spectrum":var o=t.color.toHsv();this.currentHue=o.h,this.draw();var a=this.canvas.width*o.s,n=this.canvas.height-this.canvas.height*o.v;this.setMarkerCenter(a,n)}};var a=new l("hue",!0);a.getColorByPoint=function(e,t){var r=this.getImageData(e,t);this.setMarkerCenter(t);var l=new o({r:r[0],g:r[1],b:r[2]});return l.toHsl().h},a.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)};var n=new l("alpha",!0);n.getColorByPoint=function(e,t){var o=this.getImageData(e,t);return this.setMarkerCenter(t),o[3]/255},n.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(.999,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 0.000)"),this.context.fillStyle=e,this.context.fillRect(0,0,this.canvas.width,this.height)},n.extra=function(){this.$scope.$on("mdColorPicker:spectrumColorChange",t.bind(this,function(e,t){this.currentColor=t.color,this.draw()}))};var i=new l("spectrum",!1);i.getColorByPoint=function(e,t){var o=this.getImageData(e,t);return this.setMarkerCenter(e,t),{r:o[0],g:o[1],b:o[2]}},i.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(0,"rgba(255, 255, 255, 1.000)"),e.addColorStop(1,"rgba(255, 255, 255, 0.000)");var t=this.context.createLinearGradient(0,0,0,this.canvas.height);t.addColorStop(0,"rgba(0, 0, 0, 0.000)"),t.addColorStop(1,"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(0,0,this.canvas.width,this.canvas.height),this.context.fillStyle=t,this.context.fillRect(0,0,this.canvas.width,this.canvas.height)},i.extra=function(){this.$scope.$on("mdColorPicker:spectrumHueChange",t.bind(this,function(e,t){this.currentHue=t.hue,this.draw();var o=this.getMarkerCenter(),r=this.getColorByPoint(o.x,o.y);this.setColor(r)}))},t.module("mdColorPicker",[]).run(["$templateCache",function(e){var t={clear:'',gradient:'',tune:'',view_module:'',view_headline:'',history:'',clear_all:''};for(var o in t)t.hasOwnProperty(o)&&e.put([o,"svg"].join("."),['',t[o],""].join(""))}]).factory("mdColorPickerHistory",["$injector",function(e){var t=[],r=[],l=!1;try{l=e.get("$cookies")}catch(a){}if(l)for(var n=l.getObject("mdColorPickerHistory")||[],i=0;ic&&(t.pop(),r.pop()),l&&l.putObject("mdColorPickerHistory",r)},get:function(){return t},reset:function(){t=[],r=[],l&&l.putObject("mdColorPickerHistory",r)}}}]).directive("mdColorPicker",["$timeout","mdColorPickerHistory",function(e,t){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:"=?",mdColorDefaultTab:"=?"},controller:["$scope","$element","$attrs","$mdDialog","$mdColorPicker",function(e,t,o,l,a){var n=!1;if(e.options!==r)for(var i in e.options)if(e.options.hasOwnProperty(i)){var c=r;e.hasOwnProperty(i)?c=i:e.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(c="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),c&&e[c]===r&&(e[c]=e.options[i])}var s=t.controller("ngModel"),d=function(t){e.value=t||s.$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,d(),e.$watch(function(){return s.$modelValue},function(e){d(e)}),e.$watch("value",function(e,t){""!==e&&"undefined"!=typeof e&&e&&e!==t&&s.$setViewValue(e)}),e.clearValue=function(){e.value=""},e.showColorPicker=function(t){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,mdColorDefaultTab:e.mdColorDefaultTab,$event:t}).then(function(t){e.value=t})}}],compile:function(e,t){t.type=t.type!==r?t.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:"=",mdColorDefaultTab:"="},controller:["$scope","$element","$attrs",function(e,n,i){function c(t){var o=0;if(t&&"string"==typeof t){for(var r="mdColor"+t.slice(0,1).toUpperCase()+t.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 o(e.value||e["default"]),e.alpha=e.color.getAlpha(),e.history=a,e.materialFamily=[],e.whichPane=c(e.mdColorDefaultTab),e.inputFocus=!1;var m=9;2*Math.PI/m;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 t.isArray(e)?o({r:e[0],g:e[1],b:e[2]}).isDark():o(e).isDark()},e.previewFocus=function(){e.inputFocus=!0,r(function(){d[0].setSelectionRange(0,d[0].value.length)})},e.previewUnfocus=function(){e.inputFocus=!1,d[0].blur()},e.previewBlur=function(){e.inputFocus=!1,e.setValue()},e.previewKeyDown=function(t){13==t.keyCode&&e.ok&&e.ok()},e.setPaletteColor=function(t){r(function(){e.color=o(t.target.style.backgroundColor)})},e.setValue=function(){e.color&&e.color&&h[e.type]&&"rgba(0, 0, 0, 0)"!==e.color.toRgbString()&&(e.value=e.color[h[e.type]]())},e.changeValue=function(){e.color=o(e.value),e.$broadcast("mdColorPicker:colorSet",{color:e.color})},e.$watch("color._a",function(t){e.color.setAlpha(t)},!0),e.$watch("whichPane",function(t){e.$broadcast("mdColorPicker:colorSet",{color:e.color})}),e.$watch("type",function(){d.removeClass("switch"),r(function(){d.addClass("switch")})}),e.$watchGroup(["color.toRgbString()","type"],function(t){e.inputFocus||e.setValue()}),r(function(){e.$broadcast("mdColorPicker:colorSet",{color:e.color}),d.focus(),e.previewFocus()})}],link:function(e,o,l){function a(){var r=t.element(o[0].querySelector(".md-color-picker-palette")),l=t.element(o[0].querySelector(".md-color-picker-material-palette")),a=t.element('
'),n=t.element('
'),i=t.element('
'),c=t.element('
');t.forEach(e.palette,function(o,l){var i=a.clone();t.forEach(o,function(t){var o=n.clone();o.css({height:"25.5px",backgroundColor:t}),o.bind("click",e.setPaletteColor),i.append(o)}),r.append(i)}),t.forEach(e.materialPalette,function(o,r){var a=i.clone();a.html(""+r.replace("-"," ")+""),a.css({height:"75px",backgroundColor:"rgb("+o[500].value[0]+","+o[500].value[1]+","+o[500].value[2]+")"}),e.isDark(o[500].value)&&a.addClass("dark"),l.append(a),t.forEach(o,function(t,o){var r=c.clone();r.css({height:"33px",backgroundColor:"rgb("+t.value[0]+","+t.value[1]+","+t.value[2]+")"}),e.isDark(t.value)&&r.addClass("dark"),r.html(""+o+""),r.bind("click",e.setPaletteColor),l.append(r)})})}o[0].getElementsByTagName("md-tab");r(function(){a()})}}}]).directive("mdColorPickerHue",[function(){return{template:'
',link:a.get,controller:function(){}}}]).directive("mdColorPickerAlpha",[function(){return{template:'
',link:n.get,controller:function(){}}}]).directive("mdColorPickerSpectrum",[function(){return{template:'
{{hue}}',link:i.get,controller:function(){}}}]).factory("$mdColorPicker",["$q","$mdDialog","mdColorPickerHistory",function(e,t,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,a=t.show({templateUrl:"mdColorPickerDialog.tpl.html",hasBackdrop:e.hasBackdrop,clickOutsideToClose:e.clickOutsideToClose,controller:["$scope","options",function(e,o){e.close=function(){t.cancel()},e.ok=function(){t.hide(e.value)},e.hide=e.ok,e.value=o.value,e["default"]=o.defaultValue,e.random=o.random,e.mdColorAlphaChannel=o.mdColorAlphaChannel,e.mdColorSpectrum=o.mdColorSpectrum,e.mdColorSliders=o.mdColorSliders,e.mdColorGenericPalette=o.mdColorGenericPalette,e.mdColorMaterialPalette=o.mdColorMaterialPalette,e.mdColorHistory=o.mdColorHistory,e.mdColorDefaultTab=o.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 o(e))},function(){}),a},hide:function(){return a.hide()},cancel:function(){return a.cancel()}}}])}(t,t.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(e,r,t){!function(e,r,o){"use strict";var l=function(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=r.bind(this,function(e,t,o){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",r.bind(this,this.onMouseDown)),this.$scope.$on("mdColorPicker:colorSet",r.bind(this,this.onColorSet)),this.extra&&this.extra(),this.draw()})};l.prototype.$window=r.element(e),l.prototype.getColorByMouse=function(e){var r=e.touches&&e.touches[0],t=r&&r.pageX||e.pageX,o=r&&r.pageY||e.pageY,l=t-this.offset.x,a=o-this.offset.y;return this.getColorByPoint(l,a)},l.prototype.setMarkerCenter=function(e,t){var l=-1*this.marker.offsetWidth/2,a=-1*this.marker.offsetHeight/2;t===o?(t=e+a,t=Math.max(Math.min(this.height-1+a,t),Math.ceil(a)),e=0):(e+=l,t+=a,e=Math.max(Math.min(this.height+l,e),Math.ceil(l)),t=Math.max(Math.min(this.height+a,t),Math.ceil(a))),r.element(this.marker).css({left:e+"px"}),r.element(this.marker).css({top:t+"px"})},l.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},l.prototype.getImageData=function(e,r){e=Math.max(0,Math.min(e,this.canvas.width-1)),r=Math.max(0,Math.min(r,this.canvas.height-1));var t=this.context.getImageData(e,r,1,1).data;return t},l.prototype.onMouseDown=function(e){e.preventDefault(),e.stopImmediatePropagation(),this.$scope.previewUnfocus(),this.$element.css({cursor:"none"}),this.offset.x=this.canvas.getBoundingClientRect().left+1,this.offset.y=this.canvas.getBoundingClientRect().top;var t=r.bind(this,function(e){switch(this.type){case"hue":var r=this.getColorByMouse(e);this.$scope.$broadcast("mdColorPicker:spectrumHueChange",{hue:r});break;case"alpha":var t=this.getColorByMouse(e);this.$scope.color.setAlpha(t),this.$scope.alpha=t,this.$scope.$apply();break;case"spectrum":var o=this.getColorByMouse(e);this.setColor(o)}});this.$window.on("touchmove mousemove",t),this.$window.one("touchend mouseup",r.bind(this,function(e){this.$window.off("touchmove mousemove",t),this.$element.css({cursor:"crosshair"})})),t(e)},l.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})},l.prototype.onColorSet=function(e,r){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=r.color.toRgb(),this.draw();var o=r.color.getAlpha(),l=this.canvas.height-this.canvas.height*o;this.setMarkerCenter(l);break;case"spectrum":var t=r.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)}};var a=new l("hue",!0);a.getColorByPoint=function(e,r){var o=this.getImageData(e,r);this.setMarkerCenter(r);var l=new t({r:o[0],g:o[1],b:o[2]});return l.toHsl().h},a.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)};var n=new l("alpha",!0);n.getColorByPoint=function(e,r){var t=this.getImageData(e,r);return this.setMarkerCenter(r),t[3]/255},n.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(.999,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 0.000)"),this.context.fillStyle=e,this.context.fillRect(0,0,this.canvas.width,this.height)},n.extra=function(){this.$scope.$on("mdColorPicker:spectrumColorChange",r.bind(this,function(e,r){this.currentColor=r.color,this.draw()}))};var i=new l("spectrum",!1);i.getColorByPoint=function(e,r){var t=this.getImageData(e,r);return this.setMarkerCenter(e,r),{r:t[0],g:t[1],b:t[2]}},i.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(0,"rgba(255, 255, 255, 1.000)"),e.addColorStop(1,"rgba(255, 255, 255, 0.000)");var r=this.context.createLinearGradient(0,0,0,this.canvas.height);r.addColorStop(0,"rgba(0, 0, 0, 0.000)"),r.addColorStop(1,"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(0,0,this.canvas.width,this.canvas.height),this.context.fillStyle=r,this.context.fillRect(0,0,this.canvas.width,this.canvas.height)},i.extra=function(){this.$scope.$on("mdColorPicker:spectrumHueChange",r.bind(this,function(e,r){this.currentHue=r.hue,this.draw();var t=this.getMarkerCenter(),o=this.getColorByPoint(t.x,t.y);this.setColor(o)}))},r.module("mdColorPicker",[]).run(["$templateCache",function(e){var r={clear:'',gradient:'',tune:'',view_module:'',view_headline:'',history:'',clear_all:''};for(var t in r)r.hasOwnProperty(t)&&e.put([t,"svg"].join("."),['',r[t],""].join(""))}]).factory("mdColorPickerHistory",["$injector",function(e){var r=[],o=[],l=!1;try{l=e.get("$cookies")}catch(a){}if(l)for(var n=l.getObject("mdColorPickerHistory")||[],i=0;ic&&(r.pop(),o.pop()),l&&l.putObject("mdColorPickerHistory",o)},get:function(){return r},reset:function(){r=[],o=[],l&&l.putObject("mdColorPickerHistory",o)}}}]).directive("mdColorPicker",["$timeout","mdColorPickerHistory",function(e,r){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:"=?",mdColorDefaultTab:"=?"},controller:["$scope","$element","$attrs","$mdDialog","$mdColorPicker",function(e,r,t,l,a){var n=!1;if(e.options!==o)for(var i in e.options)if(e.options.hasOwnProperty(i)){var c=o;e.hasOwnProperty(i)?c=i:e.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(c="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),c&&e[c]===o&&(e[c]=e.options[i])}var s=r.controller("ngModel"),d=function(r){e.value=r||s.$viewValue||""};e.mdColorClearButton=e.mdColorClearButton===o?!0:e.mdColorClearButton,e.mdColorPreview=e.mdColorPreview===o?!0:e.mdColorPreview,e.mdColorAlphaChannel=e.mdColorAlphaChannel===o?!0:e.mdColorAlphaChannel,e.mdColorSpectrum=e.mdColorSpectrum===o?!0:e.mdColorSpectrum,e.mdColorSliders=e.mdColorSliders===o?!0:e.mdColorSliders,e.mdColorGenericPalette=e.mdColorGenericPalette===o?!0:e.mdColorGenericPalette,e.mdColorMaterialPalette=e.mdColorMaterialPalette===o?!0:e.mdColorMaterialPalette,e.mdColorHistory=e.mdColorHistory===o?!0:e.mdColorHistory,d(),e.$watch(function(){return s.$modelValue},function(e){d(e)}),e.$watch("value",function(e,r){""!==e&&"undefined"!=typeof e&&e&&e!==r&&s.$setViewValue(e)}),e.clearValue=function(){e.value=""},e.showColorPicker=function(r){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,mdColorDefaultTab:e.mdColorDefaultTab,$event:r}).then(function(r){e.value=r})}}],compile:function(e,r){r.type=r.type!==o?r.type:0}}}]).directive("mdColorPickerContainer",["$compile","$timeout","$mdColorPalette","mdColorPickerHistory",function(e,o,l,a){return{templateUrl:"mdColorPickerContainer.tpl.html",scope:{value:"=?","default":"@",random:"@",ok:"=?",mdColorAlphaChannel:"=",mdColorSpectrum:"=",mdColorSliders:"=",mdColorGenericPalette:"=",mdColorMaterialPalette:"=",mdColorHistory:"=",mdColorDefaultTab:"="},controller:["$scope","$element","$attrs",function(e,n,i){function c(r){var t=0;if(r&&"string"==typeof r){for(var o="mdColor"+r.slice(0,1).toUpperCase()+r.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=c(e.mdColorDefaultTab),e.inputFocus=!1;var m=9;2*Math.PI/m;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 r.isArray(e)?t({r:e[0],g:e[1],b:e[2]}).isDark():t(e).isDark()},e.previewFocus=function(){e.inputFocus=!0,o(function(){d[0].setSelectionRange(0,d[0].value.length)})},e.previewUnfocus=function(){e.inputFocus=!1,d[0].blur()},e.previewBlur=function(){e.inputFocus=!1,e.setValue()},e.previewKeyDown=function(r){13==r.keyCode&&e.ok&&e.ok()},e.setPaletteColor=function(r){o(function(){e.color=t(r.target.style.backgroundColor)})},e.setValue=function(){e.color&&e.color&&h[e.type]&&"rgba(0, 0, 0, 0)"!==e.color.toRgbString()&&(e.value=e.color[h[e.type]]())},e.changeValue=function(){e.color=t(e.value),e.$broadcast("mdColorPicker:colorSet",{color:e.color})},e.$watch("color._a",function(r){e.color.setAlpha(r)},!0),e.$watch("whichPane",function(r){e.$broadcast("mdColorPicker:colorSet",{color:e.color})}),e.$watch("type",function(){d.removeClass("switch"),o(function(){d.addClass("switch")})}),e.$watchGroup(["color.toRgbString()","type"],function(r){e.inputFocus||e.setValue()}),o(function(){e.$broadcast("mdColorPicker:colorSet",{color:e.color}),d.focus(),e.previewFocus()})}],link:function(e,t,l){function a(){var o=r.element(t[0].querySelector(".md-color-picker-palette")),l=r.element(t[0].querySelector(".md-color-picker-material-palette")),a=r.element('
'),n=r.element('
'),i=r.element('
'),c=r.element('
');r.forEach(e.palette,function(t,l){var i=a.clone();r.forEach(t,function(r){var t=n.clone();t.css({height:"25.5px",backgroundColor:r}),t.bind("click",e.setPaletteColor),i.append(t)}),o.append(i)}),r.forEach(e.materialPalette,function(t,o){var a=i.clone();a.html(""+o.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),r.forEach(t,function(r,t){var o=c.clone();o.css({height:"33px",backgroundColor:"rgb("+r.value[0]+","+r.value[1]+","+r.value[2]+")"}),e.isDark(r.value)&&o.addClass("dark"),o.html(""+t+""),o.bind("click",e.setPaletteColor),l.append(o)})})}t[0].getElementsByTagName("md-tab");o(function(){a()})}}}]).directive("mdColorPickerHue",[function(){return{template:'
',link:a.get,controller:function(){}}}]).directive("mdColorPickerAlpha",[function(){return{template:'
',link:n.get,controller:function(){}}}]).directive("mdColorPickerSpectrum",[function(){return{template:'
{{hue}}',link:i.get,controller:function(){}}}]).factory("$mdColorPicker",["$q","$mdDialog","mdColorPickerHistory",function(e,r,l){var a;return{show:function(e){return e===o&&(e={}),e.hasBackdrop=e.hasBackdrop===o?!0:e.hasBackdrop,e.clickOutsideToClose=e.clickOutsideToClose===o?!0:e.clickOutsideToClose,e.defaultValue=e.defaultValue===o?"#FFFFFF":e.defaultValue,e.focusOnOpen=e.focusOnOpen===o?!1:e.focusOnOpen,e.preserveScope=e.preserveScope===o?!0:e.preserveScope,e.skipHide=e.skipHide===o?!0:e.skipHide,e.mdColorAlphaChannel=e.mdColorAlphaChannel===o?!1:e.mdColorAlphaChannel,e.mdColorSpectrum=e.mdColorSpectrum===o?!0:e.mdColorSpectrum,e.mdColorSliders=e.mdColorSliders===o?!0:e.mdColorSliders,e.mdColorGenericPalette=e.mdColorGenericPalette===o?!0:e.mdColorGenericPalette,e.mdColorMaterialPalette=e.mdColorMaterialPalette===o?!0:e.mdColorMaterialPalette,e.mdColorHistory=e.mdColorHistory===o?!0:e.mdColorHistory,a=r.show({templateUrl:"mdColorPickerDialog.tpl.html",hasBackdrop:e.hasBackdrop,clickOutsideToClose:e.clickOutsideToClose,controller:["$scope","options",function(e,t){e.close=function(){r.cancel()},e.ok=function(){r.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.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()}}}])}(r,r.angular),e.module("mdColorPicker").run(["$templateCache",function(e){e.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'),e.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'),e.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/src/js/mdColorPicker.js b/src/js/mdColorPicker.js index 77ce6d4..8bb2da2 100644 --- a/src/js/mdColorPicker.js +++ b/src/js/mdColorPicker.js @@ -37,8 +37,7 @@ var GradientCanvas = function( type, restrictX ) { //$scope.$watch( function() { return color.getRgb(); }, hslObserver, true ); - - this.$element.on( 'mousedown', angular.bind( this, this.onMouseDown ) ); + this.$element.on('touchstart mousedown', angular.bind(this, this.onMouseDown)); this.$scope.$on('mdColorPicker:colorSet', angular.bind( this, this.onColorSet ) ); if ( this.extra ) { this.extra(); @@ -56,10 +55,16 @@ var GradientCanvas = function( type, restrictX ) { GradientCanvas.prototype.$window = angular.element( window ); GradientCanvas.prototype.getColorByMouse = function( e ) { - var x = e.pageX - this.offset.x; - var y = e.pageY - this.offset.y; - return this.getColorByPoint( x, y ); + var te = e.touches && e.touches[0]; + + var pageX = te && te.pageX || e.pageX; + var pageY = te && te.pageY || e.pageY; + + var x = pageX - this.offset.x; + var y = pageY - this.offset.y; + + return this.getColorByPoint(x, y); }; GradientCanvas.prototype.setMarkerCenter = function( x, y ) { @@ -131,9 +136,9 @@ GradientCanvas.prototype.onMouseDown = function( e ) { } }); - this.$window.on( 'mousemove', fn ); - this.$window.one( 'mouseup', angular.bind(this, function( e ) { - this.$window.off( 'mousemove', fn ); + this.$window.on('touchmove mousemove', fn); + this.$window.one('touchend mouseup', angular.bind(this, function (e) { + this.$window.off('touchmove mousemove', fn); this.$element.css({ 'cursor': 'crosshair' }); })); From b7242a18aae955706142b58955c0dcf555f85388 Mon Sep 17 00:00:00 2001 From: Jose Carrillo Date: Fri, 6 May 2016 13:01:17 -0700 Subject: [PATCH 02/29] Prevent IE from showing a clear button When the input is focused in IE, the browsers native clear button appears overall ping with the color pickers clear button. --- src/less/mdColorPicker.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/less/mdColorPicker.less b/src/less/mdColorPicker.less index f5e7bb7..cfc5709 100644 --- a/src/less/mdColorPicker.less +++ b/src/less/mdColorPicker.less @@ -18,8 +18,9 @@ md-color-picker .md-color-picker-input-container, &.md-input-focused label:not(.md-no-float), &.md-input-has-value label:not(.md-no-float) { //padding-left: 2px; } - input { - // margin-left: 30px; + //remove clear X button from IE input fields + input::-ms-clear { + display: none; } .md-color-picker-preview { // position: absolute; From 6cebb494af557b2de72274923eb3edd02547368a Mon Sep 17 00:00:00 2001 From: Jose Carrillo Date: Fri, 6 May 2016 13:23:42 -0700 Subject: [PATCH 03/29] Removed IE close Icon for color picker input only Changed the implementation to only affect this input (.md-color-picker-input)and not all inputs on the page --- src/less/mdColorPicker.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/less/mdColorPicker.less b/src/less/mdColorPicker.less index cfc5709..83effe2 100644 --- a/src/less/mdColorPicker.less +++ b/src/less/mdColorPicker.less @@ -19,7 +19,7 @@ md-color-picker .md-color-picker-input-container, //padding-left: 2px; } //remove clear X button from IE input fields - input::-ms-clear { + .md-color-picker-input::-ms-clear { display: none; } .md-color-picker-preview { From d3ec03081ad1280eae5dc5f1623cb617ba3d6f36 Mon Sep 17 00:00:00 2001 From: Volodymyr Lut Date: Tue, 31 May 2016 17:48:46 +0300 Subject: [PATCH 04/29] Add additional customization options Added mdColorHex, mdColorRgb, mdColorHsl options to disable tabse on the very top of dialogue window. If three of them is setted to 'false', hex mode will be used by default --- dist/mdColorPicker.css | 1 - dist/mdColorPicker.js | 27 ++++++++++++++----- dist/mdColorPicker.min.css | 2 +- dist/mdColorPicker.min.js | 2 +- src/js/mdColorPicker.js | 23 ++++++++++++---- src/templates/mdColorPickerContainer.tpl.html | 6 ++--- src/templates/mdColorPickerDialog.tpl.html | 3 +++ 7 files changed, 46 insertions(+), 18 deletions(-) diff --git a/dist/mdColorPicker.css b/dist/mdColorPicker.css index f7742fb..e637845 100644 --- a/dist/mdColorPicker.css +++ b/dist/mdColorPicker.css @@ -59,7 +59,6 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear, } .md-color-picker-container .md-color-picker-preview { -webkit-box-flex: 1; - -webkit-flex: 1; -ms-flex: 1; flex: 1; font-weight: bold; diff --git a/dist/mdColorPicker.js b/dist/mdColorPicker.js index ee4d18a..22e202f 100644 --- a/dist/mdColorPicker.js +++ b/dist/mdColorPicker.js @@ -422,6 +422,9 @@ angular.module('mdColorPicker', []) mdColorGenericPalette: '=?', mdColorMaterialPalette: '=?', mdColorHistory: '=?', + mdColorHex: '=?', + mdColorRgb: '=?', + mdColorHsl: '=?', mdColorDefaultTab: '=?' }, controller: ['$scope', '$element', '$attrs', '$mdDialog', '$mdColorPicker', function( $scope, $element, $attrs, $mdDialog, $mdColorPicker ) { @@ -465,8 +468,9 @@ angular.module('mdColorPicker', []) $scope.mdColorGenericPalette = $scope.mdColorGenericPalette === undefined ? true : $scope.mdColorGenericPalette; $scope.mdColorMaterialPalette = $scope.mdColorMaterialPalette === undefined ? true : $scope.mdColorMaterialPalette; $scope.mdColorHistory = $scope.mdColorHistory === undefined ? true : $scope.mdColorHistory; - - + $scope.mdColorHex = $scope.mdColorHex === undefined ? true : $scope.mdColorHex; + $scope.mdColorRgb = $scope.mdColorRgb === undefined ? true : $scope.mdColorRgb; + $scope.mdColorHsl = $scope.mdColorHsl === undefined ? true : $scope.mdColorHsl; // Set the starting value updateValue(); @@ -511,6 +515,9 @@ angular.module('mdColorPicker', []) mdColorGenericPalette: $scope.mdColorGenericPalette, mdColorMaterialPalette: $scope.mdColorMaterialPalette, mdColorHistory: $scope.mdColorHistory, + mdColorHex: $scope.mdColorHex, + mdColorRgb: $scope.mdColorRgb, + mdColorHsl: $scope.mdColorHsl, mdColorDefaultTab: $scope.mdColorDefaultTab, $event: $event, @@ -542,6 +549,9 @@ angular.module('mdColorPicker', []) mdColorGenericPalette: '=', mdColorMaterialPalette: '=', mdColorHistory: '=', + mdColorHex: '=', + mdColorRgb: '=', + mdColorHsl: '=', mdColorDefaultTab: '=' }, controller: ["$scope", "$element", "$attrs", function( $scope, $element, $attrs ) { @@ -860,9 +870,9 @@ angular.module('mdColorPicker', []) options.mdColorGenericPalette = options.mdColorGenericPalette === undefined ? true : options.mdColorGenericPalette; options.mdColorMaterialPalette = options.mdColorMaterialPalette === undefined ? true : options.mdColorMaterialPalette; options.mdColorHistory = options.mdColorHistory === undefined ? true : options.mdColorHistory; - - - + options.mdColorRgb = options.mdColorRgb === undefined ? true : options.mdColorRgb; + options.mdColorHsl = options.mdColorHsl === undefined ? true : options.mdColorHsl; + options.mdColorHex = ((options.mdColorHex === undefined) || (!options.mdColorRgb && !options.mdColorHsl)) ? true : options.mdColorHex; dialog = $mdDialog.show({ @@ -894,6 +904,9 @@ angular.module('mdColorPicker', []) $scope.mdColorGenericPalette = options.mdColorGenericPalette; $scope.mdColorMaterialPalette = options.mdColorMaterialPalette; $scope.mdColorHistory = options.mdColorHistory; + $scope.mdColorHex = options.mdColorHex; + $scope.mdColorRgb = options.mdColorRgb; + $scope.mdColorHsl = options.mdColorHsl; $scope.mdColorDefaultTab = options.mdColorDefaultTab; }], @@ -932,6 +945,6 @@ 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");}]); +$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, window, tinycolor); \ No newline at end of file diff --git a/dist/mdColorPicker.min.css b/dist/mdColorPicker.min.css index 687791f..aca88da 100644 --- a/dist/mdColorPicker.min.css +++ b/dist/mdColorPicker.min.css @@ -4,4 +4,4 @@ * @link https://github.com/brianpkelley/md-color-picker * @license MIT */ -[md-color-picker] .md-color-picker-input-container,md-color-picker .md-color-picker-input-container{position:relative}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview,md-color-picker .md-color-picker-input-container .md-color-picker-preview{content:'';width:24px;height:24px;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);position:relative;top:22px;overflow:hidden;background-color:#fff;background-image:-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result,md-color-picker .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result{width:100%;height:100%}[md-color-picker] .md-color-picker-input-container .md-color-picker-clear,md-color-picker .md-color-picker-input-container .md-color-picker-clear{position:absolute;bottom:42px;right:-16px;color:rgba(0,0,0,.26)}.md-color-picker-container{padding:8px;background:#fff;outline:none;height:397px;width:347px;opacity:1;overflow:hidden;z-index:1000}.md-color-picker-container .md-color-picker-arrow{border:0 solid transparent;border-right-width:30px;border-bottom-width:0;position:absolute;left:0;top:0;-webkit-transition:border-bottom-width cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s;transition:border-bottom-width cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s}.md-color-picker-container .md-color-picker-preview{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:700;font-size:18px;color:#fff;margin:-8px -8px 0;position:relative}.md-color-picker-container .md-color-picker-preview .md-color-picker-result{position:absolute;height:100%;opacity:1;background:red}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>input{position:relative;top:-15px;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div{position:relative;width:100%}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input{border-width:0;background:transparent;text-align:center;position:absolute;top:-15px;bottom:0;left:0;right:0;color:#eee;outline:none;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input.switch{-webkit-transition:top cubic-bezier(.25,.8,.25,1) .25s,.25s opacity ease-out;transition:top cubic-bezier(.25,.8,.25,1) .25s,.25s opacity ease-out;top:0;opacity:1}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-wrapper{max-height:28px;height:28px}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-ink-bar{background:hsla(0,0%,100%,.5)}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab{padding-top:2px;background:hsla(0,0%,100%,.25);color:#eee;max-width:none!important}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark,.md-color-picker-container .md-color-picker-preview.dark .md-color-picker-preview-input{color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab{background:rgba(0,0,0,.25);color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark md-ink-bar{background:rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-tabs{margin:0 -8px}.md-color-picker-container .md-color-picker-tabs md-tabs[md-align-tabs=bottom]{padding-bottom:0}.md-color-picker-container .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-tabs md-tabs-wrapper{max-height:36px;height:36px}.md-color-picker-container .md-color-picker-tabs .md-tab{padding:7px 24px;background:transparent}.md-color-picker-container .md-color-picker-tabs .md-tab:last-of-type{margin-right:-2px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height){min-height:298px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper{height:255px;margin-bottom:8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content{height:255px;padding:0 8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content [md-tabs-template]{height:100%}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors{margin:8px -8px -8px}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors md-ink-bar{top:auto}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab{background:rgba(0,0,0,.075)}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab.md-active{background:#fff}.md-color-picker-container .md-color-picker-colors{overflow:hidden;margin-top:8px}.md-color-picker-container .md-color-picker-colors .md-color-picker-marker{position:absolute;border:2px solid #fff;box-shadow:0 0 2px 0 rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum]{position:relative;cursor:crosshair;overflow:hidden;height:255px;width:255px}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum] .md-color-picker-marker{width:11px;height:11px;border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.5),inset 0 0 2px 0 rgba(0,0,0,.5);top:-5px;left:calc(100% - 5px)}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha],.md-color-picker-container .md-color-picker-colors [md-color-picker-hue]{position:relative;cursor:crosshair;overflow:hidden;width:30px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha].md-color-picker-wide,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue].md-color-picker-wide{width:67px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha] .md-color-picker-marker,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue] .md-color-picker-marker{height:5px;width:100%;border-left:0;border-right:0;top:-2px;left:0}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-track-fill{background:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-thumb:after{background-color:#d01515;border-color:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-track-fill{background:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-thumb:after{background-color:#19d015;border-color:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-track-fill{background:#1560d0}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-thumb:after{background-color:#1560d0;border-color:#1560d0}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title{font-size:22px;line-height:75px;padding:0 15px;color:rgba(0,0,0,.85);text-transform:capitalize}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title.dark{color:hsla(0,0%,100%,.85)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title:not(:first-child){margin-top:16px}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label{font-size:12px;line-height:33px;padding:0 5px;color:rgba(0,0,0,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label.dark{color:hsla(0,0%,100%,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-colors{position:absolute;-webkit-transition:left cubic-bezier(.25,.8,.25,1) .25s,right cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s,bottom cubic-bezier(.25,.8,.25,1) .25s;transition:left cubic-bezier(.25,.8,.25,1) .25s,right cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s,bottom cubic-bezier(.25,.8,.25,1) .25s}.md-color-picker-container .md-color-picker-history>div>div{height:20px;margin:4px;background-color:#fff;background-image:-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}.md-color-picker-container .md-color-picker-history>div>div>div{width:100%;height:100%}.md-color-picker-container .md-color-picker-history button{margin-top:auto;margin-left:auto}.md-color-picker-checkered-bg{background-color:#fff;background-image:-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px} \ No newline at end of file +[md-color-picker] .md-color-picker-input-container,md-color-picker .md-color-picker-input-container{position:relative}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview,md-color-picker .md-color-picker-input-container .md-color-picker-preview{content:'';width:24px;height:24px;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);position:relative;top:22px;overflow:hidden;background-color:#fff;background-image:-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result,md-color-picker .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result{width:100%;height:100%}[md-color-picker] .md-color-picker-input-container .md-color-picker-clear,md-color-picker .md-color-picker-input-container .md-color-picker-clear{position:absolute;bottom:42px;right:-16px;color:rgba(0,0,0,.26)}.md-color-picker-container{padding:8px;background:#fff;outline:none;height:397px;width:347px;opacity:1;overflow:hidden;z-index:1000}.md-color-picker-container .md-color-picker-arrow{border:0 solid transparent;border-right-width:30px;border-bottom-width:0;position:absolute;left:0;top:0;-webkit-transition:border-bottom-width .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1);transition:border-bottom-width .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1)}.md-color-picker-container .md-color-picker-preview{-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:700;font-size:18px;color:#fff;margin:-8px -8px 0;position:relative}.md-color-picker-container .md-color-picker-preview .md-color-picker-result{position:absolute;height:100%;opacity:1;background:red}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>input{position:relative;top:-15px;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div{position:relative;width:100%}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input{border-width:0;background:transparent;text-align:center;position:absolute;top:-15px;bottom:0;left:0;right:0;color:#eee;outline:none;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input.switch{-webkit-transition:top .25s cubic-bezier(.25,.8,.25,1),opacity .25s ease-out;transition:top .25s cubic-bezier(.25,.8,.25,1),opacity .25s ease-out;top:0;opacity:1}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-wrapper{max-height:28px;height:28px}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-ink-bar{background:hsla(0,0%,100%,.5)}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab{padding-top:2px;background:hsla(0,0%,100%,.25);color:#eee;max-width:none!important}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark,.md-color-picker-container .md-color-picker-preview.dark .md-color-picker-preview-input{color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab{background:rgba(0,0,0,.25);color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark md-ink-bar{background:rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-tabs{margin:0 -8px}.md-color-picker-container .md-color-picker-tabs md-tabs[md-align-tabs=bottom]{padding-bottom:0}.md-color-picker-container .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-tabs md-tabs-wrapper{max-height:36px;height:36px}.md-color-picker-container .md-color-picker-tabs .md-tab{padding:7px 24px;background:transparent}.md-color-picker-container .md-color-picker-tabs .md-tab:last-of-type{margin-right:-2px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height){min-height:298px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper{height:255px;margin-bottom:8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content{height:255px;padding:0 8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content [md-tabs-template]{height:100%}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors{margin:8px -8px -8px}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors md-ink-bar{top:auto}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab{background:rgba(0,0,0,.075)}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab.md-active{background:#fff}.md-color-picker-container .md-color-picker-colors{overflow:hidden;margin-top:8px}.md-color-picker-container .md-color-picker-colors .md-color-picker-marker{position:absolute;border:2px solid #fff;box-shadow:0 0 2px 0 rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum]{position:relative;cursor:crosshair;overflow:hidden;height:255px;width:255px}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum] .md-color-picker-marker{width:11px;height:11px;border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.5),inset 0 0 2px 0 rgba(0,0,0,.5);top:-5px;left:calc(100% - 5px)}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha],.md-color-picker-container .md-color-picker-colors [md-color-picker-hue]{position:relative;cursor:crosshair;overflow:hidden;width:30px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha].md-color-picker-wide,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue].md-color-picker-wide{width:67px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha] .md-color-picker-marker,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue] .md-color-picker-marker{height:5px;width:100%;border-left:0;border-right:0;top:-2px;left:0}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-track-fill{background:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-thumb:after{background-color:#d01515;border-color:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-track-fill{background:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-thumb:after{background-color:#19d015;border-color:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-track-fill{background:#1560d0}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-thumb:after{background-color:#1560d0;border-color:#1560d0}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title{font-size:22px;line-height:75px;padding:0 15px;color:rgba(0,0,0,.85);text-transform:capitalize}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title.dark{color:hsla(0,0%,100%,.85)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title:not(:first-child){margin-top:16px}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label{font-size:12px;line-height:33px;padding:0 5px;color:rgba(0,0,0,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label.dark{color:hsla(0,0%,100%,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-colors{position:absolute;-webkit-transition:left .25s cubic-bezier(.25,.8,.25,1),right .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1),bottom .25s cubic-bezier(.25,.8,.25,1);transition:left .25s cubic-bezier(.25,.8,.25,1),right .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1),bottom .25s cubic-bezier(.25,.8,.25,1)}.md-color-picker-container .md-color-picker-history>div>div{height:20px;margin:4px;background-color:#fff;background-image:-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}.md-color-picker-container .md-color-picker-history>div>div>div{width:100%;height:100%}.md-color-picker-container .md-color-picker-history button{margin-top:auto;margin-left:auto}.md-color-picker-checkered-bg{background-color:#fff;background-image:-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px} \ No newline at end of file diff --git a/dist/mdColorPicker.min.js b/dist/mdColorPicker.min.js index 2585231..ca0f1d6 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,t,o){!function(e,t,r){"use strict";var l=function(e,o){this.type=e,this.restrictX=o,this.offset={x:null,y:null},this.height=255,this.$scope=null,this.$element=null,this.get=t.bind(this,function(e,o,r){this.$scope=e,this.$element=o,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("mousedown",t.bind(this,this.onMouseDown)),this.$scope.$on("mdColorPicker:colorSet",t.bind(this,this.onColorSet)),this.extra&&this.extra(),this.draw()})};l.prototype.$window=t.element(e),l.prototype.getColorByMouse=function(e){var t=e.pageX-this.offset.x,o=e.pageY-this.offset.y;return this.getColorByPoint(t,o)},l.prototype.setMarkerCenter=function(e,o){var l=-1*this.marker.offsetWidth/2,a=-1*this.marker.offsetHeight/2;o===r?(o=e+a,o=Math.max(Math.min(this.height-1+a,o),Math.ceil(a)),e=0):(e+=l,o+=a,e=Math.max(Math.min(this.height+l,e),Math.ceil(l)),o=Math.max(Math.min(this.height+a,o),Math.ceil(a))),t.element(this.marker).css({left:e+"px"}),t.element(this.marker).css({top:o+"px"})},l.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},l.prototype.getImageData=function(e,t){e=Math.max(0,Math.min(e,this.canvas.width-1)),t=Math.max(0,Math.min(t,this.canvas.height-1));var o=this.context.getImageData(e,t,1,1).data;return o},l.prototype.onMouseDown=function(e){e.preventDefault(),e.stopImmediatePropagation(),this.$scope.previewUnfocus(),this.$element.css({cursor:"none"}),this.offset.x=this.canvas.getBoundingClientRect().left+1,this.offset.y=this.canvas.getBoundingClientRect().top;var o=t.bind(this,function(e){switch(this.type){case"hue":var t=this.getColorByMouse(e);this.$scope.$broadcast("mdColorPicker:spectrumHueChange",{hue:t});break;case"alpha":var o=this.getColorByMouse(e);this.$scope.color.setAlpha(o),this.$scope.alpha=o,this.$scope.$apply();break;case"spectrum":var r=this.getColorByMouse(e);this.setColor(r)}});this.$window.on("mousemove",o),this.$window.one("mouseup",t.bind(this,function(e){this.$window.off("mousemove",o),this.$element.css({cursor:"crosshair"})})),o(e)},l.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})},l.prototype.onColorSet=function(e,t){switch(this.type){case"hue":var o=this.$scope.color.toHsv();this.setMarkerCenter(this.canvas.height-this.canvas.height*(o.h/360));break;case"alpha":this.currentColor=t.color.toRgb(),this.draw();var r=t.color.getAlpha(),l=this.canvas.height-this.canvas.height*r;this.setMarkerCenter(l);break;case"spectrum":var o=t.color.toHsv();this.currentHue=o.h,this.draw();var a=this.canvas.width*o.s,n=this.canvas.height-this.canvas.height*o.v;this.setMarkerCenter(a,n)}};var a=new l("hue",!0);a.getColorByPoint=function(e,t){var r=this.getImageData(e,t);this.setMarkerCenter(t);var l=new o({r:r[0],g:r[1],b:r[2]});return l.toHsl().h},a.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)};var n=new l("alpha",!0);n.getColorByPoint=function(e,t){var o=this.getImageData(e,t);return this.setMarkerCenter(t),o[3]/255},n.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(.999,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 0.000)"),this.context.fillStyle=e,this.context.fillRect(0,0,this.canvas.width,this.height)},n.extra=function(){this.$scope.$on("mdColorPicker:spectrumColorChange",t.bind(this,function(e,t){this.currentColor=t.color,this.draw()}))};var i=new l("spectrum",!1);i.getColorByPoint=function(e,t){var o=this.getImageData(e,t);return this.setMarkerCenter(e,t),{r:o[0],g:o[1],b:o[2]}},i.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(0,"rgba(255, 255, 255, 1.000)"),e.addColorStop(1,"rgba(255, 255, 255, 0.000)");var t=this.context.createLinearGradient(0,0,0,this.canvas.height);t.addColorStop(0,"rgba(0, 0, 0, 0.000)"),t.addColorStop(1,"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(0,0,this.canvas.width,this.canvas.height),this.context.fillStyle=t,this.context.fillRect(0,0,this.canvas.width,this.canvas.height)},i.extra=function(){this.$scope.$on("mdColorPicker:spectrumHueChange",t.bind(this,function(e,t){this.currentHue=t.hue,this.draw();var o=this.getMarkerCenter(),r=this.getColorByPoint(o.x,o.y);this.setColor(r)}))},t.module("mdColorPicker",[]).run(["$templateCache",function(e){var t={clear:'',gradient:'',tune:'',view_module:'',view_headline:'',history:'',clear_all:''};for(var o in t)t.hasOwnProperty(o)&&e.put([o,"svg"].join("."),['',t[o],""].join(""))}]).factory("mdColorPickerHistory",["$injector",function(e){var t=[],r=[],l=!1;try{l=e.get("$cookies")}catch(a){}if(l)for(var n=l.getObject("mdColorPickerHistory")||[],i=0;ic&&(t.pop(),r.pop()),l&&l.putObject("mdColorPickerHistory",r)},get:function(){return t},reset:function(){t=[],r=[],l&&l.putObject("mdColorPickerHistory",r)}}}]).directive("mdColorPicker",["$timeout","mdColorPickerHistory",function(e,t){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:"=?",mdColorDefaultTab:"=?"},controller:["$scope","$element","$attrs","$mdDialog","$mdColorPicker",function(e,t,o,l,a){var n=!1;if(e.options!==r)for(var i in e.options)if(e.options.hasOwnProperty(i)){var c=r;e.hasOwnProperty(i)?c=i:e.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(c="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),c&&e[c]===r&&(e[c]=e.options[i])}var s=t.controller("ngModel"),d=function(t){e.value=t||s.$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,d(),e.$watch(function(){return s.$modelValue},function(e){d(e)}),e.$watch("value",function(e,t){""!==e&&"undefined"!=typeof e&&e&&e!==t&&s.$setViewValue(e)}),e.clearValue=function(){e.value=""},e.showColorPicker=function(t){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,mdColorDefaultTab:e.mdColorDefaultTab,$event:t}).then(function(t){e.value=t})}}],compile:function(e,t){t.type=t.type!==r?t.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:"=",mdColorDefaultTab:"="},controller:["$scope","$element","$attrs",function(e,n,i){function c(t){var o=0;if(t&&"string"==typeof t){for(var r="mdColor"+t.slice(0,1).toUpperCase()+t.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 o(e.value||e["default"]),e.alpha=e.color.getAlpha(),e.history=a,e.materialFamily=[],e.whichPane=c(e.mdColorDefaultTab),e.inputFocus=!1;var m=9;2*Math.PI/m;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 t.isArray(e)?o({r:e[0],g:e[1],b:e[2]}).isDark():o(e).isDark()},e.previewFocus=function(){e.inputFocus=!0,r(function(){d[0].setSelectionRange(0,d[0].value.length)})},e.previewUnfocus=function(){e.inputFocus=!1,d[0].blur()},e.previewBlur=function(){e.inputFocus=!1,e.setValue()},e.previewKeyDown=function(t){13==t.keyCode&&e.ok&&e.ok()},e.setPaletteColor=function(t){r(function(){e.color=o(t.target.style.backgroundColor)})},e.setValue=function(){e.color&&e.color&&h[e.type]&&"rgba(0, 0, 0, 0)"!==e.color.toRgbString()&&(e.value=e.color[h[e.type]]())},e.changeValue=function(){e.color=o(e.value),e.$broadcast("mdColorPicker:colorSet",{color:e.color})},e.$watch("color._a",function(t){e.color.setAlpha(t)},!0),e.$watch("whichPane",function(t){e.$broadcast("mdColorPicker:colorSet",{color:e.color})}),e.$watch("type",function(){d.removeClass("switch"),r(function(){d.addClass("switch")})}),e.$watchGroup(["color.toRgbString()","type"],function(t){e.inputFocus||e.setValue()}),r(function(){e.$broadcast("mdColorPicker:colorSet",{color:e.color}),d.focus(),e.previewFocus()})}],link:function(e,o,l){function a(){var r=t.element(o[0].querySelector(".md-color-picker-palette")),l=t.element(o[0].querySelector(".md-color-picker-material-palette")),a=t.element('
'),n=t.element('
'),i=t.element('
'),c=t.element('
');t.forEach(e.palette,function(o,l){var i=a.clone();t.forEach(o,function(t){var o=n.clone();o.css({height:"25.5px",backgroundColor:t}),o.bind("click",e.setPaletteColor),i.append(o)}),r.append(i)}),t.forEach(e.materialPalette,function(o,r){var a=i.clone();a.html(""+r.replace("-"," ")+""),a.css({height:"75px",backgroundColor:"rgb("+o[500].value[0]+","+o[500].value[1]+","+o[500].value[2]+")"}),e.isDark(o[500].value)&&a.addClass("dark"),l.append(a),t.forEach(o,function(t,o){var r=c.clone();r.css({height:"33px",backgroundColor:"rgb("+t.value[0]+","+t.value[1]+","+t.value[2]+")"}),e.isDark(t.value)&&r.addClass("dark"),r.html(""+o+""),r.bind("click",e.setPaletteColor),l.append(r)})})}o[0].getElementsByTagName("md-tab");r(function(){a()})}}}]).directive("mdColorPickerHue",[function(){return{template:'
',link:a.get,controller:function(){}}}]).directive("mdColorPickerAlpha",[function(){return{template:'
',link:n.get,controller:function(){}}}]).directive("mdColorPickerSpectrum",[function(){return{template:'
{{hue}}',link:i.get,controller:function(){}}}]).factory("$mdColorPicker",["$q","$mdDialog","mdColorPickerHistory",function(e,t,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,a=t.show({templateUrl:"mdColorPickerDialog.tpl.html",hasBackdrop:e.hasBackdrop,clickOutsideToClose:e.clickOutsideToClose,controller:["$scope","options",function(e,o){e.close=function(){t.cancel()},e.ok=function(){t.hide(e.value)},e.hide=e.ok,e.value=o.value,e["default"]=o.defaultValue,e.random=o.random,e.mdColorAlphaChannel=o.mdColorAlphaChannel,e.mdColorSpectrum=o.mdColorSpectrum,e.mdColorSliders=o.mdColorSliders,e.mdColorGenericPalette=o.mdColorGenericPalette,e.mdColorMaterialPalette=o.mdColorMaterialPalette,e.mdColorHistory=o.mdColorHistory,e.mdColorDefaultTab=o.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 o(e))},function(){}),a},hide:function(){return a.hide()},cancel:function(){return a.cancel()}}}])}(t,t.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(e,o,t){!function(e,o,r){"use strict";var l=function(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("mousedown",o.bind(this,this.onMouseDown)),this.$scope.$on("mdColorPicker:colorSet",o.bind(this,this.onColorSet)),this.extra&&this.extra(),this.draw()})};l.prototype.$window=o.element(e),l.prototype.getColorByMouse=function(e){var o=e.pageX-this.offset.x,t=e.pageY-this.offset.y;return this.getColorByPoint(o,t)},l.prototype.setMarkerCenter=function(e,t){var l=-1*this.marker.offsetWidth/2,a=-1*this.marker.offsetHeight/2;t===r?(t=e+a,t=Math.max(Math.min(this.height-1+a,t),Math.ceil(a)),e=0):(e+=l,t+=a,e=Math.max(Math.min(this.height+l,e),Math.ceil(l)),t=Math.max(Math.min(this.height+a,t),Math.ceil(a))),o.element(this.marker).css({left:e+"px"}),o.element(this.marker).css({top:t+"px"})},l.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},l.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},l.prototype.onMouseDown=function(e){e.preventDefault(),e.stopImmediatePropagation(),this.$scope.previewUnfocus(),this.$element.css({cursor:"none"}),this.offset.x=this.canvas.getBoundingClientRect().left+1,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("mousemove",t),this.$window.one("mouseup",o.bind(this,function(e){this.$window.off("mousemove",t),this.$element.css({cursor:"crosshair"})})),t(e)},l.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})},l.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)}};var a=new l("hue",!0);a.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},a.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)};var n=new l("alpha",!0);n.getColorByPoint=function(e,o){var t=this.getImageData(e,o);return this.setMarkerCenter(o),t[3]/255},n.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(.999,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 0.000)"),this.context.fillStyle=e,this.context.fillRect(0,0,this.canvas.width,this.height)},n.extra=function(){this.$scope.$on("mdColorPicker:spectrumColorChange",o.bind(this,function(e,o){this.currentColor=o.color,this.draw()}))};var i=new l("spectrum",!1);i.getColorByPoint=function(e,o){var t=this.getImageData(e,o);return this.setMarkerCenter(e,o),{r:t[0],g:t[1],b:t[2]}},i.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(0,"rgba(255, 255, 255, 1.000)"),e.addColorStop(1,"rgba(255, 255, 255, 0.000)");var o=this.context.createLinearGradient(0,0,0,this.canvas.height);o.addColorStop(0,"rgba(0, 0, 0, 0.000)"),o.addColorStop(1,"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(0,0,this.canvas.width,this.canvas.height),this.context.fillStyle=o,this.context.fillRect(0,0,this.canvas.width,this.canvas.height)},i.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)}))},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("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;ic&&(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 c=r;e.hasOwnProperty(i)?c=i:e.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(c="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),c&&e[c]===r&&(e[c]=e.options[i])}var d=o.controller("ngModel"),s=function(o){e.value=o||d.$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 d.$modelValue},function(e){s(e)}),e.$watch("value",function(e,o){""!==e&&"undefined"!=typeof e&&e&&e!==o&&d.$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 c(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=c(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('
'),c=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=c.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",[function(){return{template:'
',link:a.get,controller:function(){}}}]).directive("mdColorPickerAlpha",[function(){return{template:'
',link:n.get,controller:function(){}}}]).directive("mdColorPickerSpectrum",[function(){return{template:'
{{hue}}',link:i.get,controller:function(){}}}]).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,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 diff --git a/src/js/mdColorPicker.js b/src/js/mdColorPicker.js index 77ce6d4..5d07393 100644 --- a/src/js/mdColorPicker.js +++ b/src/js/mdColorPicker.js @@ -415,6 +415,9 @@ angular.module('mdColorPicker', []) mdColorGenericPalette: '=?', mdColorMaterialPalette: '=?', mdColorHistory: '=?', + mdColorHex: '=?', + mdColorRgb: '=?', + mdColorHsl: '=?', mdColorDefaultTab: '=?' }, controller: ['$scope', '$element', '$attrs', '$mdDialog', '$mdColorPicker', function( $scope, $element, $attrs, $mdDialog, $mdColorPicker ) { @@ -458,8 +461,9 @@ angular.module('mdColorPicker', []) $scope.mdColorGenericPalette = $scope.mdColorGenericPalette === undefined ? true : $scope.mdColorGenericPalette; $scope.mdColorMaterialPalette = $scope.mdColorMaterialPalette === undefined ? true : $scope.mdColorMaterialPalette; $scope.mdColorHistory = $scope.mdColorHistory === undefined ? true : $scope.mdColorHistory; - - + $scope.mdColorHex = $scope.mdColorHex === undefined ? true : $scope.mdColorHex; + $scope.mdColorRgb = $scope.mdColorRgb === undefined ? true : $scope.mdColorRgb; + $scope.mdColorHsl = $scope.mdColorHsl === undefined ? true : $scope.mdColorHsl; // Set the starting value updateValue(); @@ -504,6 +508,9 @@ angular.module('mdColorPicker', []) mdColorGenericPalette: $scope.mdColorGenericPalette, mdColorMaterialPalette: $scope.mdColorMaterialPalette, mdColorHistory: $scope.mdColorHistory, + mdColorHex: $scope.mdColorHex, + mdColorRgb: $scope.mdColorRgb, + mdColorHsl: $scope.mdColorHsl, mdColorDefaultTab: $scope.mdColorDefaultTab, $event: $event, @@ -535,6 +542,9 @@ angular.module('mdColorPicker', []) mdColorGenericPalette: '=', mdColorMaterialPalette: '=', mdColorHistory: '=', + mdColorHex: '=', + mdColorRgb: '=', + mdColorHsl: '=', mdColorDefaultTab: '=' }, controller: function( $scope, $element, $attrs ) { @@ -853,9 +863,9 @@ angular.module('mdColorPicker', []) options.mdColorGenericPalette = options.mdColorGenericPalette === undefined ? true : options.mdColorGenericPalette; options.mdColorMaterialPalette = options.mdColorMaterialPalette === undefined ? true : options.mdColorMaterialPalette; options.mdColorHistory = options.mdColorHistory === undefined ? true : options.mdColorHistory; - - - + options.mdColorRgb = options.mdColorRgb === undefined ? true : options.mdColorRgb; + options.mdColorHsl = options.mdColorHsl === undefined ? true : options.mdColorHsl; + options.mdColorHex = ((options.mdColorHex === undefined) || (!options.mdColorRgb && !options.mdColorHsl)) ? true : options.mdColorHex; dialog = $mdDialog.show({ @@ -887,6 +897,9 @@ angular.module('mdColorPicker', []) $scope.mdColorGenericPalette = options.mdColorGenericPalette; $scope.mdColorMaterialPalette = options.mdColorMaterialPalette; $scope.mdColorHistory = options.mdColorHistory; + $scope.mdColorHex = options.mdColorHex; + $scope.mdColorRgb = options.mdColorRgb; + $scope.mdColorHsl = options.mdColorHsl; $scope.mdColorDefaultTab = options.mdColorDefaultTab; }], diff --git a/src/templates/mdColorPickerContainer.tpl.html b/src/templates/mdColorPickerContainer.tpl.html index 29cee87..7fe3dfc 100644 --- a/src/templates/mdColorPickerContainer.tpl.html +++ b/src/templates/mdColorPickerContainer.tpl.html @@ -10,9 +10,9 @@
- - - + + + diff --git a/src/templates/mdColorPickerDialog.tpl.html b/src/templates/mdColorPickerDialog.tpl.html index 89655b4..167e763 100644 --- a/src/templates/mdColorPickerDialog.tpl.html +++ b/src/templates/mdColorPickerDialog.tpl.html @@ -10,6 +10,9 @@ md-color-generic-palette="mdColorGenericPalette" md-color-material-palette="mdColorMaterialPalette" md-color-history="mdColorHistory" + md-color-hex="mdColorHex" + md-color-rgb="mdColorRgb" + md-color-hsl="mdColorHsl" md-color-default-tab="mdColorDefaultTab" >
From b98c69004298ca0e531e11a1a9e1229f393371d3 Mon Sep 17 00:00:00 2001 From: Volodymyr Lut Date: Tue, 31 May 2016 18:05:50 +0300 Subject: [PATCH 05/29] Update README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 7e77e68..eaf178f 100644 --- a/README.md +++ b/README.md @@ -102,6 +102,9 @@ $scope.scopeVariable.options = { | genericPalette | md-color-generic-palette | Boolean | true | Show the generic palette tab. | | materialPalette | md-color-material-palette | Boolean | true | Show the material colors palette tab. | | history | md-color-history | Boolean | true | Show the history tab. | +| hex | md-color-hex | Boolean | true | Show the HEX values tab. | +| rgb | md-color-rgb | Boolean | true | Show the RGB values tab. | +| hsl | md-color-hsl | Boolean | true | Show the HSL values tab. | | defaultTab | md-color-default-tab | String, Int | "spectrum" | Which tab should be selected when opening. Can either be a string or index. If the value is an index, do not count hidden/disabled tabs.
  • spectrum
  • sliders
  • genericPalette
  • materialPalette
  • history
| From ee578d5312f2e8fa2380eb38a6bfd55cc1c14ad5 Mon Sep 17 00:00:00 2001 From: Volodymyr Lut Date: Tue, 31 May 2016 19:03:47 +0300 Subject: [PATCH 06/29] Disable alpha channel for HEX-only mode --- demo/js/app.js | 2 +- dist/mdColorPicker.js | 2 +- dist/mdColorPicker.min.js | 2 +- src/js/mdColorPicker.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/demo/js/app.js b/demo/js/app.js index a644fee..5f44aed 100644 --- a/demo/js/app.js +++ b/demo/js/app.js @@ -29,7 +29,7 @@ app.controller('MainCtrl', function($scope) { alphaChannel: false, history: false, - defaultTab: 1 + defaultTab: 1, }; $scope.textConfig.showPreview = true; diff --git a/dist/mdColorPicker.js b/dist/mdColorPicker.js index 22e202f..ecf811b 100644 --- a/dist/mdColorPicker.js +++ b/dist/mdColorPicker.js @@ -873,7 +873,7 @@ angular.module('mdColorPicker', []) options.mdColorRgb = options.mdColorRgb === undefined ? true : options.mdColorRgb; options.mdColorHsl = options.mdColorHsl === undefined ? true : options.mdColorHsl; options.mdColorHex = ((options.mdColorHex === undefined) || (!options.mdColorRgb && !options.mdColorHsl)) ? true : options.mdColorHex; - + options.mdColorAlphaChannel = (!options.mdColorRgb && !options.mdColorHsl) ? false : options.mdColorAlphaChannel; dialog = $mdDialog.show({ templateUrl: 'mdColorPickerDialog.tpl.html', diff --git a/dist/mdColorPicker.min.js b/dist/mdColorPicker.min.js index ca0f1d6..8813b24 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";var l=function(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("mousedown",o.bind(this,this.onMouseDown)),this.$scope.$on("mdColorPicker:colorSet",o.bind(this,this.onColorSet)),this.extra&&this.extra(),this.draw()})};l.prototype.$window=o.element(e),l.prototype.getColorByMouse=function(e){var o=e.pageX-this.offset.x,t=e.pageY-this.offset.y;return this.getColorByPoint(o,t)},l.prototype.setMarkerCenter=function(e,t){var l=-1*this.marker.offsetWidth/2,a=-1*this.marker.offsetHeight/2;t===r?(t=e+a,t=Math.max(Math.min(this.height-1+a,t),Math.ceil(a)),e=0):(e+=l,t+=a,e=Math.max(Math.min(this.height+l,e),Math.ceil(l)),t=Math.max(Math.min(this.height+a,t),Math.ceil(a))),o.element(this.marker).css({left:e+"px"}),o.element(this.marker).css({top:t+"px"})},l.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},l.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},l.prototype.onMouseDown=function(e){e.preventDefault(),e.stopImmediatePropagation(),this.$scope.previewUnfocus(),this.$element.css({cursor:"none"}),this.offset.x=this.canvas.getBoundingClientRect().left+1,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("mousemove",t),this.$window.one("mouseup",o.bind(this,function(e){this.$window.off("mousemove",t),this.$element.css({cursor:"crosshair"})})),t(e)},l.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})},l.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)}};var a=new l("hue",!0);a.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},a.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)};var n=new l("alpha",!0);n.getColorByPoint=function(e,o){var t=this.getImageData(e,o);return this.setMarkerCenter(o),t[3]/255},n.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(.999,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 0.000)"),this.context.fillStyle=e,this.context.fillRect(0,0,this.canvas.width,this.height)},n.extra=function(){this.$scope.$on("mdColorPicker:spectrumColorChange",o.bind(this,function(e,o){this.currentColor=o.color,this.draw()}))};var i=new l("spectrum",!1);i.getColorByPoint=function(e,o){var t=this.getImageData(e,o);return this.setMarkerCenter(e,o),{r:t[0],g:t[1],b:t[2]}},i.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(0,"rgba(255, 255, 255, 1.000)"),e.addColorStop(1,"rgba(255, 255, 255, 0.000)");var o=this.context.createLinearGradient(0,0,0,this.canvas.height);o.addColorStop(0,"rgba(0, 0, 0, 0.000)"),o.addColorStop(1,"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(0,0,this.canvas.width,this.canvas.height),this.context.fillStyle=o,this.context.fillRect(0,0,this.canvas.width,this.canvas.height)},i.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)}))},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("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;ic&&(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 c=r;e.hasOwnProperty(i)?c=i:e.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(c="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),c&&e[c]===r&&(e[c]=e.options[i])}var d=o.controller("ngModel"),s=function(o){e.value=o||d.$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 d.$modelValue},function(e){s(e)}),e.$watch("value",function(e,o){""!==e&&"undefined"!=typeof e&&e&&e!==o&&d.$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 c(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=c(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('
'),c=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=c.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",[function(){return{template:'
',link:a.get,controller:function(){}}}]).directive("mdColorPickerAlpha",[function(){return{template:'
',link:n.get,controller:function(){}}}]).directive("mdColorPickerSpectrum",[function(){return{template:'
{{hue}}',link:i.get,controller:function(){}}}]).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,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(e,o,t){!function(e,o,r){"use strict";var l=function(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("mousedown",o.bind(this,this.onMouseDown)),this.$scope.$on("mdColorPicker:colorSet",o.bind(this,this.onColorSet)),this.extra&&this.extra(),this.draw()})};l.prototype.$window=o.element(e),l.prototype.getColorByMouse=function(e){var o=e.pageX-this.offset.x,t=e.pageY-this.offset.y;return this.getColorByPoint(o,t)},l.prototype.setMarkerCenter=function(e,t){var l=-1*this.marker.offsetWidth/2,a=-1*this.marker.offsetHeight/2;t===r?(t=e+a,t=Math.max(Math.min(this.height-1+a,t),Math.ceil(a)),e=0):(e+=l,t+=a,e=Math.max(Math.min(this.height+l,e),Math.ceil(l)),t=Math.max(Math.min(this.height+a,t),Math.ceil(a))),o.element(this.marker).css({left:e+"px"}),o.element(this.marker).css({top:t+"px"})},l.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},l.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},l.prototype.onMouseDown=function(e){e.preventDefault(),e.stopImmediatePropagation(),this.$scope.previewUnfocus(),this.$element.css({cursor:"none"}),this.offset.x=this.canvas.getBoundingClientRect().left+1,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("mousemove",t),this.$window.one("mouseup",o.bind(this,function(e){this.$window.off("mousemove",t),this.$element.css({cursor:"crosshair"})})),t(e)},l.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})},l.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)}};var a=new l("hue",!0);a.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},a.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)};var n=new l("alpha",!0);n.getColorByPoint=function(e,o){var t=this.getImageData(e,o);return this.setMarkerCenter(o),t[3]/255},n.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(.999,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 0.000)"),this.context.fillStyle=e,this.context.fillRect(0,0,this.canvas.width,this.height)},n.extra=function(){this.$scope.$on("mdColorPicker:spectrumColorChange",o.bind(this,function(e,o){this.currentColor=o.color,this.draw()}))};var i=new l("spectrum",!1);i.getColorByPoint=function(e,o){var t=this.getImageData(e,o);return this.setMarkerCenter(e,o),{r:t[0],g:t[1],b:t[2]}},i.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(0,"rgba(255, 255, 255, 1.000)"),e.addColorStop(1,"rgba(255, 255, 255, 0.000)");var o=this.context.createLinearGradient(0,0,0,this.canvas.height);o.addColorStop(0,"rgba(0, 0, 0, 0.000)"),o.addColorStop(1,"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(0,0,this.canvas.width,this.canvas.height),this.context.fillStyle=o,this.context.fillRect(0,0,this.canvas.width,this.canvas.height)},i.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)}))},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("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;ic&&(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 c=r;e.hasOwnProperty(i)?c=i:e.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(c="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),c&&e[c]===r&&(e[c]=e.options[i])}var d=o.controller("ngModel"),s=function(o){e.value=o||d.$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 d.$modelValue},function(e){s(e)}),e.$watch("value",function(e,o){""!==e&&"undefined"!=typeof e&&e&&e!==o&&d.$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 c(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=c(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('
'),c=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=c.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",[function(){return{template:'
',link:a.get,controller:function(){}}}]).directive("mdColorPickerAlpha",[function(){return{template:'
',link:n.get,controller:function(){}}}]).directive("mdColorPickerSpectrum",[function(){return{template:'
{{hue}}',link:i.get,controller:function(){}}}]).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 diff --git a/src/js/mdColorPicker.js b/src/js/mdColorPicker.js index 5d07393..67878c1 100644 --- a/src/js/mdColorPicker.js +++ b/src/js/mdColorPicker.js @@ -866,7 +866,7 @@ angular.module('mdColorPicker', []) options.mdColorRgb = options.mdColorRgb === undefined ? true : options.mdColorRgb; options.mdColorHsl = options.mdColorHsl === undefined ? true : options.mdColorHsl; options.mdColorHex = ((options.mdColorHex === undefined) || (!options.mdColorRgb && !options.mdColorHsl)) ? true : options.mdColorHex; - + options.mdColorAlphaChannel = (!options.mdColorRgb && !options.mdColorHsl) ? false : options.mdColorAlphaChannel; dialog = $mdDialog.show({ templateUrl: 'mdColorPickerDialog.tpl.html', From 2ed51af05b7413ed6c4f126366274bb8b6a39d12 Mon Sep 17 00:00:00 2001 From: Brian Kelley Date: Fri, 10 Jun 2016 09:02:45 -0500 Subject: [PATCH 07/29] travis-ci integration start --- .travis.yml | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 .travis.yml diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..abb78a5 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,13 @@ +language: node_js +node_js: + - '0.10.33' +before_script: + - 'export CHROME_BIN=chromium-browser' + - 'export DISPLAY=:99.0' + - 'sh -e /etc/init.d/xvfb start' + - 'npm install -g bower karma grunt-cli jshint' + - 'npm install' # install npm packages + - 'bower install' # install bower packages + +after_script: + - 'grunt' # or other command for build, run tests, etc From c5fc6d6c3d9a6941fd6518df09676909b1f7c042 Mon Sep 17 00:00:00 2001 From: Brian Kelley Date: Fri, 10 Jun 2016 09:04:34 -0500 Subject: [PATCH 08/29] travis-ci integration start --- .travis.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index abb78a5..0be1038 100644 --- a/.travis.yml +++ b/.travis.yml @@ -5,9 +5,9 @@ before_script: - 'export CHROME_BIN=chromium-browser' - 'export DISPLAY=:99.0' - 'sh -e /etc/init.d/xvfb start' - - 'npm install -g bower karma grunt-cli jshint' + - 'npm install -g bower jshint' - 'npm install' # install npm packages - 'bower install' # install bower packages after_script: - - 'grunt' # or other command for build, run tests, etc + - 'gulp build' # or other command for build, run tests, etc From 5630f9b32488d452ed3048f169f2bac36077a37f Mon Sep 17 00:00:00 2001 From: Brian Kelley Date: Fri, 10 Jun 2016 09:22:20 -0500 Subject: [PATCH 09/29] travis-ci integration start --- .travis.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index 0be1038..53acaa5 100644 --- a/.travis.yml +++ b/.travis.yml @@ -8,6 +8,5 @@ before_script: - 'npm install -g bower jshint' - 'npm install' # install npm packages - 'bower install' # install bower packages - -after_script: +script: - 'gulp build' # or other command for build, run tests, etc From 092ca90c95985d9e1b0a7fc913d3c6f0154c59ee Mon Sep 17 00:00:00 2001 From: Brian Kelley Date: Fri, 10 Jun 2016 09:29:34 -0500 Subject: [PATCH 10/29] require('es6-promise').polyfill(); --- gulpfile.js | 2 ++ package.json | 5 +++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 9faaab8..d4a4426 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,3 +1,5 @@ +require('es6-promise').polyfill(); + var gulp = require('gulp'), gutil = require('gulp-util'), path = require('path'), diff --git a/package.json b/package.json index 0fc6e34..2f6b8ba 100644 --- a/package.json +++ b/package.json @@ -4,16 +4,18 @@ "description": "Angular-Material inspired color picker.", "main": "dist/mdColorPicker.min.js", "dependencies": { - "tinycolor2": "*" + "tinycolor2": "*" }, "devDependencies": { "del": "^2.0.1", + "es6-promise": "^3.2.1", "gulp": "^3.9.0", "gulp-angular-templatecache": "^1.7.0", "gulp-autoprefixer": "^3.1.0", "gulp-concat": "^2.6.0", "gulp-cssnano": "^2.1.0", "gulp-debug": "^2.1.0", + "gulp-header": "^1.7.1", "gulp-inject-reload": "0.0.2", "gulp-jsclosure": "0.0.1", "gulp-less": "^3.0.3", @@ -23,7 +25,6 @@ "gulp-sourcemaps": "^1.5.2", "gulp-uglify": "^1.4.0", "gulp-util": "^3.0.7", - "gulp-header": "^1.7.1", "merge-stream": "^1.0.0", "run-sequence": "^1.1.2", "st": "^1.0.0", From 6a5f723ccbf8c270edf5ec3d80cbd1bf38da91d7 Mon Sep 17 00:00:00 2001 From: Brian Kelley Date: Fri, 10 Jun 2016 14:33:17 -0500 Subject: [PATCH 11/29] Bug Fixes - Minor GradientCanvas refactor - fixing gradients not allowing correct color selection at min/max extremes (#fff or #000) closes #62 - Made most scope properties optional and the correct type closes #58 - refactored demo structure, will refactor the page itself soon --- .bowerrc | 3 + .gitignore | 1 + bower.json | 3 + demo/index.html | 121 +----------- demo/redirect.html | 12 -- dist/mdColorPicker.css | 13 +- dist/mdColorPicker.js | 381 +++++++++++++++++++----------------- dist/mdColorPicker.min.css | 2 +- dist/mdColorPicker.min.js | 2 +- gulpfile.js | 21 +- index.html | 116 +++++++++++ src/js/mdColorPicker.js | 372 ++++++++++++++++++----------------- src/less/mdColorPicker.less | 11 +- 13 files changed, 554 insertions(+), 504 deletions(-) create mode 100644 .bowerrc delete mode 100644 demo/redirect.html create mode 100644 index.html diff --git a/.bowerrc b/.bowerrc new file mode 100644 index 0000000..a34b31e --- /dev/null +++ b/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "demo/lib" +} diff --git a/.gitignore b/.gitignore index a76ebff..f2a0992 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ src/lib/ .idea/workspace.xml dist/demo +demo/lib npm-debug.log /bower_components/ diff --git a/bower.json b/bower.json index b35c0e2..eba6b69 100644 --- a/bower.json +++ b/bower.json @@ -14,6 +14,9 @@ "angular": ">=1.5.0", "angular-material": ">=1.0.5" }, + "devDependencies": { + "angular-cookies": ">=1.5.0" + }, "keywords": [ "color-picker", "angular", diff --git a/demo/index.html b/demo/index.html index 2b404b0..e582936 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,115 +1,12 @@ - - - - - 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}} - - -
-
-
-
-
-
- -
-
Text Preview
-
-
- The five boxing wizards jump quickly. -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - + + + + + Loading... + + + + diff --git a/demo/redirect.html b/demo/redirect.html deleted file mode 100644 index 2694c80..0000000 --- a/demo/redirect.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - Loading... - - - - - \ No newline at end of file diff --git a/dist/mdColorPicker.css b/dist/mdColorPicker.css index e637845..1caa677 100644 --- a/dist/mdColorPicker.css +++ b/dist/mdColorPicker.css @@ -8,6 +8,10 @@ md-color-picker .md-color-picker-input-container, [md-color-picker] .md-color-picker-input-container { position: relative; } +md-color-picker .md-color-picker-input-container .md-color-picker-input::-ms-clear, +[md-color-picker] .md-color-picker-input-container .md-color-picker-input::-ms-clear { + display: none; +} md-color-picker .md-color-picker-input-container .md-color-picker-preview, [md-color-picker] .md-color-picker-input-container .md-color-picker-preview { content: ''; @@ -57,8 +61,13 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear, -webkit-transition: border-bottom-width cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s; transition: border-bottom-width cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s; } +.md-color-picker-container canvas { + width: 100%; + height: 100%; +} .md-color-picker-container .md-color-picker-preview { -webkit-box-flex: 1; + -webkit-flex: 1; -ms-flex: 1; flex: 1; font-weight: bold; @@ -200,8 +209,8 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear, width: 255px; } .md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum] .md-color-picker-marker { - width: 11px; - height: 11px; + width: 12px; + height: 12px; border-radius: 50%; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 0 2px 0 rgba(0, 0, 0, 0.5); top: -5px; diff --git a/dist/mdColorPicker.js b/dist/mdColorPicker.js index ecf811b..6e49b61 100644 --- a/dist/mdColorPicker.js +++ b/dist/mdColorPicker.js @@ -8,9 +8,153 @@ (function( window, angular, undefined ) { 'use strict'; + var dateClick; -var GradientCanvas = function( type, restrictX ) { + +var canvasTypes = { + hue: { + getColorByPoint: function( x, y ) { + var imageData = this.getImageData( x, y ); + this.setMarkerCenter( y ); + + var hsl = new tinycolor( {r: imageData[0], g: imageData[1], b: imageData[2] } ); + return hsl.toHsl().h; + }, + draw: function() { + this.$element.css({'height': this.height + 'px'}); + + this.canvas.height = this.height; + this.canvas.width = this.height; + + // Create gradient + var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); + + // Add colors + hueGrd.addColorStop(0.01, 'rgba(255, 0, 0, 1.000)'); + hueGrd.addColorStop(0.167, 'rgba(255, 0, 255, 1.000)'); + hueGrd.addColorStop(0.333, 'rgba(0, 0, 255, 1.000)'); + hueGrd.addColorStop(0.500, 'rgba(0, 255, 255, 1.000)'); + hueGrd.addColorStop(0.666, 'rgba(0, 255, 0, 1.000)'); + hueGrd.addColorStop(0.828, 'rgba(255, 255, 0, 1.000)'); + hueGrd.addColorStop(0.999, 'rgba(255, 0, 0, 1.000)'); + + // Fill with gradient + this.context.fillStyle = hueGrd; + this.context.fillRect( 0, 0, this.canvas.width, this.height ); + } + }, + alpha: { + getColorByPoint: function( x, y ) { + var imageData = this.getImageData( x, y ); + this.setMarkerCenter( y ); + + return imageData[3] / 255; + }, + draw: function () { + this.$element.css({'height': this.height + 'px'}); + + this.canvas.height = this.height; + this.canvas.width = this.height; + + // Create gradient + var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); + + // Add colors + hueGrd.addColorStop(0.01, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 1.000)'); + hueGrd.addColorStop(0.99, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 0.000)'); + + // Fill with gradient + this.context.fillStyle = hueGrd; + this.context.fillRect( -1, -1, this.canvas.width+2, this.height+2 ); + }, + extra: function() { + this.$scope.$on('mdColorPicker:spectrumColorChange', angular.bind( this, function( e, args ) { + this.currentColor = args.color; + this.draw(); + })); + } + }, + spectrum: { + getColorByPoint: function( x, y ) { + + var imageData = this.getImageData( x, y ); + this.setMarkerCenter(x,y); + + return { + r: imageData[0], + g: imageData[1], + b: imageData[2] + }; + }, + draw: function() { + this.canvas.height = this.height; + this.canvas.width = this.height; + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + + // Odd bug prevented selecting min, max ranges from all gradients. + // Start at 0.01, end at 0.99 and stretch it to 1px larger in each direction + + // White gradient + var whiteGrd = this.context.createLinearGradient(0, 0, this.canvas.width, 0); + + + whiteGrd.addColorStop(0.01, 'rgba(255, 255, 255, 1.000)'); + whiteGrd.addColorStop(0.99, 'rgba(255, 255, 255, 0.000)'); + + // Black Gradient + var blackGrd = this.context.createLinearGradient(0, 0, 0, this.canvas.height); + + + blackGrd.addColorStop(0.01, 'rgba(0, 0, 0, 0.000)'); + blackGrd.addColorStop(0.99, 'rgba(0, 0, 0, 1.000)'); + + // Fill with solid + this.context.fillStyle = 'hsl( ' + this.currentHue + ', 100%, 50%)'; + this.context.fillRect( 0, 0, this.canvas.width, this.canvas.height ); + + // Fill with white + // Odd bug prevented selecting min, max ranges from all gradients + this.context.fillStyle = whiteGrd; + this.context.fillRect( -1, -1, this.canvas.width+2, this.canvas.height+2 ); + + // Fill with black + // Odd bug prevented selecting min, max ranges from all gradients + this.context.fillStyle = blackGrd; + this.context.fillRect( -1, -1, this.canvas.width+2, this.canvas.height+2 ); + }, + extra: function() { + this.$scope.$on('mdColorPicker:spectrumHueChange', angular.bind( this, function( e, args ) { + this.currentHue = args.hue; + this.draw(); + var markerPos = this.getMarkerCenter(); + var color = this.getColorByPoint( markerPos.x, markerPos.y ); + this.setColor( color ); + + })); + } + } + +}; + +function GradientCanvasFactory( ) { + + return function gradientCanvas( type ) { + var canvas = new GradientCanvas( type, type != 'spectrum' ); + canvas = angular.merge( canvas, canvasTypes[type] ); + + return { + template: '
', + link: canvas.get, + controller: function() { + // console.log( "mdColorPickerAlpha Controller", Date.now() - dateClick ); + } + }; + } + +} + +function GradientCanvas( type, restrictX ) { this.type = type; this.restrictX = restrictX; @@ -44,12 +188,11 @@ var GradientCanvas = function( type, restrictX ) { //$scope.$watch( function() { return color.getRgb(); }, hslObserver, true ); - - this.$element.on( 'mousedown', angular.bind( this, this.onMouseDown ) ); + this.$element.on('touchstart mousedown', angular.bind(this, this.onMouseDown)); this.$scope.$on('mdColorPicker:colorSet', angular.bind( this, this.onColorSet ) ); if ( this.extra ) { this.extra(); - }; + } //////////////////////////// // init //////////////////////////// @@ -59,36 +202,49 @@ var GradientCanvas = function( type, restrictX ) { //return angular.bind( this, this.get ); -}; +} + + + GradientCanvas.prototype.$window = angular.element( window ); GradientCanvas.prototype.getColorByMouse = function( e ) { - var x = e.pageX - this.offset.x; - var y = e.pageY - this.offset.y; - return this.getColorByPoint( x, y ); + var te = e.touches && e.touches[0]; + + var pageX = te && te.pageX || e.pageX; + var pageY = te && te.pageY || e.pageY; + + var x = Math.round( pageX - this.offset.x ); + var y = Math.round( pageY - this.offset.y ); + + return this.getColorByPoint(x, y); }; GradientCanvas.prototype.setMarkerCenter = function( x, y ) { var xOffset = -1 * this.marker.offsetWidth / 2; var yOffset = -1 * this.marker.offsetHeight / 2; + var xAdjusted, xFinal, yAdjusted, yFinal; + if ( y === undefined ) { - y = x + yOffset; - y = Math.max( Math.min( this.height-1 + yOffset, y ), Math.ceil( yOffset ) ); + yAdjusted = x + yOffset; + yFinal = Math.round( Math.max( Math.min( this.height-1 + yOffset, yAdjusted), yOffset ) ); - x = 0; + xFinal = 0; } else { - x = x + xOffset; - y = y + yOffset; + xAdjusted = x + xOffset; + yAdjusted = y + yOffset; - x = Math.max( Math.min( this.height + xOffset, x ), Math.ceil( xOffset ) ); - y = Math.max( Math.min( this.height + yOffset, y ), Math.ceil( yOffset ) ); + xFinal = Math.floor( Math.max( Math.min( this.height + xOffset, xAdjusted ), xOffset ) ); + yFinal = Math.floor( Math.max( Math.min( this.height + yOffset, yAdjusted ), yOffset ) ); + // Debug output + // console.log( "Raw: ", x+','+y, "Adjusted: ", xAdjusted + ',' + yAdjusted, "Final: ", xFinal + ',' + yFinal ); } - angular.element(this.marker).css({'left': x + 'px' }); - angular.element(this.marker).css({'top': y + 'px'}); + angular.element(this.marker).css({'left': xFinal + 'px' }); + angular.element(this.marker).css({'top': yFinal + 'px'}); }; GradientCanvas.prototype.getMarkerCenter = function() { @@ -116,7 +272,7 @@ GradientCanvas.prototype.onMouseDown = function( e ) { this.$element.css({ 'cursor': 'none' }); - this.offset.x = this.canvas.getBoundingClientRect().left+1; + this.offset.x = this.canvas.getBoundingClientRect().left; this.offset.y = this.canvas.getBoundingClientRect().top; var fn = angular.bind( this, function( e ) { @@ -138,9 +294,9 @@ GradientCanvas.prototype.onMouseDown = function( e ) { } }); - this.$window.on( 'mousemove', fn ); - this.$window.one( 'mouseup', angular.bind(this, function( e ) { - this.$window.off( 'mousemove', fn ); + this.$window.on('touchmove mousemove', fn); + this.$window.one('touchend mouseup', angular.bind(this, function (e) { + this.$window.off('touchmove mousemove', fn); this.$element.css({ 'cursor': 'crosshair' }); })); @@ -186,125 +342,11 @@ GradientCanvas.prototype.onColorSet = function( e, args ) { }; -var hueLinkFn = new GradientCanvas( 'hue', true ); -hueLinkFn.getColorByPoint = function( x, y ) { - var imageData = this.getImageData( x, y ); - this.setMarkerCenter( y ); - - var hsl = new tinycolor( {r: imageData[0], g: imageData[1], b: imageData[2] } ); - return hsl.toHsl().h; - -}; -hueLinkFn.draw = function() { - - - this.$element.css({'height': this.height + 'px'}); - - this.canvas.height = this.height; - this.canvas.width = this.height; - - - - // Create gradient - var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); - - // Add colors - hueGrd.addColorStop(0.01, 'rgba(255, 0, 0, 1.000)'); - hueGrd.addColorStop(0.167, 'rgba(255, 0, 255, 1.000)'); - hueGrd.addColorStop(0.333, 'rgba(0, 0, 255, 1.000)'); - hueGrd.addColorStop(0.500, 'rgba(0, 255, 255, 1.000)'); - hueGrd.addColorStop(0.666, 'rgba(0, 255, 0, 1.000)'); - hueGrd.addColorStop(0.828, 'rgba(255, 255, 0, 1.000)'); - hueGrd.addColorStop(0.999, 'rgba(255, 0, 0, 1.000)'); - - // Fill with gradient - this.context.fillStyle = hueGrd; - this.context.fillRect( 0, 0, this.canvas.width, this.height ); -}; - -var alphaLinkFn = new GradientCanvas( 'alpha', true ); -alphaLinkFn.getColorByPoint = function( x, y ) { - var imageData = this.getImageData( x, y ); - this.setMarkerCenter( y ); - return imageData[3] / 255; -}; -alphaLinkFn.draw = function () { - this.$element.css({'height': this.height + 'px'}); - - this.canvas.height = this.height; - this.canvas.width = this.height; - - // Create gradient - var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); - - // Add colors - hueGrd.addColorStop(0.01, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 1.000)'); - hueGrd.addColorStop(0.999, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 0.000)'); - - // Fill with gradient - this.context.fillStyle = hueGrd; - this.context.fillRect( 0, 0, this.canvas.width, this.height ); -}; -alphaLinkFn.extra = function() { - this.$scope.$on('mdColorPicker:spectrumColorChange', angular.bind( this, function( e, args ) { - this.currentColor = args.color; - this.draw(); - })); -}; -var spectrumLinkFn = new GradientCanvas( 'spectrum', false ); -spectrumLinkFn.getColorByPoint = function( x, y ) { - var imageData = this.getImageData( x, y ); - this.setMarkerCenter(x,y); - - return { - r: imageData[0], - g: imageData[1], - b: imageData[2] - }; -}; -spectrumLinkFn.draw = function() { - this.canvas.height = this.height; - this.canvas.width = this.height; - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); - // White gradient - var whiteGrd = this.context.createLinearGradient(0, 0, this.canvas.width, 0); - - whiteGrd.addColorStop(0, 'rgba(255, 255, 255, 1.000)'); - whiteGrd.addColorStop(1, 'rgba(255, 255, 255, 0.000)'); - - // Black Gradient - var blackGrd = this.context.createLinearGradient(0, 0, 0, this.canvas.height); - - blackGrd.addColorStop(0, 'rgba(0, 0, 0, 0.000)'); - blackGrd.addColorStop(1, 'rgba(0, 0, 0, 1.000)'); - - // Fill with solid - this.context.fillStyle = 'hsl( ' + this.currentHue + ', 100%, 50%)'; - this.context.fillRect( 0, 0, this.canvas.width, this.canvas.height ); - - // Fill with white - this.context.fillStyle = whiteGrd; - this.context.fillRect( 0, 0, this.canvas.width, this.canvas.height ); - - // Fill with black - this.context.fillStyle = blackGrd; - this.context.fillRect( 0, 0, this.canvas.width, this.canvas.height ); -}; -spectrumLinkFn.extra = function() { - this.$scope.$on('mdColorPicker:spectrumHueChange', angular.bind( this, function( e, args ) { - this.currentHue = args.hue; - this.draw(); - var markerPos = this.getMarkerCenter(); - var color = this.getColorByPoint( markerPos.x, markerPos.y ); - this.setColor( color ); - - })); -}; angular.module('mdColorPicker', []) @@ -327,6 +369,7 @@ angular.module('mdColorPicker', []) } } }]) + .factory('mdColorGradientCanvas', GradientCanvasFactory ) .factory('mdColorPickerHistory', ['$injector', function( $injector ) { var history = []; @@ -400,17 +443,17 @@ angular.module('mdColorPicker', []) // Input options type: '@', - label: '@', - icon: '@', - random: '@', - default: '@', + label: '@?', + icon: '@?', + random: '@?', + default: '@?', // Dialog Options - openOnInput: '@', - hasBackdrop: '@', - clickOutsideToClose: '@', - skipHide: '@', - preserveScope: '@', + openOnInput: '=?', + hasBackdrop: '=?', + clickOutsideToClose: '=?', + skipHide: '=?', + preserveScope: '=?', // Advanced options mdColorClearButton: '=?', @@ -434,15 +477,14 @@ angular.module('mdColorPicker', []) if ( $scope.options !== undefined ) { for ( var opt in $scope.options ) { if ( $scope.options.hasOwnProperty( opt ) ) { - var scopeVal = undefined; - var scopeKey = undefined; - if ( $scope.hasOwnProperty( opt ) ) { + var scopeKey; + //if ( $scope.hasOwnProperty( opt ) ) { // Removing this because optional scope properties are not added to the scope. scopeKey = opt; - } else if ( $scope.hasOwnProperty( 'mdColor' + opt.slice(0,1).toUpperCase() + opt.slice(1) ) ) { + //} else + if ( $scope.hasOwnProperty( 'mdColor' + opt.slice(0,1).toUpperCase() + opt.slice(1) ) ) { scopeKey = 'mdColor' + opt.slice(0,1).toUpperCase() + opt.slice(1); } - - if ( scopeKey && $scope[scopeKey] === undefined ) { + if ( scopeKey && ( $scope[scopeKey] === undefined || $scope[scopeKey] === '' ) ) { $scope[scopeKey] = $scope.options[opt]; } } @@ -560,11 +602,11 @@ angular.module('mdColorPicker', []) function getTabIndex( tab ) { var index = 0; if ( tab && typeof( tab ) === 'string' ) { -/* DOM isn't fast enough for this + /* DOM isn't fast enough for this var tabs = $element[0].querySelector('.md-color-picker-colors').getElementsByTagName( 'md-tab' ); console.log( tabs.length ); -*/ + */ var tabName = 'mdColor' + tab.slice(0,1).toUpperCase() + tab.slice(1); var tabs = ['mdColorSpectrum', 'mdColorSliders', 'mdColorGenericPalette', 'mdColorMaterialPalette', 'mdColorHistory']; for ( var x = 0; x < tabs.length; x++ ) { @@ -813,38 +855,11 @@ angular.module('mdColorPicker', []) }; }]) - .directive( 'mdColorPickerHue', [function() { - return { - template: '
', - link: hueLinkFn.get, - controller: function() { - // console.log( "mdColorPickerHue Controller", Date.now() - dateClick ); - } - }; - }]) - - .directive( 'mdColorPickerAlpha', [function() { - return { - template: '
', - link: alphaLinkFn.get, - controller: function() { - // console.log( "mdColorPickerAlpha Controller", Date.now() - dateClick ); - } - }; - }]) - - .directive( 'mdColorPickerSpectrum', [function() { - return { - template: '
{{hue}}', - link: spectrumLinkFn.get, - controller: function() { - // console.log( "mdColorPickerSpectrum Controller", Date.now() - dateClick ); - } - }; - }]) + .directive( 'mdColorPickerHue', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('hue'); }]) + .directive( 'mdColorPickerAlpha', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('alpha'); }]) + .directive( 'mdColorPickerSpectrum', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('spectrum'); }]) - .factory('$mdColorPicker', ['$q', '$mdDialog', 'mdColorPickerHistory', function ($q, $mdDialog, colorHistory) - { + .factory('$mdColorPicker', ['$q', '$mdDialog', 'mdColorPickerHistory', function ($q, $mdDialog, colorHistory) { var dialog; return { diff --git a/dist/mdColorPicker.min.css b/dist/mdColorPicker.min.css index aca88da..03d7ec4 100644 --- a/dist/mdColorPicker.min.css +++ b/dist/mdColorPicker.min.css @@ -4,4 +4,4 @@ * @link https://github.com/brianpkelley/md-color-picker * @license MIT */ -[md-color-picker] .md-color-picker-input-container,md-color-picker .md-color-picker-input-container{position:relative}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview,md-color-picker .md-color-picker-input-container .md-color-picker-preview{content:'';width:24px;height:24px;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);position:relative;top:22px;overflow:hidden;background-color:#fff;background-image:-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result,md-color-picker .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result{width:100%;height:100%}[md-color-picker] .md-color-picker-input-container .md-color-picker-clear,md-color-picker .md-color-picker-input-container .md-color-picker-clear{position:absolute;bottom:42px;right:-16px;color:rgba(0,0,0,.26)}.md-color-picker-container{padding:8px;background:#fff;outline:none;height:397px;width:347px;opacity:1;overflow:hidden;z-index:1000}.md-color-picker-container .md-color-picker-arrow{border:0 solid transparent;border-right-width:30px;border-bottom-width:0;position:absolute;left:0;top:0;-webkit-transition:border-bottom-width .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1);transition:border-bottom-width .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1)}.md-color-picker-container .md-color-picker-preview{-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:700;font-size:18px;color:#fff;margin:-8px -8px 0;position:relative}.md-color-picker-container .md-color-picker-preview .md-color-picker-result{position:absolute;height:100%;opacity:1;background:red}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>input{position:relative;top:-15px;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div{position:relative;width:100%}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input{border-width:0;background:transparent;text-align:center;position:absolute;top:-15px;bottom:0;left:0;right:0;color:#eee;outline:none;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input.switch{-webkit-transition:top .25s cubic-bezier(.25,.8,.25,1),opacity .25s ease-out;transition:top .25s cubic-bezier(.25,.8,.25,1),opacity .25s ease-out;top:0;opacity:1}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-wrapper{max-height:28px;height:28px}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-ink-bar{background:hsla(0,0%,100%,.5)}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab{padding-top:2px;background:hsla(0,0%,100%,.25);color:#eee;max-width:none!important}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark,.md-color-picker-container .md-color-picker-preview.dark .md-color-picker-preview-input{color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab{background:rgba(0,0,0,.25);color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark md-ink-bar{background:rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-tabs{margin:0 -8px}.md-color-picker-container .md-color-picker-tabs md-tabs[md-align-tabs=bottom]{padding-bottom:0}.md-color-picker-container .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-tabs md-tabs-wrapper{max-height:36px;height:36px}.md-color-picker-container .md-color-picker-tabs .md-tab{padding:7px 24px;background:transparent}.md-color-picker-container .md-color-picker-tabs .md-tab:last-of-type{margin-right:-2px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height){min-height:298px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper{height:255px;margin-bottom:8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content{height:255px;padding:0 8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content [md-tabs-template]{height:100%}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors{margin:8px -8px -8px}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors md-ink-bar{top:auto}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab{background:rgba(0,0,0,.075)}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab.md-active{background:#fff}.md-color-picker-container .md-color-picker-colors{overflow:hidden;margin-top:8px}.md-color-picker-container .md-color-picker-colors .md-color-picker-marker{position:absolute;border:2px solid #fff;box-shadow:0 0 2px 0 rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum]{position:relative;cursor:crosshair;overflow:hidden;height:255px;width:255px}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum] .md-color-picker-marker{width:11px;height:11px;border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.5),inset 0 0 2px 0 rgba(0,0,0,.5);top:-5px;left:calc(100% - 5px)}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha],.md-color-picker-container .md-color-picker-colors [md-color-picker-hue]{position:relative;cursor:crosshair;overflow:hidden;width:30px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha].md-color-picker-wide,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue].md-color-picker-wide{width:67px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha] .md-color-picker-marker,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue] .md-color-picker-marker{height:5px;width:100%;border-left:0;border-right:0;top:-2px;left:0}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-track-fill{background:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-thumb:after{background-color:#d01515;border-color:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-track-fill{background:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-thumb:after{background-color:#19d015;border-color:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-track-fill{background:#1560d0}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-thumb:after{background-color:#1560d0;border-color:#1560d0}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title{font-size:22px;line-height:75px;padding:0 15px;color:rgba(0,0,0,.85);text-transform:capitalize}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title.dark{color:hsla(0,0%,100%,.85)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title:not(:first-child){margin-top:16px}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label{font-size:12px;line-height:33px;padding:0 5px;color:rgba(0,0,0,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label.dark{color:hsla(0,0%,100%,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-colors{position:absolute;-webkit-transition:left .25s cubic-bezier(.25,.8,.25,1),right .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1),bottom .25s cubic-bezier(.25,.8,.25,1);transition:left .25s cubic-bezier(.25,.8,.25,1),right .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1),bottom .25s cubic-bezier(.25,.8,.25,1)}.md-color-picker-container .md-color-picker-history>div>div{height:20px;margin:4px;background-color:#fff;background-image:-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}.md-color-picker-container .md-color-picker-history>div>div>div{width:100%;height:100%}.md-color-picker-container .md-color-picker-history button{margin-top:auto;margin-left:auto}.md-color-picker-checkered-bg{background-color:#fff;background-image:-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px} \ No newline at end of file +[md-color-picker] .md-color-picker-input-container,md-color-picker .md-color-picker-input-container{position:relative}[md-color-picker] .md-color-picker-input-container .md-color-picker-input::-ms-clear,md-color-picker .md-color-picker-input-container .md-color-picker-input::-ms-clear{display:none}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview,md-color-picker .md-color-picker-input-container .md-color-picker-preview{content:'';width:24px;height:24px;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);position:relative;top:22px;overflow:hidden;background-color:#fff;background-image:-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result,md-color-picker .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result{width:100%;height:100%}[md-color-picker] .md-color-picker-input-container .md-color-picker-clear,md-color-picker .md-color-picker-input-container .md-color-picker-clear{position:absolute;bottom:42px;right:-16px;color:rgba(0,0,0,.26)}.md-color-picker-container{padding:8px;background:#fff;outline:none;height:397px;width:347px;opacity:1;overflow:hidden;z-index:1000}.md-color-picker-container .md-color-picker-arrow{border:0 solid transparent;border-right-width:30px;border-bottom-width:0;position:absolute;left:0;top:0;-webkit-transition:border-bottom-width cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s;transition:border-bottom-width cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s}.md-color-picker-container canvas{width:100%;height:100%}.md-color-picker-container .md-color-picker-preview{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:700;font-size:18px;color:#fff;margin:-8px -8px 0;position:relative}.md-color-picker-container .md-color-picker-preview .md-color-picker-result{position:absolute;height:100%;opacity:1;background:red}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>input{position:relative;top:-15px;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div{position:relative;width:100%}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input{border-width:0;background:transparent;text-align:center;position:absolute;top:-15px;bottom:0;left:0;right:0;color:#eee;outline:none;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input.switch{-webkit-transition:top cubic-bezier(.25,.8,.25,1) .25s,.25s opacity ease-out;transition:top cubic-bezier(.25,.8,.25,1) .25s,.25s opacity ease-out;top:0;opacity:1}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-wrapper{max-height:28px;height:28px}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-ink-bar{background:hsla(0,0%,100%,.5)}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab{padding-top:2px;background:hsla(0,0%,100%,.25);color:#eee;max-width:none!important}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark,.md-color-picker-container .md-color-picker-preview.dark .md-color-picker-preview-input{color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab{background:rgba(0,0,0,.25);color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark md-ink-bar{background:rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-tabs{margin:0 -8px}.md-color-picker-container .md-color-picker-tabs md-tabs[md-align-tabs=bottom]{padding-bottom:0}.md-color-picker-container .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-tabs md-tabs-wrapper{max-height:36px;height:36px}.md-color-picker-container .md-color-picker-tabs .md-tab{padding:7px 24px;background:transparent}.md-color-picker-container .md-color-picker-tabs .md-tab:last-of-type{margin-right:-2px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height){min-height:298px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper{height:255px;margin-bottom:8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content{height:255px;padding:0 8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content [md-tabs-template]{height:100%}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors{margin:8px -8px -8px}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors md-ink-bar{top:auto}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab{background:rgba(0,0,0,.075)}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab.md-active{background:#fff}.md-color-picker-container .md-color-picker-colors{overflow:hidden;margin-top:8px}.md-color-picker-container .md-color-picker-colors .md-color-picker-marker{position:absolute;border:2px solid #fff;box-shadow:0 0 2px 0 rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum]{position:relative;cursor:crosshair;overflow:hidden;height:255px;width:255px}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum] .md-color-picker-marker{width:12px;height:12px;border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.5),inset 0 0 2px 0 rgba(0,0,0,.5);top:-5px;left:calc(100% - 5px)}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha],.md-color-picker-container .md-color-picker-colors [md-color-picker-hue]{position:relative;cursor:crosshair;overflow:hidden;width:30px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha].md-color-picker-wide,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue].md-color-picker-wide{width:67px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha] .md-color-picker-marker,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue] .md-color-picker-marker{height:5px;width:100%;border-left:0;border-right:0;top:-2px;left:0}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-track-fill{background:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-thumb:after{background-color:#d01515;border-color:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-track-fill{background:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-thumb:after{background-color:#19d015;border-color:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-track-fill{background:#1560d0}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-thumb:after{background-color:#1560d0;border-color:#1560d0}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title{font-size:22px;line-height:75px;padding:0 15px;color:rgba(0,0,0,.85);text-transform:capitalize}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title.dark{color:hsla(0,0%,100%,.85)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title:not(:first-child){margin-top:16px}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label{font-size:12px;line-height:33px;padding:0 5px;color:rgba(0,0,0,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label.dark{color:hsla(0,0%,100%,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-colors{position:absolute;-webkit-transition:left cubic-bezier(.25,.8,.25,1) .25s,right cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s,bottom cubic-bezier(.25,.8,.25,1) .25s;transition:left cubic-bezier(.25,.8,.25,1) .25s,right cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s,bottom cubic-bezier(.25,.8,.25,1) .25s}.md-color-picker-container .md-color-picker-history>div>div{height:20px;margin:4px;background-color:#fff;background-image:-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}.md-color-picker-container .md-color-picker-history>div>div>div{width:100%;height:100%}.md-color-picker-container .md-color-picker-history button{margin-top:auto;margin-left:auto}.md-color-picker-checkered-bg{background-color:#fff;background-image:-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px} \ No newline at end of file diff --git a/dist/mdColorPicker.min.js b/dist/mdColorPicker.min.js index 8813b24..e452857 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";var l=function(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("mousedown",o.bind(this,this.onMouseDown)),this.$scope.$on("mdColorPicker:colorSet",o.bind(this,this.onColorSet)),this.extra&&this.extra(),this.draw()})};l.prototype.$window=o.element(e),l.prototype.getColorByMouse=function(e){var o=e.pageX-this.offset.x,t=e.pageY-this.offset.y;return this.getColorByPoint(o,t)},l.prototype.setMarkerCenter=function(e,t){var l=-1*this.marker.offsetWidth/2,a=-1*this.marker.offsetHeight/2;t===r?(t=e+a,t=Math.max(Math.min(this.height-1+a,t),Math.ceil(a)),e=0):(e+=l,t+=a,e=Math.max(Math.min(this.height+l,e),Math.ceil(l)),t=Math.max(Math.min(this.height+a,t),Math.ceil(a))),o.element(this.marker).css({left:e+"px"}),o.element(this.marker).css({top:t+"px"})},l.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},l.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},l.prototype.onMouseDown=function(e){e.preventDefault(),e.stopImmediatePropagation(),this.$scope.previewUnfocus(),this.$element.css({cursor:"none"}),this.offset.x=this.canvas.getBoundingClientRect().left+1,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("mousemove",t),this.$window.one("mouseup",o.bind(this,function(e){this.$window.off("mousemove",t),this.$element.css({cursor:"crosshair"})})),t(e)},l.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})},l.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)}};var a=new l("hue",!0);a.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},a.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)};var n=new l("alpha",!0);n.getColorByPoint=function(e,o){var t=this.getImageData(e,o);return this.setMarkerCenter(o),t[3]/255},n.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(.999,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 0.000)"),this.context.fillStyle=e,this.context.fillRect(0,0,this.canvas.width,this.height)},n.extra=function(){this.$scope.$on("mdColorPicker:spectrumColorChange",o.bind(this,function(e,o){this.currentColor=o.color,this.draw()}))};var i=new l("spectrum",!1);i.getColorByPoint=function(e,o){var t=this.getImageData(e,o);return this.setMarkerCenter(e,o),{r:t[0],g:t[1],b:t[2]}},i.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(0,"rgba(255, 255, 255, 1.000)"),e.addColorStop(1,"rgba(255, 255, 255, 0.000)");var o=this.context.createLinearGradient(0,0,0,this.canvas.height);o.addColorStop(0,"rgba(0, 0, 0, 0.000)"),o.addColorStop(1,"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(0,0,this.canvas.width,this.canvas.height),this.context.fillStyle=o,this.context.fillRect(0,0,this.canvas.width,this.canvas.height)},i.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)}))},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("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;ic&&(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 c=r;e.hasOwnProperty(i)?c=i:e.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(c="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),c&&e[c]===r&&(e[c]=e.options[i])}var d=o.controller("ngModel"),s=function(o){e.value=o||d.$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 d.$modelValue},function(e){s(e)}),e.$watch("value",function(e,o){""!==e&&"undefined"!=typeof e&&e&&e!==o&&d.$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 c(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=c(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('
'),c=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=c.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",[function(){return{template:'
',link:a.get,controller:function(){}}}]).directive("mdColorPickerAlpha",[function(){return{template:'
',link:n.get,controller:function(){}}}]).directive("mdColorPickerSpectrum",[function(){return{template:'
{{hue}}',link:i.get,controller:function(){}}}]).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(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 diff --git a/gulpfile.js b/gulpfile.js index d4a4426..fd6a7d7 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,4 +1,4 @@ -require('es6-promise').polyfill(); +require('es6-promise').polyfill(); // Needed for autoprefix and travis-ci var gulp = require('gulp'), gutil = require('gulp-util'), @@ -33,7 +33,7 @@ var ports = { var moduleName = 'mdColorPicker'; var paths = { - demo: 'demo', + demo: 'src/demo', dist: 'dist/', src: { demo: ['demo/**/*.*'], @@ -116,18 +116,21 @@ gulp.task('js', function () { ====================================================================*/ gulp.task('demo-resources', function () { - gulp.src(['demo/**/*.{js,css}', 'demo/redirect.html']) - .pipe(gulp.dest('dist/demo')) + gulp.src(['demo/js/*.js','demo/css/*.css']) + // .pipe(gulp.dest('dist/demo')) .pipe(livereload()); - - }); +gulp.task('dist-resources', function () { + gulp.src(['dist/*']) + // .pipe(gulp.dest('dist/demo/md-color-picker')) + .pipe(livereload()); +}); gulp.task('demo', ['demo-resources'], function () { gulp.src('demo/index.html') .pipe(injectReload({port: ports.livereload})) - .pipe(gulp.dest('dist/demo')) + // .pipe(gulp.dest('dist/demo')) .pipe(livereload()); @@ -136,7 +139,7 @@ gulp.task('demo', ['demo-resources'], function () { /*=================================================================== = Start local demo/dev server = ===================================================================*/ -gulp.task('server', ['build', 'demo'], function () { +gulp.task('server', ['build', 'demo', 'dist-resources'], function () { livereload.listen({port: ports.livereload, basePath: "."}); http.createServer( st({path: path.resolve(__dirname, 'dist'), index: 'demo/redirect.html', cache: false}) @@ -177,7 +180,7 @@ gulp.task('clean', function (cb) { ======================================*/ gulp.task('build', function (done) { - var tasks = ['less', 'js', 'demo']; + var tasks = ['less', 'js', 'demo', 'dist-resources']; seq('clean', tasks, done); }); diff --git a/index.html b/index.html new file mode 100644 index 0000000..8bed5a9 --- /dev/null +++ b/index.html @@ -0,0 +1,116 @@ + + + + + + + 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}} + + +
+
+
+
+
+
+ +
+
Text Preview
+
+
+ The five boxing wizards jump quickly. +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/js/mdColorPicker.js b/src/js/mdColorPicker.js index 5022893..2d83924 100644 --- a/src/js/mdColorPicker.js +++ b/src/js/mdColorPicker.js @@ -1,9 +1,153 @@ (function( window, angular, undefined ) { 'use strict'; + var dateClick; -var GradientCanvas = function( type, restrictX ) { + +var canvasTypes = { + hue: { + getColorByPoint: function( x, y ) { + var imageData = this.getImageData( x, y ); + this.setMarkerCenter( y ); + + var hsl = new tinycolor( {r: imageData[0], g: imageData[1], b: imageData[2] } ); + return hsl.toHsl().h; + }, + draw: function() { + this.$element.css({'height': this.height + 'px'}); + + this.canvas.height = this.height; + this.canvas.width = this.height; + + // Create gradient + var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); + + // Add colors + hueGrd.addColorStop(0.01, 'rgba(255, 0, 0, 1.000)'); + hueGrd.addColorStop(0.167, 'rgba(255, 0, 255, 1.000)'); + hueGrd.addColorStop(0.333, 'rgba(0, 0, 255, 1.000)'); + hueGrd.addColorStop(0.500, 'rgba(0, 255, 255, 1.000)'); + hueGrd.addColorStop(0.666, 'rgba(0, 255, 0, 1.000)'); + hueGrd.addColorStop(0.828, 'rgba(255, 255, 0, 1.000)'); + hueGrd.addColorStop(0.999, 'rgba(255, 0, 0, 1.000)'); + + // Fill with gradient + this.context.fillStyle = hueGrd; + this.context.fillRect( 0, 0, this.canvas.width, this.height ); + } + }, + alpha: { + getColorByPoint: function( x, y ) { + var imageData = this.getImageData( x, y ); + this.setMarkerCenter( y ); + + return imageData[3] / 255; + }, + draw: function () { + this.$element.css({'height': this.height + 'px'}); + + this.canvas.height = this.height; + this.canvas.width = this.height; + + // Create gradient + var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); + + // Add colors + hueGrd.addColorStop(0.01, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 1.000)'); + hueGrd.addColorStop(0.99, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 0.000)'); + + // Fill with gradient + this.context.fillStyle = hueGrd; + this.context.fillRect( -1, -1, this.canvas.width+2, this.height+2 ); + }, + extra: function() { + this.$scope.$on('mdColorPicker:spectrumColorChange', angular.bind( this, function( e, args ) { + this.currentColor = args.color; + this.draw(); + })); + } + }, + spectrum: { + getColorByPoint: function( x, y ) { + + var imageData = this.getImageData( x, y ); + this.setMarkerCenter(x,y); + + return { + r: imageData[0], + g: imageData[1], + b: imageData[2] + }; + }, + draw: function() { + this.canvas.height = this.height; + this.canvas.width = this.height; + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + + // Odd bug prevented selecting min, max ranges from all gradients. + // Start at 0.01, end at 0.99 and stretch it to 1px larger in each direction + + // White gradient + var whiteGrd = this.context.createLinearGradient(0, 0, this.canvas.width, 0); + + + whiteGrd.addColorStop(0.01, 'rgba(255, 255, 255, 1.000)'); + whiteGrd.addColorStop(0.99, 'rgba(255, 255, 255, 0.000)'); + + // Black Gradient + var blackGrd = this.context.createLinearGradient(0, 0, 0, this.canvas.height); + + + blackGrd.addColorStop(0.01, 'rgba(0, 0, 0, 0.000)'); + blackGrd.addColorStop(0.99, 'rgba(0, 0, 0, 1.000)'); + + // Fill with solid + this.context.fillStyle = 'hsl( ' + this.currentHue + ', 100%, 50%)'; + this.context.fillRect( 0, 0, this.canvas.width, this.canvas.height ); + + // Fill with white + // Odd bug prevented selecting min, max ranges from all gradients + this.context.fillStyle = whiteGrd; + this.context.fillRect( -1, -1, this.canvas.width+2, this.canvas.height+2 ); + + // Fill with black + // Odd bug prevented selecting min, max ranges from all gradients + this.context.fillStyle = blackGrd; + this.context.fillRect( -1, -1, this.canvas.width+2, this.canvas.height+2 ); + }, + extra: function() { + this.$scope.$on('mdColorPicker:spectrumHueChange', angular.bind( this, function( e, args ) { + this.currentHue = args.hue; + this.draw(); + var markerPos = this.getMarkerCenter(); + var color = this.getColorByPoint( markerPos.x, markerPos.y ); + this.setColor( color ); + + })); + } + } + +}; + +function GradientCanvasFactory( ) { + + return function gradientCanvas( type ) { + var canvas = new GradientCanvas( type, type != 'spectrum' ); + canvas = angular.merge( canvas, canvasTypes[type] ); + + return { + template: '
', + link: canvas.get, + controller: function() { + // console.log( "mdColorPickerAlpha Controller", Date.now() - dateClick ); + } + }; + } + +} + +function GradientCanvas( type, restrictX ) { this.type = type; this.restrictX = restrictX; @@ -41,7 +185,7 @@ var GradientCanvas = function( type, restrictX ) { this.$scope.$on('mdColorPicker:colorSet', angular.bind( this, this.onColorSet ) ); if ( this.extra ) { this.extra(); - }; + } //////////////////////////// // init //////////////////////////// @@ -51,42 +195,49 @@ var GradientCanvas = function( type, restrictX ) { //return angular.bind( this, this.get ); -}; +} + + + GradientCanvas.prototype.$window = angular.element( window ); GradientCanvas.prototype.getColorByMouse = function( e ) { - var te = e.touches && e.touches[0]; + var te = e.touches && e.touches[0]; - var pageX = te && te.pageX || e.pageX; - var pageY = te && te.pageY || e.pageY; + var pageX = te && te.pageX || e.pageX; + var pageY = te && te.pageY || e.pageY; - var x = pageX - this.offset.x; - var y = pageY - this.offset.y; + var x = Math.round( pageX - this.offset.x ); + var y = Math.round( pageY - this.offset.y ); - return this.getColorByPoint(x, y); + return this.getColorByPoint(x, y); }; GradientCanvas.prototype.setMarkerCenter = function( x, y ) { var xOffset = -1 * this.marker.offsetWidth / 2; var yOffset = -1 * this.marker.offsetHeight / 2; + var xAdjusted, xFinal, yAdjusted, yFinal; + if ( y === undefined ) { - y = x + yOffset; - y = Math.max( Math.min( this.height-1 + yOffset, y ), Math.ceil( yOffset ) ); + yAdjusted = x + yOffset; + yFinal = Math.round( Math.max( Math.min( this.height-1 + yOffset, yAdjusted), yOffset ) ); - x = 0; + xFinal = 0; } else { - x = x + xOffset; - y = y + yOffset; + xAdjusted = x + xOffset; + yAdjusted = y + yOffset; - x = Math.max( Math.min( this.height + xOffset, x ), Math.ceil( xOffset ) ); - y = Math.max( Math.min( this.height + yOffset, y ), Math.ceil( yOffset ) ); + xFinal = Math.floor( Math.max( Math.min( this.height + xOffset, xAdjusted ), xOffset ) ); + yFinal = Math.floor( Math.max( Math.min( this.height + yOffset, yAdjusted ), yOffset ) ); + // Debug output + // console.log( "Raw: ", x+','+y, "Adjusted: ", xAdjusted + ',' + yAdjusted, "Final: ", xFinal + ',' + yFinal ); } - angular.element(this.marker).css({'left': x + 'px' }); - angular.element(this.marker).css({'top': y + 'px'}); + angular.element(this.marker).css({'left': xFinal + 'px' }); + angular.element(this.marker).css({'top': yFinal + 'px'}); }; GradientCanvas.prototype.getMarkerCenter = function() { @@ -114,7 +265,7 @@ GradientCanvas.prototype.onMouseDown = function( e ) { this.$element.css({ 'cursor': 'none' }); - this.offset.x = this.canvas.getBoundingClientRect().left+1; + this.offset.x = this.canvas.getBoundingClientRect().left; this.offset.y = this.canvas.getBoundingClientRect().top; var fn = angular.bind( this, function( e ) { @@ -184,125 +335,11 @@ GradientCanvas.prototype.onColorSet = function( e, args ) { }; -var hueLinkFn = new GradientCanvas( 'hue', true ); -hueLinkFn.getColorByPoint = function( x, y ) { - var imageData = this.getImageData( x, y ); - this.setMarkerCenter( y ); - - var hsl = new tinycolor( {r: imageData[0], g: imageData[1], b: imageData[2] } ); - return hsl.toHsl().h; - -}; -hueLinkFn.draw = function() { - - - this.$element.css({'height': this.height + 'px'}); - - this.canvas.height = this.height; - this.canvas.width = this.height; - - - - // Create gradient - var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); - - // Add colors - hueGrd.addColorStop(0.01, 'rgba(255, 0, 0, 1.000)'); - hueGrd.addColorStop(0.167, 'rgba(255, 0, 255, 1.000)'); - hueGrd.addColorStop(0.333, 'rgba(0, 0, 255, 1.000)'); - hueGrd.addColorStop(0.500, 'rgba(0, 255, 255, 1.000)'); - hueGrd.addColorStop(0.666, 'rgba(0, 255, 0, 1.000)'); - hueGrd.addColorStop(0.828, 'rgba(255, 255, 0, 1.000)'); - hueGrd.addColorStop(0.999, 'rgba(255, 0, 0, 1.000)'); - - // Fill with gradient - this.context.fillStyle = hueGrd; - this.context.fillRect( 0, 0, this.canvas.width, this.height ); -}; - - -var alphaLinkFn = new GradientCanvas( 'alpha', true ); -alphaLinkFn.getColorByPoint = function( x, y ) { - var imageData = this.getImageData( x, y ); - this.setMarkerCenter( y ); - - return imageData[3] / 255; -}; -alphaLinkFn.draw = function () { - this.$element.css({'height': this.height + 'px'}); - - this.canvas.height = this.height; - this.canvas.width = this.height; - - // Create gradient - var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); - - // Add colors - hueGrd.addColorStop(0.01, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 1.000)'); - hueGrd.addColorStop(0.999, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 0.000)'); - - // Fill with gradient - this.context.fillStyle = hueGrd; - this.context.fillRect( 0, 0, this.canvas.width, this.height ); -}; -alphaLinkFn.extra = function() { - this.$scope.$on('mdColorPicker:spectrumColorChange', angular.bind( this, function( e, args ) { - this.currentColor = args.color; - this.draw(); - })); -}; - - -var spectrumLinkFn = new GradientCanvas( 'spectrum', false ); -spectrumLinkFn.getColorByPoint = function( x, y ) { - var imageData = this.getImageData( x, y ); - this.setMarkerCenter(x,y); - - return { - r: imageData[0], - g: imageData[1], - b: imageData[2] - }; -}; -spectrumLinkFn.draw = function() { - this.canvas.height = this.height; - this.canvas.width = this.height; - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); - // White gradient - - var whiteGrd = this.context.createLinearGradient(0, 0, this.canvas.width, 0); - whiteGrd.addColorStop(0, 'rgba(255, 255, 255, 1.000)'); - whiteGrd.addColorStop(1, 'rgba(255, 255, 255, 0.000)'); - // Black Gradient - var blackGrd = this.context.createLinearGradient(0, 0, 0, this.canvas.height); - blackGrd.addColorStop(0, 'rgba(0, 0, 0, 0.000)'); - blackGrd.addColorStop(1, 'rgba(0, 0, 0, 1.000)'); - // Fill with solid - this.context.fillStyle = 'hsl( ' + this.currentHue + ', 100%, 50%)'; - this.context.fillRect( 0, 0, this.canvas.width, this.canvas.height ); - // Fill with white - this.context.fillStyle = whiteGrd; - this.context.fillRect( 0, 0, this.canvas.width, this.canvas.height ); - - // Fill with black - this.context.fillStyle = blackGrd; - this.context.fillRect( 0, 0, this.canvas.width, this.canvas.height ); -}; -spectrumLinkFn.extra = function() { - this.$scope.$on('mdColorPicker:spectrumHueChange', angular.bind( this, function( e, args ) { - this.currentHue = args.hue; - this.draw(); - var markerPos = this.getMarkerCenter(); - var color = this.getColorByPoint( markerPos.x, markerPos.y ); - this.setColor( color ); - - })); -}; angular.module('mdColorPicker', []) @@ -325,6 +362,7 @@ angular.module('mdColorPicker', []) } } }]) + .factory('mdColorGradientCanvas', GradientCanvasFactory ) .factory('mdColorPickerHistory', ['$injector', function( $injector ) { var history = []; @@ -398,17 +436,17 @@ angular.module('mdColorPicker', []) // Input options type: '@', - label: '@', - icon: '@', - random: '@', - default: '@', + label: '@?', + icon: '@?', + random: '@?', + default: '@?', // Dialog Options - openOnInput: '@', - hasBackdrop: '@', - clickOutsideToClose: '@', - skipHide: '@', - preserveScope: '@', + openOnInput: '=?', + hasBackdrop: '=?', + clickOutsideToClose: '=?', + skipHide: '=?', + preserveScope: '=?', // Advanced options mdColorClearButton: '=?', @@ -432,15 +470,14 @@ angular.module('mdColorPicker', []) if ( $scope.options !== undefined ) { for ( var opt in $scope.options ) { if ( $scope.options.hasOwnProperty( opt ) ) { - var scopeVal = undefined; - var scopeKey = undefined; - if ( $scope.hasOwnProperty( opt ) ) { + var scopeKey; + //if ( $scope.hasOwnProperty( opt ) ) { // Removing this because optional scope properties are not added to the scope. scopeKey = opt; - } else if ( $scope.hasOwnProperty( 'mdColor' + opt.slice(0,1).toUpperCase() + opt.slice(1) ) ) { + //} else + if ( $scope.hasOwnProperty( 'mdColor' + opt.slice(0,1).toUpperCase() + opt.slice(1) ) ) { scopeKey = 'mdColor' + opt.slice(0,1).toUpperCase() + opt.slice(1); } - - if ( scopeKey && $scope[scopeKey] === undefined ) { + if ( scopeKey && ( $scope[scopeKey] === undefined || $scope[scopeKey] === '' ) ) { $scope[scopeKey] = $scope.options[opt]; } } @@ -558,11 +595,11 @@ angular.module('mdColorPicker', []) function getTabIndex( tab ) { var index = 0; if ( tab && typeof( tab ) === 'string' ) { -/* DOM isn't fast enough for this + /* DOM isn't fast enough for this var tabs = $element[0].querySelector('.md-color-picker-colors').getElementsByTagName( 'md-tab' ); console.log( tabs.length ); -*/ + */ var tabName = 'mdColor' + tab.slice(0,1).toUpperCase() + tab.slice(1); var tabs = ['mdColorSpectrum', 'mdColorSliders', 'mdColorGenericPalette', 'mdColorMaterialPalette', 'mdColorHistory']; for ( var x = 0; x < tabs.length; x++ ) { @@ -811,38 +848,11 @@ angular.module('mdColorPicker', []) }; }]) - .directive( 'mdColorPickerHue', [function() { - return { - template: '
', - link: hueLinkFn.get, - controller: function() { - // console.log( "mdColorPickerHue Controller", Date.now() - dateClick ); - } - }; - }]) - - .directive( 'mdColorPickerAlpha', [function() { - return { - template: '
', - link: alphaLinkFn.get, - controller: function() { - // console.log( "mdColorPickerAlpha Controller", Date.now() - dateClick ); - } - }; - }]) - - .directive( 'mdColorPickerSpectrum', [function() { - return { - template: '
{{hue}}', - link: spectrumLinkFn.get, - controller: function() { - // console.log( "mdColorPickerSpectrum Controller", Date.now() - dateClick ); - } - }; - }]) + .directive( 'mdColorPickerHue', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('hue'); }]) + .directive( 'mdColorPickerAlpha', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('alpha'); }]) + .directive( 'mdColorPickerSpectrum', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('spectrum'); }]) - .factory('$mdColorPicker', ['$q', '$mdDialog', 'mdColorPickerHistory', function ($q, $mdDialog, colorHistory) - { + .factory('$mdColorPicker', ['$q', '$mdDialog', 'mdColorPickerHistory', function ($q, $mdDialog, colorHistory) { var dialog; return { diff --git a/src/less/mdColorPicker.less b/src/less/mdColorPicker.less index 83effe2..1c02e80 100644 --- a/src/less/mdColorPicker.less +++ b/src/less/mdColorPicker.less @@ -8,6 +8,8 @@ background-position:0 0, 4px 4px; } + + md-color-picker .md-color-picker-input-container, [md-color-picker] .md-color-picker-input-container { position: relative; @@ -86,7 +88,10 @@ md-color-picker .md-color-picker-input-container, transition: border-bottom-width @cubic-trans, top @cubic-trans; } - + & canvas { + width: 100%; + height: 100%; + } @@ -251,8 +256,8 @@ md-color-picker .md-color-picker-input-container, width: 255px; .md-color-picker-marker { - width: 11px; - height: 11px; + width: 12px; + height: 12px; border-radius: 50%; From a740426996a8132bbec900a56192c639b5267d28 Mon Sep 17 00:00:00 2001 From: Brian Kelley Date: Fri, 10 Jun 2016 14:43:15 -0500 Subject: [PATCH 12/29] Travis Badge --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index eaf178f..9ab4b31 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,7 @@ Angular-Material based color picker with no jQuery or other DOM/utility library [![NPM version](https://badge-me.herokuapp.com/api/npm/md-color-picker.png)](http://badges.enytc.com/for/npm/md-color-picker) [![BOWER version](https://badge-me.herokuapp.com/api/bower/brianpkelley/md-color-picker.png)](http://badges.enytc.com/for/bower/brianpkelley/md-color-picker) +[![Build Status](https://travis-ci.org/brianpkelley/md-color-picker.svg?branch=develop)](https://travis-ci.org/brianpkelley/md-color-picker) ![preview](https://raw.githubusercontent.com/brianpkelley/md-color-picker/master/md-color-picker-2.png) From fcddd9d168bb32f4742becc7d7f2448ba6c1f04b Mon Sep 17 00:00:00 2001 From: Brian Kelley Date: Fri, 10 Jun 2016 14:52:02 -0500 Subject: [PATCH 13/29] Update TODO --- README.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 9ab4b31..ed80458 100644 --- a/README.md +++ b/README.md @@ -114,9 +114,10 @@ This is still in a very early beta, and is rapidly changing (3 versions before i ## Known issues / TODO -- [ ] Prevent focus from opening color picker on window/tab activation. -- [ ] Focus on preview input when user starts typing. -- [ ] Clean up code. - - [ ] Javascript - - [ ] CSS / LESS - - [X] Build script cleaned up and static server integrated for development +[ ] Break apart md-color-picker into other directives, md-color-picker-preview , input, etc. +[ ] Add i18n support. +[ ] Refactor LESS +[ ] Add optional SASS file +[ ] IE 11 Issues +[ ] Inline dropdown mode +[ ] Validation From e7bf7e4f6af8285c6b600720ce499b09547e5fab Mon Sep 17 00:00:00 2001 From: John Langan Date: Fri, 8 Jul 2016 14:59:11 +0300 Subject: [PATCH 14/29] change bower.json main attribute to load unminified js and css --- bower.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index eba6b69..de5293a 100644 --- a/bower.json +++ b/bower.json @@ -6,8 +6,8 @@ ], "description": "Angular-Material inspired color picker.", "main": [ - "dist/mdColorPicker.min.js", - "dist/mdColorPicker.min.css" + "dist/mdColorPicker.js", + "dist/mdColorPicker.css" ], "dependencies": { "tinycolor": ">=1.2.1", From dc933d86df2ecb770309c052c27cc00779d4b860 Mon Sep 17 00:00:00 2001 From: John Langan Date: Fri, 8 Jul 2016 15:09:14 +0300 Subject: [PATCH 15/29] setViewValue when clearing, fixes #55 --- src/js/mdColorPicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/mdColorPicker.js b/src/js/mdColorPicker.js index 2d83924..9d29097 100644 --- a/src/js/mdColorPicker.js +++ b/src/js/mdColorPicker.js @@ -526,7 +526,7 @@ angular.module('mdColorPicker', []) // The only other ngModel changes $scope.clearValue = function clearValue() { - $scope.value = ''; + ngModel.$setViewValue(''); }; $scope.showColorPicker = function showColorPicker($event) { if ( didJustClose ) { From 2967b59d2d87b3d430836667cf6c911ec0b4f64d Mon Sep 17 00:00:00 2001 From: mostafabarmshory Date: Mon, 24 Sep 2018 21:03:02 +0330 Subject: [PATCH 16/29] Adding eclipse project settings --- .gitignore | 2 ++ .project | 28 ++++++++++++++++++++++++++++ bower.json | 3 ++- 3 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 .project diff --git a/.gitignore b/.gitignore index f2a0992..76b4b5f 100644 --- a/.gitignore +++ b/.gitignore @@ -20,3 +20,5 @@ demo/lib npm-debug.log /bower_components/ +/package-lock.json +/.settings/ diff --git a/.project b/.project new file mode 100644 index 0000000..36eafd9 --- /dev/null +++ b/.project @@ -0,0 +1,28 @@ + + + md-color-picker + + + + + + org.eclipse.wst.validation.validationbuilder + + + + + + org.eclipse.wst.jsdt.core.jsNature + + + + 1528927900152 + + 10 + + org.eclipse.ui.ide.multiFilter + 1.0-name-matches-false-true-bower_components|node_modules|coverage|nbproject|doc + + + + diff --git a/bower.json b/bower.json index de5293a..3fa854b 100644 --- a/bower.json +++ b/bower.json @@ -2,7 +2,8 @@ "name": "md-color-picker", "version": "0.2.6", "authors": [ - "Brian Kelley " + "Brian Kelley ", + "Mostafa Barmshory " ], "description": "Angular-Material inspired color picker.", "main": [ From 07ba62d2c4e16d4eb6cba2691aaced889ae690b5 Mon Sep 17 00:00:00 2001 From: mostafabarmshory Date: Mon, 24 Sep 2018 21:10:43 +0330 Subject: [PATCH 17/29] new product --- bower.json | 66 +++++++++++++++++++------------------- dist/mdColorPicker.css | 1 - dist/mdColorPicker.js | 2 +- dist/mdColorPicker.min.css | 2 +- dist/mdColorPicker.min.js | 2 +- 5 files changed, 36 insertions(+), 37 deletions(-) diff --git a/bower.json b/bower.json index 3fa854b..4962fad 100644 --- a/bower.json +++ b/bower.json @@ -1,37 +1,37 @@ { - "name": "md-color-picker", - "version": "0.2.6", - "authors": [ - "Brian Kelley ", - "Mostafa Barmshory " - ], - "description": "Angular-Material inspired color picker.", - "main": [ - "dist/mdColorPicker.js", - "dist/mdColorPicker.css" - ], - "dependencies": { - "tinycolor": ">=1.2.1", - "angular": ">=1.5.0", - "angular-material": ">=1.0.5" - }, + "name": "md-color-picker", + "version": "0.2.6", + "authors": [ + "Brian Kelley ", + "Mostafa Barmshory " + ], + "description": "Angular-Material inspired color picker.", + "main": [ + "dist/mdColorPicker.js", + "dist/mdColorPicker.css" + ], + "dependencies": { + "tinycolor": ">=1.2.1", + "angular": "1.7.x", + "angular-material": "1.1.x" + }, "devDependencies": { - "angular-cookies": ">=1.5.0" + "angular-cookies": "1.7.x" }, - "keywords": [ - "color-picker", - "angular", - "angular-material", - "color-chooser", - "color-dialog" - ], - "license": "MIT", - "homepage": "https://github.com/brianpkelley/md-color-picker", - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ] + "keywords": [ + "color-picker", + "angular", + "angular-material", + "color-chooser", + "color-dialog" + ], + "license": "MIT", + "homepage": "https://github.com/brianpkelley/md-color-picker", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] } diff --git a/dist/mdColorPicker.css b/dist/mdColorPicker.css index 1caa677..a4a9309 100644 --- a/dist/mdColorPicker.css +++ b/dist/mdColorPicker.css @@ -67,7 +67,6 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear, } .md-color-picker-container .md-color-picker-preview { -webkit-box-flex: 1; - -webkit-flex: 1; -ms-flex: 1; flex: 1; font-weight: bold; diff --git a/dist/mdColorPicker.js b/dist/mdColorPicker.js index 6e49b61..6068452 100644 --- a/dist/mdColorPicker.js +++ b/dist/mdColorPicker.js @@ -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 ) { diff --git a/dist/mdColorPicker.min.css b/dist/mdColorPicker.min.css index 03d7ec4..a7bd000 100644 --- a/dist/mdColorPicker.min.css +++ b/dist/mdColorPicker.min.css @@ -4,4 +4,4 @@ * @link https://github.com/brianpkelley/md-color-picker * @license MIT */ -[md-color-picker] .md-color-picker-input-container,md-color-picker .md-color-picker-input-container{position:relative}[md-color-picker] .md-color-picker-input-container .md-color-picker-input::-ms-clear,md-color-picker .md-color-picker-input-container .md-color-picker-input::-ms-clear{display:none}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview,md-color-picker .md-color-picker-input-container .md-color-picker-preview{content:'';width:24px;height:24px;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);position:relative;top:22px;overflow:hidden;background-color:#fff;background-image:-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result,md-color-picker .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result{width:100%;height:100%}[md-color-picker] .md-color-picker-input-container .md-color-picker-clear,md-color-picker .md-color-picker-input-container .md-color-picker-clear{position:absolute;bottom:42px;right:-16px;color:rgba(0,0,0,.26)}.md-color-picker-container{padding:8px;background:#fff;outline:none;height:397px;width:347px;opacity:1;overflow:hidden;z-index:1000}.md-color-picker-container .md-color-picker-arrow{border:0 solid transparent;border-right-width:30px;border-bottom-width:0;position:absolute;left:0;top:0;-webkit-transition:border-bottom-width cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s;transition:border-bottom-width cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s}.md-color-picker-container canvas{width:100%;height:100%}.md-color-picker-container .md-color-picker-preview{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:700;font-size:18px;color:#fff;margin:-8px -8px 0;position:relative}.md-color-picker-container .md-color-picker-preview .md-color-picker-result{position:absolute;height:100%;opacity:1;background:red}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>input{position:relative;top:-15px;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div{position:relative;width:100%}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input{border-width:0;background:transparent;text-align:center;position:absolute;top:-15px;bottom:0;left:0;right:0;color:#eee;outline:none;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input.switch{-webkit-transition:top cubic-bezier(.25,.8,.25,1) .25s,.25s opacity ease-out;transition:top cubic-bezier(.25,.8,.25,1) .25s,.25s opacity ease-out;top:0;opacity:1}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-wrapper{max-height:28px;height:28px}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-ink-bar{background:hsla(0,0%,100%,.5)}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab{padding-top:2px;background:hsla(0,0%,100%,.25);color:#eee;max-width:none!important}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark,.md-color-picker-container .md-color-picker-preview.dark .md-color-picker-preview-input{color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab{background:rgba(0,0,0,.25);color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark md-ink-bar{background:rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-tabs{margin:0 -8px}.md-color-picker-container .md-color-picker-tabs md-tabs[md-align-tabs=bottom]{padding-bottom:0}.md-color-picker-container .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-tabs md-tabs-wrapper{max-height:36px;height:36px}.md-color-picker-container .md-color-picker-tabs .md-tab{padding:7px 24px;background:transparent}.md-color-picker-container .md-color-picker-tabs .md-tab:last-of-type{margin-right:-2px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height){min-height:298px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper{height:255px;margin-bottom:8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content{height:255px;padding:0 8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content [md-tabs-template]{height:100%}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors{margin:8px -8px -8px}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors md-ink-bar{top:auto}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab{background:rgba(0,0,0,.075)}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab.md-active{background:#fff}.md-color-picker-container .md-color-picker-colors{overflow:hidden;margin-top:8px}.md-color-picker-container .md-color-picker-colors .md-color-picker-marker{position:absolute;border:2px solid #fff;box-shadow:0 0 2px 0 rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum]{position:relative;cursor:crosshair;overflow:hidden;height:255px;width:255px}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum] .md-color-picker-marker{width:12px;height:12px;border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.5),inset 0 0 2px 0 rgba(0,0,0,.5);top:-5px;left:calc(100% - 5px)}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha],.md-color-picker-container .md-color-picker-colors [md-color-picker-hue]{position:relative;cursor:crosshair;overflow:hidden;width:30px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha].md-color-picker-wide,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue].md-color-picker-wide{width:67px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha] .md-color-picker-marker,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue] .md-color-picker-marker{height:5px;width:100%;border-left:0;border-right:0;top:-2px;left:0}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-track-fill{background:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-thumb:after{background-color:#d01515;border-color:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-track-fill{background:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-thumb:after{background-color:#19d015;border-color:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-track-fill{background:#1560d0}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-thumb:after{background-color:#1560d0;border-color:#1560d0}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title{font-size:22px;line-height:75px;padding:0 15px;color:rgba(0,0,0,.85);text-transform:capitalize}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title.dark{color:hsla(0,0%,100%,.85)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title:not(:first-child){margin-top:16px}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label{font-size:12px;line-height:33px;padding:0 5px;color:rgba(0,0,0,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label.dark{color:hsla(0,0%,100%,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-colors{position:absolute;-webkit-transition:left cubic-bezier(.25,.8,.25,1) .25s,right cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s,bottom cubic-bezier(.25,.8,.25,1) .25s;transition:left cubic-bezier(.25,.8,.25,1) .25s,right cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s,bottom cubic-bezier(.25,.8,.25,1) .25s}.md-color-picker-container .md-color-picker-history>div>div{height:20px;margin:4px;background-color:#fff;background-image:-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}.md-color-picker-container .md-color-picker-history>div>div>div{width:100%;height:100%}.md-color-picker-container .md-color-picker-history button{margin-top:auto;margin-left:auto}.md-color-picker-checkered-bg{background-color:#fff;background-image:-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),-webkit-linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px} \ No newline at end of file +[md-color-picker] .md-color-picker-input-container,md-color-picker .md-color-picker-input-container{position:relative}[md-color-picker] .md-color-picker-input-container .md-color-picker-input::-ms-clear,md-color-picker .md-color-picker-input-container .md-color-picker-input::-ms-clear{display:none}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview,md-color-picker .md-color-picker-input-container .md-color-picker-preview{content:"";width:24px;height:24px;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);position:relative;top:22px;overflow:hidden;background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result,md-color-picker .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result{width:100%;height:100%}[md-color-picker] .md-color-picker-input-container .md-color-picker-clear,md-color-picker .md-color-picker-input-container .md-color-picker-clear{position:absolute;bottom:42px;right:-16px;color:rgba(0,0,0,.26)}.md-color-picker-container{padding:8px;background:#fff;outline:none;height:397px;width:347px;opacity:1;overflow:hidden;z-index:1000}.md-color-picker-container .md-color-picker-arrow{border:0 solid transparent;border-right-width:30px;border-bottom-width:0;position:absolute;left:0;top:0;transition:border-bottom-width .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1)}.md-color-picker-container canvas{width:100%;height:100%}.md-color-picker-container .md-color-picker-preview{-ms-flex:1;flex:1;font-weight:700;font-size:18px;color:#fff;margin:-8px -8px 0;position:relative}.md-color-picker-container .md-color-picker-preview .md-color-picker-result{position:absolute;height:100%;opacity:1;background:red}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>input{position:relative;top:-15px;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div{position:relative;width:100%}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input{border-width:0;background:transparent;text-align:center;position:absolute;top:-15px;bottom:0;left:0;right:0;color:#eee;outline:none;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input.switch{transition:top .25s cubic-bezier(.25,.8,.25,1),opacity .25s ease-out;top:0;opacity:1}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-wrapper{max-height:28px;height:28px}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-ink-bar{background:hsla(0,0%,100%,.5)}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab{padding-top:2px;background:hsla(0,0%,100%,.25);color:#eee;max-width:none!important}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark,.md-color-picker-container .md-color-picker-preview.dark .md-color-picker-preview-input{color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab{background:rgba(0,0,0,.25);color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark md-ink-bar{background:rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-tabs{margin:0 -8px}.md-color-picker-container .md-color-picker-tabs md-tabs[md-align-tabs=bottom]{padding-bottom:0}.md-color-picker-container .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-tabs md-tabs-wrapper{max-height:36px;height:36px}.md-color-picker-container .md-color-picker-tabs .md-tab{padding:7px 24px;background:transparent}.md-color-picker-container .md-color-picker-tabs .md-tab:last-of-type{margin-right:-2px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height){min-height:298px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper{height:255px;margin-bottom:8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content{height:255px;padding:0 8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content [md-tabs-template]{height:100%}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors{margin:8px -8px -8px}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors md-ink-bar{top:auto}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab{background:rgba(0,0,0,.075)}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab.md-active{background:#fff}.md-color-picker-container .md-color-picker-colors{overflow:hidden;margin-top:8px}.md-color-picker-container .md-color-picker-colors .md-color-picker-marker{position:absolute;border:2px solid #fff;box-shadow:0 0 2px 0 rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum]{position:relative;cursor:crosshair;overflow:hidden;height:255px;width:255px}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum] .md-color-picker-marker{width:12px;height:12px;border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.5),inset 0 0 2px 0 rgba(0,0,0,.5);top:-5px;left:calc(100% - 5px)}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha],.md-color-picker-container .md-color-picker-colors [md-color-picker-hue]{position:relative;cursor:crosshair;overflow:hidden;width:30px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha].md-color-picker-wide,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue].md-color-picker-wide{width:67px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha] .md-color-picker-marker,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue] .md-color-picker-marker{height:5px;width:100%;border-left:0;border-right:0;top:-2px;left:0}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-track-fill{background:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-thumb:after{background-color:#d01515;border-color:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-track-fill{background:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-thumb:after{background-color:#19d015;border-color:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-track-fill{background:#1560d0}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-thumb:after{background-color:#1560d0;border-color:#1560d0}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title{font-size:22px;line-height:75px;padding:0 15px;color:rgba(0,0,0,.85);text-transform:capitalize}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title.dark{color:hsla(0,0%,100%,.85)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title:not(:first-child){margin-top:16px}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label{font-size:12px;line-height:33px;padding:0 5px;color:rgba(0,0,0,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label.dark{color:hsla(0,0%,100%,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-colors{position:absolute;transition:left .25s cubic-bezier(.25,.8,.25,1),right .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1),bottom .25s cubic-bezier(.25,.8,.25,1)}.md-color-picker-container .md-color-picker-history>div>div{height:20px;margin:4px;background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}.md-color-picker-container .md-color-picker-history>div>div>div{width:100%;height:100%}.md-color-picker-container .md-color-picker-history button{margin-top:auto;margin-left:auto}.md-color-picker-checkered-bg{background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px} \ No newline at end of file diff --git a/dist/mdColorPicker.min.js b/dist/mdColorPicker.min.js index e452857..28e7e1b 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,o){!function(t,e,r){"use strict";function l(){return function(t){var o=new a(t,"spectrum"!=t);return o=e.merge(o,n[t]),{template:'
',link:o.get,controller:function(){}}}}function a(t,o){this.type=t,this.restrictX=o,this.offset={x:null,y:null},this.height=255,this.$scope=null,this.$element=null,this.get=e.bind(this,function(t,o,r){this.$scope=t,this.$element=o,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 r=this.getImageData(t,e);this.setMarkerCenter(e);var l=new o({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 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 o=this.getImageData(t,e);return this.setMarkerCenter(e),o[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 o=this.getImageData(t,e);return this.setMarkerCenter(t,e),{r:o[0],g:o[1],b:o[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 o=this.getMarkerCenter(),r=this.getColorByPoint(o.x,o.y);this.setColor(r)}))}}};a.prototype.$window=e.element(t),a.prototype.getColorByMouse=function(t){var e=t.touches&&t.touches[0],o=e&&e.pageX||t.pageX,r=e&&e.pageY||t.pageY,l=Math.round(o-this.offset.x),a=Math.round(r-this.offset.y);return this.getColorByPoint(l,a)},a.prototype.setMarkerCenter=function(t,o){var l,a,n,i,d=-1*this.marker.offsetWidth/2,c=-1*this.marker.offsetHeight/2;o===r?(n=t+c,i=Math.round(Math.max(Math.min(this.height-1+c,n),c)),a=0):(l=t+d,n=o+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))),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 o=this.context.getImageData(t,e,1,1).data;return o},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 o=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 o=this.getColorByMouse(t);this.$scope.color.setAlpha(o),this.$scope.alpha=o,this.$scope.$apply();break;case"spectrum":var r=this.getColorByMouse(t);this.setColor(r)}});this.$window.on("touchmove mousemove",o),this.$window.one("touchend mouseup",e.bind(this,function(t){this.$window.off("touchmove mousemove",o),this.$element.css({cursor:"crosshair"})})),o(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 o=this.$scope.color.toHsv();this.setMarkerCenter(this.canvas.height-this.canvas.height*(o.h/360));break;case"alpha":this.currentColor=e.color.toRgb(),this.draw();var r=e.color.getAlpha(),l=this.canvas.height-this.canvas.height*r;this.setMarkerCenter(l);break;case"spectrum":var o=e.color.toHsv();this.currentHue=o.h,this.draw();var a=this.canvas.width*o.s,n=this.canvas.height-this.canvas.height*o.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 o in e)e.hasOwnProperty(o)&&t.put([o,"svg"].join("."),['',e[o],""].join(""))}]).factory("mdColorGradientCanvas",l).factory("mdColorPickerHistory",["$injector",function(t){var e=[],r=[],l=!1;try{l=t.get("$cookies")}catch(a){}if(l)for(var n=l.getObject("mdColorPickerHistory")||[],i=0;id&&(e.pop(),r.pop()),l&&l.putObject("mdColorPickerHistory",r)},get:function(){return e},reset:function(){e=[],r=[],l&&l.putObject("mdColorPickerHistory",r)}}}]).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:"=?",skipHide:"=?",preserveScope:"=?",mdColorClearButton:"=?",mdColorPreview:"=?",mdColorAlphaChannel:"=?",mdColorSpectrum:"=?",mdColorSliders:"=?",mdColorGenericPalette:"=?",mdColorMaterialPalette:"=?",mdColorHistory:"=?",mdColorHex:"=?",mdColorRgb:"=?",mdColorHsl:"=?",mdColorDefaultTab:"=?"},controller:["$scope","$element","$attrs","$mdDialog","$mdColorPicker",function(t,e,o,l,a){var n=!1;if(t.options!==r)for(var i in t.options)if(t.options.hasOwnProperty(i)){var d;d=i,t.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(d="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),!d||t[d]!==r&&""!==t[d]||(t[d]=t.options[i])}var c=e.controller("ngModel"),s=function(e){t.value=e||c.$viewValue||""};t.mdColorClearButton=t.mdColorClearButton===r||t.mdColorClearButton,t.mdColorPreview=t.mdColorPreview===r||t.mdColorPreview,t.mdColorAlphaChannel=t.mdColorAlphaChannel===r||t.mdColorAlphaChannel,t.mdColorSpectrum=t.mdColorSpectrum===r||t.mdColorSpectrum,t.mdColorSliders=t.mdColorSliders===r||t.mdColorSliders,t.mdColorGenericPalette=t.mdColorGenericPalette===r||t.mdColorGenericPalette,t.mdColorMaterialPalette=t.mdColorMaterialPalette===r||t.mdColorMaterialPalette,t.mdColorHistory=t.mdColorHistory===r||t.mdColorHistory,t.mdColorHex=t.mdColorHex===r||t.mdColorHex,t.mdColorRgb=t.mdColorRgb===r||t.mdColorRgb,t.mdColorHsl=t.mdColorHsl===r||t.mdColorHsl,s(),t.$watch(function(){return c.$modelValue},function(t){s(t)}),t.$watch("value",function(t,e){""!==t&&"undefined"!=typeof t&&t&&t!==e&&c.$setViewValue(t)}),t.clearValue=function(){c.$setViewValue("")},t.showColorPicker=function(e){n||a.show({value:t.value,defaultValue:t["default"],random:t.random,clickOutsideToClose:t.clickOutsideToClose,hasBackdrop:t.hasBackdrop,skipHide:t.skipHide,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!==r?e.type:0}}}]).directive("mdColorPickerContainer",["$compile","$timeout","$mdColorPalette","mdColorPickerHistory",function(t,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(t,n,i){function d(e){var o=0;if(e&&"string"==typeof e){for(var r="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 o(t.value||t["default"]),t.alpha=t.color.getAlpha(),t.history=a,t.materialFamily=[],t.whichPane=d(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)?o({r:t[0],g:t[1],b:t[2]}).isDark():o(t).isDark()},t.previewFocus=function(){t.inputFocus=!0,r(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){r(function(){t.color=o(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=o(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"),r(function(){s.addClass("switch")})}),t.$watchGroup(["color.toRgbString()","type"],function(e){t.inputFocus||t.setValue()}),r(function(){t.$broadcast("mdColorPicker:colorSet",{color:t.color}),s.focus(),t.previewFocus()})}],link:function(t,o,l){function a(){var r=e.element(o[0].querySelector(".md-color-picker-palette")),l=e.element(o[0].querySelector(".md-color-picker-material-palette")),a=e.element('
'),n=e.element('
'),i=e.element('
'),d=e.element('
');e.forEach(t.palette,function(o,l){var i=a.clone();e.forEach(o,function(e){var o=n.clone();o.css({height:"25.5px",backgroundColor:e}),o.bind("click",t.setPaletteColor),i.append(o)}),r.append(i)}),e.forEach(t.materialPalette,function(o,r){var a=i.clone();a.html(""+r.replace("-"," ")+""),a.css({height:"75px",backgroundColor:"rgb("+o[500].value[0]+","+o[500].value[1]+","+o[500].value[2]+")"}),t.isDark(o[500].value)&&a.addClass("dark"),l.append(a),e.forEach(o,function(e,o){var r=d.clone();r.css({height:"33px",backgroundColor:"rgb("+e.value[0]+","+e.value[1]+","+e.value[2]+")"}),t.isDark(e.value)&&r.addClass("dark"),r.html(""+o+""),r.bind("click",t.setPaletteColor),l.append(r)})})}o[0].getElementsByTagName("md-tab");r(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===r&&(t={}),t.hasBackdrop=t.hasBackdrop===r||t.hasBackdrop,t.clickOutsideToClose=t.clickOutsideToClose===r||t.clickOutsideToClose,t.defaultValue=t.defaultValue===r?"#FFFFFF":t.defaultValue,t.focusOnOpen=t.focusOnOpen!==r&&t.focusOnOpen,t.preserveScope=t.preserveScope===r||t.preserveScope,t.skipHide=t.skipHide===r||t.skipHide,t.mdColorAlphaChannel=t.mdColorAlphaChannel!==r&&t.mdColorAlphaChannel,t.mdColorSpectrum=t.mdColorSpectrum===r||t.mdColorSpectrum,t.mdColorSliders=t.mdColorSliders===r||t.mdColorSliders,t.mdColorGenericPalette=t.mdColorGenericPalette===r||t.mdColorGenericPalette,t.mdColorMaterialPalette=t.mdColorMaterialPalette===r||t.mdColorMaterialPalette,t.mdColorHistory=t.mdColorHistory===r||t.mdColorHistory,t.mdColorRgb=t.mdColorRgb===r||t.mdColorRgb,t.mdColorHsl=t.mdColorHsl===r||t.mdColorHsl,t.mdColorHex=t.mdColorHex===r||!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,o){t.close=function(){e.cancel()},t.ok=function(){e.hide(t.value)},t.hide=t.ok,t.value=o.value,t["default"]=o.defaultValue,t.random=o.random,t.mdColorAlphaChannel=o.mdColorAlphaChannel,t.mdColorSpectrum=o.mdColorSpectrum,t.mdColorSliders=o.mdColorSliders,t.mdColorGenericPalette=o.mdColorGenericPalette,t.mdColorMaterialPalette=o.mdColorMaterialPalette,t.mdColorHistory=o.mdColorHistory,t.mdColorHex=o.mdColorHex,t.mdColorRgb=o.mdColorRgb,t.mdColorHsl=o.mdColorHsl,t.mdColorDefaultTab=o.mdColorDefaultTab}],locals:{options:t},preserveScope:t.preserveScope,skipHide:t.skipHide,targetEvent:t.$event,focusOnOpen:t.focusOnOpen,autoWrap:!1,onShowing:function(){},onComplete:function(){}}),a.then(function(t){l.add(new o(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",'
\n\t
\n\t\t
\n\t
\n\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\n
\n'),t.put("mdColorPickerContainer.tpl.html",'
\n\t
\n\n\t
\n\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t
\n\n\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tR\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tG\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tB\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tA\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\n\t
\n\n
\n'),t.put("mdColorPickerDialog.tpl.html",'\n\t
\n\t\n\t\tCancel\n\t\tSelect\n\t\n\n')}])}(angular,window,tinycolor); \ No newline at end of file From ebc13564d3d719f71b32a5c19d35bcb8831ae1f2 Mon Sep 17 00:00:00 2001 From: mostafabarmshory Date: Mon, 24 Sep 2018 21:20:50 +0330 Subject: [PATCH 18/29] Adding grunt config --- Gruntfile.js | 714 ++++++++++++++++++ bower.json | 1 + gulpfile.js | 2 +- package.json | 103 +-- src/{js => scripts}/mdColorPicker.js | 6 +- src/styles/mdColorPicker.css | 309 ++++++++ .../mdColorPicker.tpl.html | 0 .../mdColorPickerContainer.tpl.html | 0 .../mdColorPickerDialog.tpl.html | 0 9 files changed, 1084 insertions(+), 51 deletions(-) create mode 100644 Gruntfile.js rename src/{js => scripts}/mdColorPicker.js (99%) create mode 100644 src/styles/mdColorPicker.css rename src/{templates => views}/mdColorPicker.tpl.html (100%) rename src/{templates => views}/mdColorPickerContainer.tpl.html (100%) rename src/{templates => views}/mdColorPickerDialog.tpl.html (100%) diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..c291fb5 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,714 @@ +/* + * Copyright (c) 2015-2025 Phoinex Scholars Co. http://dpq.co.ir + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +'use strict'; + +//# Globbing +//برای کارایی خوب، از ساختار زیر برای تعیین منابع استفاده شده که به شما امکان +//تعریف دو سطحی داده‌ها رو می‌ده. +//'test/spec/{,*/}*.js' +//اگر می‌خواهید همه منابعی رو که تعریف کردید استفاده کنید ادرسی دهی‌ها رو به +//صورت +//زیر تغییر بدید. +//'test/spec/**/*.js' + +module.exports = function(grunt) { + + /* + * زمان‌هایی که در فرآیند‌ها استفاده می‌شه رو تعیین می‌کنه. این افزونه سربار + * توی ساخت ایجاد می‌کنه اگر می‌خواهید ساخت با سرعت بیشتری انجام ب + */ + require('time-grunt')(grunt); + + /* + * به صورت خودکار تمام افزونه‌های مورد نیاز بار گذاری می‌شود. در صورتی که + * این افزونه‌ها نامگذاری grunt را رعایت نمی‌کنند باید نام وظایف آنها نیز + * تعیین شود. + */ + require('jit-grunt')(grunt, { + useminPrepare : 'grunt-usemin', + ngtemplates : 'grunt-angular-templates', + uglify: 'grunt-contrib-uglify-es' + }); + + /* + * تنظیم‌های کلی بسته را ایجاد می‌کند. این تنظیم‌ها بر اساس خصوصیت‌های تعیین + * شده در پرونده bower.json تعیین می‌شود. + */ + var appConfig = { + app : require('./bower.json').appPath || 'src', + demo : require('./bower.json').demoPath || 'demo', + dist : 'dist', + pkg : require('./bower.json') + }; + + // تنظیم تمام وظایف مورد نیاز در پروژه + grunt.initConfig({ + + /* + * تنظیم‌های پروژه: تمام تنظیم‌هایی که در وظایف استفاده می‌شود بر اساس + * این متغیر است. + */ + yeoman : appConfig, + + /* + * در فرآیند توسعه پرونده‌های موجود در سیستم به روز رسانی می‌شود و در + * نتیجه آن باید پردازش‌هایی انجام شود. برای نمونه زمانی که یک نمایش به + * روز می‌شود کاوشگر باید به روز شود تا این به روز رسانی مشاهد شود. این + * وظیفه پرونده‌ها را مشاهده و کارهای لازم را انجام می‌دهد. + */ + watch : { + bower : { + files : [ 'bower.json' ], + tasks : [ 'wiredep' ] + }, + js : { + files : [ + '<%= yeoman.app %>/scripts/**/*.js', + '<%= yeoman.demo %>/scripts/**/*.js' + ], + tasks : [ + 'injector', + 'newer:jshint:all', + 'newer:jscs:all' + ], + options : { + livereload : '<%= connect.options.livereload %>' + } + }, + jsTest : { + files : [ 'test/spec/{,*/}*.js' ], + tasks : [ + 'injector', + 'newer:jshint:test', // + 'newer:jscs:test', // + 'karma' ] + }, + styles : { + files : [ + '<%= yeoman.app %>/styles/**/*.css', + '<%= yeoman.demo %>/styles/**/*.css' + ], + tasks : [ + 'injector', + 'newer:copy:styles', + 'postcss' + ] + }, + gruntfile : { + files : [ 'Gruntfile.js' ] + }, + livereload : { + options : { + livereload : '<%= connect.options.livereload %>' + }, + files : [ + '<%= yeoman.demo %>/**/*.html', + '<%= yeoman.app %>/views/**/*.html', + '.tmp/styles/{,*/}*.css', + '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', + '<%= yeoman.demo %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' + ] + } + }, + + /* + * تنظیم‌های سرور اصلی گرانت را ایجاد می‌کند. این سرور در تست و راه + * اندازی اولیه پروژه کاربرد دارد. + */ + + // The actual grunt server settings + connect : { + options : { + port : 9001, + // Change this to '0.0.0.0' to access the server from + // outside. + hostname : 'localhost', + livereload : 35729 + }, + livereload : { + options : { + open : true, + middleware : function(connect, options) { + var middlewares = []; + //Matches everything that does not contain a '.' (period) + middlewares.push(connect.static('.tmp')); + middlewares.push( + connect() + .use('/bower_components', connect.static('./bower_components'))); + middlewares.push( + connect() + .use('/app/styles', connect.static('./app/styles'))); + middlewares.push(connect.static('demo')); + middlewares.push(connect.static(appConfig.app)); + options.base.forEach(function(base) { + middlewares.push(connect.static(base)); + }); + if (!Array.isArray(options.base)) { + options.base = [ options.base ]; + } + + // Serve static files + options.base.forEach(function(base) { + middlewares.push(connect.static(base)); + }); + + return middlewares; + } + } + }, + test : { + options : { + port : 9001, + middleware : function(connect) { + return [ + connect.static('.tmp'), + connect.static('test'), + connect().use('/bower_components', connect.static('./bower_components')), + connect.static(appConfig.app) ]; + } + } + }, + dist : { + options : { + open : true, + base : '<%= yeoman.dist %>' + } + } + }, + + /* + * اجرای تست ایستا روی تمام سروس‌های ایجاد شده . با این کار مطمئن می‌شیم + * که خطای نحوی در برنامه‌ها وجود نداره. برای این کار از تست‌های ایستای + * jshint استفاده می‌کنیم. این برنامه می‌تونه پرنده‌های js رو دریافت و + * تحلیل کنه. توضیحات بیشتر در مورد این برنامه رو در مسیر زیر ببینید: + * + * http://jshint.com + * + * نکته: ما فرض کردیم که تمام کدها در پوشه اصلی و یک زیر پوشه دیگر نوشته + * می شود در صورتی که سلسله مراتب پوشه‌ها بیشتر از این شد باید این + * تنظیم‌ها تغییر کند. + * + * تنظیم‌های به کار رفته در این پردازش در فایل .jshintrc وجود دارد و شما + * می‌توانید در صورت نیاز این تنظیم‌ها را تغییر دهید. + * + * برای استفاده از این تست در محیط grunt از بسته grunt-contrib-jshint + * استفاده شده است که به صورت خودکار و بر اساس تنظیم‌های موجود این نوع + * تست را روی تمام کدهای موجود در نرم افزار اجرا می‌کند. برای اطلاعات + * بیشتر در مورد این افزونه به آدرس زیر مراجعه کنید: + * + * https://github.com/gruntjs/grunt-contrib-jshint + * + * برای اینکه نتیجه‌های تولید شده بر اساس این تست خوب نمایش داده بشه از + * یک افزونه دیگه به نام jshint-stylish استفاده شده است. البته شما + * می‌تونید از روش‌های دیگه‌ای برای تولید گزارش استفاده کنید. برای اطلاع + * بیشتر در این زمینه پیوند زیر رو ببینید: + * + * http://jshint.com/docs/reporters/ + * + */ + jshint : { + options : { + jshintrc : '.jshintrc', + reporter : require('jshint-stylish') + }, + all : { + src : [ 'Gruntfile.js', '<%= yeoman.app %>/{,*/}*.js' ] + }, + test : { + options : { + jshintrc : 'test/.jshintrc' + }, + src : [ 'test/spec/{,*/}*.js' ] + } + }, + + /* + * ESLint is an open source project originally created by Nicholas C. Zakas in June 2013. + * Its goal is to provide a pluggable linting utility for JavaScript. + * + * + * https://eslint.org/ + */ + eslint : { + target : [ '<%= yeoman.app %>/{,*/}*.js' ] + }, + + /* + * استایل کدها رو بررسی می‌کنه تا مطمئن بشیم که کدها خوش فرم نوشته شده + * اند. این یک نمونه تست هست که توش به نحوه نگارش کدها توجه می‌کنه. برای + * این کار از یک بسته به نام jscs استفاده شده است. برای کسب اطلاع بیشتر + * در مورد این بسته پیونده زیر رو ببینید: + * + * http://jscs.info/ + * + * این برنامه رو با استفاده از افزونه grunt-jscs اجرا می‌کنیم. این + * افزونه امکان چک کردن تمام کدهای نوشته شده رو می‌ده. اطلاعات بیشتر در + * مورد این افزونه در مسییر زیر وجود داره: + * + * https://github.com/jscs-dev/grunt-jscs + * + * برای این بسته هم یه سری تنظیم‌ها در نظر گرفته شده که تو فایل .jscsrc + * وجود داره در صورت تمایل می‌تونید این تنظیم‌ها رو بر اساس نیازهای + * خودتون به روز کنید. + */ + jscs : { + options : { + config : '.jscsrc', + verbose : true + }, + all : { + src : [ 'Gruntfile.js', '<%= yeoman.app %>/{,*/}*.js' ] + }, + test : { + src : [ 'test/spec/{,*/}*.js' ] + } + }, + + /* + * Generate document + * + * This is one of the task in the rlease phease. + * + * @see https://github.com/krampstudio/grunt-jsdoc + * @see https://github.com/krampstudio/grunt-jsdoc-plugin + */ + jsdoc : { + all : { + src : [ '<%= yeoman.app %>/scripts/**/*.js' ], + options : { + destination : 'doc', + configure : 'node_modules/angular-jsdoc/common/conf.json', + template : 'node_modules/angular-jsdoc/default', + tutorial : 'tutorials', + readme : 'README.md' + } + } + }, + + /* + * مسیرها و داده‌های موقت را حذف می‌کند تا شرایط برای اجرای دوباره مراحل + * ساخت آماده شود. خیلی از این فایل‌ها به عنوان محصول و یا مستند ایجاد + * می‌شن و باید اونها رو قبل از هر بار تولید نسخه جدید حذف کنیم. پاک + * کردن با استفاده از این ماژول انجام می‌شه. اطلاعات بشتر رو از پیوند + * زیر مطالعه کنید: + * + * https://github.com/gruntjs/grunt-contrib-clean + * + * تمام پرونده‌هایی که در مسیر .tmp و یا مسیر محصول نهایی ایجاد می‌شن به + * عنوان پرنده‌های اضافه در نظر گرفته می‌شوند و به صورت خودکار حذف + * می‌شوند. + */ + clean : { + dist : { + files : [ { + dot : true, + src : [ // + '.tmp', '<%= yeoman.dist %>/{,*/}*', // + '!<%= yeoman.dist %>/.git{,*/}*' // + ] + } ] + }, + server : '.tmp' + }, + + /* + * تمام وابستگی‌هایی که با استفاده از مدیریت بسته‌های bower نصب می‌شود + * شامل فایلهای هست که باید توی برنامه‌ها اضافه بشه. این کار رو می‌شه به + * صورت خودکار انجام داد. بسته wiredep توی بخشه‌های متفاوتی از برنامه + * می‌تونه این وابستگی‌های جدید رو تزریق کنه و شما رو از انجام این کار + * بی نیاز کنه. برای اطلاع بیشتر در مورد این افزونه پیونده زیر رو + * ببیندی: ؟؟ + * + * این کار روش ساده‌ای داره، یه الگو پیدا می‌شه و بعد وسط اون الگو با + * فهرست فایلهایی وابستگی‌ها پر می‌شه. + */ + wiredep : { + app : { + devDependencies : true, + src : [ 'demo/index.html' ], + ignorePath : /\.\.\// + }, + test : { + devDependencies : true, + src : [ + '<%= karma.unit.configFile %>', + '<%= karma.build.configFile %>' + ], + ignorePath : /\.\.\//, + fileTypes : { + js : { + block : /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi, + detect : { + js : /'(.*\.js)'/gi + }, + replace : { + js : '\'{{filePath}}\',' + } + } + } + } + }, + + // The following *-min tasks will produce minified files in the + // dist folder + // By default, your `index.html`'s will + // take care of + // minification. These next options are pre-configured if you do + // not wish + // to use the Usemin blocks. + cssmin : { + dist : { + files : { + '<%= yeoman.dist %>/<%= yeoman.pkg.name %>.min.css' : [ // + '.tmp/styles/{,*/}*.css' // + ] + } + } + }, + uglify : { + dist : { + files : { + '<%= yeoman.dist %>/<%= yeoman.pkg.name %>.min.js' : [ // + '.tmp/{,*/}*.js' // + ] + } + } + }, + + imagemin : { + dist : { + files : [ { + expand : true, + cwd : '<%= yeoman.app %>/images', + src : '{,*/}*.{png,jpg,jpeg,gif}', + dest : '<%= yeoman.dist %>/images' + } ] + } + }, + + svgmin : { + dist : { + files : [ { + expand : true, + cwd : '<%= yeoman.app %>/images', + src : '{,*/}*.svg', + dest : '<%= yeoman.dist %>/images' + } ] + } + }, + /* + * کتابخونه‌ها از مجموعه‌ای از پرونده‌های اسکریپتی تشکیل شدن که در نهایت + * باید با هم ترکیب بشن و به صورت یک پرونده یکتا ذخیره بشن. این کار با + * استفاده از افزونه concat انجام می‌شه. اطلاعات بیشتر در این مورد تو + * مسیر زیر وجود داره: + * + * https://github.com/gruntjs/grunt-contrib-concat + * + * ما تمام فایلها رو سر هم می‌زنیم و دوتا پرونده ایجاد می‌کنیم، یکی + * مستقیم به عنوان محصول ارائه می‌شه ولی یکی تو پوشه موقت ایجاد می‌شه تا + * بتونیم کارهای دیگه‌ای روش انجام بدیم. + */ + concat : { + tmp : { + src : [ '<%= yeoman.app %>/scripts/{,*/}*.js' ], + dest : '.tmp/<%= yeoman.pkg.name %>.js' + }, + distcss : { + src : [ '<%= yeoman.app %>/{,*/}*.css' ], + dest : '<%= yeoman.dist %>/<%= yeoman.pkg.name %>.css' + }, + dist : { + src : [ '.tmp/{,*/}*.js' ], + dest : '<%= yeoman.dist %>/<%= yeoman.pkg.name %>.js' + } + }, + + /* + * + * + */ + htmlmin : { + dist : { + options : { + conservativeCollapse : true, + removeCommentsFromCDATA : true, + collapseBooleanAttributes : true, + collapseWhitespace : true, + removeAttributeQuotes : true, + removeComments : true, // Only if you don't use comment + // directives! + removeEmptyAttributes : true, + removeRedundantAttributes : true, + removeScriptTypeAttributes : true, + removeStyleLinkTypeAttributes : true + }, + files : [ { + expand : true, + cwd : '<%= yeoman.dist %>', + src : [ '*.html' ], + dest : '<%= yeoman.dist %>' + } ] + } + }, + + /* + * الگوهای متفاوتی در یک بسته طراحی می‌شه اما باید این الگوها رو بزنیم + * سر هم و حجمش رو کم کنی تا به یک کتابخونه مناسب برسیم. یکی از + * ابزارهایی که می‌تونه الگوهای ایجاد شده برای انگولار رو مدیریت کن بسته + * ngtemplates هست. برای اطلاع بیشتر در مورد این بسته پیوند زیر رو + * ببینید: + * + * https://github.com/ericclemmons/grunt-angular-templates + * + * این بسته رو می‌تونیم با سایر بسته‌ها ترکیب کنیم. + */ + ngtemplates : { + dist : { + options : { + module : '<%= yeoman.pkg.moduleName %>', + htmlmin : '<%= htmlmin.dist.options %>', + usemin : 'scripts/scripts.js' + }, + cwd : '<%= yeoman.app %>', + src : 'views/{,*/}*.html', + dest : '.tmp/templateCache.js' + } + }, + + /* + * یکی از مشکلاتی که داریم دزدی کدها است و این جایی سخت تر می‌شه که + * نمی‌شه به سادگی کدهای انگولار رو به هم ریخت. البته توی بسته انگولار + * راهکارهایی برای این منظور در نظر گرفته شده. با استفاده از افزونه + * ngAnnotate ما ساختار کد رو تغییر می‌دیم و در نهایت به یک مدلی تبدیل + * می‌کنیم که بشه بهمش ریخت. برای اطلاع بیشتر در این زمینه یپوند زیر رو + * مشاهد کنید: + * + * https://github.com/mgol/grunt-ng-annotate + * + * این کار روی پرونده‌هایی انجام می‌شه که توی مسیر .tmp ایجاد شده اند و + * همگی پرونده‌های موقت هستن. به این ترتیب می‌تونیم تمام پرونده‌های + * موجود در این مسیر رو کامل به هم بریزیم. + */ + ngAnnotate : { + dist : { + files : [ { + expand : true, + cwd : '.tmp/', + src : '*.js', + dest : '.tmp/' + } ] + } + }, + + // Copies remaining files to places other tasks can use + copy : { + dist : { + files : [ + { + expand : true, + dot : true, + cwd : '<%= yeoman.app %>', + dest : '<%= yeoman.dist %>', + src : [ '*.{ico,png,txt}', + 'images/{,*/}*.{webp}', + 'styles/fonts/{,*/}*.*' ] + }, { + expand : true, + cwd : '.tmp/images', + dest : '<%= yeoman.dist %>/images', + src : [ 'generated/*' ] + },{ + // TODO: maso, 2018: optimize resource + dot : true, + expand : true, + cwd : '<%= yeoman.app %>/resources', + dest : '<%= yeoman.dist %>/resources', + src : '**/*.*' + }] + }, + styles : { + expand : true, + cwd : '<%= yeoman.app %>/styles', + dest : '.tmp/styles/', + src : '{,*/}*.css' + } + }, + + // Add vendor prefixed styles + postcss : { + options : { + processors : [ require('autoprefixer-core')({ + browsers : [ 'last 1 version' ] + }) ] + }, + server : { + options : { + map : true + }, + files : [ { + expand : true, + cwd : '.tmp/styles/', + src : '{,*/}*.css', + dest : '.tmp/styles/' + } ] + }, + dist : { + files : [ { + expand : true, + cwd : '.tmp/styles/', + src : '{,*/}*.css', + dest : '.tmp/styles/' + } ] + } + }, + + // Run some tasks in parallel to speed up the build process + concurrent : { + server : [ 'copy:styles'], + test : [ 'copy:styles' ], + dist : [ 'copy:styles', 'concat:tmp', 'imagemin', 'svgmin' ] + }, + + /* + * اجرای تست‌ها با بسته karma هست. + * + * https://github.com/karma-runner/grunt-karma + * + * مدلهای متفاوتی می‌شه تست‌ها رو اجرا کرد. در صورتی که بخواهید کدها رو + * روی یک کاوشگر خاص به صورت رفع خطا اجرا کنید پیوند زیر اطالعات خوبی + * برای این کار ارائه کرده است: + * + * http://bahmutov.calepin.co/debugging-karma-unit-tests.html + * + */ + karma : { + unit : { + configFile : 'test/karma.unit.conf.js', + singleRun : true + }, + build : { + configFile : 'test/karma.build.conf.js', + singleRun : true + }, + debug : { + configFile : 'test/karma.conf.js', + port : 9999, + singleRun : false, + browsers : [ 'Chrome' ] + } + }, + + + /* + * Inject project files into the HTMLS + * + * SEE: https://github.com/klei/grunt-injector + */ + injector : { + options : { + // Task-specific options go here. + relative : true, + addRootSlash : false, + ignorePath : [ + '../<%= yeoman.app %>/', + '<%= yeoman.demo %>/' + ] + }, + project_files : { + files : { + '<%= yeoman.demo %>/index.html' : [ + '<%= yeoman.app %>/scripts/**/*.js', + '<%= yeoman.app %>/styles/**/*.css', + '<%= yeoman.demo %>/scripts/**/*.js', + '<%= yeoman.demo %>/styles/**/*.css' + ] + } + } + } + }); + + grunt.registerTask('demo', 'Compile then start a connect web server', + function(target) { + if (target === 'dist') { + return grunt.task.run([ 'build', // + 'connect:dist:keepalive' // + ]); + } + + grunt.task.run([ // + 'clean:server', // + 'wiredep', // + 'injector', // + 'concurrent:server', // + 'postcss:server', // + 'connect:livereload', // + 'watch' // + ]); + }); + + grunt.registerTask('test', [ // + 'clean', // + 'wiredep', // + 'injector', // + 'concurrent:test', // + 'postcss:server', // + 'karma:unit' // + ]); + + grunt.registerTask('debug', [ // + 'clean', // + 'wiredep', // + 'injector', // + 'concurrent:server', // + 'postcss', // + 'karma:debug' // + ]); + + grunt.registerTask('build', [ // + 'wiredep', // + 'injector', // + 'clean:dist', // + 'concurrent:dist', // + 'concat:distcss', // + 'postcss', // + 'ngtemplates', // + 'concat:dist', // + 'ngAnnotate', // + 'copy:dist', // + 'uglify', // + 'cssmin' // + ]); + + grunt.registerTask('default', [ // + 'newer:jshint', // + 'newer:jscs', // + 'newer:eslint', // + 'test', // + 'build' + ]); + + grunt.registerTask('release', [ + 'default', + 'karma:build', + 'jsdoc' + ]); +}; \ No newline at end of file diff --git a/bower.json b/bower.json index 4962fad..2a748d9 100644 --- a/bower.json +++ b/bower.json @@ -1,5 +1,6 @@ { "name": "md-color-picker", + "moduleName": "mdColorPicker", "version": "0.2.6", "authors": [ "Brian Kelley ", diff --git a/gulpfile.js b/gulpfile.js index fd6a7d7..29a0f74 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -130,7 +130,7 @@ gulp.task('dist-resources', function () { gulp.task('demo', ['demo-resources'], function () { gulp.src('demo/index.html') .pipe(injectReload({port: ports.livereload})) - // .pipe(gulp.dest('dist/demo')) + .pipe(gulp.dest('dist/demo')) .pipe(livereload()); diff --git a/package.json b/package.json index 2f6b8ba..e6ca391 100644 --- a/package.json +++ b/package.json @@ -1,53 +1,62 @@ { - "name": "md-color-picker", - "version": "0.2.6", - "description": "Angular-Material inspired color picker.", - "main": "dist/mdColorPicker.min.js", - "dependencies": { - "tinycolor2": "*" - }, + "private": true, "devDependencies": { - "del": "^2.0.1", - "es6-promise": "^3.2.1", - "gulp": "^3.9.0", - "gulp-angular-templatecache": "^1.7.0", - "gulp-autoprefixer": "^3.1.0", - "gulp-concat": "^2.6.0", - "gulp-cssnano": "^2.1.0", - "gulp-debug": "^2.1.0", - "gulp-header": "^1.7.1", - "gulp-inject-reload": "0.0.2", - "gulp-jsclosure": "0.0.1", - "gulp-less": "^3.0.3", - "gulp-livereload": "^3.8.0", - "gulp-ng-annotate": "^1.1.0", - "gulp-rename": "^1.2.2", - "gulp-sourcemaps": "^1.5.2", - "gulp-uglify": "^1.4.0", - "gulp-util": "^3.0.7", - "merge-stream": "^1.0.0", - "run-sequence": "^1.1.2", - "st": "^1.0.0", - "streamqueue": "^1.1.1" - }, - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "angular-jsdoc": "^1.5.0", + "autoprefixer-core": "^5.2.1", + "codacy-coverage": "^2.1.0", + "connect-modrewrite": "^0.10.2", + "eslint": "^4.18.2", + "grunt": "^0.4.5", + "grunt-angular-templates": "^0.5.7", + "grunt-concurrent": "^1.0.0", + "grunt-connect-proxy": "^0.2.0", + "grunt-contrib-clean": "^0.6.0", + "grunt-contrib-concat": "^0.5.0", + "grunt-contrib-connect": "^0.9.0", + "grunt-contrib-copy": "^0.7.0", + "grunt-contrib-cssmin": "^0.12.0", + "grunt-contrib-htmlmin": "^0.4.0", + "grunt-contrib-imagemin": "^1.0.0", + "grunt-contrib-jshint": "^0.11.0", + "grunt-contrib-uglify-es": "^3.3.0", + "grunt-contrib-watch": "^0.6.1", + "grunt-eslint": "^20.1.0", + "grunt-file-creator": "^0.1.3", + "grunt-filerev": "^2.1.2", + "grunt-google-cdn": "^0.4.3", + "grunt-injector": "^1.1.0", + "grunt-jscs": "^1.8.0", + "grunt-jsdoc": "^2.2.1", + "grunt-karma": "^2.0.0", + "grunt-manifest": "^0.4.4", + "grunt-newer": "^1.1.0", + "grunt-ng-annotate": "^0.9.2", + "grunt-postcss": "^0.5.5", + "grunt-svgmin": "^2.0.0", + "grunt-usemin": "^3.0.0", + "grunt-wiredep": "^2.0.0", + "jasmine-core": "^2.99.1", + "jit-grunt": "^0.9.1", + "jsdoc": "^3.5.5", + "jshint-stylish": "^1.0.0", + "karma": "^1.7.0", + "karma-chrome-launcher": "^2.2.0", + "karma-coverage": "^1.1.1", + "karma-detect-browsers": "^2.3.0", + "karma-edge-launcher": "^0.4.2", + "karma-firefox-launcher": "^1.1.0", + "karma-ie-launcher": "^1.0.0", + "karma-jasmine": "^1.1.1", + "karma-opera-launcher": "^1.0.0", + "karma-safari-launcher": "^1.0.0", + "karma-safaritechpreview-launcher": "0.0.6", + "time-grunt": "^1.0.0" }, - "repository": { - "type": "git", - "url": "https://github.com/brianpkelley/md-color-picker" + "engines": { + "node": ">=0.10.0" }, - "keywords": [ - "angular", - "angular-material", - "color-picker", - "color-chooser", - "color-dialog" - ], - "author": "Brian Kelley (http://www.tastybytes.net)", - "license": "MIT", - "bugs": { - "url": "https://github.com/brianpkelley/md-color-picker/issues" + "scripts": { + "test": "karma start test/karma.conf.js" }, - "homepage": "https://github.com/brianpkelley/md-color-picker" + "dependencies": {} } diff --git a/src/js/mdColorPicker.js b/src/scripts/mdColorPicker.js similarity index 99% rename from src/js/mdColorPicker.js rename to src/scripts/mdColorPicker.js index 9d29097..4293efc 100644 --- a/src/js/mdColorPicker.js +++ b/src/scripts/mdColorPicker.js @@ -427,7 +427,7 @@ angular.module('mdColorPicker', []) .directive('mdColorPicker', [ '$timeout', 'mdColorPickerHistory', function( $timeout, colorHistory ) { return { - templateUrl: "mdColorPicker.tpl.html", + templateUrl: "views/mdColorPicker.tpl.html", // Added required controller ngModel require: '^ngModel', @@ -572,7 +572,7 @@ angular.module('mdColorPicker', []) }]) .directive( 'mdColorPickerContainer', ['$compile','$timeout','$mdColorPalette','mdColorPickerHistory', function( $compile, $timeout, $mdColorPalette, colorHistory ) { return { - templateUrl: 'mdColorPickerContainer.tpl.html', + templateUrl: 'views/mdColorPickerContainer.tpl.html', scope: { value: '=?', default: '@', @@ -884,7 +884,7 @@ angular.module('mdColorPicker', []) options.mdColorAlphaChannel = (!options.mdColorRgb && !options.mdColorHsl) ? false : options.mdColorAlphaChannel; dialog = $mdDialog.show({ - templateUrl: 'mdColorPickerDialog.tpl.html', + templateUrl: 'views/mdColorPickerDialog.tpl.html', hasBackdrop: options.hasBackdrop, clickOutsideToClose: options.clickOutsideToClose, diff --git a/src/styles/mdColorPicker.css b/src/styles/mdColorPicker.css new file mode 100644 index 0000000..a4a9309 --- /dev/null +++ b/src/styles/mdColorPicker.css @@ -0,0 +1,309 @@ +/** + * md-color-picker - Angular-Material inspired color picker. + * @version v0.2.6 + * @link https://github.com/brianpkelley/md-color-picker + * @license MIT + */ +md-color-picker .md-color-picker-input-container, +[md-color-picker] .md-color-picker-input-container { + position: relative; +} +md-color-picker .md-color-picker-input-container .md-color-picker-input::-ms-clear, +[md-color-picker] .md-color-picker-input-container .md-color-picker-input::-ms-clear { + display: none; +} +md-color-picker .md-color-picker-input-container .md-color-picker-preview, +[md-color-picker] .md-color-picker-input-container .md-color-picker-preview { + content: ''; + width: 24px; + height: 24px; + border: 2px solid #fff; + border-radius: 50%; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084); + position: relative; + top: 22px; + overflow: hidden; + background-color: #fff; + background-image: -webkit-linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd), -webkit-linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd); + background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd), linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd); + background-size: 8px 8px; + background-position: 0 0, 4px 4px; +} +md-color-picker .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result, +[md-color-picker] .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result { + width: 100%; + height: 100%; +} +md-color-picker .md-color-picker-input-container .md-color-picker-clear, +[md-color-picker] .md-color-picker-input-container .md-color-picker-clear { + position: absolute; + bottom: 42px; + right: -16px; + color: rgba(0, 0, 0, 0.26); +} +.md-color-picker-container { + padding: 8px; + background: #fff; + outline: none; + height: 397px; + width: 347px; + opacity: 1; + overflow: hidden; + z-index: 1000; +} +.md-color-picker-container .md-color-picker-arrow { + border: 0 solid transparent; + border-right-width: 30px; + border-bottom-width: 0px; + position: absolute; + left: 0; + top: 0px; + -webkit-transition: border-bottom-width cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s; + transition: border-bottom-width cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s; +} +.md-color-picker-container canvas { + width: 100%; + height: 100%; +} +.md-color-picker-container .md-color-picker-preview { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + font-weight: bold; + font-size: 18px; + color: #fff; + margin: -8px -8px 0px; + position: relative; +} +.md-color-picker-container .md-color-picker-preview .md-color-picker-result { + position: absolute; + height: 100%; + opacity: 1; + background: #ff0000; +} +.md-color-picker-container .md-color-picker-preview .md-color-picker-result > input { + position: relative; + top: -15px; + opacity: 0; +} +.md-color-picker-container .md-color-picker-preview .md-color-picker-result > div { + position: relative; + width: 100%; +} +.md-color-picker-container .md-color-picker-preview .md-color-picker-result > div > input { + border-width: 0; + background: transparent; + text-align: center; + position: absolute; + top: -15px; + bottom: 0; + left: 0; + right: 0; + color: #eee; + outline: none; + opacity: 0; +} +.md-color-picker-container .md-color-picker-preview .md-color-picker-result > div > input.switch { + -webkit-transition: top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, 0.25s opacity ease-out; + transition: top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, 0.25s opacity ease-out; + top: 0px; + opacity: 1; +} +.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab, +.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-wrapper, +.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-canvas, +.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-pagination-wrapper { + max-height: 28px; + height: 28px; +} +.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-ink-bar { + background: rgba(255, 255, 255, 0.5); +} +.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab { + padding-top: 2px; + background: rgba(255, 255, 255, 0.25); + color: #eee; + /* hack for https://github.com/angular/material/issues/4237 */ + max-width: none !important; +} +.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab.md-active { + background: transparent; +} +.md-color-picker-container .md-color-picker-preview.dark { + color: #333; +} +.md-color-picker-container .md-color-picker-preview.dark .md-color-picker-preview-input { + color: #333; +} +.md-color-picker-container .md-color-picker-preview.dark .md-tab { + background: rgba(0, 0, 0, 0.25); + color: #333; +} +.md-color-picker-container .md-color-picker-preview.dark .md-tab.md-active { + background: transparent; +} +.md-color-picker-container .md-color-picker-preview.dark md-ink-bar { + background: rgba(0, 0, 0, 0.5); +} +.md-color-picker-container .md-color-picker-tabs { + margin: 0px -8px 0; +} +.md-color-picker-container .md-color-picker-tabs md-tabs[md-align-tabs=bottom] { + padding-bottom: 0; +} +.md-color-picker-container .md-color-picker-tabs .md-tab, +.md-color-picker-container .md-color-picker-tabs md-tabs-wrapper, +.md-color-picker-container .md-color-picker-tabs md-tabs-canvas, +.md-color-picker-container .md-color-picker-tabs md-pagination-wrapper { + max-height: 36px; + height: 36px; +} +.md-color-picker-container .md-color-picker-tabs .md-tab { + padding: 7px 24px; + background: transparent; +} +.md-color-picker-container .md-color-picker-tabs .md-tab:last-of-type { + margin-right: -2px; +} +.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) { + min-height: 298px; +} +.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper { + height: 255px; + margin-bottom: 8px; +} +.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content { + height: 255px; + padding: 0px 8px 0; +} +.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content [md-tabs-template] { + height: 100%; +} +.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors { + margin: 8px -8px -8px; +} +.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors md-ink-bar { + top: auto; +} +.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab { + background: rgba(0, 0, 0, 0.075); +} +.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab.md-active { + background: #fff; +} +.md-color-picker-container .md-color-picker-colors { + overflow: hidden; + margin-top: 8px; +} +.md-color-picker-container .md-color-picker-colors .md-color-picker-marker { + position: absolute; + border: 2px solid #fff; + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5); +} +.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum] { + position: relative; + cursor: crosshair; + overflow: hidden; + height: 255px; + width: 255px; +} +.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum] .md-color-picker-marker { + width: 12px; + height: 12px; + border-radius: 50%; + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 0 2px 0 rgba(0, 0, 0, 0.5); + top: -5px; + left: calc(100% - 5px); +} +.md-color-picker-container .md-color-picker-colors [md-color-picker-hue], +.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha] { + position: relative; + cursor: crosshair; + overflow: hidden; + width: 30px; +} +.md-color-picker-container .md-color-picker-colors [md-color-picker-hue].md-color-picker-wide, +.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha].md-color-picker-wide { + width: 67px; +} +.md-color-picker-container .md-color-picker-colors [md-color-picker-hue] .md-color-picker-marker, +.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha] .md-color-picker-marker { + height: 5px; + width: 100%; + border-left: 0; + border-right: 0; + top: -2px; + left: 0; +} +.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-track-fill { + background: #d01515; +} +.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-thumb:after { + background-color: #d01515; + border-color: #d01515; +} +.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-track-fill { + background: #19d015; +} +.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-thumb:after { + background-color: #19d015; + border-color: #19d015; +} +.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-track-fill { + background: #1560d0; +} +.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-thumb:after { + background-color: #1560d0; + border-color: #1560d0; +} +.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title { + font-size: 22px; + line-height: 75px; + padding: 0 15px; + color: rgba(0, 0, 0, 0.85); + text-transform: capitalize; +} +.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title.dark { + color: rgba(255, 255, 255, 0.85); +} +.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title:not(:first-child) { + margin-top: 16px; +} +.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label { + font-size: 12px; + line-height: 33px; + padding: 0 5px; + color: rgba(0, 0, 0, 0.7); +} +.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label.dark { + color: rgba(255, 255, 255, 0.7); +} +.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-colors { + position: absolute; + -webkit-transition: left cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, right cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, bottom cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s; + transition: left cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, right cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, bottom cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s; +} +.md-color-picker-container .md-color-picker-history > div > div { + height: 20px; + margin: 4px; + background-color: #fff; + background-image: -webkit-linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd), -webkit-linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd); + background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd), linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd); + background-size: 8px 8px; + background-position: 0 0, 4px 4px; +} +.md-color-picker-container .md-color-picker-history > div > div > div { + width: 100%; + height: 100%; +} +.md-color-picker-container .md-color-picker-history button { + margin-top: auto; + margin-left: auto; +} +.md-color-picker-checkered-bg { + background-color: #fff; + background-image: -webkit-linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd), -webkit-linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd); + background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd), linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd); + background-size: 8px 8px; + background-position: 0 0, 4px 4px; +} diff --git a/src/templates/mdColorPicker.tpl.html b/src/views/mdColorPicker.tpl.html similarity index 100% rename from src/templates/mdColorPicker.tpl.html rename to src/views/mdColorPicker.tpl.html diff --git a/src/templates/mdColorPickerContainer.tpl.html b/src/views/mdColorPickerContainer.tpl.html similarity index 100% rename from src/templates/mdColorPickerContainer.tpl.html rename to src/views/mdColorPickerContainer.tpl.html diff --git a/src/templates/mdColorPickerDialog.tpl.html b/src/views/mdColorPickerDialog.tpl.html similarity index 100% rename from src/templates/mdColorPickerDialog.tpl.html rename to src/views/mdColorPickerDialog.tpl.html From 279a7b1174a19ceb567045b8ad18da9a262adcd6 Mon Sep 17 00:00:00 2001 From: mostafabarmshory Date: Mon, 24 Sep 2018 21:32:00 +0330 Subject: [PATCH 19/29] Adding jshint config --- .eslintignore | 4 ++ .eslintrc.json | 36 +++++++++++++++ .gitattributes | 1 + .gitignore | 1 + .gitlab-ci.yml | 44 +++++++++++++++++++ .jscsrc | 5 +++ .jshintignore | 4 ++ .jshintrc | 21 +++++++++ .tern-project | 34 ++++++++++++++ bower.json | 4 +- ...{mdColorPicker.css => md-color-picker.css} | 0 dist/{mdColorPicker.js => md-color-picker.js} | 39 +++++++++------- dist/md-color-picker.min.css | 1 + dist/md-color-picker.min.js | 1 + dist/mdColorPicker.min.css | 7 --- dist/mdColorPicker.min.js | 7 --- 16 files changed, 177 insertions(+), 32 deletions(-) create mode 100644 .eslintignore create mode 100644 .eslintrc.json create mode 100644 .gitattributes create mode 100644 .gitlab-ci.yml create mode 100644 .jscsrc create mode 100644 .jshintignore create mode 100644 .jshintrc create mode 100644 .tern-project rename dist/{mdColorPicker.css => md-color-picker.css} (100%) rename dist/{mdColorPicker.js => md-color-picker.js} (78%) create mode 100644 dist/md-color-picker.min.css create mode 100644 dist/md-color-picker.min.js delete mode 100644 dist/mdColorPicker.min.css delete mode 100644 dist/mdColorPicker.min.js diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..edc43a6 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +test/* +demo/* +dist/* +Gruntfile.js \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..99fa32b --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,36 @@ +{ + "env": { + "browser": true, + "es6": false + }, + "globals": { + "angular": true, + "module": true, + "confirm": true, + "alert": true, + "toast": true, + "prompt": true, + "jsPanel": true, + "_": true, + "tinycolor": true + }, + "extends": "eslint:recommended", + "parserOptions": { + "sourceType": "module" + }, + "rules": { + "indent": "off", + "linebreak-style": [ + "error", + "unix" + ], + "quotes": [ + "error", + "single" + ], + "semi": [ + "error", + "always" + ] + } +} \ No newline at end of file diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..2125666 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto \ No newline at end of file diff --git a/.gitignore b/.gitignore index 76b4b5f..36f703a 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,4 @@ npm-debug.log /bower_components/ /package-lock.json /.settings/ +/.tmp/ diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml new file mode 100644 index 0000000..9ec946b --- /dev/null +++ b/.gitlab-ci.yml @@ -0,0 +1,44 @@ +image: node:latest + +cache: + paths: + - node_modules + +build-project: + image: node:8 + coverage: /Lines\s*:\s*(\d+\.\d+)%/ + script: + # TODO: maso, 2018: install opera, firefox + - apt-get update + - apt-get -yq install chromium + - apt-get -yq install git + - npm install -g bower grunt-cli + - npm install + - bower install --allow-root + - grunt test + - find . -name lcov.info | xargs -d '\n' cat | node_modules/.bin/codacy-coverage -t $CODACY_PROJECT_TOKEN + - grunt release + + artifacts: + paths: + - coverage/ + - doc/ + - dist/ + expire_in: 1 days + +pages: + stage: deploy + dependencies: + - build-project + script: + - ls -l + - mkdir .public + - mv coverage/ .public/coverage/ + - mv doc/ .public/doc/ + - mv .public public + artifacts: + paths: + - public + expire_in: 90 days + only: + - master \ No newline at end of file diff --git a/.jscsrc b/.jscsrc new file mode 100644 index 0000000..06a602a --- /dev/null +++ b/.jscsrc @@ -0,0 +1,5 @@ +{ + "requireCapitalizedConstructors": true, + "requireParenthesesAroundIIFE": true, + "validateQuoteMarks": "'" +} diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..4d92378 --- /dev/null +++ b/.jshintignore @@ -0,0 +1,4 @@ +test/** +demo/** +dist/** +Gruntfile.js \ No newline at end of file diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..abe3986 --- /dev/null +++ b/.jshintrc @@ -0,0 +1,21 @@ +{ + "bitwise": true, + "browser": true, + "curly": true, + "eqeqeq": true, + "esnext": false, + "latedef": true, + "noarg": true, + "node": true, + "strict": true, + "undef": true, + "unused": true, + "-W100": true, + "esversion": 6, + "globals": { + "angular": false, + "jsPanel": false, + "_": false, + "tinycolor": false + } +} diff --git a/.tern-project b/.tern-project new file mode 100644 index 0000000..5de781a --- /dev/null +++ b/.tern-project @@ -0,0 +1,34 @@ +{ + "ecmaVersion": 6, + "ide": { + "scriptPaths": [ + { + "type": "FOLDER", + "path": "src" + } + ] + }, + "plugins": { + "es_modules": { + + }, + "doc_comment": { + "strong": true + }, + "eslint": { + "configFile": ".eslintrc.json" + }, + "jscs": { + "configFile": ".jscsrc" + }, + "jshint": { + "configFile": ".jshintrc" + }, + "angular1": { + + } + }, + "libs": [ + "browser" + ] +} \ No newline at end of file diff --git a/bower.json b/bower.json index 2a748d9..ab29758 100644 --- a/bower.json +++ b/bower.json @@ -8,8 +8,8 @@ ], "description": "Angular-Material inspired color picker.", "main": [ - "dist/mdColorPicker.js", - "dist/mdColorPicker.css" + "dist/md-color-picker.js", + "dist/md-color-picker.css" ], "dependencies": { "tinycolor": ">=1.2.1", diff --git a/dist/mdColorPicker.css b/dist/md-color-picker.css similarity index 100% rename from dist/mdColorPicker.css rename to dist/md-color-picker.css diff --git a/dist/mdColorPicker.js b/dist/md-color-picker.js similarity index 78% rename from dist/mdColorPicker.js rename to dist/md-color-picker.js index 6068452..1ee20a2 100644 --- a/dist/mdColorPicker.js +++ b/dist/md-color-picker.js @@ -1,10 +1,3 @@ -/** - * md-color-picker - Angular-Material inspired color picker. - * @version v0.2.6 - * @link https://github.com/brianpkelley/md-color-picker - * @license MIT - */ -;(function(angular, window, tinycolor) { (function( window, angular, undefined ) { 'use strict'; @@ -434,7 +427,7 @@ angular.module('mdColorPicker', []) .directive('mdColorPicker', [ '$timeout', 'mdColorPickerHistory', function( $timeout, colorHistory ) { return { - templateUrl: "mdColorPicker.tpl.html", + templateUrl: "views/mdColorPicker.tpl.html", // Added required controller ngModel require: '^ngModel', @@ -579,7 +572,7 @@ angular.module('mdColorPicker', []) }]) .directive( 'mdColorPickerContainer', ['$compile','$timeout','$mdColorPalette','mdColorPickerHistory', function( $compile, $timeout, $mdColorPalette, colorHistory ) { return { - templateUrl: 'mdColorPickerContainer.tpl.html', + templateUrl: 'views/mdColorPickerContainer.tpl.html', scope: { value: '=?', default: '@', @@ -596,7 +589,7 @@ angular.module('mdColorPicker', []) mdColorHsl: '=', mdColorDefaultTab: '=' }, - controller: ["$scope", "$element", "$attrs", function( $scope, $element, $attrs ) { + controller: function( $scope, $element, $attrs ) { // console.log( "mdColorPickerContainer Controller", Date.now() - dateClick, $scope ); function getTabIndex( tab ) { @@ -767,7 +760,7 @@ angular.module('mdColorPicker', []) previewInput.focus(); $scope.previewFocus(); }); - }], + }, link: function( scope, element, attrs ) { var tabs = element[0].getElementsByTagName( 'md-tab' ); @@ -891,7 +884,7 @@ angular.module('mdColorPicker', []) options.mdColorAlphaChannel = (!options.mdColorRgb && !options.mdColorHsl) ? false : options.mdColorAlphaChannel; dialog = $mdDialog.show({ - templateUrl: 'mdColorPickerDialog.tpl.html', + templateUrl: 'views/mdColorPickerDialog.tpl.html', hasBackdrop: options.hasBackdrop, clickOutsideToClose: options.clickOutsideToClose, @@ -959,7 +952,21 @@ 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, window, tinycolor); \ No newline at end of file +angular.module('mdColorPicker').run(['$templateCache', function($templateCache) { + 'use strict'; + + $templateCache.put('views/mdColorPicker.tpl.html', + "
" + ); + + + $templateCache.put('views/mdColorPickerContainer.tpl.html', + "
R
G
B
A
" + ); + + + $templateCache.put('views/mdColorPickerDialog.tpl.html', + "
Cancel Select " + ); + +}]); diff --git a/dist/md-color-picker.min.css b/dist/md-color-picker.min.css new file mode 100644 index 0000000..beee9e0 --- /dev/null +++ b/dist/md-color-picker.min.css @@ -0,0 +1 @@ +[md-color-picker] .md-color-picker-input-container,md-color-picker .md-color-picker-input-container{position:relative}[md-color-picker] .md-color-picker-input-container .md-color-picker-input::-ms-clear,md-color-picker .md-color-picker-input-container .md-color-picker-input::-ms-clear{display:none}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview,md-color-picker .md-color-picker-input-container .md-color-picker-preview{content:'';width:24px;height:24px;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);position:relative;top:22px;overflow:hidden;background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd),linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result,md-color-picker .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result{width:100%;height:100%}[md-color-picker] .md-color-picker-input-container .md-color-picker-clear,md-color-picker .md-color-picker-input-container .md-color-picker-clear{position:absolute;bottom:42px;right:-16px;color:rgba(0,0,0,.26)}.md-color-picker-container{padding:8px;background:#fff;outline:0;height:397px;width:347px;opacity:1;overflow:hidden;z-index:1000}.md-color-picker-container .md-color-picker-arrow{border:0 solid transparent;border-right-width:30px;border-bottom-width:0;position:absolute;left:0;top:0;transition:border-bottom-width cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s}.md-color-picker-container canvas{width:100%;height:100%}.md-color-picker-container .md-color-picker-preview{flex:1;font-weight:700;font-size:18px;color:#fff;margin:-8px -8px 0;position:relative}.md-color-picker-container .md-color-picker-preview .md-color-picker-result{position:absolute;height:100%;opacity:1;background:red}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>input{position:relative;top:-15px;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div{position:relative;width:100%}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input{border-width:0;background:0 0;text-align:center;position:absolute;top:-15px;bottom:0;left:0;right:0;color:#eee;outline:0;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input.switch{transition:top cubic-bezier(.25,.8,.25,1) .25s,.25s opacity ease-out;top:0;opacity:1}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-wrapper{max-height:28px;height:28px}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-ink-bar{background:rgba(255,255,255,.5)}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab{padding-top:2px;background:rgba(255,255,255,.25);color:#eee;max-width:none!important}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab.md-active{background:0 0}.md-color-picker-container .md-color-picker-preview.dark,.md-color-picker-container .md-color-picker-preview.dark .md-color-picker-preview-input{color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab{background:rgba(0,0,0,.25);color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab.md-active{background:0 0}.md-color-picker-container .md-color-picker-preview.dark md-ink-bar{background:rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-tabs{margin:0 -8px}.md-color-picker-container .md-color-picker-tabs md-tabs[md-align-tabs=bottom]{padding-bottom:0}.md-color-picker-container .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-tabs md-tabs-wrapper{max-height:36px;height:36px}.md-color-picker-container .md-color-picker-tabs .md-tab{padding:7px 24px;background:0 0}.md-color-picker-container .md-color-picker-tabs .md-tab:last-of-type{margin-right:-2px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height){min-height:298px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper{height:255px;margin-bottom:8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content{height:255px;padding:0 8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content [md-tabs-template]{height:100%}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors{margin:8px -8px -8px}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors md-ink-bar{top:auto}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab{background:rgba(0,0,0,.075)}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab.md-active{background:#fff}.md-color-picker-container .md-color-picker-colors{overflow:hidden;margin-top:8px}.md-color-picker-container .md-color-picker-colors .md-color-picker-marker{position:absolute;border:2px solid #fff;box-shadow:0 0 2px 0 rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum]{position:relative;cursor:crosshair;overflow:hidden;height:255px;width:255px}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum] .md-color-picker-marker{width:12px;height:12px;border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.5),inset 0 0 2px 0 rgba(0,0,0,.5);top:-5px;left:calc(100% - 5px)}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha],.md-color-picker-container .md-color-picker-colors [md-color-picker-hue]{position:relative;cursor:crosshair;overflow:hidden;width:30px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha].md-color-picker-wide,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue].md-color-picker-wide{width:67px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha] .md-color-picker-marker,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue] .md-color-picker-marker{height:5px;width:100%;border-left:0;border-right:0;top:-2px;left:0}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-track-fill{background:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-thumb:after{background-color:#d01515;border-color:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-track-fill{background:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-thumb:after{background-color:#19d015;border-color:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-track-fill{background:#1560d0}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-thumb:after{background-color:#1560d0;border-color:#1560d0}.md-color-picker-checkered-bg,.md-color-picker-container .md-color-picker-history>div>div{background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd),linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title{font-size:22px;line-height:75px;padding:0 15px;color:rgba(0,0,0,.85);text-transform:capitalize}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title.dark{color:rgba(255,255,255,.85)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title:not(:first-child){margin-top:16px}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label{font-size:12px;line-height:33px;padding:0 5px;color:rgba(0,0,0,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label.dark{color:rgba(255,255,255,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-colors{position:absolute;transition:left cubic-bezier(.25,.8,.25,1) .25s,right cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s,bottom cubic-bezier(.25,.8,.25,1) .25s}.md-color-picker-container .md-color-picker-history>div>div{height:20px;margin:4px}.md-color-picker-container .md-color-picker-history>div>div>div{width:100%;height:100%}.md-color-picker-container .md-color-picker-history button{margin-top:auto;margin-left:auto} \ No newline at end of file diff --git a/dist/md-color-picker.min.js b/dist/md-color-picker.min.js new file mode 100644 index 0000000..b01a06d --- /dev/null +++ b/dist/md-color-picker.min.js @@ -0,0 +1 @@ +!function(o,e,t){"use strict";var r={hue:{getColorByPoint:function(o,e){var t=this.getImageData(o,e);return this.setMarkerCenter(e),new tinycolor({r:t[0],g:t[1],b:t[2]}).toHsl().h},draw:function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var o=this.context.createLinearGradient(90,0,90,this.height);o.addColorStop(.01,"rgba(255, 0, 0, 1.000)"),o.addColorStop(.167,"rgba(255, 0, 255, 1.000)"),o.addColorStop(.333,"rgba(0, 0, 255, 1.000)"),o.addColorStop(.5,"rgba(0, 255, 255, 1.000)"),o.addColorStop(.666,"rgba(0, 255, 0, 1.000)"),o.addColorStop(.828,"rgba(255, 255, 0, 1.000)"),o.addColorStop(.999,"rgba(255, 0, 0, 1.000)"),this.context.fillStyle=o,this.context.fillRect(0,0,this.canvas.width,this.height)}},alpha:{getColorByPoint:function(o,e){var t=this.getImageData(o,e);return this.setMarkerCenter(e),t[3]/255},draw:function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var o=this.context.createLinearGradient(90,0,90,this.height);o.addColorStop(.01,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 1.000)"),o.addColorStop(.99,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 0.000)"),this.context.fillStyle=o,this.context.fillRect(-1,-1,this.canvas.width+2,this.height+2)},extra:function(){this.$scope.$on("mdColorPicker:spectrumColorChange",e.bind(this,function(o,e){this.currentColor=e.color,this.draw()}))}},spectrum:{getColorByPoint:function(o,e){var t=this.getImageData(o,e);return this.setMarkerCenter(o,e),{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 o=this.context.createLinearGradient(0,0,this.canvas.width,0);o.addColorStop(.01,"rgba(255, 255, 255, 1.000)"),o.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=o,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(o,e){this.currentHue=e.hue,this.draw();var t=this.getMarkerCenter(),r=this.getColorByPoint(t.x,t.y);this.setColor(r)}))}}};function l(o,t){this.type=o,this.restrictX=t,this.offset={x:null,y:null},this.height=255,this.$scope=null,this.$element=null,this.get=e.bind(this,function(o,t,r){this.$scope=o,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",e.bind(this,this.onMouseDown)),this.$scope.$on("mdColorPicker:colorSet",e.bind(this,this.onColorSet)),this.extra&&this.extra(),this.draw()})}l.prototype.$window=e.element(o),l.prototype.getColorByMouse=function(o){var e=o.touches&&o.touches[0],t=e&&e.pageX||o.pageX,r=e&&e.pageY||o.pageY,l=Math.round(t-this.offset.x),i=Math.round(r-this.offset.y);return this.getColorByPoint(l,i)},l.prototype.setMarkerCenter=function(o,t){var r,l,i,a,n=-1*this.marker.offsetWidth/2,d=-1*this.marker.offsetHeight/2;void 0===t?(i=o+d,a=Math.round(Math.max(Math.min(this.height-1+d,i),d)),l=0):(r=o+n,i=t+d,l=Math.floor(Math.max(Math.min(this.height+n,r),n)),a=Math.floor(Math.max(Math.min(this.height+d,i),d))),e.element(this.marker).css({left:l+"px"}),e.element(this.marker).css({top:a+"px"})},l.prototype.getMarkerCenter=function(){return{x:this.marker.offsetLeft+Math.floor(this.marker.offsetWidth/2),y:this.marker.offsetTop+Math.floor(this.marker.offsetHeight/2)}},l.prototype.getImageData=function(o,e){return o=Math.max(0,Math.min(o,this.canvas.width-1)),e=Math.max(0,Math.min(e,this.canvas.height-1)),this.context.getImageData(o,e,1,1).data},l.prototype.onMouseDown=function(o){o.preventDefault(),o.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=e.bind(this,function(o){switch(this.type){case"hue":var e=this.getColorByMouse(o);this.$scope.$broadcast("mdColorPicker:spectrumHueChange",{hue:e});break;case"alpha":var t=this.getColorByMouse(o);this.$scope.color.setAlpha(t),this.$scope.alpha=t,this.$scope.$apply();break;case"spectrum":var r=this.getColorByMouse(o);this.setColor(r)}});this.$window.on("touchmove mousemove",t),this.$window.one("touchend mouseup",e.bind(this,function(o){this.$window.off("touchmove mousemove",t),this.$element.css({cursor:"crosshair"})})),t(o)},l.prototype.setColor=function(o){this.$scope.color._r=o.r,this.$scope.color._g=o.g,this.$scope.color._b=o.b,this.$scope.$apply(),this.$scope.$broadcast("mdColorPicker:spectrumColorChange",{color:o})},l.prototype.onColorSet=function(o,e){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=e.color.toRgb(),this.draw();var r=e.color.getAlpha(),l=this.canvas.height-this.canvas.height*r;this.setMarkerCenter(l);break;case"spectrum":t=e.color.toHsv();this.currentHue=t.h,this.draw();var i=this.canvas.width*t.s,a=this.canvas.height-this.canvas.height*t.v;this.setMarkerCenter(i,a)}},e.module("mdColorPicker",[]).run(["$templateCache",function(o){var e={clear:'',gradient:'',tune:'',view_module:'',view_headline:'',history:'',clear_all:''};for(var t in e)e.hasOwnProperty(t)&&o.put([t,"svg"].join("."),['',e[t],""].join(""))}]).factory("mdColorGradientCanvas",function(){return function(o){var t=new l(o,"spectrum"!=o);return{template:'
',link:(t=e.merge(t,r[o])).get,controller:function(){}}}}).factory("mdColorPickerHistory",["$injector",function(o){var e=[],t=[],r=!1;try{r=o.get("$cookies")}catch(o){}if(r)for(var l=r.getObject("mdColorPickerHistory")||[],i=0;ia&&(e.pop(),t.pop()),r&&r.putObject("mdColorPickerHistory",t)},get:function(){return e},reset:function(){e=[],t=[],r&&r.putObject("mdColorPickerHistory",t)}}}]).directive("mdColorPicker",["$timeout","mdColorPickerHistory",function(o,e){return{templateUrl:"views/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(o,e,t,r,l){if(void 0!==o.options)for(var i in o.options){var a;if(o.options.hasOwnProperty(i))a=i,o.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(a="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),!a||void 0!==o[a]&&""!==o[a]||(o[a]=o.options[i])}var n=e.controller("ngModel"),d=function(e){o.value=e||n.$viewValue||""};o.mdColorClearButton=void 0===o.mdColorClearButton||o.mdColorClearButton,o.mdColorPreview=void 0===o.mdColorPreview||o.mdColorPreview,o.mdColorAlphaChannel=void 0===o.mdColorAlphaChannel||o.mdColorAlphaChannel,o.mdColorSpectrum=void 0===o.mdColorSpectrum||o.mdColorSpectrum,o.mdColorSliders=void 0===o.mdColorSliders||o.mdColorSliders,o.mdColorGenericPalette=void 0===o.mdColorGenericPalette||o.mdColorGenericPalette,o.mdColorMaterialPalette=void 0===o.mdColorMaterialPalette||o.mdColorMaterialPalette,o.mdColorHistory=void 0===o.mdColorHistory||o.mdColorHistory,o.mdColorHex=void 0===o.mdColorHex||o.mdColorHex,o.mdColorRgb=void 0===o.mdColorRgb||o.mdColorRgb,o.mdColorHsl=void 0===o.mdColorHsl||o.mdColorHsl,d(),o.$watch(function(){return n.$modelValue},function(o){d(o)}),o.$watch("value",function(o,e){""!==o&&void 0!==o&&o&&o!==e&&n.$setViewValue(o)}),o.clearValue=function(){n.$setViewValue("")},o.showColorPicker=function(e){l.show({value:o.value,defaultValue:o.default,random:o.random,clickOutsideToClose:o.clickOutsideToClose,hasBackdrop:o.hasBackdrop,skipHide:o.skipHide,preserveScope:o.preserveScope,mdColorAlphaChannel:o.mdColorAlphaChannel,mdColorSpectrum:o.mdColorSpectrum,mdColorSliders:o.mdColorSliders,mdColorGenericPalette:o.mdColorGenericPalette,mdColorMaterialPalette:o.mdColorMaterialPalette,mdColorHistory:o.mdColorHistory,mdColorHex:o.mdColorHex,mdColorRgb:o.mdColorRgb,mdColorHsl:o.mdColorHsl,mdColorDefaultTab:o.mdColorDefaultTab,$event:e}).then(function(e){o.value=e})}}],compile:function(o,e){e.type=void 0!==e.type?e.type:0}}}]).directive("mdColorPickerContainer",["$compile","$timeout","$mdColorPalette","mdColorPickerHistory",function(o,t,r,l){return{templateUrl:"views/mdColorPickerContainer.tpl.html",scope:{value:"=?",default:"@",random:"@",ok:"=?",mdColorAlphaChannel:"=",mdColorSpectrum:"=",mdColorSliders:"=",mdColorGenericPalette:"=",mdColorMaterialPalette:"=",mdColorHistory:"=",mdColorHex:"=",mdColorRgb:"=",mdColorHsl:"=",mdColorDefaultTab:"="},controller:["$scope","$element","$attrs",function(o,i,a){var n=e.element(i[0].querySelector(".md-color-picker-container")),d=(e.element(n[0].querySelector(".md-color-picker-result")),e.element(i[0].querySelector(".md-color-picker-preview-input"))),c=["toHexString","toRgbString","toHslString"];o.default=o.default?o.default:o.random?tinycolor.random():"rgb(255,255,255)",o.value.search("#")>=0?o.type=0:o.value.search("rgb")>=0?o.type=1:o.value.search("hsl")>=0&&(o.type=2),o.color=new tinycolor(o.value||o.default),o.alpha=o.color.getAlpha(),o.history=l,o.materialFamily=[],o.whichPane=function(e){var t=0;if(e&&"string"==typeof e){for(var r="mdColor"+e.slice(0,1).toUpperCase()+e.slice(1),l=["mdColorSpectrum","mdColorSliders","mdColorGenericPalette","mdColorMaterialPalette","mdColorHistory"],i=0;i'),a=e.element('
'),n=e.element('
'),d=e.element('
'),e.forEach(o.palette,function(r,l){var n=i.clone();e.forEach(r,function(e){var t=a.clone();t.css({height:"25.5px",backgroundColor:e}),t.bind("click",o.setPaletteColor),n.append(t)}),t.append(n)}),e.forEach(o.materialPalette,function(t,r){var i=n.clone();i.html(""+r.replace("-"," ")+""),i.css({height:"75px",backgroundColor:"rgb("+t[500].value[0]+","+t[500].value[1]+","+t[500].value[2]+")"}),o.isDark(t[500].value)&&i.addClass("dark"),l.append(i),e.forEach(t,function(e,t){var r=d.clone();r.css({height:"33px",backgroundColor:"rgb("+e.value[0]+","+e.value[1]+","+e.value[2]+")"}),o.isDark(e.value)&&r.addClass("dark"),r.html(""+t+""),r.bind("click",o.setPaletteColor),l.append(r)})})})}}}]).directive("mdColorPickerHue",["mdColorGradientCanvas",function(o){return new o("hue")}]).directive("mdColorPickerAlpha",["mdColorGradientCanvas",function(o){return new o("alpha")}]).directive("mdColorPickerSpectrum",["mdColorGradientCanvas",function(o){return new o("spectrum")}]).factory("$mdColorPicker",["$q","$mdDialog","mdColorPickerHistory",function(o,e,t){var r;return{show:function(o){return void 0===o&&(o={}),o.hasBackdrop=void 0===o.hasBackdrop||o.hasBackdrop,o.clickOutsideToClose=void 0===o.clickOutsideToClose||o.clickOutsideToClose,o.defaultValue=void 0===o.defaultValue?"#FFFFFF":o.defaultValue,o.focusOnOpen=void 0!==o.focusOnOpen&&o.focusOnOpen,o.preserveScope=void 0===o.preserveScope||o.preserveScope,o.skipHide=void 0===o.skipHide||o.skipHide,o.mdColorAlphaChannel=void 0!==o.mdColorAlphaChannel&&o.mdColorAlphaChannel,o.mdColorSpectrum=void 0===o.mdColorSpectrum||o.mdColorSpectrum,o.mdColorSliders=void 0===o.mdColorSliders||o.mdColorSliders,o.mdColorGenericPalette=void 0===o.mdColorGenericPalette||o.mdColorGenericPalette,o.mdColorMaterialPalette=void 0===o.mdColorMaterialPalette||o.mdColorMaterialPalette,o.mdColorHistory=void 0===o.mdColorHistory||o.mdColorHistory,o.mdColorRgb=void 0===o.mdColorRgb||o.mdColorRgb,o.mdColorHsl=void 0===o.mdColorHsl||o.mdColorHsl,o.mdColorHex=void 0===o.mdColorHex||!o.mdColorRgb&&!o.mdColorHsl||o.mdColorHex,o.mdColorAlphaChannel=!(!o.mdColorRgb&&!o.mdColorHsl)&&o.mdColorAlphaChannel,(r=e.show({templateUrl:"views/mdColorPickerDialog.tpl.html",hasBackdrop:o.hasBackdrop,clickOutsideToClose:o.clickOutsideToClose,controller:["$scope","options",function(o,t){o.close=function(){e.cancel()},o.ok=function(){e.hide(o.value)},o.hide=o.ok,o.value=t.value,o.default=t.defaultValue,o.random=t.random,o.mdColorAlphaChannel=t.mdColorAlphaChannel,o.mdColorSpectrum=t.mdColorSpectrum,o.mdColorSliders=t.mdColorSliders,o.mdColorGenericPalette=t.mdColorGenericPalette,o.mdColorMaterialPalette=t.mdColorMaterialPalette,o.mdColorHistory=t.mdColorHistory,o.mdColorHex=t.mdColorHex,o.mdColorRgb=t.mdColorRgb,o.mdColorHsl=t.mdColorHsl,o.mdColorDefaultTab=t.mdColorDefaultTab}],locals:{options:o},preserveScope:o.preserveScope,skipHide:o.skipHide,targetEvent:o.$event,focusOnOpen:o.focusOnOpen,autoWrap:!1,onShowing:function(){},onComplete:function(){}})).then(function(o){t.add(new tinycolor(o))},function(){}),r},hide:function(){return r.hide()},cancel:function(){return r.cancel()}}}])}(window,window.angular),angular.module("mdColorPicker").run(["$templateCache",function(o){"use strict";o.put("views/mdColorPicker.tpl.html",'
'),o.put("views/mdColorPickerContainer.tpl.html",'
R
G
B
A
'),o.put("views/mdColorPickerDialog.tpl.html",'
Cancel Select ')}]); \ No newline at end of file diff --git a/dist/mdColorPicker.min.css b/dist/mdColorPicker.min.css deleted file mode 100644 index a7bd000..0000000 --- a/dist/mdColorPicker.min.css +++ /dev/null @@ -1,7 +0,0 @@ -/** - * md-color-picker - Angular-Material inspired color picker. - * @version v0.2.6 - * @link https://github.com/brianpkelley/md-color-picker - * @license MIT - */ -[md-color-picker] .md-color-picker-input-container,md-color-picker .md-color-picker-input-container{position:relative}[md-color-picker] .md-color-picker-input-container .md-color-picker-input::-ms-clear,md-color-picker .md-color-picker-input-container .md-color-picker-input::-ms-clear{display:none}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview,md-color-picker .md-color-picker-input-container .md-color-picker-preview{content:"";width:24px;height:24px;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);position:relative;top:22px;overflow:hidden;background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result,md-color-picker .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result{width:100%;height:100%}[md-color-picker] .md-color-picker-input-container .md-color-picker-clear,md-color-picker .md-color-picker-input-container .md-color-picker-clear{position:absolute;bottom:42px;right:-16px;color:rgba(0,0,0,.26)}.md-color-picker-container{padding:8px;background:#fff;outline:none;height:397px;width:347px;opacity:1;overflow:hidden;z-index:1000}.md-color-picker-container .md-color-picker-arrow{border:0 solid transparent;border-right-width:30px;border-bottom-width:0;position:absolute;left:0;top:0;transition:border-bottom-width .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1)}.md-color-picker-container canvas{width:100%;height:100%}.md-color-picker-container .md-color-picker-preview{-ms-flex:1;flex:1;font-weight:700;font-size:18px;color:#fff;margin:-8px -8px 0;position:relative}.md-color-picker-container .md-color-picker-preview .md-color-picker-result{position:absolute;height:100%;opacity:1;background:red}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>input{position:relative;top:-15px;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div{position:relative;width:100%}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input{border-width:0;background:transparent;text-align:center;position:absolute;top:-15px;bottom:0;left:0;right:0;color:#eee;outline:none;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input.switch{transition:top .25s cubic-bezier(.25,.8,.25,1),opacity .25s ease-out;top:0;opacity:1}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-wrapper{max-height:28px;height:28px}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-ink-bar{background:hsla(0,0%,100%,.5)}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab{padding-top:2px;background:hsla(0,0%,100%,.25);color:#eee;max-width:none!important}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark,.md-color-picker-container .md-color-picker-preview.dark .md-color-picker-preview-input{color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab{background:rgba(0,0,0,.25);color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab.md-active{background:transparent}.md-color-picker-container .md-color-picker-preview.dark md-ink-bar{background:rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-tabs{margin:0 -8px}.md-color-picker-container .md-color-picker-tabs md-tabs[md-align-tabs=bottom]{padding-bottom:0}.md-color-picker-container .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-tabs md-tabs-wrapper{max-height:36px;height:36px}.md-color-picker-container .md-color-picker-tabs .md-tab{padding:7px 24px;background:transparent}.md-color-picker-container .md-color-picker-tabs .md-tab:last-of-type{margin-right:-2px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height){min-height:298px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper{height:255px;margin-bottom:8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content{height:255px;padding:0 8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content [md-tabs-template]{height:100%}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors{margin:8px -8px -8px}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors md-ink-bar{top:auto}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab{background:rgba(0,0,0,.075)}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab.md-active{background:#fff}.md-color-picker-container .md-color-picker-colors{overflow:hidden;margin-top:8px}.md-color-picker-container .md-color-picker-colors .md-color-picker-marker{position:absolute;border:2px solid #fff;box-shadow:0 0 2px 0 rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum]{position:relative;cursor:crosshair;overflow:hidden;height:255px;width:255px}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum] .md-color-picker-marker{width:12px;height:12px;border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.5),inset 0 0 2px 0 rgba(0,0,0,.5);top:-5px;left:calc(100% - 5px)}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha],.md-color-picker-container .md-color-picker-colors [md-color-picker-hue]{position:relative;cursor:crosshair;overflow:hidden;width:30px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha].md-color-picker-wide,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue].md-color-picker-wide{width:67px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha] .md-color-picker-marker,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue] .md-color-picker-marker{height:5px;width:100%;border-left:0;border-right:0;top:-2px;left:0}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-track-fill{background:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-thumb:after{background-color:#d01515;border-color:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-track-fill{background:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-thumb:after{background-color:#19d015;border-color:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-track-fill{background:#1560d0}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-thumb:after{background-color:#1560d0;border-color:#1560d0}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title{font-size:22px;line-height:75px;padding:0 15px;color:rgba(0,0,0,.85);text-transform:capitalize}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title.dark{color:hsla(0,0%,100%,.85)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title:not(:first-child){margin-top:16px}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label{font-size:12px;line-height:33px;padding:0 5px;color:rgba(0,0,0,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label.dark{color:hsla(0,0%,100%,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-colors{position:absolute;transition:left .25s cubic-bezier(.25,.8,.25,1),right .25s cubic-bezier(.25,.8,.25,1),top .25s cubic-bezier(.25,.8,.25,1),bottom .25s cubic-bezier(.25,.8,.25,1)}.md-color-picker-container .md-color-picker-history>div>div{height:20px;margin:4px;background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}.md-color-picker-container .md-color-picker-history>div>div>div{width:100%;height:100%}.md-color-picker-container .md-color-picker-history button{margin-top:auto;margin-left:auto}.md-color-picker-checkered-bg{background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px} \ No newline at end of file diff --git a/dist/mdColorPicker.min.js b/dist/mdColorPicker.min.js deleted file mode 100644 index 28e7e1b..0000000 --- a/dist/mdColorPicker.min.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * md-color-picker - Angular-Material inspired color picker. - * @version v0.2.6 - * @link https://github.com/brianpkelley/md-color-picker - * @license MIT - */ -!function(t,e,o){!function(t,e,r){"use strict";function l(){return function(t){var o=new a(t,"spectrum"!=t);return o=e.merge(o,n[t]),{template:'
',link:o.get,controller:function(){}}}}function a(t,o){this.type=t,this.restrictX=o,this.offset={x:null,y:null},this.height=255,this.$scope=null,this.$element=null,this.get=e.bind(this,function(t,o,r){this.$scope=t,this.$element=o,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 r=this.getImageData(t,e);this.setMarkerCenter(e);var l=new o({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 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 o=this.getImageData(t,e);return this.setMarkerCenter(e),o[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 o=this.getImageData(t,e);return this.setMarkerCenter(t,e),{r:o[0],g:o[1],b:o[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 o=this.getMarkerCenter(),r=this.getColorByPoint(o.x,o.y);this.setColor(r)}))}}};a.prototype.$window=e.element(t),a.prototype.getColorByMouse=function(t){var e=t.touches&&t.touches[0],o=e&&e.pageX||t.pageX,r=e&&e.pageY||t.pageY,l=Math.round(o-this.offset.x),a=Math.round(r-this.offset.y);return this.getColorByPoint(l,a)},a.prototype.setMarkerCenter=function(t,o){var l,a,n,i,d=-1*this.marker.offsetWidth/2,c=-1*this.marker.offsetHeight/2;o===r?(n=t+c,i=Math.round(Math.max(Math.min(this.height-1+c,n),c)),a=0):(l=t+d,n=o+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))),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 o=this.context.getImageData(t,e,1,1).data;return o},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 o=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 o=this.getColorByMouse(t);this.$scope.color.setAlpha(o),this.$scope.alpha=o,this.$scope.$apply();break;case"spectrum":var r=this.getColorByMouse(t);this.setColor(r)}});this.$window.on("touchmove mousemove",o),this.$window.one("touchend mouseup",e.bind(this,function(t){this.$window.off("touchmove mousemove",o),this.$element.css({cursor:"crosshair"})})),o(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 o=this.$scope.color.toHsv();this.setMarkerCenter(this.canvas.height-this.canvas.height*(o.h/360));break;case"alpha":this.currentColor=e.color.toRgb(),this.draw();var r=e.color.getAlpha(),l=this.canvas.height-this.canvas.height*r;this.setMarkerCenter(l);break;case"spectrum":var o=e.color.toHsv();this.currentHue=o.h,this.draw();var a=this.canvas.width*o.s,n=this.canvas.height-this.canvas.height*o.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 o in e)e.hasOwnProperty(o)&&t.put([o,"svg"].join("."),['',e[o],""].join(""))}]).factory("mdColorGradientCanvas",l).factory("mdColorPickerHistory",["$injector",function(t){var e=[],r=[],l=!1;try{l=t.get("$cookies")}catch(a){}if(l)for(var n=l.getObject("mdColorPickerHistory")||[],i=0;id&&(e.pop(),r.pop()),l&&l.putObject("mdColorPickerHistory",r)},get:function(){return e},reset:function(){e=[],r=[],l&&l.putObject("mdColorPickerHistory",r)}}}]).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:"=?",skipHide:"=?",preserveScope:"=?",mdColorClearButton:"=?",mdColorPreview:"=?",mdColorAlphaChannel:"=?",mdColorSpectrum:"=?",mdColorSliders:"=?",mdColorGenericPalette:"=?",mdColorMaterialPalette:"=?",mdColorHistory:"=?",mdColorHex:"=?",mdColorRgb:"=?",mdColorHsl:"=?",mdColorDefaultTab:"=?"},controller:["$scope","$element","$attrs","$mdDialog","$mdColorPicker",function(t,e,o,l,a){var n=!1;if(t.options!==r)for(var i in t.options)if(t.options.hasOwnProperty(i)){var d;d=i,t.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(d="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),!d||t[d]!==r&&""!==t[d]||(t[d]=t.options[i])}var c=e.controller("ngModel"),s=function(e){t.value=e||c.$viewValue||""};t.mdColorClearButton=t.mdColorClearButton===r||t.mdColorClearButton,t.mdColorPreview=t.mdColorPreview===r||t.mdColorPreview,t.mdColorAlphaChannel=t.mdColorAlphaChannel===r||t.mdColorAlphaChannel,t.mdColorSpectrum=t.mdColorSpectrum===r||t.mdColorSpectrum,t.mdColorSliders=t.mdColorSliders===r||t.mdColorSliders,t.mdColorGenericPalette=t.mdColorGenericPalette===r||t.mdColorGenericPalette,t.mdColorMaterialPalette=t.mdColorMaterialPalette===r||t.mdColorMaterialPalette,t.mdColorHistory=t.mdColorHistory===r||t.mdColorHistory,t.mdColorHex=t.mdColorHex===r||t.mdColorHex,t.mdColorRgb=t.mdColorRgb===r||t.mdColorRgb,t.mdColorHsl=t.mdColorHsl===r||t.mdColorHsl,s(),t.$watch(function(){return c.$modelValue},function(t){s(t)}),t.$watch("value",function(t,e){""!==t&&"undefined"!=typeof t&&t&&t!==e&&c.$setViewValue(t)}),t.clearValue=function(){c.$setViewValue("")},t.showColorPicker=function(e){n||a.show({value:t.value,defaultValue:t["default"],random:t.random,clickOutsideToClose:t.clickOutsideToClose,hasBackdrop:t.hasBackdrop,skipHide:t.skipHide,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!==r?e.type:0}}}]).directive("mdColorPickerContainer",["$compile","$timeout","$mdColorPalette","mdColorPickerHistory",function(t,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(t,n,i){function d(e){var o=0;if(e&&"string"==typeof e){for(var r="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 o(t.value||t["default"]),t.alpha=t.color.getAlpha(),t.history=a,t.materialFamily=[],t.whichPane=d(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)?o({r:t[0],g:t[1],b:t[2]}).isDark():o(t).isDark()},t.previewFocus=function(){t.inputFocus=!0,r(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){r(function(){t.color=o(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=o(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"),r(function(){s.addClass("switch")})}),t.$watchGroup(["color.toRgbString()","type"],function(e){t.inputFocus||t.setValue()}),r(function(){t.$broadcast("mdColorPicker:colorSet",{color:t.color}),s.focus(),t.previewFocus()})}],link:function(t,o,l){function a(){var r=e.element(o[0].querySelector(".md-color-picker-palette")),l=e.element(o[0].querySelector(".md-color-picker-material-palette")),a=e.element('
'),n=e.element('
'),i=e.element('
'),d=e.element('
');e.forEach(t.palette,function(o,l){var i=a.clone();e.forEach(o,function(e){var o=n.clone();o.css({height:"25.5px",backgroundColor:e}),o.bind("click",t.setPaletteColor),i.append(o)}),r.append(i)}),e.forEach(t.materialPalette,function(o,r){var a=i.clone();a.html(""+r.replace("-"," ")+""),a.css({height:"75px",backgroundColor:"rgb("+o[500].value[0]+","+o[500].value[1]+","+o[500].value[2]+")"}),t.isDark(o[500].value)&&a.addClass("dark"),l.append(a),e.forEach(o,function(e,o){var r=d.clone();r.css({height:"33px",backgroundColor:"rgb("+e.value[0]+","+e.value[1]+","+e.value[2]+")"}),t.isDark(e.value)&&r.addClass("dark"),r.html(""+o+""),r.bind("click",t.setPaletteColor),l.append(r)})})}o[0].getElementsByTagName("md-tab");r(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===r&&(t={}),t.hasBackdrop=t.hasBackdrop===r||t.hasBackdrop,t.clickOutsideToClose=t.clickOutsideToClose===r||t.clickOutsideToClose,t.defaultValue=t.defaultValue===r?"#FFFFFF":t.defaultValue,t.focusOnOpen=t.focusOnOpen!==r&&t.focusOnOpen,t.preserveScope=t.preserveScope===r||t.preserveScope,t.skipHide=t.skipHide===r||t.skipHide,t.mdColorAlphaChannel=t.mdColorAlphaChannel!==r&&t.mdColorAlphaChannel,t.mdColorSpectrum=t.mdColorSpectrum===r||t.mdColorSpectrum,t.mdColorSliders=t.mdColorSliders===r||t.mdColorSliders,t.mdColorGenericPalette=t.mdColorGenericPalette===r||t.mdColorGenericPalette,t.mdColorMaterialPalette=t.mdColorMaterialPalette===r||t.mdColorMaterialPalette,t.mdColorHistory=t.mdColorHistory===r||t.mdColorHistory,t.mdColorRgb=t.mdColorRgb===r||t.mdColorRgb,t.mdColorHsl=t.mdColorHsl===r||t.mdColorHsl,t.mdColorHex=t.mdColorHex===r||!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,o){t.close=function(){e.cancel()},t.ok=function(){e.hide(t.value)},t.hide=t.ok,t.value=o.value,t["default"]=o.defaultValue,t.random=o.random,t.mdColorAlphaChannel=o.mdColorAlphaChannel,t.mdColorSpectrum=o.mdColorSpectrum,t.mdColorSliders=o.mdColorSliders,t.mdColorGenericPalette=o.mdColorGenericPalette,t.mdColorMaterialPalette=o.mdColorMaterialPalette,t.mdColorHistory=o.mdColorHistory,t.mdColorHex=o.mdColorHex,t.mdColorRgb=o.mdColorRgb,t.mdColorHsl=o.mdColorHsl,t.mdColorDefaultTab=o.mdColorDefaultTab}],locals:{options:t},preserveScope:t.preserveScope,skipHide:t.skipHide,targetEvent:t.$event,focusOnOpen:t.focusOnOpen,autoWrap:!1,onShowing:function(){},onComplete:function(){}}),a.then(function(t){l.add(new o(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",'
\n\t
\n\t\t
\n\t
\n\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\n
\n'),t.put("mdColorPickerContainer.tpl.html",'
\n\t
\n\n\t
\n\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t
\n\n\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tR\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tG\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tB\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tA\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\n\t
\n\n
\n'),t.put("mdColorPickerDialog.tpl.html",'\n\t
\n\t\n\t\tCancel\n\t\tSelect\n\t\n\n')}])}(angular,window,tinycolor); \ No newline at end of file From 5c8bd26fcdf30b80b9428fcba226e0882932f1be Mon Sep 17 00:00:00 2001 From: mostafabarmshory Date: Mon, 24 Sep 2018 22:18:12 +0330 Subject: [PATCH 20/29] ?? --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index ab29758..b6638a1 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "md-color-picker", "moduleName": "mdColorPicker", - "version": "0.2.6", + "version": "0.2.7", "authors": [ "Brian Kelley ", "Mostafa Barmshory " From 0d9fe47b1f585409966930cebd8ead7b9fa45f6c Mon Sep 17 00:00:00 2001 From: mostafabarmshory Date: Mon, 24 Sep 2018 22:29:42 +0330 Subject: [PATCH 21/29] Indent HTML in directive template --- src/views/mdColorPicker.tpl.html | 34 +++++++++++++++++++++++++------- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/src/views/mdColorPicker.tpl.html b/src/views/mdColorPicker.tpl.html index e313f22..fe30ef6 100644 --- a/src/views/mdColorPicker.tpl.html +++ b/src/views/mdColorPicker.tpl.html @@ -1,12 +1,32 @@ -
-
-
+
+
+
+
- - - + + + - +
From 4dd21a9c0f04d33e0da3897749c9680528f96eaa Mon Sep 17 00:00:00 2001 From: mostafabarmshory Date: Sat, 29 Sep 2018 14:48:44 +0330 Subject: [PATCH 22/29] Bug fixed: clear button on RTL pages --- src/scripts/mdColorPicker.js | 753 ++++++++++++++++--------------- src/styles/mdColorPicker.css | 10 +- src/views/mdColorPicker.tpl.html | 2 +- 3 files changed, 389 insertions(+), 376 deletions(-) diff --git a/src/scripts/mdColorPicker.js b/src/scripts/mdColorPicker.js index 4293efc..4144782 100644 --- a/src/scripts/mdColorPicker.js +++ b/src/scripts/mdColorPicker.js @@ -1,339 +1,340 @@ (function( window, angular, undefined ) { -'use strict'; + 'use strict'; -var dateClick; +// var dateClick; -var canvasTypes = { - hue: { - getColorByPoint: function( x, y ) { - var imageData = this.getImageData( x, y ); - this.setMarkerCenter( y ); + var canvasTypes = { + hue: { + getColorByPoint: function( x, y ) { + var imageData = this.getImageData( x, y ); + this.setMarkerCenter( y ); - var hsl = new tinycolor( {r: imageData[0], g: imageData[1], b: imageData[2] } ); - return hsl.toHsl().h; - }, - draw: function() { - this.$element.css({'height': this.height + 'px'}); + var hsl = new tinycolor( {r: imageData[0], g: imageData[1], b: imageData[2] } ); + return hsl.toHsl().h; + }, + draw: function() { + this.$element.css({'height': this.height + 'px'}); - this.canvas.height = this.height; - this.canvas.width = this.height; + this.canvas.height = this.height; + this.canvas.width = this.height; - // Create gradient - var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); + // Create gradient + var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); - // Add colors - hueGrd.addColorStop(0.01, 'rgba(255, 0, 0, 1.000)'); - hueGrd.addColorStop(0.167, 'rgba(255, 0, 255, 1.000)'); - hueGrd.addColorStop(0.333, 'rgba(0, 0, 255, 1.000)'); - hueGrd.addColorStop(0.500, 'rgba(0, 255, 255, 1.000)'); - hueGrd.addColorStop(0.666, 'rgba(0, 255, 0, 1.000)'); - hueGrd.addColorStop(0.828, 'rgba(255, 255, 0, 1.000)'); - hueGrd.addColorStop(0.999, 'rgba(255, 0, 0, 1.000)'); + // Add colors + hueGrd.addColorStop(0.01, 'rgba(255, 0, 0, 1.000)'); + hueGrd.addColorStop(0.167, 'rgba(255, 0, 255, 1.000)'); + hueGrd.addColorStop(0.333, 'rgba(0, 0, 255, 1.000)'); + hueGrd.addColorStop(0.500, 'rgba(0, 255, 255, 1.000)'); + hueGrd.addColorStop(0.666, 'rgba(0, 255, 0, 1.000)'); + hueGrd.addColorStop(0.828, 'rgba(255, 255, 0, 1.000)'); + hueGrd.addColorStop(0.999, 'rgba(255, 0, 0, 1.000)'); - // Fill with gradient - this.context.fillStyle = hueGrd; - this.context.fillRect( 0, 0, this.canvas.width, this.height ); - } - }, - alpha: { - getColorByPoint: function( x, y ) { - var imageData = this.getImageData( x, y ); - this.setMarkerCenter( y ); - - return imageData[3] / 255; - }, - draw: function () { - this.$element.css({'height': this.height + 'px'}); - - this.canvas.height = this.height; - this.canvas.width = this.height; - - // Create gradient - var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); - - // Add colors - hueGrd.addColorStop(0.01, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 1.000)'); - hueGrd.addColorStop(0.99, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 0.000)'); - - // Fill with gradient - this.context.fillStyle = hueGrd; - this.context.fillRect( -1, -1, this.canvas.width+2, this.height+2 ); - }, - extra: function() { - this.$scope.$on('mdColorPicker:spectrumColorChange', angular.bind( this, function( e, args ) { - this.currentColor = args.color; - this.draw(); - })); - } - }, - spectrum: { - getColorByPoint: function( x, y ) { + // Fill with gradient + this.context.fillStyle = hueGrd; + this.context.fillRect( 0, 0, this.canvas.width, this.height ); + } + }, + alpha: { + getColorByPoint: function( x, y ) { + var imageData = this.getImageData( x, y ); + this.setMarkerCenter( y ); + + return imageData[3] / 255; + }, + draw: function () { + this.$element.css({'height': this.height + 'px'}); + + this.canvas.height = this.height; + this.canvas.width = this.height; + + // Create gradient + var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); + + // Add colors + hueGrd.addColorStop(0.01, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 1.000)'); + hueGrd.addColorStop(0.99, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 0.000)'); + + // Fill with gradient + this.context.fillStyle = hueGrd; + this.context.fillRect( -1, -1, this.canvas.width+2, this.height+2 ); + }, + extra: function() { + this.$scope.$on('mdColorPicker:spectrumColorChange', angular.bind( this, function( e, args ) { + this.currentColor = args.color; + this.draw(); + })); + } + }, + spectrum: { + getColorByPoint: function( x, y ) { + + var imageData = this.getImageData( x, y ); + this.setMarkerCenter(x,y); + + return { + r: imageData[0], + g: imageData[1], + b: imageData[2] + }; + }, + draw: function() { + this.canvas.height = this.height; + this.canvas.width = this.height; + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + + // Odd bug prevented selecting min, max ranges from all gradients. + // Start at 0.01, end at 0.99 and stretch it to 1px larger in each direction + + // White gradient + var whiteGrd = this.context.createLinearGradient(0, 0, this.canvas.width, 0); + + + whiteGrd.addColorStop(0.01, 'rgba(255, 255, 255, 1.000)'); + whiteGrd.addColorStop(0.99, 'rgba(255, 255, 255, 0.000)'); + + // Black Gradient + var blackGrd = this.context.createLinearGradient(0, 0, 0, this.canvas.height); + + + blackGrd.addColorStop(0.01, 'rgba(0, 0, 0, 0.000)'); + blackGrd.addColorStop(0.99, 'rgba(0, 0, 0, 1.000)'); + + // Fill with solid + this.context.fillStyle = 'hsl( ' + this.currentHue + ', 100%, 50%)'; + this.context.fillRect( 0, 0, this.canvas.width, this.canvas.height ); + + // Fill with white + // Odd bug prevented selecting min, max ranges from all gradients + this.context.fillStyle = whiteGrd; + this.context.fillRect( -1, -1, this.canvas.width+2, this.canvas.height+2 ); + + // Fill with black + // Odd bug prevented selecting min, max ranges from all gradients + this.context.fillStyle = blackGrd; + this.context.fillRect( -1, -1, this.canvas.width+2, this.canvas.height+2 ); + }, + extra: function() { + this.$scope.$on('mdColorPicker:spectrumHueChange', angular.bind( this, function( e, args ) { + this.currentHue = args.hue; + this.draw(); + var markerPos = this.getMarkerCenter(); + var color = this.getColorByPoint( markerPos.x, markerPos.y ); + this.setColor( color ); + + })); + } + } - var imageData = this.getImageData( x, y ); - this.setMarkerCenter(x,y); + }; - return { - r: imageData[0], - g: imageData[1], - b: imageData[2] - }; - }, - draw: function() { - this.canvas.height = this.height; - this.canvas.width = this.height; - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + function GradientCanvas( type, restrictX ) { - // Odd bug prevented selecting min, max ranges from all gradients. - // Start at 0.01, end at 0.99 and stretch it to 1px larger in each direction + this.type = type; + this.restrictX = restrictX; + this.offset = { + x: null, + y: null + }; + this.height = 255; - // White gradient - var whiteGrd = this.context.createLinearGradient(0, 0, this.canvas.width, 0); + this.$scope = null; + this.$element = null; + this.get = angular.bind(this, function( $temp_scope, $temp_element/*, $temp_attrs*/ ) { + //////////////////////////// + // Variables + //////////////////////////// - whiteGrd.addColorStop(0.01, 'rgba(255, 255, 255, 1.000)'); - whiteGrd.addColorStop(0.99, 'rgba(255, 255, 255, 0.000)'); + this.$scope = $temp_scope; + this.$element = $temp_element; - // Black Gradient - var blackGrd = this.context.createLinearGradient(0, 0, 0, this.canvas.height); + 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; + //////////////////////////// + // Watchers, Observes, Events + //////////////////////////// - blackGrd.addColorStop(0.01, 'rgba(0, 0, 0, 0.000)'); - blackGrd.addColorStop(0.99, 'rgba(0, 0, 0, 1.000)'); + //$scope.$watch( function() { return color.getRgb(); }, hslObserver, true ); - // Fill with solid - this.context.fillStyle = 'hsl( ' + this.currentHue + ', 100%, 50%)'; - this.context.fillRect( 0, 0, this.canvas.width, this.canvas.height ); - // Fill with white - // Odd bug prevented selecting min, max ranges from all gradients - this.context.fillStyle = whiteGrd; - this.context.fillRect( -1, -1, this.canvas.width+2, this.canvas.height+2 ); + this.$element.on('touchstart mousedown', angular.bind(this, this.onMouseDown)); + this.$scope.$on('mdColorPicker:colorSet', angular.bind( this, this.onColorSet ) ); + if ( this.extra ) { + this.extra(); + } + //////////////////////////// + // init + //////////////////////////// - // Fill with black - // Odd bug prevented selecting min, max ranges from all gradients - this.context.fillStyle = blackGrd; - this.context.fillRect( -1, -1, this.canvas.width+2, this.canvas.height+2 ); - }, - extra: function() { - this.$scope.$on('mdColorPicker:spectrumHueChange', angular.bind( this, function( e, args ) { - this.currentHue = args.hue; - this.draw(); - var markerPos = this.getMarkerCenter(); - var color = this.getColorByPoint( markerPos.x, markerPos.y ); - this.setColor( color ); + this.draw(); + }); - })); - } - } + //return angular.bind( this, this.get ); -}; + } -function GradientCanvasFactory( ) { + function GradientCanvasFactory( ) { - return function gradientCanvas( type ) { - var canvas = new GradientCanvas( type, type != 'spectrum' ); - canvas = angular.merge( canvas, canvasTypes[type] ); + return function gradientCanvas( type ) { + var canvas = new GradientCanvas( type, type !== 'spectrum' ); + canvas = angular.merge( canvas, canvasTypes[type] ); - return { - template: '
', - link: canvas.get, - controller: function() { - // console.log( "mdColorPickerAlpha Controller", Date.now() - dateClick ); - } + return { + template: '
', + link: canvas.get, + controller: function() { + // console.log( "mdColorPickerAlpha Controller", Date.now() - dateClick ); + } + }; }; } -} - -function GradientCanvas( type, restrictX ) { + GradientCanvas.prototype.$window = angular.element( window ); - this.type = type; - this.restrictX = restrictX; - this.offset = { - x: null, - y: null - }; - this.height = 255; + GradientCanvas.prototype.getColorByMouse = function( e ) { - this.$scope = null; - this.$element = null; + var te = e.touches && e.touches[0]; - this.get = angular.bind(this, function( $temp_scope, $temp_element, $temp_attrs ) { - //////////////////////////// - // Variables - //////////////////////////// + var pageX = te && te.pageX || e.pageX; + var pageY = te && te.pageY || e.pageY; - this.$scope = $temp_scope; - this.$element = $temp_element; + var x = Math.round( pageX - this.offset.x ); + var y = Math.round( pageY - this.offset.y ); + return this.getColorByPoint(x, y); + }; - 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; - //////////////////////////// - // Watchers, Observes, Events - //////////////////////////// + GradientCanvas.prototype.setMarkerCenter = function( x, y ) { + var xOffset = -1 * this.marker.offsetWidth / 2; + var yOffset = -1 * this.marker.offsetHeight / 2; + var xAdjusted, xFinal, yAdjusted, yFinal; - //$scope.$watch( function() { return color.getRgb(); }, hslObserver, true ); + if ( y === undefined ) { + yAdjusted = x + yOffset; + yFinal = Math.round( Math.max( Math.min( this.height-1 + yOffset, yAdjusted), yOffset ) ); + xFinal = 0; + } else { + xAdjusted = x + xOffset; + yAdjusted = y + yOffset; - this.$element.on('touchstart mousedown', angular.bind(this, this.onMouseDown)); - this.$scope.$on('mdColorPicker:colorSet', angular.bind( this, this.onColorSet ) ); - if ( this.extra ) { - this.extra(); + xFinal = Math.floor( Math.max( Math.min( this.height + xOffset, xAdjusted ), xOffset ) ); + yFinal = Math.floor( Math.max( Math.min( this.height + yOffset, yAdjusted ), yOffset ) ); + // Debug output + // console.log( "Raw: ", x+','+y, "Adjusted: ", xAdjusted + ',' + yAdjusted, "Final: ", xFinal + ',' + yFinal ); } - //////////////////////////// - // init - //////////////////////////// - - this.draw(); - }); - - //return angular.bind( this, this.get ); - -} - - - -GradientCanvas.prototype.$window = angular.element( window ); - -GradientCanvas.prototype.getColorByMouse = function( e ) { - - var te = e.touches && e.touches[0]; - var pageX = te && te.pageX || e.pageX; - var pageY = te && te.pageY || e.pageY; - var x = Math.round( pageX - this.offset.x ); - var y = Math.round( pageY - this.offset.y ); - return this.getColorByPoint(x, y); -}; - -GradientCanvas.prototype.setMarkerCenter = function( x, y ) { - var xOffset = -1 * this.marker.offsetWidth / 2; - var yOffset = -1 * this.marker.offsetHeight / 2; - var xAdjusted, xFinal, yAdjusted, yFinal; - - if ( y === undefined ) { - yAdjusted = x + yOffset; - yFinal = Math.round( Math.max( Math.min( this.height-1 + yOffset, yAdjusted), yOffset ) ); - - xFinal = 0; - } else { - xAdjusted = x + xOffset; - yAdjusted = y + yOffset; - - xFinal = Math.floor( Math.max( Math.min( this.height + xOffset, xAdjusted ), xOffset ) ); - yFinal = Math.floor( Math.max( Math.min( this.height + yOffset, yAdjusted ), yOffset ) ); - // Debug output - // console.log( "Raw: ", x+','+y, "Adjusted: ", xAdjusted + ',' + yAdjusted, "Final: ", xFinal + ',' + yFinal ); - } - - - - angular.element(this.marker).css({'left': xFinal + 'px' }); - angular.element(this.marker).css({'top': yFinal + 'px'}); -}; - -GradientCanvas.prototype.getMarkerCenter = function() { - var returnObj = { - x: this.marker.offsetLeft + ( Math.floor( this.marker.offsetWidth / 2 ) ), - y: this.marker.offsetTop + ( Math.floor( this.marker.offsetHeight / 2 ) ) + angular.element(this.marker).css({'left': xFinal + 'px' }); + angular.element(this.marker).css({'top': yFinal + 'px'}); }; - return returnObj; -}; - -GradientCanvas.prototype.getImageData = function( x, y ) { - x = Math.max( 0, Math.min( x, this.canvas.width-1 ) ); - y = Math.max( 0, Math.min( y, this.canvas.height-1 ) ); - - var imageData = this.context.getImageData( x, y, 1, 1 ).data; - return imageData; -}; -GradientCanvas.prototype.onMouseDown = function( e ) { - // Prevent highlighting - e.preventDefault(); - e.stopImmediatePropagation(); - - this.$scope.previewUnfocus(); + GradientCanvas.prototype.getMarkerCenter = function() { + var returnObj = { + x: this.marker.offsetLeft + ( Math.floor( this.marker.offsetWidth / 2 ) ), + y: this.marker.offsetTop + ( Math.floor( this.marker.offsetHeight / 2 ) ) + }; + return returnObj; + }; - this.$element.css({ 'cursor': 'none' }); + GradientCanvas.prototype.getImageData = function( x, y ) { + x = Math.max( 0, Math.min( x, this.canvas.width-1 ) ); + y = Math.max( 0, Math.min( y, this.canvas.height-1 ) ); - this.offset.x = this.canvas.getBoundingClientRect().left; - this.offset.y = this.canvas.getBoundingClientRect().top; + var imageData = this.context.getImageData( x, y, 1, 1 ).data; + return imageData; + }; - var fn = angular.bind( this, function( e ) { - switch( this.type ) { - case 'hue': - var hue = this.getColorByMouse( e ); - this.$scope.$broadcast( 'mdColorPicker:spectrumHueChange', {hue: hue}); - break; - case 'alpha': - var alpha = this.getColorByMouse( e ); - this.$scope.color.setAlpha( alpha ); - this.$scope.alpha = alpha; - this.$scope.$apply(); - break; - case 'spectrum': - var color = this.getColorByMouse( e ); - this.setColor( color ); - break; - } - }); + GradientCanvas.prototype.onMouseDown = function( e ) { + // Prevent highlighting + 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 fn = angular.bind( this, function( e ) { + switch( this.type ) { + case 'hue': + var hue = this.getColorByMouse( e ); + this.$scope.$broadcast( 'mdColorPicker:spectrumHueChange', {hue: hue}); + break; + case 'alpha': + var alpha = this.getColorByMouse( e ); + this.$scope.color.setAlpha( alpha ); + this.$scope.alpha = alpha; + this.$scope.$apply(); + break; + case 'spectrum': + var color = this.getColorByMouse( e ); + this.setColor( color ); + break; + } + }); - this.$window.on('touchmove mousemove', fn); - this.$window.one('touchend mouseup', angular.bind(this, function (e) { - this.$window.off('touchmove mousemove', fn); - this.$element.css({ 'cursor': 'crosshair' }); - })); + this.$window.on('touchmove mousemove', fn); + this.$window.one('touchend mouseup', angular.bind(this, function (/*e*/) { + this.$window.off('touchmove mousemove', fn); + this.$element.css({ 'cursor': 'crosshair' }); + })); - // Set the color - fn( e ); -}; + // Set the color + fn( e ); + }; -GradientCanvas.prototype.setColor = function( color ) { + GradientCanvas.prototype.setColor = function( color ) { this.$scope.color._r = color.r; this.$scope.color._g = color.g; this.$scope.color._b = color.b; this.$scope.$apply(); this.$scope.$broadcast('mdColorPicker:spectrumColorChange', { color: color }); -}; - -GradientCanvas.prototype.onColorSet = function( e, args ) { - switch( this.type ) { - case 'hue': - var hsv = this.$scope.color.toHsv(); - this.setMarkerCenter( this.canvas.height - ( this.canvas.height * ( hsv.h / 360 ) ) ); - break; - case 'alpha': - this.currentColor = args.color.toRgb(); - this.draw(); + }; - var alpha = args.color.getAlpha(); - var pos = this.canvas.height - ( this.canvas.height * alpha ); + GradientCanvas.prototype.onColorSet = function( e, args ) { + var hsv; + switch( this.type ) { + case 'hue':{ + hsv = this.$scope.color.toHsv(); + this.setMarkerCenter( this.canvas.height - ( this.canvas.height * ( hsv.h / 360 ) ) ); + break; + } + case 'alpha': { + this.currentColor = args.color.toRgb(); + this.draw(); - this.setMarkerCenter( pos ); - break; - case 'spectrum': - var hsv = args.color.toHsv(); - this.currentHue = hsv.h; - this.draw(); + var alpha = args.color.getAlpha(); + var pos = this.canvas.height - ( this.canvas.height * alpha ); - var posX = this.canvas.width * hsv.s; - var posY = this.canvas.height - ( this.canvas.height * hsv.v ); + this.setMarkerCenter( pos ); + break; + } + case 'spectrum': { + hsv = args.color.toHsv(); + this.currentHue = hsv.h; + this.draw(); - this.setMarkerCenter( posX, posY ); - break; - } + var posX = this.canvas.width * hsv.s; + var posY = this.canvas.height - ( this.canvas.height * hsv.v ); + + this.setMarkerCenter( posX, posY ); + break; + } + } -}; + }; @@ -342,23 +343,23 @@ GradientCanvas.prototype.onColorSet = function( e, args ) { -angular.module('mdColorPicker', []) + angular.module('mdColorPicker', []) .run(['$templateCache', function ($templateCache) { //icon resource should not be dependent //credit to materialdesignicons.com var shapes = { - 'clear': '', - 'gradient': '', - 'tune': '', - 'view_module': '', - 'view_headline': '', - 'history': '', - 'clear_all': '' + 'clear': '', + 'gradient': '', + 'tune': '', + 'view_module': '', + 'view_headline': '', + 'history': '', + 'clear_all': '' }; for (var i in shapes) { if (shapes.hasOwnProperty(i)) { $templateCache.put([i, 'svg'].join('.'), - ['', shapes[i], ''].join('')); + ['', shapes[i], ''].join('')); } } }]) @@ -372,7 +373,7 @@ angular.module('mdColorPicker', []) try { $cookies = $injector.get('$cookies'); } catch(e) { - + // Handler error } if ( $cookies ) { @@ -424,10 +425,10 @@ angular.module('mdColorPicker', []) } }; }]) - .directive('mdColorPicker', [ '$timeout', 'mdColorPickerHistory', function( $timeout, colorHistory ) { + .directive('mdColorPicker', [ '$timeout', 'mdColorPickerHistory', function(/* $timeout, colorHistory*/ ) { return { - templateUrl: "views/mdColorPicker.tpl.html", + templateUrl: 'views/mdColorPicker.tpl.html', // Added required controller ngModel require: '^ngModel', @@ -472,7 +473,7 @@ angular.module('mdColorPicker', []) if ( $scope.options.hasOwnProperty( opt ) ) { var scopeKey; //if ( $scope.hasOwnProperty( opt ) ) { // Removing this because optional scope properties are not added to the scope. - scopeKey = opt; + scopeKey = opt; //} else if ( $scope.hasOwnProperty( 'mdColor' + opt.slice(0,1).toUpperCase() + opt.slice(1) ) ) { scopeKey = 'mdColor' + opt.slice(0,1).toUpperCase() + opt.slice(1); @@ -532,8 +533,8 @@ angular.module('mdColorPicker', []) if ( didJustClose ) { return; } - // dateClick = Date.now(); - // console.log( "CLICK OPEN", dateClick, $scope ); + // dateClick = Date.now(); + // console.log( "CLICK OPEN", dateClick, $scope ); $mdColorPicker.show({ value: $scope.value, @@ -555,7 +556,7 @@ angular.module('mdColorPicker', []) mdColorHsl: $scope.mdColorHsl, mdColorDefaultTab: $scope.mdColorDefaultTab, - $event: $event, + $event: $event }).then(function( color ) { $scope.value = color; @@ -589,8 +590,8 @@ angular.module('mdColorPicker', []) mdColorHsl: '=', mdColorDefaultTab: '=' }, - controller: function( $scope, $element, $attrs ) { - // console.log( "mdColorPickerContainer Controller", Date.now() - dateClick, $scope ); + controller: function( $scope, $element/*, $attrs*/ ) { + // console.log( "mdColorPickerContainer Controller", Date.now() - dateClick, $scope ); function getTabIndex( tab ) { var index = 0; @@ -599,13 +600,13 @@ angular.module('mdColorPicker', []) var tabs = $element[0].querySelector('.md-color-picker-colors').getElementsByTagName( 'md-tab' ); console.log( tabs.length ); - */ + */ var tabName = 'mdColor' + tab.slice(0,1).toUpperCase() + tab.slice(1); var tabs = ['mdColorSpectrum', 'mdColorSliders', 'mdColorGenericPalette', 'mdColorMaterialPalette', 'mdColorHistory']; for ( var x = 0; x < tabs.length; x++ ) { //console.log( tabs[x]('ng-if') ); //if ( tabs[x].getAttribute('ng-if') == tabName ) { - if ( tabs[x] == tabName ) { + if ( tabs[x] === tabName ) { if ( $scope[tabName] ) { index = x; break; @@ -622,15 +623,15 @@ angular.module('mdColorPicker', []) /////////////////////////////////// // Variables /////////////////////////////////// - var container = angular.element( $element[0].querySelector('.md-color-picker-container') ); - var resultSpan = angular.element( container[0].querySelector('.md-color-picker-result') ); +// var container = angular.element( $element[0].querySelector('.md-color-picker-container') ); +// var resultSpan = angular.element( container[0].querySelector('.md-color-picker-result') ); var previewInput = angular.element( $element[0].querySelector('.md-color-picker-preview-input') ); var outputFn = [ 'toHexString', 'toRgbString', 'toHslString' - ]; + ]; @@ -652,21 +653,21 @@ angular.module('mdColorPicker', []) // Colors for the palette screen /////////////////////////////////// - var steps = 9; - var freq = 2*Math.PI/steps; +// var steps = 9; +// var freq = 2 * Math.PI/steps; $scope.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)"] - ]; + ['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)'] + ]; $scope.materialPalette = $mdColorPalette; @@ -691,16 +692,18 @@ angular.module('mdColorPicker', []) $scope.inputFocus = false; previewInput[0].blur(); }; + $scope.previewBlur = function() { $scope.inputFocus = false; $scope.setValue(); }; - $scope.previewKeyDown = function( $event ) { - if ( $event.keyCode == 13 ) { - $scope.ok && $scope.ok(); + $scope.previewKeyDown = function( $event ) { + if ( $event.keyCode === 13 && angular.isFunction($scope.ok) ) { + $scope.ok(); } }; + $scope.setPaletteColor = function( event ) { $timeout( function() { $scope.color = tinycolor( event.target.style.backgroundColor ); @@ -727,7 +730,7 @@ angular.module('mdColorPicker', []) $scope.color.setAlpha( newValue ); }, true); - $scope.$watch( 'whichPane', function( newValue ) { + $scope.$watch( 'whichPane', function( /*newValue*/ ) { // 0 - spectrum selector // 1 - sliders // 2 - palette @@ -742,7 +745,7 @@ angular.module('mdColorPicker', []) }); }); - $scope.$watchGroup(['color.toRgbString()', 'type'], function( newValue ) { + $scope.$watchGroup(['color.toRgbString()', 'type'], function( /*newValue*/ ) { if ( !$scope.inputFocus ) { $scope.setValue(); } @@ -753,39 +756,35 @@ angular.module('mdColorPicker', []) // INIT // Let all the other directives initialize /////////////////////////////////// - // console.log( "mdColorPickerContainer Controller PRE Timeout", Date.now() - dateClick ); + // console.log( 'mdColorPickerContainer Controller PRE Timeout', Date.now() - dateClick ); $timeout( function() { - // console.log( "mdColorPickerContainer Controller Timeout", Date.now() - dateClick ); + // console.log( 'mdColorPickerContainer Controller Timeout', Date.now() - dateClick ); $scope.$broadcast('mdColorPicker:colorSet', { color: $scope.color }); previewInput.focus(); $scope.previewFocus(); }); }, - link: function( scope, element, attrs ) { + link: function( scope, element/*, attrs*/ ) { - var tabs = element[0].getElementsByTagName( 'md-tab' ); +// var tabs = element[0].getElementsByTagName( 'md-tab' ); /* Replicating these structure without ng-repeats -
-
+
+
-
-
+
+
{{key}}
{{label}}
- */ + */ - $timeout(function() { - createDOM(); - }); - function createDOM() { var paletteContainer = angular.element( element[0].querySelector('.md-color-picker-palette') ); var materialContainer = angular.element( element[0].querySelector('.md-color-picker-material-palette') ); @@ -797,7 +796,7 @@ angular.module('mdColorPicker', []) - angular.forEach(scope.palette, function( value, key ) { + angular.forEach(scope.palette, function( value/*, key*/ ) { var row = paletteRow.clone(); angular.forEach( value, function( color ) { var cell = paletteCell.clone(); @@ -844,6 +843,12 @@ angular.module('mdColorPicker', []) }); } + + + + $timeout(function() { + createDOM(); + }); } }; }]) @@ -852,19 +857,19 @@ angular.module('mdColorPicker', []) .directive( 'mdColorPickerAlpha', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('alpha'); }]) .directive( 'mdColorPickerSpectrum', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('spectrum'); }]) - .factory('$mdColorPicker', ['$q', '$mdDialog', 'mdColorPickerHistory', function ($q, $mdDialog, colorHistory) { + .factory('$mdColorPicker', ['$q', '$mdDialog', 'mdColorPickerHistory', function ($q, $mdDialog, colorHistory) { var dialog; - return { - show: function (options) - { - if ( options === undefined ) { - options = {}; - } + return { + show: function (options) + { + if ( options === undefined ) { + options = {}; + } //console.log( 'DIALOG OPTIONS', options ); // Defaults // Dialog Properties - options.hasBackdrop = options.hasBackdrop === undefined ? true : options.hasBackdrop; + options.hasBackdrop = options.hasBackdrop === undefined ? true : options.hasBackdrop; options.clickOutsideToClose = options.clickOutsideToClose === undefined ? true : options.clickOutsideToClose; options.defaultValue = options.defaultValue === undefined ? '#FFFFFF' : options.defaultValue; options.focusOnOpen = options.focusOnOpen === undefined ? false : options.focusOnOpen; @@ -883,65 +888,65 @@ angular.module('mdColorPicker', []) options.mdColorHex = ((options.mdColorHex === undefined) || (!options.mdColorRgb && !options.mdColorHsl)) ? true : options.mdColorHex; options.mdColorAlphaChannel = (!options.mdColorRgb && !options.mdColorHsl) ? false : options.mdColorAlphaChannel; - dialog = $mdDialog.show({ + dialog = $mdDialog.show({ templateUrl: 'views/mdColorPickerDialog.tpl.html', hasBackdrop: options.hasBackdrop, clickOutsideToClose: options.clickOutsideToClose, controller: ['$scope', 'options', function( $scope, options ) { - //console.log( "DIALOG CONTROLLER OPEN", Date.now() - dateClick ); - $scope.close = function close() - { - $mdDialog.cancel(); - }; - $scope.ok = function ok() - { - $mdDialog.hide( $scope.value ); - }; - $scope.hide = $scope.ok; - - - - $scope.value = options.value; - $scope.default = options.defaultValue; - $scope.random = options.random; - - $scope.mdColorAlphaChannel = options.mdColorAlphaChannel; - $scope.mdColorSpectrum = options.mdColorSpectrum; - $scope.mdColorSliders = options.mdColorSliders; - $scope.mdColorGenericPalette = options.mdColorGenericPalette; - $scope.mdColorMaterialPalette = options.mdColorMaterialPalette; - $scope.mdColorHistory = options.mdColorHistory; - $scope.mdColorHex = options.mdColorHex; - $scope.mdColorRgb = options.mdColorRgb; - $scope.mdColorHsl = options.mdColorHsl; - $scope.mdColorDefaultTab = options.mdColorDefaultTab; + //console.log( "DIALOG CONTROLLER OPEN", Date.now() - dateClick ); + $scope.close = function close() + { + $mdDialog.cancel(); + }; + $scope.ok = function ok() + { + $mdDialog.hide( $scope.value ); + }; + $scope.hide = $scope.ok; + + + + $scope.value = options.value; + $scope.default = options.defaultValue; + $scope.random = options.random; + + $scope.mdColorAlphaChannel = options.mdColorAlphaChannel; + $scope.mdColorSpectrum = options.mdColorSpectrum; + $scope.mdColorSliders = options.mdColorSliders; + $scope.mdColorGenericPalette = options.mdColorGenericPalette; + $scope.mdColorMaterialPalette = options.mdColorMaterialPalette; + $scope.mdColorHistory = options.mdColorHistory; + $scope.mdColorHex = options.mdColorHex; + $scope.mdColorRgb = options.mdColorRgb; + $scope.mdColorHsl = options.mdColorHsl; + $scope.mdColorDefaultTab = options.mdColorDefaultTab; }], locals: { - options: options, + options: options }, preserveScope: options.preserveScope, - skipHide: options.skipHide, + skipHide: options.skipHide, targetEvent: options.$event, focusOnOpen: options.focusOnOpen, autoWrap: false, onShowing: function() { - // console.log( "DIALOG OPEN START", Date.now() - dateClick ); + // console.log( "DIALOG OPEN START", Date.now() - dateClick ); }, onComplete: function() { - // console.log( "DIALOG OPEN COMPLETE", Date.now() - dateClick ); + // console.log( "DIALOG OPEN COMPLETE", Date.now() - dateClick ); } - }); + }); dialog.then(function (value) { - colorHistory.add(new tinycolor(value)); - }, function () { }); + colorHistory.add(new tinycolor(value)); + }, function () { }); - return dialog; - }, + return dialog; + }, hide: function() { return dialog.hide(); }, diff --git a/src/styles/mdColorPicker.css b/src/styles/mdColorPicker.css index a4a9309..c6511a8 100644 --- a/src/styles/mdColorPicker.css +++ b/src/styles/mdColorPicker.css @@ -39,8 +39,16 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear, position: absolute; bottom: 42px; right: -16px; - color: rgba(0, 0, 0, 0.26); + left: auto; } + +[dir=rtl] md-color-picker .md-color-picker-input-container .md-color-picker-clear, +[dir=rtl] [md-color-picker] .md-color-picker-input-container .md-color-picker-clear { + right: auto; + left: -16px +} + + .md-color-picker-container { padding: 8px; background: #fff; diff --git a/src/views/mdColorPicker.tpl.html b/src/views/mdColorPicker.tpl.html index fe30ef6..cea5546 100644 --- a/src/views/mdColorPicker.tpl.html +++ b/src/views/mdColorPicker.tpl.html @@ -14,7 +14,7 @@ flex> Date: Sat, 29 Sep 2018 14:53:06 +0330 Subject: [PATCH 23/29] Bug fixed: clear value on empty input value --- dist/md-color-picker.css | 10 +- dist/md-color-picker.js | 760 ++++++++++++++++++----------------- dist/md-color-picker.min.css | 2 +- dist/md-color-picker.min.js | 2 +- src/scripts/mdColorPicker.js | 5 +- 5 files changed, 399 insertions(+), 380 deletions(-) diff --git a/dist/md-color-picker.css b/dist/md-color-picker.css index a4a9309..c6511a8 100644 --- a/dist/md-color-picker.css +++ b/dist/md-color-picker.css @@ -39,8 +39,16 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear, position: absolute; bottom: 42px; right: -16px; - color: rgba(0, 0, 0, 0.26); + left: auto; } + +[dir=rtl] md-color-picker .md-color-picker-input-container .md-color-picker-clear, +[dir=rtl] [md-color-picker] .md-color-picker-input-container .md-color-picker-clear { + right: auto; + left: -16px +} + + .md-color-picker-container { padding: 8px; background: #fff; diff --git a/dist/md-color-picker.js b/dist/md-color-picker.js index 1ee20a2..f933475 100644 --- a/dist/md-color-picker.js +++ b/dist/md-color-picker.js @@ -1,339 +1,340 @@ (function( window, angular, undefined ) { -'use strict'; + 'use strict'; -var dateClick; +// var dateClick; -var canvasTypes = { - hue: { - getColorByPoint: function( x, y ) { - var imageData = this.getImageData( x, y ); - this.setMarkerCenter( y ); + var canvasTypes = { + hue: { + getColorByPoint: function( x, y ) { + var imageData = this.getImageData( x, y ); + this.setMarkerCenter( y ); - var hsl = new tinycolor( {r: imageData[0], g: imageData[1], b: imageData[2] } ); - return hsl.toHsl().h; - }, - draw: function() { - this.$element.css({'height': this.height + 'px'}); + var hsl = new tinycolor( {r: imageData[0], g: imageData[1], b: imageData[2] } ); + return hsl.toHsl().h; + }, + draw: function() { + this.$element.css({'height': this.height + 'px'}); - this.canvas.height = this.height; - this.canvas.width = this.height; + this.canvas.height = this.height; + this.canvas.width = this.height; - // Create gradient - var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); + // Create gradient + var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); - // Add colors - hueGrd.addColorStop(0.01, 'rgba(255, 0, 0, 1.000)'); - hueGrd.addColorStop(0.167, 'rgba(255, 0, 255, 1.000)'); - hueGrd.addColorStop(0.333, 'rgba(0, 0, 255, 1.000)'); - hueGrd.addColorStop(0.500, 'rgba(0, 255, 255, 1.000)'); - hueGrd.addColorStop(0.666, 'rgba(0, 255, 0, 1.000)'); - hueGrd.addColorStop(0.828, 'rgba(255, 255, 0, 1.000)'); - hueGrd.addColorStop(0.999, 'rgba(255, 0, 0, 1.000)'); + // Add colors + hueGrd.addColorStop(0.01, 'rgba(255, 0, 0, 1.000)'); + hueGrd.addColorStop(0.167, 'rgba(255, 0, 255, 1.000)'); + hueGrd.addColorStop(0.333, 'rgba(0, 0, 255, 1.000)'); + hueGrd.addColorStop(0.500, 'rgba(0, 255, 255, 1.000)'); + hueGrd.addColorStop(0.666, 'rgba(0, 255, 0, 1.000)'); + hueGrd.addColorStop(0.828, 'rgba(255, 255, 0, 1.000)'); + hueGrd.addColorStop(0.999, 'rgba(255, 0, 0, 1.000)'); - // Fill with gradient - this.context.fillStyle = hueGrd; - this.context.fillRect( 0, 0, this.canvas.width, this.height ); - } - }, - alpha: { - getColorByPoint: function( x, y ) { - var imageData = this.getImageData( x, y ); - this.setMarkerCenter( y ); - - return imageData[3] / 255; - }, - draw: function () { - this.$element.css({'height': this.height + 'px'}); - - this.canvas.height = this.height; - this.canvas.width = this.height; - - // Create gradient - var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); - - // Add colors - hueGrd.addColorStop(0.01, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 1.000)'); - hueGrd.addColorStop(0.99, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 0.000)'); - - // Fill with gradient - this.context.fillStyle = hueGrd; - this.context.fillRect( -1, -1, this.canvas.width+2, this.height+2 ); - }, - extra: function() { - this.$scope.$on('mdColorPicker:spectrumColorChange', angular.bind( this, function( e, args ) { - this.currentColor = args.color; - this.draw(); - })); - } - }, - spectrum: { - getColorByPoint: function( x, y ) { + // Fill with gradient + this.context.fillStyle = hueGrd; + this.context.fillRect( 0, 0, this.canvas.width, this.height ); + } + }, + alpha: { + getColorByPoint: function( x, y ) { + var imageData = this.getImageData( x, y ); + this.setMarkerCenter( y ); + + return imageData[3] / 255; + }, + draw: function () { + this.$element.css({'height': this.height + 'px'}); + + this.canvas.height = this.height; + this.canvas.width = this.height; + + // Create gradient + var hueGrd = this.context.createLinearGradient(90, 0.000, 90, this.height); + + // Add colors + hueGrd.addColorStop(0.01, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 1.000)'); + hueGrd.addColorStop(0.99, 'rgba(' + this.currentColor.r + ',' + this.currentColor.g + ',' + this.currentColor.b + ', 0.000)'); + + // Fill with gradient + this.context.fillStyle = hueGrd; + this.context.fillRect( -1, -1, this.canvas.width+2, this.height+2 ); + }, + extra: function() { + this.$scope.$on('mdColorPicker:spectrumColorChange', angular.bind( this, function( e, args ) { + this.currentColor = args.color; + this.draw(); + })); + } + }, + spectrum: { + getColorByPoint: function( x, y ) { + + var imageData = this.getImageData( x, y ); + this.setMarkerCenter(x,y); + + return { + r: imageData[0], + g: imageData[1], + b: imageData[2] + }; + }, + draw: function() { + this.canvas.height = this.height; + this.canvas.width = this.height; + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + + // Odd bug prevented selecting min, max ranges from all gradients. + // Start at 0.01, end at 0.99 and stretch it to 1px larger in each direction + + // White gradient + var whiteGrd = this.context.createLinearGradient(0, 0, this.canvas.width, 0); + + + whiteGrd.addColorStop(0.01, 'rgba(255, 255, 255, 1.000)'); + whiteGrd.addColorStop(0.99, 'rgba(255, 255, 255, 0.000)'); + + // Black Gradient + var blackGrd = this.context.createLinearGradient(0, 0, 0, this.canvas.height); + + + blackGrd.addColorStop(0.01, 'rgba(0, 0, 0, 0.000)'); + blackGrd.addColorStop(0.99, 'rgba(0, 0, 0, 1.000)'); + + // Fill with solid + this.context.fillStyle = 'hsl( ' + this.currentHue + ', 100%, 50%)'; + this.context.fillRect( 0, 0, this.canvas.width, this.canvas.height ); + + // Fill with white + // Odd bug prevented selecting min, max ranges from all gradients + this.context.fillStyle = whiteGrd; + this.context.fillRect( -1, -1, this.canvas.width+2, this.canvas.height+2 ); + + // Fill with black + // Odd bug prevented selecting min, max ranges from all gradients + this.context.fillStyle = blackGrd; + this.context.fillRect( -1, -1, this.canvas.width+2, this.canvas.height+2 ); + }, + extra: function() { + this.$scope.$on('mdColorPicker:spectrumHueChange', angular.bind( this, function( e, args ) { + this.currentHue = args.hue; + this.draw(); + var markerPos = this.getMarkerCenter(); + var color = this.getColorByPoint( markerPos.x, markerPos.y ); + this.setColor( color ); + + })); + } + } - var imageData = this.getImageData( x, y ); - this.setMarkerCenter(x,y); + }; - return { - r: imageData[0], - g: imageData[1], - b: imageData[2] - }; - }, - draw: function() { - this.canvas.height = this.height; - this.canvas.width = this.height; - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + function GradientCanvas( type, restrictX ) { - // Odd bug prevented selecting min, max ranges from all gradients. - // Start at 0.01, end at 0.99 and stretch it to 1px larger in each direction + this.type = type; + this.restrictX = restrictX; + this.offset = { + x: null, + y: null + }; + this.height = 255; - // White gradient - var whiteGrd = this.context.createLinearGradient(0, 0, this.canvas.width, 0); + this.$scope = null; + this.$element = null; + this.get = angular.bind(this, function( $temp_scope, $temp_element/*, $temp_attrs*/ ) { + //////////////////////////// + // Variables + //////////////////////////// - whiteGrd.addColorStop(0.01, 'rgba(255, 255, 255, 1.000)'); - whiteGrd.addColorStop(0.99, 'rgba(255, 255, 255, 0.000)'); + this.$scope = $temp_scope; + this.$element = $temp_element; - // Black Gradient - var blackGrd = this.context.createLinearGradient(0, 0, 0, this.canvas.height); + 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; + //////////////////////////// + // Watchers, Observes, Events + //////////////////////////// - blackGrd.addColorStop(0.01, 'rgba(0, 0, 0, 0.000)'); - blackGrd.addColorStop(0.99, 'rgba(0, 0, 0, 1.000)'); + //$scope.$watch( function() { return color.getRgb(); }, hslObserver, true ); - // Fill with solid - this.context.fillStyle = 'hsl( ' + this.currentHue + ', 100%, 50%)'; - this.context.fillRect( 0, 0, this.canvas.width, this.canvas.height ); - // Fill with white - // Odd bug prevented selecting min, max ranges from all gradients - this.context.fillStyle = whiteGrd; - this.context.fillRect( -1, -1, this.canvas.width+2, this.canvas.height+2 ); + this.$element.on('touchstart mousedown', angular.bind(this, this.onMouseDown)); + this.$scope.$on('mdColorPicker:colorSet', angular.bind( this, this.onColorSet ) ); + if ( this.extra ) { + this.extra(); + } + //////////////////////////// + // init + //////////////////////////// - // Fill with black - // Odd bug prevented selecting min, max ranges from all gradients - this.context.fillStyle = blackGrd; - this.context.fillRect( -1, -1, this.canvas.width+2, this.canvas.height+2 ); - }, - extra: function() { - this.$scope.$on('mdColorPicker:spectrumHueChange', angular.bind( this, function( e, args ) { - this.currentHue = args.hue; - this.draw(); - var markerPos = this.getMarkerCenter(); - var color = this.getColorByPoint( markerPos.x, markerPos.y ); - this.setColor( color ); + this.draw(); + }); - })); - } - } + //return angular.bind( this, this.get ); -}; + } -function GradientCanvasFactory( ) { + function GradientCanvasFactory( ) { - return function gradientCanvas( type ) { - var canvas = new GradientCanvas( type, type != 'spectrum' ); - canvas = angular.merge( canvas, canvasTypes[type] ); + return function gradientCanvas( type ) { + var canvas = new GradientCanvas( type, type !== 'spectrum' ); + canvas = angular.merge( canvas, canvasTypes[type] ); - return { - template: '
', - link: canvas.get, - controller: function() { - // console.log( "mdColorPickerAlpha Controller", Date.now() - dateClick ); - } + return { + template: '
', + link: canvas.get, + controller: function() { + // console.log( "mdColorPickerAlpha Controller", Date.now() - dateClick ); + } + }; }; } -} + GradientCanvas.prototype.$window = angular.element( window ); -function GradientCanvas( type, restrictX ) { + GradientCanvas.prototype.getColorByMouse = function( e ) { - this.type = type; - this.restrictX = restrictX; - this.offset = { - x: null, - y: null - }; - this.height = 255; - - this.$scope = null; - this.$element = null; + var te = e.touches && e.touches[0]; - this.get = angular.bind(this, function( $temp_scope, $temp_element, $temp_attrs ) { - //////////////////////////// - // Variables - //////////////////////////// + var pageX = te && te.pageX || e.pageX; + var pageY = te && te.pageY || e.pageY; - this.$scope = $temp_scope; - this.$element = $temp_element; + var x = Math.round( pageX - this.offset.x ); + var y = Math.round( pageY - this.offset.y ); + return this.getColorByPoint(x, y); + }; - 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; - //////////////////////////// - // Watchers, Observes, Events - //////////////////////////// + GradientCanvas.prototype.setMarkerCenter = function( x, y ) { + var xOffset = -1 * this.marker.offsetWidth / 2; + var yOffset = -1 * this.marker.offsetHeight / 2; + var xAdjusted, xFinal, yAdjusted, yFinal; - //$scope.$watch( function() { return color.getRgb(); }, hslObserver, true ); + if ( y === undefined ) { + yAdjusted = x + yOffset; + yFinal = Math.round( Math.max( Math.min( this.height-1 + yOffset, yAdjusted), yOffset ) ); + xFinal = 0; + } else { + xAdjusted = x + xOffset; + yAdjusted = y + yOffset; - this.$element.on('touchstart mousedown', angular.bind(this, this.onMouseDown)); - this.$scope.$on('mdColorPicker:colorSet', angular.bind( this, this.onColorSet ) ); - if ( this.extra ) { - this.extra(); + xFinal = Math.floor( Math.max( Math.min( this.height + xOffset, xAdjusted ), xOffset ) ); + yFinal = Math.floor( Math.max( Math.min( this.height + yOffset, yAdjusted ), yOffset ) ); + // Debug output + // console.log( "Raw: ", x+','+y, "Adjusted: ", xAdjusted + ',' + yAdjusted, "Final: ", xFinal + ',' + yFinal ); } - //////////////////////////// - // init - //////////////////////////// - - this.draw(); - }); - - //return angular.bind( this, this.get ); - -} - - - -GradientCanvas.prototype.$window = angular.element( window ); - -GradientCanvas.prototype.getColorByMouse = function( e ) { - - var te = e.touches && e.touches[0]; - - var pageX = te && te.pageX || e.pageX; - var pageY = te && te.pageY || e.pageY; - var x = Math.round( pageX - this.offset.x ); - var y = Math.round( pageY - this.offset.y ); - return this.getColorByPoint(x, y); -}; -GradientCanvas.prototype.setMarkerCenter = function( x, y ) { - var xOffset = -1 * this.marker.offsetWidth / 2; - var yOffset = -1 * this.marker.offsetHeight / 2; - var xAdjusted, xFinal, yAdjusted, yFinal; - - if ( y === undefined ) { - yAdjusted = x + yOffset; - yFinal = Math.round( Math.max( Math.min( this.height-1 + yOffset, yAdjusted), yOffset ) ); - - xFinal = 0; - } else { - xAdjusted = x + xOffset; - yAdjusted = y + yOffset; - - xFinal = Math.floor( Math.max( Math.min( this.height + xOffset, xAdjusted ), xOffset ) ); - yFinal = Math.floor( Math.max( Math.min( this.height + yOffset, yAdjusted ), yOffset ) ); - // Debug output - // console.log( "Raw: ", x+','+y, "Adjusted: ", xAdjusted + ',' + yAdjusted, "Final: ", xFinal + ',' + yFinal ); - } - - - - angular.element(this.marker).css({'left': xFinal + 'px' }); - angular.element(this.marker).css({'top': yFinal + 'px'}); -}; - -GradientCanvas.prototype.getMarkerCenter = function() { - var returnObj = { - x: this.marker.offsetLeft + ( Math.floor( this.marker.offsetWidth / 2 ) ), - y: this.marker.offsetTop + ( Math.floor( this.marker.offsetHeight / 2 ) ) + angular.element(this.marker).css({'left': xFinal + 'px' }); + angular.element(this.marker).css({'top': yFinal + 'px'}); }; - return returnObj; -}; - -GradientCanvas.prototype.getImageData = function( x, y ) { - x = Math.max( 0, Math.min( x, this.canvas.width-1 ) ); - y = Math.max( 0, Math.min( y, this.canvas.height-1 ) ); - - var imageData = this.context.getImageData( x, y, 1, 1 ).data; - return imageData; -}; - -GradientCanvas.prototype.onMouseDown = function( e ) { - // Prevent highlighting - e.preventDefault(); - e.stopImmediatePropagation(); - this.$scope.previewUnfocus(); + GradientCanvas.prototype.getMarkerCenter = function() { + var returnObj = { + x: this.marker.offsetLeft + ( Math.floor( this.marker.offsetWidth / 2 ) ), + y: this.marker.offsetTop + ( Math.floor( this.marker.offsetHeight / 2 ) ) + }; + return returnObj; + }; - this.$element.css({ 'cursor': 'none' }); + GradientCanvas.prototype.getImageData = function( x, y ) { + x = Math.max( 0, Math.min( x, this.canvas.width-1 ) ); + y = Math.max( 0, Math.min( y, this.canvas.height-1 ) ); - this.offset.x = this.canvas.getBoundingClientRect().left; - this.offset.y = this.canvas.getBoundingClientRect().top; + var imageData = this.context.getImageData( x, y, 1, 1 ).data; + return imageData; + }; - var fn = angular.bind( this, function( e ) { - switch( this.type ) { - case 'hue': - var hue = this.getColorByMouse( e ); - this.$scope.$broadcast( 'mdColorPicker:spectrumHueChange', {hue: hue}); - break; - case 'alpha': - var alpha = this.getColorByMouse( e ); - this.$scope.color.setAlpha( alpha ); - this.$scope.alpha = alpha; - this.$scope.$apply(); - break; - case 'spectrum': - var color = this.getColorByMouse( e ); - this.setColor( color ); - break; - } - }); + GradientCanvas.prototype.onMouseDown = function( e ) { + // Prevent highlighting + 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 fn = angular.bind( this, function( e ) { + switch( this.type ) { + case 'hue': + var hue = this.getColorByMouse( e ); + this.$scope.$broadcast( 'mdColorPicker:spectrumHueChange', {hue: hue}); + break; + case 'alpha': + var alpha = this.getColorByMouse( e ); + this.$scope.color.setAlpha( alpha ); + this.$scope.alpha = alpha; + this.$scope.$apply(); + break; + case 'spectrum': + var color = this.getColorByMouse( e ); + this.setColor( color ); + break; + } + }); - this.$window.on('touchmove mousemove', fn); - this.$window.one('touchend mouseup', angular.bind(this, function (e) { - this.$window.off('touchmove mousemove', fn); - this.$element.css({ 'cursor': 'crosshair' }); - })); + this.$window.on('touchmove mousemove', fn); + this.$window.one('touchend mouseup', angular.bind(this, function (/*e*/) { + this.$window.off('touchmove mousemove', fn); + this.$element.css({ 'cursor': 'crosshair' }); + })); - // Set the color - fn( e ); -}; + // Set the color + fn( e ); + }; -GradientCanvas.prototype.setColor = function( color ) { + GradientCanvas.prototype.setColor = function( color ) { this.$scope.color._r = color.r; this.$scope.color._g = color.g; this.$scope.color._b = color.b; this.$scope.$apply(); this.$scope.$broadcast('mdColorPicker:spectrumColorChange', { color: color }); -}; - -GradientCanvas.prototype.onColorSet = function( e, args ) { - switch( this.type ) { - case 'hue': - var hsv = this.$scope.color.toHsv(); - this.setMarkerCenter( this.canvas.height - ( this.canvas.height * ( hsv.h / 360 ) ) ); - break; - case 'alpha': - this.currentColor = args.color.toRgb(); - this.draw(); + }; - var alpha = args.color.getAlpha(); - var pos = this.canvas.height - ( this.canvas.height * alpha ); + GradientCanvas.prototype.onColorSet = function( e, args ) { + var hsv; + switch( this.type ) { + case 'hue':{ + hsv = this.$scope.color.toHsv(); + this.setMarkerCenter( this.canvas.height - ( this.canvas.height * ( hsv.h / 360 ) ) ); + break; + } + case 'alpha': { + this.currentColor = args.color.toRgb(); + this.draw(); - this.setMarkerCenter( pos ); - break; - case 'spectrum': - var hsv = args.color.toHsv(); - this.currentHue = hsv.h; - this.draw(); + var alpha = args.color.getAlpha(); + var pos = this.canvas.height - ( this.canvas.height * alpha ); - var posX = this.canvas.width * hsv.s; - var posY = this.canvas.height - ( this.canvas.height * hsv.v ); + this.setMarkerCenter( pos ); + break; + } + case 'spectrum': { + hsv = args.color.toHsv(); + this.currentHue = hsv.h; + this.draw(); - this.setMarkerCenter( posX, posY ); - break; - } + var posX = this.canvas.width * hsv.s; + var posY = this.canvas.height - ( this.canvas.height * hsv.v ); + + this.setMarkerCenter( posX, posY ); + break; + } + } -}; + }; @@ -342,23 +343,23 @@ GradientCanvas.prototype.onColorSet = function( e, args ) { -angular.module('mdColorPicker', []) + angular.module('mdColorPicker', []) .run(['$templateCache', function ($templateCache) { //icon resource should not be dependent //credit to materialdesignicons.com var shapes = { - 'clear': '', - 'gradient': '', - 'tune': '', - 'view_module': '', - 'view_headline': '', - 'history': '', - 'clear_all': '' + 'clear': '', + 'gradient': '', + 'tune': '', + 'view_module': '', + 'view_headline': '', + 'history': '', + 'clear_all': '' }; for (var i in shapes) { if (shapes.hasOwnProperty(i)) { $templateCache.put([i, 'svg'].join('.'), - ['', shapes[i], ''].join('')); + ['', shapes[i], ''].join('')); } } }]) @@ -372,7 +373,7 @@ angular.module('mdColorPicker', []) try { $cookies = $injector.get('$cookies'); } catch(e) { - + // Handler error } if ( $cookies ) { @@ -424,10 +425,10 @@ angular.module('mdColorPicker', []) } }; }]) - .directive('mdColorPicker', [ '$timeout', 'mdColorPickerHistory', function( $timeout, colorHistory ) { + .directive('mdColorPicker', [ '$timeout', 'mdColorPickerHistory', function(/* $timeout, colorHistory*/ ) { return { - templateUrl: "views/mdColorPicker.tpl.html", + templateUrl: 'views/mdColorPicker.tpl.html', // Added required controller ngModel require: '^ngModel', @@ -472,7 +473,7 @@ angular.module('mdColorPicker', []) if ( $scope.options.hasOwnProperty( opt ) ) { var scopeKey; //if ( $scope.hasOwnProperty( opt ) ) { // Removing this because optional scope properties are not added to the scope. - scopeKey = opt; + scopeKey = opt; //} else if ( $scope.hasOwnProperty( 'mdColor' + opt.slice(0,1).toUpperCase() + opt.slice(1) ) ) { scopeKey = 'mdColor' + opt.slice(0,1).toUpperCase() + opt.slice(1); @@ -518,7 +519,10 @@ angular.module('mdColorPicker', []) // Watch for updates to value and set them on the model $scope.$watch('value',function(newVal,oldVal) { - if (newVal !== '' && typeof newVal !== 'undefined' && newVal && newVal !== oldVal) { + if(newVal === '' || typeof newVal === 'undefined' || !newVal){ + $scope.clearValue(); + } + if (newVal !== oldVal) { ngModel.$setViewValue(newVal); } }); @@ -532,8 +536,8 @@ angular.module('mdColorPicker', []) if ( didJustClose ) { return; } - // dateClick = Date.now(); - // console.log( "CLICK OPEN", dateClick, $scope ); + // dateClick = Date.now(); + // console.log( "CLICK OPEN", dateClick, $scope ); $mdColorPicker.show({ value: $scope.value, @@ -555,7 +559,7 @@ angular.module('mdColorPicker', []) mdColorHsl: $scope.mdColorHsl, mdColorDefaultTab: $scope.mdColorDefaultTab, - $event: $event, + $event: $event }).then(function( color ) { $scope.value = color; @@ -589,8 +593,8 @@ angular.module('mdColorPicker', []) mdColorHsl: '=', mdColorDefaultTab: '=' }, - controller: function( $scope, $element, $attrs ) { - // console.log( "mdColorPickerContainer Controller", Date.now() - dateClick, $scope ); + controller: function( $scope, $element/*, $attrs*/ ) { + // console.log( "mdColorPickerContainer Controller", Date.now() - dateClick, $scope ); function getTabIndex( tab ) { var index = 0; @@ -599,13 +603,13 @@ angular.module('mdColorPicker', []) var tabs = $element[0].querySelector('.md-color-picker-colors').getElementsByTagName( 'md-tab' ); console.log( tabs.length ); - */ + */ var tabName = 'mdColor' + tab.slice(0,1).toUpperCase() + tab.slice(1); var tabs = ['mdColorSpectrum', 'mdColorSliders', 'mdColorGenericPalette', 'mdColorMaterialPalette', 'mdColorHistory']; for ( var x = 0; x < tabs.length; x++ ) { //console.log( tabs[x]('ng-if') ); //if ( tabs[x].getAttribute('ng-if') == tabName ) { - if ( tabs[x] == tabName ) { + if ( tabs[x] === tabName ) { if ( $scope[tabName] ) { index = x; break; @@ -622,15 +626,15 @@ angular.module('mdColorPicker', []) /////////////////////////////////// // Variables /////////////////////////////////// - var container = angular.element( $element[0].querySelector('.md-color-picker-container') ); - var resultSpan = angular.element( container[0].querySelector('.md-color-picker-result') ); +// var container = angular.element( $element[0].querySelector('.md-color-picker-container') ); +// var resultSpan = angular.element( container[0].querySelector('.md-color-picker-result') ); var previewInput = angular.element( $element[0].querySelector('.md-color-picker-preview-input') ); var outputFn = [ 'toHexString', 'toRgbString', 'toHslString' - ]; + ]; @@ -652,21 +656,21 @@ angular.module('mdColorPicker', []) // Colors for the palette screen /////////////////////////////////// - var steps = 9; - var freq = 2*Math.PI/steps; +// var steps = 9; +// var freq = 2 * Math.PI/steps; $scope.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)"] - ]; + ['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)'] + ]; $scope.materialPalette = $mdColorPalette; @@ -691,16 +695,18 @@ angular.module('mdColorPicker', []) $scope.inputFocus = false; previewInput[0].blur(); }; + $scope.previewBlur = function() { $scope.inputFocus = false; $scope.setValue(); }; - $scope.previewKeyDown = function( $event ) { - if ( $event.keyCode == 13 ) { - $scope.ok && $scope.ok(); + $scope.previewKeyDown = function( $event ) { + if ( $event.keyCode === 13 && angular.isFunction($scope.ok) ) { + $scope.ok(); } }; + $scope.setPaletteColor = function( event ) { $timeout( function() { $scope.color = tinycolor( event.target.style.backgroundColor ); @@ -727,7 +733,7 @@ angular.module('mdColorPicker', []) $scope.color.setAlpha( newValue ); }, true); - $scope.$watch( 'whichPane', function( newValue ) { + $scope.$watch( 'whichPane', function( /*newValue*/ ) { // 0 - spectrum selector // 1 - sliders // 2 - palette @@ -742,7 +748,7 @@ angular.module('mdColorPicker', []) }); }); - $scope.$watchGroup(['color.toRgbString()', 'type'], function( newValue ) { + $scope.$watchGroup(['color.toRgbString()', 'type'], function( /*newValue*/ ) { if ( !$scope.inputFocus ) { $scope.setValue(); } @@ -753,39 +759,35 @@ angular.module('mdColorPicker', []) // INIT // Let all the other directives initialize /////////////////////////////////// - // console.log( "mdColorPickerContainer Controller PRE Timeout", Date.now() - dateClick ); + // console.log( 'mdColorPickerContainer Controller PRE Timeout', Date.now() - dateClick ); $timeout( function() { - // console.log( "mdColorPickerContainer Controller Timeout", Date.now() - dateClick ); + // console.log( 'mdColorPickerContainer Controller Timeout', Date.now() - dateClick ); $scope.$broadcast('mdColorPicker:colorSet', { color: $scope.color }); previewInput.focus(); $scope.previewFocus(); }); }, - link: function( scope, element, attrs ) { + link: function( scope, element/*, attrs*/ ) { - var tabs = element[0].getElementsByTagName( 'md-tab' ); +// var tabs = element[0].getElementsByTagName( 'md-tab' ); /* Replicating these structure without ng-repeats -
-
+
+
-
-
+
+
{{key}}
{{label}}
- */ + */ - $timeout(function() { - createDOM(); - }); - function createDOM() { var paletteContainer = angular.element( element[0].querySelector('.md-color-picker-palette') ); var materialContainer = angular.element( element[0].querySelector('.md-color-picker-material-palette') ); @@ -797,7 +799,7 @@ angular.module('mdColorPicker', []) - angular.forEach(scope.palette, function( value, key ) { + angular.forEach(scope.palette, function( value/*, key*/ ) { var row = paletteRow.clone(); angular.forEach( value, function( color ) { var cell = paletteCell.clone(); @@ -844,6 +846,12 @@ angular.module('mdColorPicker', []) }); } + + + + $timeout(function() { + createDOM(); + }); } }; }]) @@ -852,19 +860,19 @@ angular.module('mdColorPicker', []) .directive( 'mdColorPickerAlpha', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('alpha'); }]) .directive( 'mdColorPickerSpectrum', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('spectrum'); }]) - .factory('$mdColorPicker', ['$q', '$mdDialog', 'mdColorPickerHistory', function ($q, $mdDialog, colorHistory) { + .factory('$mdColorPicker', ['$q', '$mdDialog', 'mdColorPickerHistory', function ($q, $mdDialog, colorHistory) { var dialog; - return { - show: function (options) - { - if ( options === undefined ) { - options = {}; - } + return { + show: function (options) + { + if ( options === undefined ) { + options = {}; + } //console.log( 'DIALOG OPTIONS', options ); // Defaults // Dialog Properties - options.hasBackdrop = options.hasBackdrop === undefined ? true : options.hasBackdrop; + options.hasBackdrop = options.hasBackdrop === undefined ? true : options.hasBackdrop; options.clickOutsideToClose = options.clickOutsideToClose === undefined ? true : options.clickOutsideToClose; options.defaultValue = options.defaultValue === undefined ? '#FFFFFF' : options.defaultValue; options.focusOnOpen = options.focusOnOpen === undefined ? false : options.focusOnOpen; @@ -883,65 +891,65 @@ angular.module('mdColorPicker', []) options.mdColorHex = ((options.mdColorHex === undefined) || (!options.mdColorRgb && !options.mdColorHsl)) ? true : options.mdColorHex; options.mdColorAlphaChannel = (!options.mdColorRgb && !options.mdColorHsl) ? false : options.mdColorAlphaChannel; - dialog = $mdDialog.show({ + dialog = $mdDialog.show({ templateUrl: 'views/mdColorPickerDialog.tpl.html', hasBackdrop: options.hasBackdrop, clickOutsideToClose: options.clickOutsideToClose, controller: ['$scope', 'options', function( $scope, options ) { - //console.log( "DIALOG CONTROLLER OPEN", Date.now() - dateClick ); - $scope.close = function close() - { - $mdDialog.cancel(); - }; - $scope.ok = function ok() - { - $mdDialog.hide( $scope.value ); - }; - $scope.hide = $scope.ok; - - - - $scope.value = options.value; - $scope.default = options.defaultValue; - $scope.random = options.random; - - $scope.mdColorAlphaChannel = options.mdColorAlphaChannel; - $scope.mdColorSpectrum = options.mdColorSpectrum; - $scope.mdColorSliders = options.mdColorSliders; - $scope.mdColorGenericPalette = options.mdColorGenericPalette; - $scope.mdColorMaterialPalette = options.mdColorMaterialPalette; - $scope.mdColorHistory = options.mdColorHistory; - $scope.mdColorHex = options.mdColorHex; - $scope.mdColorRgb = options.mdColorRgb; - $scope.mdColorHsl = options.mdColorHsl; - $scope.mdColorDefaultTab = options.mdColorDefaultTab; + //console.log( "DIALOG CONTROLLER OPEN", Date.now() - dateClick ); + $scope.close = function close() + { + $mdDialog.cancel(); + }; + $scope.ok = function ok() + { + $mdDialog.hide( $scope.value ); + }; + $scope.hide = $scope.ok; + + + + $scope.value = options.value; + $scope.default = options.defaultValue; + $scope.random = options.random; + + $scope.mdColorAlphaChannel = options.mdColorAlphaChannel; + $scope.mdColorSpectrum = options.mdColorSpectrum; + $scope.mdColorSliders = options.mdColorSliders; + $scope.mdColorGenericPalette = options.mdColorGenericPalette; + $scope.mdColorMaterialPalette = options.mdColorMaterialPalette; + $scope.mdColorHistory = options.mdColorHistory; + $scope.mdColorHex = options.mdColorHex; + $scope.mdColorRgb = options.mdColorRgb; + $scope.mdColorHsl = options.mdColorHsl; + $scope.mdColorDefaultTab = options.mdColorDefaultTab; }], locals: { - options: options, + options: options }, preserveScope: options.preserveScope, - skipHide: options.skipHide, + skipHide: options.skipHide, targetEvent: options.$event, focusOnOpen: options.focusOnOpen, autoWrap: false, onShowing: function() { - // console.log( "DIALOG OPEN START", Date.now() - dateClick ); + // console.log( "DIALOG OPEN START", Date.now() - dateClick ); }, onComplete: function() { - // console.log( "DIALOG OPEN COMPLETE", Date.now() - dateClick ); + // console.log( "DIALOG OPEN COMPLETE", Date.now() - dateClick ); } - }); + }); dialog.then(function (value) { - colorHistory.add(new tinycolor(value)); - }, function () { }); + colorHistory.add(new tinycolor(value)); + }, function () { }); - return dialog; - }, + return dialog; + }, hide: function() { return dialog.hide(); }, @@ -956,7 +964,7 @@ angular.module('mdColorPicker').run(['$templateCache', function($templateCache) 'use strict'; $templateCache.put('views/mdColorPicker.tpl.html', - "
" + "
" ); diff --git a/dist/md-color-picker.min.css b/dist/md-color-picker.min.css index beee9e0..9e8927a 100644 --- a/dist/md-color-picker.min.css +++ b/dist/md-color-picker.min.css @@ -1 +1 @@ -[md-color-picker] .md-color-picker-input-container,md-color-picker .md-color-picker-input-container{position:relative}[md-color-picker] .md-color-picker-input-container .md-color-picker-input::-ms-clear,md-color-picker .md-color-picker-input-container .md-color-picker-input::-ms-clear{display:none}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview,md-color-picker .md-color-picker-input-container .md-color-picker-preview{content:'';width:24px;height:24px;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);position:relative;top:22px;overflow:hidden;background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd),linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result,md-color-picker .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result{width:100%;height:100%}[md-color-picker] .md-color-picker-input-container .md-color-picker-clear,md-color-picker .md-color-picker-input-container .md-color-picker-clear{position:absolute;bottom:42px;right:-16px;color:rgba(0,0,0,.26)}.md-color-picker-container{padding:8px;background:#fff;outline:0;height:397px;width:347px;opacity:1;overflow:hidden;z-index:1000}.md-color-picker-container .md-color-picker-arrow{border:0 solid transparent;border-right-width:30px;border-bottom-width:0;position:absolute;left:0;top:0;transition:border-bottom-width cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s}.md-color-picker-container canvas{width:100%;height:100%}.md-color-picker-container .md-color-picker-preview{flex:1;font-weight:700;font-size:18px;color:#fff;margin:-8px -8px 0;position:relative}.md-color-picker-container .md-color-picker-preview .md-color-picker-result{position:absolute;height:100%;opacity:1;background:red}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>input{position:relative;top:-15px;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div{position:relative;width:100%}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input{border-width:0;background:0 0;text-align:center;position:absolute;top:-15px;bottom:0;left:0;right:0;color:#eee;outline:0;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input.switch{transition:top cubic-bezier(.25,.8,.25,1) .25s,.25s opacity ease-out;top:0;opacity:1}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-wrapper{max-height:28px;height:28px}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-ink-bar{background:rgba(255,255,255,.5)}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab{padding-top:2px;background:rgba(255,255,255,.25);color:#eee;max-width:none!important}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab.md-active{background:0 0}.md-color-picker-container .md-color-picker-preview.dark,.md-color-picker-container .md-color-picker-preview.dark .md-color-picker-preview-input{color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab{background:rgba(0,0,0,.25);color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab.md-active{background:0 0}.md-color-picker-container .md-color-picker-preview.dark md-ink-bar{background:rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-tabs{margin:0 -8px}.md-color-picker-container .md-color-picker-tabs md-tabs[md-align-tabs=bottom]{padding-bottom:0}.md-color-picker-container .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-tabs md-tabs-wrapper{max-height:36px;height:36px}.md-color-picker-container .md-color-picker-tabs .md-tab{padding:7px 24px;background:0 0}.md-color-picker-container .md-color-picker-tabs .md-tab:last-of-type{margin-right:-2px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height){min-height:298px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper{height:255px;margin-bottom:8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content{height:255px;padding:0 8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content [md-tabs-template]{height:100%}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors{margin:8px -8px -8px}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors md-ink-bar{top:auto}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab{background:rgba(0,0,0,.075)}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab.md-active{background:#fff}.md-color-picker-container .md-color-picker-colors{overflow:hidden;margin-top:8px}.md-color-picker-container .md-color-picker-colors .md-color-picker-marker{position:absolute;border:2px solid #fff;box-shadow:0 0 2px 0 rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum]{position:relative;cursor:crosshair;overflow:hidden;height:255px;width:255px}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum] .md-color-picker-marker{width:12px;height:12px;border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.5),inset 0 0 2px 0 rgba(0,0,0,.5);top:-5px;left:calc(100% - 5px)}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha],.md-color-picker-container .md-color-picker-colors [md-color-picker-hue]{position:relative;cursor:crosshair;overflow:hidden;width:30px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha].md-color-picker-wide,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue].md-color-picker-wide{width:67px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha] .md-color-picker-marker,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue] .md-color-picker-marker{height:5px;width:100%;border-left:0;border-right:0;top:-2px;left:0}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-track-fill{background:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-thumb:after{background-color:#d01515;border-color:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-track-fill{background:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-thumb:after{background-color:#19d015;border-color:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-track-fill{background:#1560d0}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-thumb:after{background-color:#1560d0;border-color:#1560d0}.md-color-picker-checkered-bg,.md-color-picker-container .md-color-picker-history>div>div{background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd),linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title{font-size:22px;line-height:75px;padding:0 15px;color:rgba(0,0,0,.85);text-transform:capitalize}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title.dark{color:rgba(255,255,255,.85)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title:not(:first-child){margin-top:16px}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label{font-size:12px;line-height:33px;padding:0 5px;color:rgba(0,0,0,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label.dark{color:rgba(255,255,255,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-colors{position:absolute;transition:left cubic-bezier(.25,.8,.25,1) .25s,right cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s,bottom cubic-bezier(.25,.8,.25,1) .25s}.md-color-picker-container .md-color-picker-history>div>div{height:20px;margin:4px}.md-color-picker-container .md-color-picker-history>div>div>div{width:100%;height:100%}.md-color-picker-container .md-color-picker-history button{margin-top:auto;margin-left:auto} \ No newline at end of file +[md-color-picker] .md-color-picker-input-container,md-color-picker .md-color-picker-input-container{position:relative}[md-color-picker] .md-color-picker-input-container .md-color-picker-input::-ms-clear,md-color-picker .md-color-picker-input-container .md-color-picker-input::-ms-clear{display:none}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview,md-color-picker .md-color-picker-input-container .md-color-picker-preview{content:'';width:24px;height:24px;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);position:relative;top:22px;overflow:hidden;background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd),linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}[md-color-picker] .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result,md-color-picker .md-color-picker-input-container .md-color-picker-preview .md-color-picker-result{width:100%;height:100%}[md-color-picker] .md-color-picker-input-container .md-color-picker-clear,md-color-picker .md-color-picker-input-container .md-color-picker-clear{position:absolute;bottom:42px;right:-16px;left:auto}[dir=rtl] [md-color-picker] .md-color-picker-input-container .md-color-picker-clear,[dir=rtl] md-color-picker .md-color-picker-input-container .md-color-picker-clear{right:auto;left:-16px}.md-color-picker-container{padding:8px;background:#fff;outline:0;height:397px;width:347px;opacity:1;overflow:hidden;z-index:1000}.md-color-picker-container .md-color-picker-arrow{border:0 solid transparent;border-right-width:30px;border-bottom-width:0;position:absolute;left:0;top:0;transition:border-bottom-width cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s}.md-color-picker-container canvas{width:100%;height:100%}.md-color-picker-container .md-color-picker-preview{flex:1;font-weight:700;font-size:18px;color:#fff;margin:-8px -8px 0;position:relative}.md-color-picker-container .md-color-picker-preview .md-color-picker-result{position:absolute;height:100%;opacity:1;background:red}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>input{position:relative;top:-15px;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div{position:relative;width:100%}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input{border-width:0;background:0 0;text-align:center;position:absolute;top:-15px;bottom:0;left:0;right:0;color:#eee;outline:0;opacity:0}.md-color-picker-container .md-color-picker-preview .md-color-picker-result>div>input.switch{transition:top cubic-bezier(.25,.8,.25,1) .25s,.25s opacity ease-out;top:0;opacity:1}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-tabs-wrapper{max-height:28px;height:28px}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs md-ink-bar{background:rgba(255,255,255,.5)}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab{padding-top:2px;background:rgba(255,255,255,.25);color:#eee;max-width:none!important}.md-color-picker-container .md-color-picker-preview .md-color-picker-tabs .md-tab.md-active{background:0 0}.md-color-picker-container .md-color-picker-preview.dark,.md-color-picker-container .md-color-picker-preview.dark .md-color-picker-preview-input{color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab{background:rgba(0,0,0,.25);color:#333}.md-color-picker-container .md-color-picker-preview.dark .md-tab.md-active{background:0 0}.md-color-picker-container .md-color-picker-preview.dark md-ink-bar{background:rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-tabs{margin:0 -8px}.md-color-picker-container .md-color-picker-tabs md-tabs[md-align-tabs=bottom]{padding-bottom:0}.md-color-picker-container .md-color-picker-tabs .md-tab,.md-color-picker-container .md-color-picker-tabs md-pagination-wrapper,.md-color-picker-container .md-color-picker-tabs md-tabs-canvas,.md-color-picker-container .md-color-picker-tabs md-tabs-wrapper{max-height:36px;height:36px}.md-color-picker-container .md-color-picker-tabs .md-tab{padding:7px 24px;background:0 0}.md-color-picker-container .md-color-picker-tabs .md-tab:last-of-type{margin-right:-2px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height){min-height:298px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper{height:255px;margin-bottom:8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content{height:255px;padding:0 8px}.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content [md-tabs-template]{height:100%}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors{margin:8px -8px -8px}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors md-ink-bar{top:auto}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab{background:rgba(0,0,0,.075)}.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors .md-tab.md-active{background:#fff}.md-color-picker-container .md-color-picker-colors{overflow:hidden;margin-top:8px}.md-color-picker-container .md-color-picker-colors .md-color-picker-marker{position:absolute;border:2px solid #fff;box-shadow:0 0 2px 0 rgba(0,0,0,.5)}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum]{position:relative;cursor:crosshair;overflow:hidden;height:255px;width:255px}.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum] .md-color-picker-marker{width:12px;height:12px;border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.5),inset 0 0 2px 0 rgba(0,0,0,.5);top:-5px;left:calc(100% - 5px)}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha],.md-color-picker-container .md-color-picker-colors [md-color-picker-hue]{position:relative;cursor:crosshair;overflow:hidden;width:30px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha].md-color-picker-wide,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue].md-color-picker-wide{width:67px}.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha] .md-color-picker-marker,.md-color-picker-container .md-color-picker-colors [md-color-picker-hue] .md-color-picker-marker{height:5px;width:100%;border-left:0;border-right:0;top:-2px;left:0}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-track-fill{background:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.red-slider .md-thumb:after{background-color:#d01515;border-color:#d01515}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-track-fill{background:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.green-slider .md-thumb:after{background-color:#19d015;border-color:#19d015}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-track-fill{background:#1560d0}.md-color-picker-container .md-color-picker-sliders md-slider.blue-slider .md-thumb:after{background-color:#1560d0;border-color:#1560d0}.md-color-picker-checkered-bg,.md-color-picker-container .md-color-picker-history>div>div{background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd),linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title{font-size:22px;line-height:75px;padding:0 15px;color:rgba(0,0,0,.85);text-transform:capitalize}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title.dark{color:rgba(255,255,255,.85)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title:not(:first-child){margin-top:16px}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label{font-size:12px;line-height:33px;padding:0 5px;color:rgba(0,0,0,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label.dark{color:rgba(255,255,255,.7)}.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-colors{position:absolute;transition:left cubic-bezier(.25,.8,.25,1) .25s,right cubic-bezier(.25,.8,.25,1) .25s,top cubic-bezier(.25,.8,.25,1) .25s,bottom cubic-bezier(.25,.8,.25,1) .25s}.md-color-picker-container .md-color-picker-history>div>div{height:20px;margin:4px}.md-color-picker-container .md-color-picker-history>div>div>div{width:100%;height:100%}.md-color-picker-container .md-color-picker-history button{margin-top:auto;margin-left:auto} \ No newline at end of file diff --git a/dist/md-color-picker.min.js b/dist/md-color-picker.min.js index b01a06d..2ea1784 100644 --- a/dist/md-color-picker.min.js +++ b/dist/md-color-picker.min.js @@ -1 +1 @@ -!function(o,e,t){"use strict";var r={hue:{getColorByPoint:function(o,e){var t=this.getImageData(o,e);return this.setMarkerCenter(e),new tinycolor({r:t[0],g:t[1],b:t[2]}).toHsl().h},draw:function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var o=this.context.createLinearGradient(90,0,90,this.height);o.addColorStop(.01,"rgba(255, 0, 0, 1.000)"),o.addColorStop(.167,"rgba(255, 0, 255, 1.000)"),o.addColorStop(.333,"rgba(0, 0, 255, 1.000)"),o.addColorStop(.5,"rgba(0, 255, 255, 1.000)"),o.addColorStop(.666,"rgba(0, 255, 0, 1.000)"),o.addColorStop(.828,"rgba(255, 255, 0, 1.000)"),o.addColorStop(.999,"rgba(255, 0, 0, 1.000)"),this.context.fillStyle=o,this.context.fillRect(0,0,this.canvas.width,this.height)}},alpha:{getColorByPoint:function(o,e){var t=this.getImageData(o,e);return this.setMarkerCenter(e),t[3]/255},draw:function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var o=this.context.createLinearGradient(90,0,90,this.height);o.addColorStop(.01,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 1.000)"),o.addColorStop(.99,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 0.000)"),this.context.fillStyle=o,this.context.fillRect(-1,-1,this.canvas.width+2,this.height+2)},extra:function(){this.$scope.$on("mdColorPicker:spectrumColorChange",e.bind(this,function(o,e){this.currentColor=e.color,this.draw()}))}},spectrum:{getColorByPoint:function(o,e){var t=this.getImageData(o,e);return this.setMarkerCenter(o,e),{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 o=this.context.createLinearGradient(0,0,this.canvas.width,0);o.addColorStop(.01,"rgba(255, 255, 255, 1.000)"),o.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=o,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(o,e){this.currentHue=e.hue,this.draw();var t=this.getMarkerCenter(),r=this.getColorByPoint(t.x,t.y);this.setColor(r)}))}}};function l(o,t){this.type=o,this.restrictX=t,this.offset={x:null,y:null},this.height=255,this.$scope=null,this.$element=null,this.get=e.bind(this,function(o,t,r){this.$scope=o,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",e.bind(this,this.onMouseDown)),this.$scope.$on("mdColorPicker:colorSet",e.bind(this,this.onColorSet)),this.extra&&this.extra(),this.draw()})}l.prototype.$window=e.element(o),l.prototype.getColorByMouse=function(o){var e=o.touches&&o.touches[0],t=e&&e.pageX||o.pageX,r=e&&e.pageY||o.pageY,l=Math.round(t-this.offset.x),i=Math.round(r-this.offset.y);return this.getColorByPoint(l,i)},l.prototype.setMarkerCenter=function(o,t){var r,l,i,a,n=-1*this.marker.offsetWidth/2,d=-1*this.marker.offsetHeight/2;void 0===t?(i=o+d,a=Math.round(Math.max(Math.min(this.height-1+d,i),d)),l=0):(r=o+n,i=t+d,l=Math.floor(Math.max(Math.min(this.height+n,r),n)),a=Math.floor(Math.max(Math.min(this.height+d,i),d))),e.element(this.marker).css({left:l+"px"}),e.element(this.marker).css({top:a+"px"})},l.prototype.getMarkerCenter=function(){return{x:this.marker.offsetLeft+Math.floor(this.marker.offsetWidth/2),y:this.marker.offsetTop+Math.floor(this.marker.offsetHeight/2)}},l.prototype.getImageData=function(o,e){return o=Math.max(0,Math.min(o,this.canvas.width-1)),e=Math.max(0,Math.min(e,this.canvas.height-1)),this.context.getImageData(o,e,1,1).data},l.prototype.onMouseDown=function(o){o.preventDefault(),o.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=e.bind(this,function(o){switch(this.type){case"hue":var e=this.getColorByMouse(o);this.$scope.$broadcast("mdColorPicker:spectrumHueChange",{hue:e});break;case"alpha":var t=this.getColorByMouse(o);this.$scope.color.setAlpha(t),this.$scope.alpha=t,this.$scope.$apply();break;case"spectrum":var r=this.getColorByMouse(o);this.setColor(r)}});this.$window.on("touchmove mousemove",t),this.$window.one("touchend mouseup",e.bind(this,function(o){this.$window.off("touchmove mousemove",t),this.$element.css({cursor:"crosshair"})})),t(o)},l.prototype.setColor=function(o){this.$scope.color._r=o.r,this.$scope.color._g=o.g,this.$scope.color._b=o.b,this.$scope.$apply(),this.$scope.$broadcast("mdColorPicker:spectrumColorChange",{color:o})},l.prototype.onColorSet=function(o,e){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=e.color.toRgb(),this.draw();var r=e.color.getAlpha(),l=this.canvas.height-this.canvas.height*r;this.setMarkerCenter(l);break;case"spectrum":t=e.color.toHsv();this.currentHue=t.h,this.draw();var i=this.canvas.width*t.s,a=this.canvas.height-this.canvas.height*t.v;this.setMarkerCenter(i,a)}},e.module("mdColorPicker",[]).run(["$templateCache",function(o){var e={clear:'',gradient:'',tune:'',view_module:'',view_headline:'',history:'',clear_all:''};for(var t in e)e.hasOwnProperty(t)&&o.put([t,"svg"].join("."),['',e[t],""].join(""))}]).factory("mdColorGradientCanvas",function(){return function(o){var t=new l(o,"spectrum"!=o);return{template:'
',link:(t=e.merge(t,r[o])).get,controller:function(){}}}}).factory("mdColorPickerHistory",["$injector",function(o){var e=[],t=[],r=!1;try{r=o.get("$cookies")}catch(o){}if(r)for(var l=r.getObject("mdColorPickerHistory")||[],i=0;ia&&(e.pop(),t.pop()),r&&r.putObject("mdColorPickerHistory",t)},get:function(){return e},reset:function(){e=[],t=[],r&&r.putObject("mdColorPickerHistory",t)}}}]).directive("mdColorPicker",["$timeout","mdColorPickerHistory",function(o,e){return{templateUrl:"views/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(o,e,t,r,l){if(void 0!==o.options)for(var i in o.options){var a;if(o.options.hasOwnProperty(i))a=i,o.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(a="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),!a||void 0!==o[a]&&""!==o[a]||(o[a]=o.options[i])}var n=e.controller("ngModel"),d=function(e){o.value=e||n.$viewValue||""};o.mdColorClearButton=void 0===o.mdColorClearButton||o.mdColorClearButton,o.mdColorPreview=void 0===o.mdColorPreview||o.mdColorPreview,o.mdColorAlphaChannel=void 0===o.mdColorAlphaChannel||o.mdColorAlphaChannel,o.mdColorSpectrum=void 0===o.mdColorSpectrum||o.mdColorSpectrum,o.mdColorSliders=void 0===o.mdColorSliders||o.mdColorSliders,o.mdColorGenericPalette=void 0===o.mdColorGenericPalette||o.mdColorGenericPalette,o.mdColorMaterialPalette=void 0===o.mdColorMaterialPalette||o.mdColorMaterialPalette,o.mdColorHistory=void 0===o.mdColorHistory||o.mdColorHistory,o.mdColorHex=void 0===o.mdColorHex||o.mdColorHex,o.mdColorRgb=void 0===o.mdColorRgb||o.mdColorRgb,o.mdColorHsl=void 0===o.mdColorHsl||o.mdColorHsl,d(),o.$watch(function(){return n.$modelValue},function(o){d(o)}),o.$watch("value",function(o,e){""!==o&&void 0!==o&&o&&o!==e&&n.$setViewValue(o)}),o.clearValue=function(){n.$setViewValue("")},o.showColorPicker=function(e){l.show({value:o.value,defaultValue:o.default,random:o.random,clickOutsideToClose:o.clickOutsideToClose,hasBackdrop:o.hasBackdrop,skipHide:o.skipHide,preserveScope:o.preserveScope,mdColorAlphaChannel:o.mdColorAlphaChannel,mdColorSpectrum:o.mdColorSpectrum,mdColorSliders:o.mdColorSliders,mdColorGenericPalette:o.mdColorGenericPalette,mdColorMaterialPalette:o.mdColorMaterialPalette,mdColorHistory:o.mdColorHistory,mdColorHex:o.mdColorHex,mdColorRgb:o.mdColorRgb,mdColorHsl:o.mdColorHsl,mdColorDefaultTab:o.mdColorDefaultTab,$event:e}).then(function(e){o.value=e})}}],compile:function(o,e){e.type=void 0!==e.type?e.type:0}}}]).directive("mdColorPickerContainer",["$compile","$timeout","$mdColorPalette","mdColorPickerHistory",function(o,t,r,l){return{templateUrl:"views/mdColorPickerContainer.tpl.html",scope:{value:"=?",default:"@",random:"@",ok:"=?",mdColorAlphaChannel:"=",mdColorSpectrum:"=",mdColorSliders:"=",mdColorGenericPalette:"=",mdColorMaterialPalette:"=",mdColorHistory:"=",mdColorHex:"=",mdColorRgb:"=",mdColorHsl:"=",mdColorDefaultTab:"="},controller:["$scope","$element","$attrs",function(o,i,a){var n=e.element(i[0].querySelector(".md-color-picker-container")),d=(e.element(n[0].querySelector(".md-color-picker-result")),e.element(i[0].querySelector(".md-color-picker-preview-input"))),c=["toHexString","toRgbString","toHslString"];o.default=o.default?o.default:o.random?tinycolor.random():"rgb(255,255,255)",o.value.search("#")>=0?o.type=0:o.value.search("rgb")>=0?o.type=1:o.value.search("hsl")>=0&&(o.type=2),o.color=new tinycolor(o.value||o.default),o.alpha=o.color.getAlpha(),o.history=l,o.materialFamily=[],o.whichPane=function(e){var t=0;if(e&&"string"==typeof e){for(var r="mdColor"+e.slice(0,1).toUpperCase()+e.slice(1),l=["mdColorSpectrum","mdColorSliders","mdColorGenericPalette","mdColorMaterialPalette","mdColorHistory"],i=0;i
'),a=e.element('
'),n=e.element('
'),d=e.element('
'),e.forEach(o.palette,function(r,l){var n=i.clone();e.forEach(r,function(e){var t=a.clone();t.css({height:"25.5px",backgroundColor:e}),t.bind("click",o.setPaletteColor),n.append(t)}),t.append(n)}),e.forEach(o.materialPalette,function(t,r){var i=n.clone();i.html(""+r.replace("-"," ")+""),i.css({height:"75px",backgroundColor:"rgb("+t[500].value[0]+","+t[500].value[1]+","+t[500].value[2]+")"}),o.isDark(t[500].value)&&i.addClass("dark"),l.append(i),e.forEach(t,function(e,t){var r=d.clone();r.css({height:"33px",backgroundColor:"rgb("+e.value[0]+","+e.value[1]+","+e.value[2]+")"}),o.isDark(e.value)&&r.addClass("dark"),r.html(""+t+""),r.bind("click",o.setPaletteColor),l.append(r)})})})}}}]).directive("mdColorPickerHue",["mdColorGradientCanvas",function(o){return new o("hue")}]).directive("mdColorPickerAlpha",["mdColorGradientCanvas",function(o){return new o("alpha")}]).directive("mdColorPickerSpectrum",["mdColorGradientCanvas",function(o){return new o("spectrum")}]).factory("$mdColorPicker",["$q","$mdDialog","mdColorPickerHistory",function(o,e,t){var r;return{show:function(o){return void 0===o&&(o={}),o.hasBackdrop=void 0===o.hasBackdrop||o.hasBackdrop,o.clickOutsideToClose=void 0===o.clickOutsideToClose||o.clickOutsideToClose,o.defaultValue=void 0===o.defaultValue?"#FFFFFF":o.defaultValue,o.focusOnOpen=void 0!==o.focusOnOpen&&o.focusOnOpen,o.preserveScope=void 0===o.preserveScope||o.preserveScope,o.skipHide=void 0===o.skipHide||o.skipHide,o.mdColorAlphaChannel=void 0!==o.mdColorAlphaChannel&&o.mdColorAlphaChannel,o.mdColorSpectrum=void 0===o.mdColorSpectrum||o.mdColorSpectrum,o.mdColorSliders=void 0===o.mdColorSliders||o.mdColorSliders,o.mdColorGenericPalette=void 0===o.mdColorGenericPalette||o.mdColorGenericPalette,o.mdColorMaterialPalette=void 0===o.mdColorMaterialPalette||o.mdColorMaterialPalette,o.mdColorHistory=void 0===o.mdColorHistory||o.mdColorHistory,o.mdColorRgb=void 0===o.mdColorRgb||o.mdColorRgb,o.mdColorHsl=void 0===o.mdColorHsl||o.mdColorHsl,o.mdColorHex=void 0===o.mdColorHex||!o.mdColorRgb&&!o.mdColorHsl||o.mdColorHex,o.mdColorAlphaChannel=!(!o.mdColorRgb&&!o.mdColorHsl)&&o.mdColorAlphaChannel,(r=e.show({templateUrl:"views/mdColorPickerDialog.tpl.html",hasBackdrop:o.hasBackdrop,clickOutsideToClose:o.clickOutsideToClose,controller:["$scope","options",function(o,t){o.close=function(){e.cancel()},o.ok=function(){e.hide(o.value)},o.hide=o.ok,o.value=t.value,o.default=t.defaultValue,o.random=t.random,o.mdColorAlphaChannel=t.mdColorAlphaChannel,o.mdColorSpectrum=t.mdColorSpectrum,o.mdColorSliders=t.mdColorSliders,o.mdColorGenericPalette=t.mdColorGenericPalette,o.mdColorMaterialPalette=t.mdColorMaterialPalette,o.mdColorHistory=t.mdColorHistory,o.mdColorHex=t.mdColorHex,o.mdColorRgb=t.mdColorRgb,o.mdColorHsl=t.mdColorHsl,o.mdColorDefaultTab=t.mdColorDefaultTab}],locals:{options:o},preserveScope:o.preserveScope,skipHide:o.skipHide,targetEvent:o.$event,focusOnOpen:o.focusOnOpen,autoWrap:!1,onShowing:function(){},onComplete:function(){}})).then(function(o){t.add(new tinycolor(o))},function(){}),r},hide:function(){return r.hide()},cancel:function(){return r.cancel()}}}])}(window,window.angular),angular.module("mdColorPicker").run(["$templateCache",function(o){"use strict";o.put("views/mdColorPicker.tpl.html",'
'),o.put("views/mdColorPickerContainer.tpl.html",'
R
G
B
A
'),o.put("views/mdColorPickerDialog.tpl.html",'
Cancel Select ')}]); \ No newline at end of file +!function(o,e,t){"use strict";var r={hue:{getColorByPoint:function(o,e){var t=this.getImageData(o,e);return this.setMarkerCenter(e),new tinycolor({r:t[0],g:t[1],b:t[2]}).toHsl().h},draw:function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var o=this.context.createLinearGradient(90,0,90,this.height);o.addColorStop(.01,"rgba(255, 0, 0, 1.000)"),o.addColorStop(.167,"rgba(255, 0, 255, 1.000)"),o.addColorStop(.333,"rgba(0, 0, 255, 1.000)"),o.addColorStop(.5,"rgba(0, 255, 255, 1.000)"),o.addColorStop(.666,"rgba(0, 255, 0, 1.000)"),o.addColorStop(.828,"rgba(255, 255, 0, 1.000)"),o.addColorStop(.999,"rgba(255, 0, 0, 1.000)"),this.context.fillStyle=o,this.context.fillRect(0,0,this.canvas.width,this.height)}},alpha:{getColorByPoint:function(o,e){var t=this.getImageData(o,e);return this.setMarkerCenter(e),t[3]/255},draw:function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var o=this.context.createLinearGradient(90,0,90,this.height);o.addColorStop(.01,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 1.000)"),o.addColorStop(.99,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 0.000)"),this.context.fillStyle=o,this.context.fillRect(-1,-1,this.canvas.width+2,this.height+2)},extra:function(){this.$scope.$on("mdColorPicker:spectrumColorChange",e.bind(this,function(o,e){this.currentColor=e.color,this.draw()}))}},spectrum:{getColorByPoint:function(o,e){var t=this.getImageData(o,e);return this.setMarkerCenter(o,e),{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 o=this.context.createLinearGradient(0,0,this.canvas.width,0);o.addColorStop(.01,"rgba(255, 255, 255, 1.000)"),o.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=o,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(o,e){this.currentHue=e.hue,this.draw();var t=this.getMarkerCenter(),r=this.getColorByPoint(t.x,t.y);this.setColor(r)}))}}};function l(o,t){this.type=o,this.restrictX=t,this.offset={x:null,y:null},this.height=255,this.$scope=null,this.$element=null,this.get=e.bind(this,function(o,t){this.$scope=o,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",e.bind(this,this.onMouseDown)),this.$scope.$on("mdColorPicker:colorSet",e.bind(this,this.onColorSet)),this.extra&&this.extra(),this.draw()})}l.prototype.$window=e.element(o),l.prototype.getColorByMouse=function(o){var e=o.touches&&o.touches[0],t=e&&e.pageX||o.pageX,r=e&&e.pageY||o.pageY,l=Math.round(t-this.offset.x),i=Math.round(r-this.offset.y);return this.getColorByPoint(l,i)},l.prototype.setMarkerCenter=function(o,t){var r,l,i,a,n=-1*this.marker.offsetWidth/2,d=-1*this.marker.offsetHeight/2;void 0===t?(i=o+d,a=Math.round(Math.max(Math.min(this.height-1+d,i),d)),l=0):(r=o+n,i=t+d,l=Math.floor(Math.max(Math.min(this.height+n,r),n)),a=Math.floor(Math.max(Math.min(this.height+d,i),d))),e.element(this.marker).css({left:l+"px"}),e.element(this.marker).css({top:a+"px"})},l.prototype.getMarkerCenter=function(){return{x:this.marker.offsetLeft+Math.floor(this.marker.offsetWidth/2),y:this.marker.offsetTop+Math.floor(this.marker.offsetHeight/2)}},l.prototype.getImageData=function(o,e){return o=Math.max(0,Math.min(o,this.canvas.width-1)),e=Math.max(0,Math.min(e,this.canvas.height-1)),this.context.getImageData(o,e,1,1).data},l.prototype.onMouseDown=function(o){o.preventDefault(),o.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=e.bind(this,function(o){switch(this.type){case"hue":var e=this.getColorByMouse(o);this.$scope.$broadcast("mdColorPicker:spectrumHueChange",{hue:e});break;case"alpha":var t=this.getColorByMouse(o);this.$scope.color.setAlpha(t),this.$scope.alpha=t,this.$scope.$apply();break;case"spectrum":var r=this.getColorByMouse(o);this.setColor(r)}});this.$window.on("touchmove mousemove",t),this.$window.one("touchend mouseup",e.bind(this,function(){this.$window.off("touchmove mousemove",t),this.$element.css({cursor:"crosshair"})})),t(o)},l.prototype.setColor=function(o){this.$scope.color._r=o.r,this.$scope.color._g=o.g,this.$scope.color._b=o.b,this.$scope.$apply(),this.$scope.$broadcast("mdColorPicker:spectrumColorChange",{color:o})},l.prototype.onColorSet=function(o,e){var t;switch(this.type){case"hue":t=this.$scope.color.toHsv(),this.setMarkerCenter(this.canvas.height-this.canvas.height*(t.h/360));break;case"alpha":this.currentColor=e.color.toRgb(),this.draw();var r=e.color.getAlpha(),l=this.canvas.height-this.canvas.height*r;this.setMarkerCenter(l);break;case"spectrum":t=e.color.toHsv(),this.currentHue=t.h,this.draw();var i=this.canvas.width*t.s,a=this.canvas.height-this.canvas.height*t.v;this.setMarkerCenter(i,a)}},e.module("mdColorPicker",[]).run(["$templateCache",function(o){var e={clear:'',gradient:'',tune:'',view_module:'',view_headline:'',history:'',clear_all:''};for(var t in e)e.hasOwnProperty(t)&&o.put([t,"svg"].join("."),['',e[t],""].join(""))}]).factory("mdColorGradientCanvas",function(){return function(o){var t=new l(o,"spectrum"!==o);return{template:'
',link:(t=e.merge(t,r[o])).get,controller:function(){}}}}).factory("mdColorPickerHistory",["$injector",function(o){var e=[],t=[],r=!1;try{r=o.get("$cookies")}catch(o){}if(r)for(var l=r.getObject("mdColorPickerHistory")||[],i=0;ia&&(e.pop(),t.pop()),r&&r.putObject("mdColorPickerHistory",t)},get:function(){return e},reset:function(){e=[],t=[],r&&r.putObject("mdColorPickerHistory",t)}}}]).directive("mdColorPicker",["$timeout","mdColorPickerHistory",function(){return{templateUrl:"views/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(o,e,t,r,l){if(void 0!==o.options)for(var i in o.options){var a;if(o.options.hasOwnProperty(i))a=i,o.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(a="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),!a||void 0!==o[a]&&""!==o[a]||(o[a]=o.options[i])}var n=e.controller("ngModel"),d=function(e){o.value=e||n.$viewValue||""};o.mdColorClearButton=void 0===o.mdColorClearButton||o.mdColorClearButton,o.mdColorPreview=void 0===o.mdColorPreview||o.mdColorPreview,o.mdColorAlphaChannel=void 0===o.mdColorAlphaChannel||o.mdColorAlphaChannel,o.mdColorSpectrum=void 0===o.mdColorSpectrum||o.mdColorSpectrum,o.mdColorSliders=void 0===o.mdColorSliders||o.mdColorSliders,o.mdColorGenericPalette=void 0===o.mdColorGenericPalette||o.mdColorGenericPalette,o.mdColorMaterialPalette=void 0===o.mdColorMaterialPalette||o.mdColorMaterialPalette,o.mdColorHistory=void 0===o.mdColorHistory||o.mdColorHistory,o.mdColorHex=void 0===o.mdColorHex||o.mdColorHex,o.mdColorRgb=void 0===o.mdColorRgb||o.mdColorRgb,o.mdColorHsl=void 0===o.mdColorHsl||o.mdColorHsl,d(),o.$watch(function(){return n.$modelValue},function(o){d(o)}),o.$watch("value",function(e,t){""!==e&&void 0!==e&&e||o.clearValue(),e!==t&&n.$setViewValue(e)}),o.clearValue=function(){n.$setViewValue("")},o.showColorPicker=function(e){l.show({value:o.value,defaultValue:o.default,random:o.random,clickOutsideToClose:o.clickOutsideToClose,hasBackdrop:o.hasBackdrop,skipHide:o.skipHide,preserveScope:o.preserveScope,mdColorAlphaChannel:o.mdColorAlphaChannel,mdColorSpectrum:o.mdColorSpectrum,mdColorSliders:o.mdColorSliders,mdColorGenericPalette:o.mdColorGenericPalette,mdColorMaterialPalette:o.mdColorMaterialPalette,mdColorHistory:o.mdColorHistory,mdColorHex:o.mdColorHex,mdColorRgb:o.mdColorRgb,mdColorHsl:o.mdColorHsl,mdColorDefaultTab:o.mdColorDefaultTab,$event:e}).then(function(e){o.value=e})}}],compile:function(o,e){e.type=void 0!==e.type?e.type:0}}}]).directive("mdColorPickerContainer",["$compile","$timeout","$mdColorPalette","mdColorPickerHistory",function(o,t,r,l){return{templateUrl:"views/mdColorPickerContainer.tpl.html",scope:{value:"=?",default:"@",random:"@",ok:"=?",mdColorAlphaChannel:"=",mdColorSpectrum:"=",mdColorSliders:"=",mdColorGenericPalette:"=",mdColorMaterialPalette:"=",mdColorHistory:"=",mdColorHex:"=",mdColorRgb:"=",mdColorHsl:"=",mdColorDefaultTab:"="},controller:["$scope","$element",function(o,i){var a=e.element(i[0].querySelector(".md-color-picker-preview-input")),n=["toHexString","toRgbString","toHslString"];o.default=o.default?o.default:o.random?tinycolor.random():"rgb(255,255,255)",o.value.search("#")>=0?o.type=0:o.value.search("rgb")>=0?o.type=1:o.value.search("hsl")>=0&&(o.type=2),o.color=new tinycolor(o.value||o.default),o.alpha=o.color.getAlpha(),o.history=l,o.materialFamily=[],o.whichPane=function(e){var t=0;if(e&&"string"==typeof e){for(var r="mdColor"+e.slice(0,1).toUpperCase()+e.slice(1),l=["mdColorSpectrum","mdColorSliders","mdColorGenericPalette","mdColorMaterialPalette","mdColorHistory"],i=0;i
'),a=e.element('
'),n=e.element('
'),d=e.element('
'),e.forEach(o.palette,function(r){var l=i.clone();e.forEach(r,function(e){var t=a.clone();t.css({height:"25.5px",backgroundColor:e}),t.bind("click",o.setPaletteColor),l.append(t)}),t.append(l)}),e.forEach(o.materialPalette,function(t,r){var i=n.clone();i.html(""+r.replace("-"," ")+""),i.css({height:"75px",backgroundColor:"rgb("+t[500].value[0]+","+t[500].value[1]+","+t[500].value[2]+")"}),o.isDark(t[500].value)&&i.addClass("dark"),l.append(i),e.forEach(t,function(e,t){var r=d.clone();r.css({height:"33px",backgroundColor:"rgb("+e.value[0]+","+e.value[1]+","+e.value[2]+")"}),o.isDark(e.value)&&r.addClass("dark"),r.html(""+t+""),r.bind("click",o.setPaletteColor),l.append(r)})})})}}}]).directive("mdColorPickerHue",["mdColorGradientCanvas",function(o){return new o("hue")}]).directive("mdColorPickerAlpha",["mdColorGradientCanvas",function(o){return new o("alpha")}]).directive("mdColorPickerSpectrum",["mdColorGradientCanvas",function(o){return new o("spectrum")}]).factory("$mdColorPicker",["$q","$mdDialog","mdColorPickerHistory",function(o,e,t){var r;return{show:function(o){return void 0===o&&(o={}),o.hasBackdrop=void 0===o.hasBackdrop||o.hasBackdrop,o.clickOutsideToClose=void 0===o.clickOutsideToClose||o.clickOutsideToClose,o.defaultValue=void 0===o.defaultValue?"#FFFFFF":o.defaultValue,o.focusOnOpen=void 0!==o.focusOnOpen&&o.focusOnOpen,o.preserveScope=void 0===o.preserveScope||o.preserveScope,o.skipHide=void 0===o.skipHide||o.skipHide,o.mdColorAlphaChannel=void 0!==o.mdColorAlphaChannel&&o.mdColorAlphaChannel,o.mdColorSpectrum=void 0===o.mdColorSpectrum||o.mdColorSpectrum,o.mdColorSliders=void 0===o.mdColorSliders||o.mdColorSliders,o.mdColorGenericPalette=void 0===o.mdColorGenericPalette||o.mdColorGenericPalette,o.mdColorMaterialPalette=void 0===o.mdColorMaterialPalette||o.mdColorMaterialPalette,o.mdColorHistory=void 0===o.mdColorHistory||o.mdColorHistory,o.mdColorRgb=void 0===o.mdColorRgb||o.mdColorRgb,o.mdColorHsl=void 0===o.mdColorHsl||o.mdColorHsl,o.mdColorHex=void 0===o.mdColorHex||!o.mdColorRgb&&!o.mdColorHsl||o.mdColorHex,o.mdColorAlphaChannel=!(!o.mdColorRgb&&!o.mdColorHsl)&&o.mdColorAlphaChannel,(r=e.show({templateUrl:"views/mdColorPickerDialog.tpl.html",hasBackdrop:o.hasBackdrop,clickOutsideToClose:o.clickOutsideToClose,controller:["$scope","options",function(o,t){o.close=function(){e.cancel()},o.ok=function(){e.hide(o.value)},o.hide=o.ok,o.value=t.value,o.default=t.defaultValue,o.random=t.random,o.mdColorAlphaChannel=t.mdColorAlphaChannel,o.mdColorSpectrum=t.mdColorSpectrum,o.mdColorSliders=t.mdColorSliders,o.mdColorGenericPalette=t.mdColorGenericPalette,o.mdColorMaterialPalette=t.mdColorMaterialPalette,o.mdColorHistory=t.mdColorHistory,o.mdColorHex=t.mdColorHex,o.mdColorRgb=t.mdColorRgb,o.mdColorHsl=t.mdColorHsl,o.mdColorDefaultTab=t.mdColorDefaultTab}],locals:{options:o},preserveScope:o.preserveScope,skipHide:o.skipHide,targetEvent:o.$event,focusOnOpen:o.focusOnOpen,autoWrap:!1,onShowing:function(){},onComplete:function(){}})).then(function(o){t.add(new tinycolor(o))},function(){}),r},hide:function(){return r.hide()},cancel:function(){return r.cancel()}}}])}(window,window.angular),angular.module("mdColorPicker").run(["$templateCache",function(o){"use strict";o.put("views/mdColorPicker.tpl.html",'
'),o.put("views/mdColorPickerContainer.tpl.html",'
R
G
B
A
'),o.put("views/mdColorPickerDialog.tpl.html",'
Cancel Select ')}]); \ No newline at end of file diff --git a/src/scripts/mdColorPicker.js b/src/scripts/mdColorPicker.js index 4144782..a27dcc6 100644 --- a/src/scripts/mdColorPicker.js +++ b/src/scripts/mdColorPicker.js @@ -519,7 +519,10 @@ // Watch for updates to value and set them on the model $scope.$watch('value',function(newVal,oldVal) { - if (newVal !== '' && typeof newVal !== 'undefined' && newVal && newVal !== oldVal) { + if(newVal === '' || typeof newVal === 'undefined' || !newVal){ + $scope.clearValue(); + } + if (newVal !== oldVal) { ngModel.$setViewValue(newVal); } }); From 2f9e8467bdef5a30d32cb95c187d9deb354a2b36 Mon Sep 17 00:00:00 2001 From: mostafabarmshory Date: Tue, 2 Oct 2018 20:46:20 +0330 Subject: [PATCH 24/29] Update version --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index b6638a1..313ebbf 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "md-color-picker", "moduleName": "mdColorPicker", - "version": "0.2.7", + "version": "0.2.8", "authors": [ "Brian Kelley ", "Mostafa Barmshory " From 5f764191c148e81fa17fde9faabf27862eb94c3d Mon Sep 17 00:00:00 2001 From: mostafabarmshory Date: Tue, 9 Oct 2018 11:02:44 +0330 Subject: [PATCH 25/29] Update demo based on grunt build --- .directory | 6 + demo/css/style.css | 19 - demo/index.html | 81 ++- demo/js/app.js | 36 -- demo/js/tinycolor.js | 1163 ---------------------------------- demo/scripts/demo-app.js | 41 ++ src/scripts/mdColorPicker.js | 2 +- 7 files changed, 118 insertions(+), 1230 deletions(-) create mode 100644 .directory delete mode 100644 demo/css/style.css delete mode 100644 demo/js/app.js delete mode 100644 demo/js/tinycolor.js create mode 100644 demo/scripts/demo-app.js diff --git a/.directory b/.directory new file mode 100644 index 0000000..2c74fc4 --- /dev/null +++ b/.directory @@ -0,0 +1,6 @@ +[Dolphin] +Timestamp=2018,10,9,9,33,58 +Version=4 + +[Settings] +HiddenFilesShown=true diff --git a/demo/css/style.css b/demo/css/style.css deleted file mode 100644 index 4d156bf..0000000 --- a/demo/css/style.css +++ /dev/null @@ -1,19 +0,0 @@ -/* Put your css in here */ - -* { - box-sizing: border-box; -} - -.text-preview { - padding: 20px; -} - -h1, h2, h3, h4, h5, h6 { - margin: 7px 0; - color: rgb(75,125,175); -} -p, ul { - margin-top: 0; - margin-bottom: 25px; - font-size: 14px; -} diff --git a/demo/index.html b/demo/index.html index e582936..e913f3f 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,12 +1,71 @@ - - - - - - - Loading... - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + Select a color + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + diff --git a/demo/js/app.js b/demo/js/app.js deleted file mode 100644 index 5f44aed..0000000 --- a/demo/js/app.js +++ /dev/null @@ -1,36 +0,0 @@ -var app = angular.module('plunker', ['ngMaterial','ngCookies', 'mdColorPicker']); - -app.controller('MainCtrl', function($scope) { - $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; - -}); diff --git a/demo/js/tinycolor.js b/demo/js/tinycolor.js deleted file mode 100644 index 7f5a969..0000000 --- a/demo/js/tinycolor.js +++ /dev/null @@ -1,1163 +0,0 @@ -// TinyColor v1.2.1 -// https://github.com/bgrins/TinyColor -// Brian Grinstead, MIT License - -(function() { - -var trimLeft = /^[\s,#]+/, - trimRight = /\s+$/, - tinyCounter = 0, - math = Math, - mathRound = math.round, - mathMin = math.min, - mathMax = math.max, - mathRandom = math.random; - -function tinycolor (color, opts) { - - color = (color) ? color : ''; - opts = opts || { }; - - // If input is already a tinycolor, return itself - if (color instanceof tinycolor) { - return color; - } - // If we are called as a function, call using new instead - if (!(this instanceof tinycolor)) { - return new tinycolor(color, opts); - } - - var rgb = inputToRGB(color); - this._originalInput = color, - this._r = rgb.r, - this._g = rgb.g, - this._b = rgb.b, - this._a = rgb.a, - this._roundA = mathRound(100*this._a) / 100, - this._format = opts.format || rgb.format; - this._gradientType = opts.gradientType; - - // Don't let the range of [0,255] come back in [0,1]. - // Potentially lose a little bit of precision here, but will fix issues where - // .5 gets interpreted as half of the total, instead of half of 1 - // If it was supposed to be 128, this was already taken care of by `inputToRgb` - if (this._r < 1) { this._r = mathRound(this._r); } - if (this._g < 1) { this._g = mathRound(this._g); } - if (this._b < 1) { this._b = mathRound(this._b); } - - this._ok = rgb.ok; - this._tc_id = tinyCounter++; -} - -tinycolor.prototype = { - isDark: function() { - return this.getBrightness() < 128; - }, - isLight: function() { - return !this.isDark(); - }, - isValid: function() { - return this._ok; - }, - getOriginalInput: function() { - return this._originalInput; - }, - getFormat: function() { - return this._format; - }, - getAlpha: function() { - return this._a; - }, - getBrightness: function() { - //http://www.w3.org/TR/AERT#color-contrast - var rgb = this.toRgb(); - return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000; - }, - getLuminance: function() { - //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef - var rgb = this.toRgb(); - var RsRGB, GsRGB, BsRGB, R, G, B; - RsRGB = rgb.r/255; - GsRGB = rgb.g/255; - BsRGB = rgb.b/255; - - if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);} - if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);} - if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);} - return (0.2126 * R) + (0.7152 * G) + (0.0722 * B); - }, - setAlpha: function(value) { - this._a = boundAlpha(value); - this._roundA = mathRound(100*this._a) / 100; - return this; - }, - toHsv: function() { - var hsv = rgbToHsv(this._r, this._g, this._b); - return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a }; - }, - toHsvString: function() { - var hsv = rgbToHsv(this._r, this._g, this._b); - var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100); - return (this._a == 1) ? - "hsv(" + h + ", " + s + "%, " + v + "%)" : - "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")"; - }, - toHsl: function() { - var hsl = rgbToHsl(this._r, this._g, this._b); - return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a }; - }, - toHslString: function() { - var hsl = rgbToHsl(this._r, this._g, this._b); - var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100); - return (this._a == 1) ? - "hsl(" + h + ", " + s + "%, " + l + "%)" : - "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")"; - }, - toHex: function(allow3Char) { - return rgbToHex(this._r, this._g, this._b, allow3Char); - }, - toHexString: function(allow3Char) { - return '#' + this.toHex(allow3Char); - }, - toHex8: function() { - return rgbaToHex(this._r, this._g, this._b, this._a); - }, - toHex8String: function() { - return '#' + this.toHex8(); - }, - toRgb: function() { - return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a }; - }, - toRgbString: function() { - return (this._a == 1) ? - "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : - "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; - }, - toPercentageRgb: function() { - return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a }; - }, - toPercentageRgbString: function() { - return (this._a == 1) ? - "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" : - "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")"; - }, - toName: function() { - if (this._a === 0) { - return "transparent"; - } - - if (this._a < 1) { - return false; - } - - return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; - }, - toFilter: function(secondColor) { - var hex8String = '#' + rgbaToHex(this._r, this._g, this._b, this._a); - var secondHex8String = hex8String; - var gradientType = this._gradientType ? "GradientType = 1, " : ""; - - if (secondColor) { - var s = tinycolor(secondColor); - secondHex8String = s.toHex8String(); - } - - return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"; - }, - toString: function(format) { - var formatSet = !!format; - format = format || this._format; - - var formattedString = false; - var hasAlpha = this._a < 1 && this._a >= 0; - var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "name"); - - if (needsAlphaFormat) { - // Special case for "transparent", all other non-alpha formats - // will return rgba when there is transparency. - if (format === "name" && this._a === 0) { - return this.toName(); - } - return this.toRgbString(); - } - if (format === "rgb") { - formattedString = this.toRgbString(); - } - if (format === "prgb") { - formattedString = this.toPercentageRgbString(); - } - if (format === "hex" || format === "hex6") { - formattedString = this.toHexString(); - } - if (format === "hex3") { - formattedString = this.toHexString(true); - } - if (format === "hex8") { - formattedString = this.toHex8String(); - } - if (format === "name") { - formattedString = this.toName(); - } - if (format === "hsl") { - formattedString = this.toHslString(); - } - if (format === "hsv") { - formattedString = this.toHsvString(); - } - - return formattedString || this.toHexString(); - }, - - _applyModification: function(fn, args) { - var color = fn.apply(null, [this].concat([].slice.call(args))); - this._r = color._r; - this._g = color._g; - this._b = color._b; - this.setAlpha(color._a); - return this; - }, - lighten: function() { - return this._applyModification(lighten, arguments); - }, - brighten: function() { - return this._applyModification(brighten, arguments); - }, - darken: function() { - return this._applyModification(darken, arguments); - }, - desaturate: function() { - return this._applyModification(desaturate, arguments); - }, - saturate: function() { - return this._applyModification(saturate, arguments); - }, - greyscale: function() { - return this._applyModification(greyscale, arguments); - }, - spin: function() { - return this._applyModification(spin, arguments); - }, - - _applyCombination: function(fn, args) { - return fn.apply(null, [this].concat([].slice.call(args))); - }, - analogous: function() { - return this._applyCombination(analogous, arguments); - }, - complement: function() { - return this._applyCombination(complement, arguments); - }, - monochromatic: function() { - return this._applyCombination(monochromatic, arguments); - }, - splitcomplement: function() { - return this._applyCombination(splitcomplement, arguments); - }, - triad: function() { - return this._applyCombination(triad, arguments); - }, - tetrad: function() { - return this._applyCombination(tetrad, arguments); - } -}; - -// If input is an object, force 1 into "1.0" to handle ratios properly -// String input requires "1.0" as input, so 1 will be treated as 1 -tinycolor.fromRatio = function(color, opts) { - if (typeof color == "object") { - var newColor = {}; - for (var i in color) { - if (color.hasOwnProperty(i)) { - if (i === "a") { - newColor[i] = color[i]; - } - else { - newColor[i] = convertToPercentage(color[i]); - } - } - } - color = newColor; - } - - return tinycolor(color, opts); -}; - -// Given a string or object, convert that input to RGB -// Possible string inputs: -// -// "red" -// "#f00" or "f00" -// "#ff0000" or "ff0000" -// "#ff000000" or "ff000000" -// "rgb 255 0 0" or "rgb (255, 0, 0)" -// "rgb 1.0 0 0" or "rgb (1, 0, 0)" -// "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1" -// "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1" -// "hsl(0, 100%, 50%)" or "hsl 0 100% 50%" -// "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1" -// "hsv(0, 100%, 100%)" or "hsv 0 100% 100%" -// -function inputToRGB(color) { - - var rgb = { r: 0, g: 0, b: 0 }; - var a = 1; - var ok = false; - var format = false; - - if (typeof color == "string") { - color = stringInputToObject(color); - } - - if (typeof color == "object") { - if (color.hasOwnProperty("r") && color.hasOwnProperty("g") && color.hasOwnProperty("b")) { - rgb = rgbToRgb(color.r, color.g, color.b); - ok = true; - format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; - } - else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("v")) { - color.s = convertToPercentage(color.s); - color.v = convertToPercentage(color.v); - rgb = hsvToRgb(color.h, color.s, color.v); - ok = true; - format = "hsv"; - } - else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("l")) { - color.s = convertToPercentage(color.s); - color.l = convertToPercentage(color.l); - rgb = hslToRgb(color.h, color.s, color.l); - ok = true; - format = "hsl"; - } - - if (color.hasOwnProperty("a")) { - a = color.a; - } - } - - a = boundAlpha(a); - - return { - ok: ok, - format: color.format || format, - r: mathMin(255, mathMax(rgb.r, 0)), - g: mathMin(255, mathMax(rgb.g, 0)), - b: mathMin(255, mathMax(rgb.b, 0)), - a: a - }; -} - - -// Conversion Functions -// -------------------- - -// `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from: -// - -// `rgbToRgb` -// Handle bounds / percentage checking to conform to CSS color spec -// -// *Assumes:* r, g, b in [0, 255] or [0, 1] -// *Returns:* { r, g, b } in [0, 255] -function rgbToRgb(r, g, b){ - return { - r: bound01(r, 255) * 255, - g: bound01(g, 255) * 255, - b: bound01(b, 255) * 255 - }; -} - -// `rgbToHsl` -// Converts an RGB color value to HSL. -// *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] -// *Returns:* { h, s, l } in [0,1] -function rgbToHsl(r, g, b) { - - r = bound01(r, 255); - g = bound01(g, 255); - b = bound01(b, 255); - - var max = mathMax(r, g, b), min = mathMin(r, g, b); - var h, s, l = (max + min) / 2; - - if(max == min) { - h = s = 0; // achromatic - } - else { - var d = max - min; - s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - switch(max) { - case r: h = (g - b) / d + (g < b ? 6 : 0); break; - case g: h = (b - r) / d + 2; break; - case b: h = (r - g) / d + 4; break; - } - - h /= 6; - } - - return { h: h, s: s, l: l }; -} - -// `hslToRgb` -// Converts an HSL color value to RGB. -// *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100] -// *Returns:* { r, g, b } in the set [0, 255] -function hslToRgb(h, s, l) { - var r, g, b; - - h = bound01(h, 360); - s = bound01(s, 100); - l = bound01(l, 100); - - function hue2rgb(p, q, t) { - if(t < 0) t += 1; - if(t > 1) t -= 1; - if(t < 1/6) return p + (q - p) * 6 * t; - if(t < 1/2) return q; - if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; - return p; - } - - if(s === 0) { - r = g = b = l; // achromatic - } - else { - var q = l < 0.5 ? l * (1 + s) : l + s - l * s; - var p = 2 * l - q; - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); - } - - return { r: r * 255, g: g * 255, b: b * 255 }; -} - -// `rgbToHsv` -// Converts an RGB color value to HSV -// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] -// *Returns:* { h, s, v } in [0,1] -function rgbToHsv(r, g, b) { - - r = bound01(r, 255); - g = bound01(g, 255); - b = bound01(b, 255); - - var max = mathMax(r, g, b), min = mathMin(r, g, b); - var h, s, v = max; - - var d = max - min; - s = max === 0 ? 0 : d / max; - - if(max == min) { - h = 0; // achromatic - } - else { - switch(max) { - case r: h = (g - b) / d + (g < b ? 6 : 0); break; - case g: h = (b - r) / d + 2; break; - case b: h = (r - g) / d + 4; break; - } - h /= 6; - } - return { h: h, s: s, v: v }; -} - -// `hsvToRgb` -// Converts an HSV color value to RGB. -// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100] -// *Returns:* { r, g, b } in the set [0, 255] - function hsvToRgb(h, s, v) { - - h = bound01(h, 360) * 6; - s = bound01(s, 100); - v = bound01(v, 100); - - var i = math.floor(h), - f = h - i, - p = v * (1 - s), - q = v * (1 - f * s), - t = v * (1 - (1 - f) * s), - mod = i % 6, - r = [v, q, p, p, t, v][mod], - g = [t, v, v, q, p, p][mod], - b = [p, p, t, v, v, q][mod]; - - return { r: r * 255, g: g * 255, b: b * 255 }; -} - -// `rgbToHex` -// Converts an RGB color to hex -// Assumes r, g, and b are contained in the set [0, 255] -// Returns a 3 or 6 character hex -function rgbToHex(r, g, b, allow3Char) { - - var hex = [ - pad2(mathRound(r).toString(16)), - pad2(mathRound(g).toString(16)), - pad2(mathRound(b).toString(16)) - ]; - - // Return a 3 character hex if possible - if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) { - return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); - } - - return hex.join(""); -} - -// `rgbaToHex` -// Converts an RGBA color plus alpha transparency to hex -// Assumes r, g, b and a are contained in the set [0, 255] -// Returns an 8 character hex -function rgbaToHex(r, g, b, a) { - - var hex = [ - pad2(convertDecimalToHex(a)), - pad2(mathRound(r).toString(16)), - pad2(mathRound(g).toString(16)), - pad2(mathRound(b).toString(16)) - ]; - - return hex.join(""); -} - -// `equals` -// Can be called with any tinycolor input -tinycolor.equals = function (color1, color2) { - if (!color1 || !color2) { return false; } - return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); -}; - -tinycolor.random = function() { - return tinycolor.fromRatio({ - r: mathRandom(), - g: mathRandom(), - b: mathRandom() - }); -}; - - -// Modification Functions -// ---------------------- -// Thanks to less.js for some of the basics here -// - -function desaturate(color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.s -= amount / 100; - hsl.s = clamp01(hsl.s); - return tinycolor(hsl); -} - -function saturate(color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.s += amount / 100; - hsl.s = clamp01(hsl.s); - return tinycolor(hsl); -} - -function greyscale(color) { - return tinycolor(color).desaturate(100); -} - -function lighten (color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.l += amount / 100; - hsl.l = clamp01(hsl.l); - return tinycolor(hsl); -} - -function brighten(color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var rgb = tinycolor(color).toRgb(); - rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); - rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); - rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); - return tinycolor(rgb); -} - -function darken (color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.l -= amount / 100; - hsl.l = clamp01(hsl.l); - return tinycolor(hsl); -} - -// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue. -// Values outside of this range will be wrapped into this range. -function spin(color, amount) { - var hsl = tinycolor(color).toHsl(); - var hue = (mathRound(hsl.h) + amount) % 360; - hsl.h = hue < 0 ? 360 + hue : hue; - return tinycolor(hsl); -} - -// Combination Functions -// --------------------- -// Thanks to jQuery xColor for some of the ideas behind these -// - -function complement(color) { - var hsl = tinycolor(color).toHsl(); - hsl.h = (hsl.h + 180) % 360; - return tinycolor(hsl); -} - -function triad(color) { - var hsl = tinycolor(color).toHsl(); - var h = hsl.h; - return [ - tinycolor(color), - tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), - tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }) - ]; -} - -function tetrad(color) { - var hsl = tinycolor(color).toHsl(); - var h = hsl.h; - return [ - tinycolor(color), - tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), - tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), - tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }) - ]; -} - -function splitcomplement(color) { - var hsl = tinycolor(color).toHsl(); - var h = hsl.h; - return [ - tinycolor(color), - tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}), - tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l}) - ]; -} - -function analogous(color, results, slices) { - results = results || 6; - slices = slices || 30; - - var hsl = tinycolor(color).toHsl(); - var part = 360 / slices; - var ret = [tinycolor(color)]; - - for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) { - hsl.h = (hsl.h + part) % 360; - ret.push(tinycolor(hsl)); - } - return ret; -} - -function monochromatic(color, results) { - results = results || 6; - var hsv = tinycolor(color).toHsv(); - var h = hsv.h, s = hsv.s, v = hsv.v; - var ret = []; - var modification = 1 / results; - - while (results--) { - ret.push(tinycolor({ h: h, s: s, v: v})); - v = (v + modification) % 1; - } - - return ret; -} - -// Utility Functions -// --------------------- - -tinycolor.mix = function(color1, color2, amount) { - amount = (amount === 0) ? 0 : (amount || 50); - - var rgb1 = tinycolor(color1).toRgb(); - var rgb2 = tinycolor(color2).toRgb(); - - var p = amount / 100; - var w = p * 2 - 1; - var a = rgb2.a - rgb1.a; - - var w1; - - if (w * a == -1) { - w1 = w; - } else { - w1 = (w + a) / (1 + w * a); - } - - w1 = (w1 + 1) / 2; - - var w2 = 1 - w1; - - var rgba = { - r: rgb2.r * w1 + rgb1.r * w2, - g: rgb2.g * w1 + rgb1.g * w2, - b: rgb2.b * w1 + rgb1.b * w2, - a: rgb2.a * p + rgb1.a * (1 - p) - }; - - return tinycolor(rgba); -}; - - -// Readability Functions -// --------------------- -// false -// tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false -tinycolor.isReadable = function(color1, color2, wcag2) { - var readability = tinycolor.readability(color1, color2); - var wcag2Parms, out; - - out = false; - - wcag2Parms = validateWCAG2Parms(wcag2); - switch (wcag2Parms.level + wcag2Parms.size) { - case "AAsmall": - case "AAAlarge": - out = readability >= 4.5; - break; - case "AAlarge": - out = readability >= 3; - break; - case "AAAsmall": - out = readability >= 7; - break; - } - return out; - -}; - -// `mostReadable` -// Given a base color and a list of possible foreground or background -// colors for that base, returns the most readable color. -// Optionally returns Black or White if the most readable color is unreadable. -// *Example* -// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255" -// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff" -// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3" -// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff" -tinycolor.mostReadable = function(baseColor, colorList, args) { - var bestColor = null; - var bestScore = 0; - var readability; - var includeFallbackColors, level, size ; - args = args || {}; - includeFallbackColors = args.includeFallbackColors ; - level = args.level; - size = args.size; - - for (var i= 0; i < colorList.length ; i++) { - readability = tinycolor.readability(baseColor, colorList[i]); - if (readability > bestScore) { - bestScore = readability; - bestColor = tinycolor(colorList[i]); - } - } - - if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) { - return bestColor; - } - else { - args.includeFallbackColors=false; - return tinycolor.mostReadable(baseColor,["#fff", "#000"],args); - } -}; - - -// Big List of Colors -// ------------------ -// -var names = tinycolor.names = { - aliceblue: "f0f8ff", - antiquewhite: "faebd7", - aqua: "0ff", - aquamarine: "7fffd4", - azure: "f0ffff", - beige: "f5f5dc", - bisque: "ffe4c4", - black: "000", - blanchedalmond: "ffebcd", - blue: "00f", - blueviolet: "8a2be2", - brown: "a52a2a", - burlywood: "deb887", - burntsienna: "ea7e5d", - cadetblue: "5f9ea0", - chartreuse: "7fff00", - chocolate: "d2691e", - coral: "ff7f50", - cornflowerblue: "6495ed", - cornsilk: "fff8dc", - crimson: "dc143c", - cyan: "0ff", - darkblue: "00008b", - darkcyan: "008b8b", - darkgoldenrod: "b8860b", - darkgray: "a9a9a9", - darkgreen: "006400", - darkgrey: "a9a9a9", - darkkhaki: "bdb76b", - darkmagenta: "8b008b", - darkolivegreen: "556b2f", - darkorange: "ff8c00", - darkorchid: "9932cc", - darkred: "8b0000", - darksalmon: "e9967a", - darkseagreen: "8fbc8f", - darkslateblue: "483d8b", - darkslategray: "2f4f4f", - darkslategrey: "2f4f4f", - darkturquoise: "00ced1", - darkviolet: "9400d3", - deeppink: "ff1493", - deepskyblue: "00bfff", - dimgray: "696969", - dimgrey: "696969", - dodgerblue: "1e90ff", - firebrick: "b22222", - floralwhite: "fffaf0", - forestgreen: "228b22", - fuchsia: "f0f", - gainsboro: "dcdcdc", - ghostwhite: "f8f8ff", - gold: "ffd700", - goldenrod: "daa520", - gray: "808080", - green: "008000", - greenyellow: "adff2f", - grey: "808080", - honeydew: "f0fff0", - hotpink: "ff69b4", - indianred: "cd5c5c", - indigo: "4b0082", - ivory: "fffff0", - khaki: "f0e68c", - lavender: "e6e6fa", - lavenderblush: "fff0f5", - lawngreen: "7cfc00", - lemonchiffon: "fffacd", - lightblue: "add8e6", - lightcoral: "f08080", - lightcyan: "e0ffff", - lightgoldenrodyellow: "fafad2", - lightgray: "d3d3d3", - lightgreen: "90ee90", - lightgrey: "d3d3d3", - lightpink: "ffb6c1", - lightsalmon: "ffa07a", - lightseagreen: "20b2aa", - lightskyblue: "87cefa", - lightslategray: "789", - lightslategrey: "789", - lightsteelblue: "b0c4de", - lightyellow: "ffffe0", - lime: "0f0", - limegreen: "32cd32", - linen: "faf0e6", - magenta: "f0f", - maroon: "800000", - mediumaquamarine: "66cdaa", - mediumblue: "0000cd", - mediumorchid: "ba55d3", - mediumpurple: "9370db", - mediumseagreen: "3cb371", - mediumslateblue: "7b68ee", - mediumspringgreen: "00fa9a", - mediumturquoise: "48d1cc", - mediumvioletred: "c71585", - midnightblue: "191970", - mintcream: "f5fffa", - mistyrose: "ffe4e1", - moccasin: "ffe4b5", - navajowhite: "ffdead", - navy: "000080", - oldlace: "fdf5e6", - olive: "808000", - olivedrab: "6b8e23", - orange: "ffa500", - orangered: "ff4500", - orchid: "da70d6", - palegoldenrod: "eee8aa", - palegreen: "98fb98", - paleturquoise: "afeeee", - palevioletred: "db7093", - papayawhip: "ffefd5", - peachpuff: "ffdab9", - peru: "cd853f", - pink: "ffc0cb", - plum: "dda0dd", - powderblue: "b0e0e6", - purple: "800080", - rebeccapurple: "663399", - red: "f00", - rosybrown: "bc8f8f", - royalblue: "4169e1", - saddlebrown: "8b4513", - salmon: "fa8072", - sandybrown: "f4a460", - seagreen: "2e8b57", - seashell: "fff5ee", - sienna: "a0522d", - silver: "c0c0c0", - skyblue: "87ceeb", - slateblue: "6a5acd", - slategray: "708090", - slategrey: "708090", - snow: "fffafa", - springgreen: "00ff7f", - steelblue: "4682b4", - tan: "d2b48c", - teal: "008080", - thistle: "d8bfd8", - tomato: "ff6347", - turquoise: "40e0d0", - violet: "ee82ee", - wheat: "f5deb3", - white: "fff", - whitesmoke: "f5f5f5", - yellow: "ff0", - yellowgreen: "9acd32" -}; - -// Make it easy to access colors via `hexNames[hex]` -var hexNames = tinycolor.hexNames = flip(names); - - -// Utilities -// --------- - -// `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }` -function flip(o) { - var flipped = { }; - for (var i in o) { - if (o.hasOwnProperty(i)) { - flipped[o[i]] = i; - } - } - return flipped; -} - -// Return a valid alpha value [0,1] with all invalid values being set to 1 -function boundAlpha(a) { - a = parseFloat(a); - - if (isNaN(a) || a < 0 || a > 1) { - a = 1; - } - - return a; -} - -// Take input from [0, n] and return it as [0, 1] -function bound01(n, max) { - if (isOnePointZero(n)) { n = "100%"; } - - var processPercent = isPercentage(n); - n = mathMin(max, mathMax(0, parseFloat(n))); - - // Automatically convert percentage into number - if (processPercent) { - n = parseInt(n * max, 10) / 100; - } - - // Handle floating point rounding errors - if ((math.abs(n - max) < 0.000001)) { - return 1; - } - - // Convert into [0, 1] range if it isn't already - return (n % max) / parseFloat(max); -} - -// Force a number between 0 and 1 -function clamp01(val) { - return mathMin(1, mathMax(0, val)); -} - -// Parse a base-16 hex value into a base-10 integer -function parseIntFromHex(val) { - return parseInt(val, 16); -} - -// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 -// -function isOnePointZero(n) { - return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1; -} - -// Check to see if string passed in is a percentage -function isPercentage(n) { - return typeof n === "string" && n.indexOf('%') != -1; -} - -// Force a hex value to have 2 characters -function pad2(c) { - return c.length == 1 ? '0' + c : '' + c; -} - -// Replace a decimal with it's percentage value -function convertToPercentage(n) { - if (n <= 1) { - n = (n * 100) + "%"; - } - - return n; -} - -// Converts a decimal to a hex value -function convertDecimalToHex(d) { - return Math.round(parseFloat(d) * 255).toString(16); -} -// Converts a hex value to a decimal -function convertHexToDecimal(h) { - return (parseIntFromHex(h) / 255); -} - -var matchers = (function() { - - // - var CSS_INTEGER = "[-\\+]?\\d+%?"; - - // - var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; - - // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. - var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; - - // Actual matching. - // Parentheses and commas are optional, but not required. - // Whitespace can take the place of commas or opening paren - var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; - var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; - - return { - rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), - rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), - hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), - hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), - hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), - hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), - hex3: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, - hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, - hex8: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ - }; -})(); - -// `stringInputToObject` -// Permissive string parsing. Take in a number of formats, and output an object -// based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}` -function stringInputToObject(color) { - - color = color.replace(trimLeft,'').replace(trimRight, '').toLowerCase(); - var named = false; - if (names[color]) { - color = names[color]; - named = true; - } - else if (color == 'transparent') { - return { r: 0, g: 0, b: 0, a: 0, format: "name" }; - } - - // Try to match string input using regular expressions. - // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] - // Just return an object and let the conversion functions handle that. - // This way the result will be the same whether the tinycolor is initialized with string or object. - var match; - if ((match = matchers.rgb.exec(color))) { - return { r: match[1], g: match[2], b: match[3] }; - } - if ((match = matchers.rgba.exec(color))) { - return { r: match[1], g: match[2], b: match[3], a: match[4] }; - } - if ((match = matchers.hsl.exec(color))) { - return { h: match[1], s: match[2], l: match[3] }; - } - if ((match = matchers.hsla.exec(color))) { - return { h: match[1], s: match[2], l: match[3], a: match[4] }; - } - if ((match = matchers.hsv.exec(color))) { - return { h: match[1], s: match[2], v: match[3] }; - } - if ((match = matchers.hsva.exec(color))) { - return { h: match[1], s: match[2], v: match[3], a: match[4] }; - } - if ((match = matchers.hex8.exec(color))) { - return { - a: convertHexToDecimal(match[1]), - r: parseIntFromHex(match[2]), - g: parseIntFromHex(match[3]), - b: parseIntFromHex(match[4]), - format: named ? "name" : "hex8" - }; - } - if ((match = matchers.hex6.exec(color))) { - return { - r: parseIntFromHex(match[1]), - g: parseIntFromHex(match[2]), - b: parseIntFromHex(match[3]), - format: named ? "name" : "hex" - }; - } - if ((match = matchers.hex3.exec(color))) { - return { - r: parseIntFromHex(match[1] + '' + match[1]), - g: parseIntFromHex(match[2] + '' + match[2]), - b: parseIntFromHex(match[3] + '' + match[3]), - format: named ? "name" : "hex" - }; - } - - return false; -} - -function validateWCAG2Parms(parms) { - // return valid WCAG2 parms for isReadable. - // If input parms are invalid, return {"level":"AA", "size":"small"} - var level, size; - parms = parms || {"level":"AA", "size":"small"}; - level = (parms.level || "AA").toUpperCase(); - size = (parms.size || "small").toLowerCase(); - if (level !== "AA" && level !== "AAA") { - level = "AA"; - } - if (size !== "small" && size !== "large") { - size = "small"; - } - return {"level":level, "size":size}; -} - -// Node: Export function -if (typeof module !== "undefined" && module.exports) { - module.exports = tinycolor; -} -// AMD/requirejs: Define the module -else if (typeof define === 'function' && define.amd) { - define(function () {return tinycolor;}); -} -// Browser: Expose to window -else { - window.tinycolor = tinycolor; -} - -})(); diff --git a/demo/scripts/demo-app.js b/demo/scripts/demo-app.js new file mode 100644 index 0000000..4b182b3 --- /dev/null +++ b/demo/scripts/demo-app.js @@ -0,0 +1,41 @@ +/* + * The MIT License (MIT) + * + * Copyright (c) 2016 weburger + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +'use strict'; + +/** + * @ngdoc module + * @name ngDonate + * @description + * + */ +angular.module('mdColorPickerDemo', [ 'mdColorPicker'])// +.controller('MyTestCtrl', function() { + + function selectColor() { + + } + + this.selectColor = selectColor; +}); + diff --git a/src/scripts/mdColorPicker.js b/src/scripts/mdColorPicker.js index a27dcc6..8f91d48 100644 --- a/src/scripts/mdColorPicker.js +++ b/src/scripts/mdColorPicker.js @@ -343,7 +343,7 @@ - angular.module('mdColorPicker', []) + angular.module('mdColorPicker', ['ngMaterial', 'ngMessages']) .run(['$templateCache', function ($templateCache) { //icon resource should not be dependent //credit to materialdesignicons.com From 63ed292e3ed9c4338b8d4bb9a24051de91ab3c00 Mon Sep 17 00:00:00 2001 From: mostafabarmshory Date: Tue, 9 Oct 2018 11:10:05 +0330 Subject: [PATCH 26/29] Update grunt build process --- .jshintrc | 1 - Gruntfile.js | 6 +++--- dist/md-color-picker.js | 17 +++++++++-------- dist/md-color-picker.min.js | 2 +- src/scripts/mdColorPicker.js | 15 ++++++++------- 5 files changed, 21 insertions(+), 20 deletions(-) diff --git a/.jshintrc b/.jshintrc index abe3986..b3f6302 100644 --- a/.jshintrc +++ b/.jshintrc @@ -11,7 +11,6 @@ "undef": true, "unused": true, "-W100": true, - "esversion": 6, "globals": { "angular": false, "jsPanel": false, diff --git a/Gruntfile.js b/Gruntfile.js index c291fb5..158e180 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -670,8 +670,8 @@ module.exports = function(grunt) { 'wiredep', // 'injector', // 'concurrent:test', // - 'postcss:server', // - 'karma:unit' // + 'postcss:server' // +// 'karma:unit' // ]); grunt.registerTask('debug', [ // @@ -702,7 +702,7 @@ module.exports = function(grunt) { 'newer:jshint', // 'newer:jscs', // 'newer:eslint', // - 'test', // +// 'test', // 'build' ]); diff --git a/dist/md-color-picker.js b/dist/md-color-picker.js index f933475..f97214c 100644 --- a/dist/md-color-picker.js +++ b/dist/md-color-picker.js @@ -3,6 +3,7 @@ 'use strict'; // var dateClick; + var TinyColor = tinycolor; var canvasTypes = { @@ -10,8 +11,8 @@ getColorByPoint: function( x, y ) { var imageData = this.getImageData( x, y ); this.setMarkerCenter( y ); - - var hsl = new tinycolor( {r: imageData[0], g: imageData[1], b: imageData[2] } ); + + var hsl = new TinyColor( {r: imageData[0], g: imageData[1], b: imageData[2] } ); return hsl.toHsl().h; }, draw: function() { @@ -343,7 +344,7 @@ - angular.module('mdColorPicker', []) + angular.module('mdColorPicker', ['ngMaterial', 'ngMessages']) .run(['$templateCache', function ($templateCache) { //icon resource should not be dependent //credit to materialdesignicons.com @@ -646,7 +647,7 @@ } else if ( $scope.value.search('hsl') >= 0 ) { $scope.type = 2; } - $scope.color = new tinycolor($scope.value || $scope.default); // Set initial color + $scope.color = new TinyColor($scope.value || $scope.default); // Set initial color $scope.alpha = $scope.color.getAlpha(); $scope.history = colorHistory; $scope.materialFamily = []; @@ -856,9 +857,9 @@ }; }]) - .directive( 'mdColorPickerHue', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('hue'); }]) - .directive( 'mdColorPickerAlpha', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('alpha'); }]) - .directive( 'mdColorPickerSpectrum', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('spectrum'); }]) + .directive( 'mdColorPickerHue', ['mdColorGradientCanvas', function( MdColorGradientCanvas ) { return new MdColorGradientCanvas('hue'); }]) + .directive( 'mdColorPickerAlpha', ['mdColorGradientCanvas', function( MdColorGradientCanvas ) { return new MdColorGradientCanvas('alpha'); }]) + .directive( 'mdColorPickerSpectrum', ['mdColorGradientCanvas', function( MdColorGradientCanvas ) { return new MdColorGradientCanvas('spectrum'); }]) .factory('$mdColorPicker', ['$q', '$mdDialog', 'mdColorPickerHistory', function ($q, $mdDialog, colorHistory) { var dialog; @@ -945,7 +946,7 @@ }); dialog.then(function (value) { - colorHistory.add(new tinycolor(value)); + colorHistory.add(new TinyColor(value)); }, function () { }); return dialog; diff --git a/dist/md-color-picker.min.js b/dist/md-color-picker.min.js index 2ea1784..c7f5ed9 100644 --- a/dist/md-color-picker.min.js +++ b/dist/md-color-picker.min.js @@ -1 +1 @@ -!function(o,e,t){"use strict";var r={hue:{getColorByPoint:function(o,e){var t=this.getImageData(o,e);return this.setMarkerCenter(e),new tinycolor({r:t[0],g:t[1],b:t[2]}).toHsl().h},draw:function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var o=this.context.createLinearGradient(90,0,90,this.height);o.addColorStop(.01,"rgba(255, 0, 0, 1.000)"),o.addColorStop(.167,"rgba(255, 0, 255, 1.000)"),o.addColorStop(.333,"rgba(0, 0, 255, 1.000)"),o.addColorStop(.5,"rgba(0, 255, 255, 1.000)"),o.addColorStop(.666,"rgba(0, 255, 0, 1.000)"),o.addColorStop(.828,"rgba(255, 255, 0, 1.000)"),o.addColorStop(.999,"rgba(255, 0, 0, 1.000)"),this.context.fillStyle=o,this.context.fillRect(0,0,this.canvas.width,this.height)}},alpha:{getColorByPoint:function(o,e){var t=this.getImageData(o,e);return this.setMarkerCenter(e),t[3]/255},draw:function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var o=this.context.createLinearGradient(90,0,90,this.height);o.addColorStop(.01,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 1.000)"),o.addColorStop(.99,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 0.000)"),this.context.fillStyle=o,this.context.fillRect(-1,-1,this.canvas.width+2,this.height+2)},extra:function(){this.$scope.$on("mdColorPicker:spectrumColorChange",e.bind(this,function(o,e){this.currentColor=e.color,this.draw()}))}},spectrum:{getColorByPoint:function(o,e){var t=this.getImageData(o,e);return this.setMarkerCenter(o,e),{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 o=this.context.createLinearGradient(0,0,this.canvas.width,0);o.addColorStop(.01,"rgba(255, 255, 255, 1.000)"),o.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=o,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(o,e){this.currentHue=e.hue,this.draw();var t=this.getMarkerCenter(),r=this.getColorByPoint(t.x,t.y);this.setColor(r)}))}}};function l(o,t){this.type=o,this.restrictX=t,this.offset={x:null,y:null},this.height=255,this.$scope=null,this.$element=null,this.get=e.bind(this,function(o,t){this.$scope=o,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",e.bind(this,this.onMouseDown)),this.$scope.$on("mdColorPicker:colorSet",e.bind(this,this.onColorSet)),this.extra&&this.extra(),this.draw()})}l.prototype.$window=e.element(o),l.prototype.getColorByMouse=function(o){var e=o.touches&&o.touches[0],t=e&&e.pageX||o.pageX,r=e&&e.pageY||o.pageY,l=Math.round(t-this.offset.x),i=Math.round(r-this.offset.y);return this.getColorByPoint(l,i)},l.prototype.setMarkerCenter=function(o,t){var r,l,i,a,n=-1*this.marker.offsetWidth/2,d=-1*this.marker.offsetHeight/2;void 0===t?(i=o+d,a=Math.round(Math.max(Math.min(this.height-1+d,i),d)),l=0):(r=o+n,i=t+d,l=Math.floor(Math.max(Math.min(this.height+n,r),n)),a=Math.floor(Math.max(Math.min(this.height+d,i),d))),e.element(this.marker).css({left:l+"px"}),e.element(this.marker).css({top:a+"px"})},l.prototype.getMarkerCenter=function(){return{x:this.marker.offsetLeft+Math.floor(this.marker.offsetWidth/2),y:this.marker.offsetTop+Math.floor(this.marker.offsetHeight/2)}},l.prototype.getImageData=function(o,e){return o=Math.max(0,Math.min(o,this.canvas.width-1)),e=Math.max(0,Math.min(e,this.canvas.height-1)),this.context.getImageData(o,e,1,1).data},l.prototype.onMouseDown=function(o){o.preventDefault(),o.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=e.bind(this,function(o){switch(this.type){case"hue":var e=this.getColorByMouse(o);this.$scope.$broadcast("mdColorPicker:spectrumHueChange",{hue:e});break;case"alpha":var t=this.getColorByMouse(o);this.$scope.color.setAlpha(t),this.$scope.alpha=t,this.$scope.$apply();break;case"spectrum":var r=this.getColorByMouse(o);this.setColor(r)}});this.$window.on("touchmove mousemove",t),this.$window.one("touchend mouseup",e.bind(this,function(){this.$window.off("touchmove mousemove",t),this.$element.css({cursor:"crosshair"})})),t(o)},l.prototype.setColor=function(o){this.$scope.color._r=o.r,this.$scope.color._g=o.g,this.$scope.color._b=o.b,this.$scope.$apply(),this.$scope.$broadcast("mdColorPicker:spectrumColorChange",{color:o})},l.prototype.onColorSet=function(o,e){var t;switch(this.type){case"hue":t=this.$scope.color.toHsv(),this.setMarkerCenter(this.canvas.height-this.canvas.height*(t.h/360));break;case"alpha":this.currentColor=e.color.toRgb(),this.draw();var r=e.color.getAlpha(),l=this.canvas.height-this.canvas.height*r;this.setMarkerCenter(l);break;case"spectrum":t=e.color.toHsv(),this.currentHue=t.h,this.draw();var i=this.canvas.width*t.s,a=this.canvas.height-this.canvas.height*t.v;this.setMarkerCenter(i,a)}},e.module("mdColorPicker",[]).run(["$templateCache",function(o){var e={clear:'',gradient:'',tune:'',view_module:'',view_headline:'',history:'',clear_all:''};for(var t in e)e.hasOwnProperty(t)&&o.put([t,"svg"].join("."),['',e[t],""].join(""))}]).factory("mdColorGradientCanvas",function(){return function(o){var t=new l(o,"spectrum"!==o);return{template:'
',link:(t=e.merge(t,r[o])).get,controller:function(){}}}}).factory("mdColorPickerHistory",["$injector",function(o){var e=[],t=[],r=!1;try{r=o.get("$cookies")}catch(o){}if(r)for(var l=r.getObject("mdColorPickerHistory")||[],i=0;ia&&(e.pop(),t.pop()),r&&r.putObject("mdColorPickerHistory",t)},get:function(){return e},reset:function(){e=[],t=[],r&&r.putObject("mdColorPickerHistory",t)}}}]).directive("mdColorPicker",["$timeout","mdColorPickerHistory",function(){return{templateUrl:"views/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(o,e,t,r,l){if(void 0!==o.options)for(var i in o.options){var a;if(o.options.hasOwnProperty(i))a=i,o.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(a="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),!a||void 0!==o[a]&&""!==o[a]||(o[a]=o.options[i])}var n=e.controller("ngModel"),d=function(e){o.value=e||n.$viewValue||""};o.mdColorClearButton=void 0===o.mdColorClearButton||o.mdColorClearButton,o.mdColorPreview=void 0===o.mdColorPreview||o.mdColorPreview,o.mdColorAlphaChannel=void 0===o.mdColorAlphaChannel||o.mdColorAlphaChannel,o.mdColorSpectrum=void 0===o.mdColorSpectrum||o.mdColorSpectrum,o.mdColorSliders=void 0===o.mdColorSliders||o.mdColorSliders,o.mdColorGenericPalette=void 0===o.mdColorGenericPalette||o.mdColorGenericPalette,o.mdColorMaterialPalette=void 0===o.mdColorMaterialPalette||o.mdColorMaterialPalette,o.mdColorHistory=void 0===o.mdColorHistory||o.mdColorHistory,o.mdColorHex=void 0===o.mdColorHex||o.mdColorHex,o.mdColorRgb=void 0===o.mdColorRgb||o.mdColorRgb,o.mdColorHsl=void 0===o.mdColorHsl||o.mdColorHsl,d(),o.$watch(function(){return n.$modelValue},function(o){d(o)}),o.$watch("value",function(e,t){""!==e&&void 0!==e&&e||o.clearValue(),e!==t&&n.$setViewValue(e)}),o.clearValue=function(){n.$setViewValue("")},o.showColorPicker=function(e){l.show({value:o.value,defaultValue:o.default,random:o.random,clickOutsideToClose:o.clickOutsideToClose,hasBackdrop:o.hasBackdrop,skipHide:o.skipHide,preserveScope:o.preserveScope,mdColorAlphaChannel:o.mdColorAlphaChannel,mdColorSpectrum:o.mdColorSpectrum,mdColorSliders:o.mdColorSliders,mdColorGenericPalette:o.mdColorGenericPalette,mdColorMaterialPalette:o.mdColorMaterialPalette,mdColorHistory:o.mdColorHistory,mdColorHex:o.mdColorHex,mdColorRgb:o.mdColorRgb,mdColorHsl:o.mdColorHsl,mdColorDefaultTab:o.mdColorDefaultTab,$event:e}).then(function(e){o.value=e})}}],compile:function(o,e){e.type=void 0!==e.type?e.type:0}}}]).directive("mdColorPickerContainer",["$compile","$timeout","$mdColorPalette","mdColorPickerHistory",function(o,t,r,l){return{templateUrl:"views/mdColorPickerContainer.tpl.html",scope:{value:"=?",default:"@",random:"@",ok:"=?",mdColorAlphaChannel:"=",mdColorSpectrum:"=",mdColorSliders:"=",mdColorGenericPalette:"=",mdColorMaterialPalette:"=",mdColorHistory:"=",mdColorHex:"=",mdColorRgb:"=",mdColorHsl:"=",mdColorDefaultTab:"="},controller:["$scope","$element",function(o,i){var a=e.element(i[0].querySelector(".md-color-picker-preview-input")),n=["toHexString","toRgbString","toHslString"];o.default=o.default?o.default:o.random?tinycolor.random():"rgb(255,255,255)",o.value.search("#")>=0?o.type=0:o.value.search("rgb")>=0?o.type=1:o.value.search("hsl")>=0&&(o.type=2),o.color=new tinycolor(o.value||o.default),o.alpha=o.color.getAlpha(),o.history=l,o.materialFamily=[],o.whichPane=function(e){var t=0;if(e&&"string"==typeof e){for(var r="mdColor"+e.slice(0,1).toUpperCase()+e.slice(1),l=["mdColorSpectrum","mdColorSliders","mdColorGenericPalette","mdColorMaterialPalette","mdColorHistory"],i=0;i
'),a=e.element('
'),n=e.element('
'),d=e.element('
'),e.forEach(o.palette,function(r){var l=i.clone();e.forEach(r,function(e){var t=a.clone();t.css({height:"25.5px",backgroundColor:e}),t.bind("click",o.setPaletteColor),l.append(t)}),t.append(l)}),e.forEach(o.materialPalette,function(t,r){var i=n.clone();i.html(""+r.replace("-"," ")+""),i.css({height:"75px",backgroundColor:"rgb("+t[500].value[0]+","+t[500].value[1]+","+t[500].value[2]+")"}),o.isDark(t[500].value)&&i.addClass("dark"),l.append(i),e.forEach(t,function(e,t){var r=d.clone();r.css({height:"33px",backgroundColor:"rgb("+e.value[0]+","+e.value[1]+","+e.value[2]+")"}),o.isDark(e.value)&&r.addClass("dark"),r.html(""+t+""),r.bind("click",o.setPaletteColor),l.append(r)})})})}}}]).directive("mdColorPickerHue",["mdColorGradientCanvas",function(o){return new o("hue")}]).directive("mdColorPickerAlpha",["mdColorGradientCanvas",function(o){return new o("alpha")}]).directive("mdColorPickerSpectrum",["mdColorGradientCanvas",function(o){return new o("spectrum")}]).factory("$mdColorPicker",["$q","$mdDialog","mdColorPickerHistory",function(o,e,t){var r;return{show:function(o){return void 0===o&&(o={}),o.hasBackdrop=void 0===o.hasBackdrop||o.hasBackdrop,o.clickOutsideToClose=void 0===o.clickOutsideToClose||o.clickOutsideToClose,o.defaultValue=void 0===o.defaultValue?"#FFFFFF":o.defaultValue,o.focusOnOpen=void 0!==o.focusOnOpen&&o.focusOnOpen,o.preserveScope=void 0===o.preserveScope||o.preserveScope,o.skipHide=void 0===o.skipHide||o.skipHide,o.mdColorAlphaChannel=void 0!==o.mdColorAlphaChannel&&o.mdColorAlphaChannel,o.mdColorSpectrum=void 0===o.mdColorSpectrum||o.mdColorSpectrum,o.mdColorSliders=void 0===o.mdColorSliders||o.mdColorSliders,o.mdColorGenericPalette=void 0===o.mdColorGenericPalette||o.mdColorGenericPalette,o.mdColorMaterialPalette=void 0===o.mdColorMaterialPalette||o.mdColorMaterialPalette,o.mdColorHistory=void 0===o.mdColorHistory||o.mdColorHistory,o.mdColorRgb=void 0===o.mdColorRgb||o.mdColorRgb,o.mdColorHsl=void 0===o.mdColorHsl||o.mdColorHsl,o.mdColorHex=void 0===o.mdColorHex||!o.mdColorRgb&&!o.mdColorHsl||o.mdColorHex,o.mdColorAlphaChannel=!(!o.mdColorRgb&&!o.mdColorHsl)&&o.mdColorAlphaChannel,(r=e.show({templateUrl:"views/mdColorPickerDialog.tpl.html",hasBackdrop:o.hasBackdrop,clickOutsideToClose:o.clickOutsideToClose,controller:["$scope","options",function(o,t){o.close=function(){e.cancel()},o.ok=function(){e.hide(o.value)},o.hide=o.ok,o.value=t.value,o.default=t.defaultValue,o.random=t.random,o.mdColorAlphaChannel=t.mdColorAlphaChannel,o.mdColorSpectrum=t.mdColorSpectrum,o.mdColorSliders=t.mdColorSliders,o.mdColorGenericPalette=t.mdColorGenericPalette,o.mdColorMaterialPalette=t.mdColorMaterialPalette,o.mdColorHistory=t.mdColorHistory,o.mdColorHex=t.mdColorHex,o.mdColorRgb=t.mdColorRgb,o.mdColorHsl=t.mdColorHsl,o.mdColorDefaultTab=t.mdColorDefaultTab}],locals:{options:o},preserveScope:o.preserveScope,skipHide:o.skipHide,targetEvent:o.$event,focusOnOpen:o.focusOnOpen,autoWrap:!1,onShowing:function(){},onComplete:function(){}})).then(function(o){t.add(new tinycolor(o))},function(){}),r},hide:function(){return r.hide()},cancel:function(){return r.cancel()}}}])}(window,window.angular),angular.module("mdColorPicker").run(["$templateCache",function(o){"use strict";o.put("views/mdColorPicker.tpl.html",'
'),o.put("views/mdColorPickerContainer.tpl.html",'
R
G
B
A
'),o.put("views/mdColorPickerDialog.tpl.html",'
Cancel Select ')}]); \ No newline at end of file +!function(o,e,t){"use strict";var r=tinycolor,l={hue:{getColorByPoint:function(o,e){var t=this.getImageData(o,e);return this.setMarkerCenter(e),new r({r:t[0],g:t[1],b:t[2]}).toHsl().h},draw:function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var o=this.context.createLinearGradient(90,0,90,this.height);o.addColorStop(.01,"rgba(255, 0, 0, 1.000)"),o.addColorStop(.167,"rgba(255, 0, 255, 1.000)"),o.addColorStop(.333,"rgba(0, 0, 255, 1.000)"),o.addColorStop(.5,"rgba(0, 255, 255, 1.000)"),o.addColorStop(.666,"rgba(0, 255, 0, 1.000)"),o.addColorStop(.828,"rgba(255, 255, 0, 1.000)"),o.addColorStop(.999,"rgba(255, 0, 0, 1.000)"),this.context.fillStyle=o,this.context.fillRect(0,0,this.canvas.width,this.height)}},alpha:{getColorByPoint:function(o,e){var t=this.getImageData(o,e);return this.setMarkerCenter(e),t[3]/255},draw:function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var o=this.context.createLinearGradient(90,0,90,this.height);o.addColorStop(.01,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 1.000)"),o.addColorStop(.99,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 0.000)"),this.context.fillStyle=o,this.context.fillRect(-1,-1,this.canvas.width+2,this.height+2)},extra:function(){this.$scope.$on("mdColorPicker:spectrumColorChange",e.bind(this,function(o,e){this.currentColor=e.color,this.draw()}))}},spectrum:{getColorByPoint:function(o,e){var t=this.getImageData(o,e);return this.setMarkerCenter(o,e),{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 o=this.context.createLinearGradient(0,0,this.canvas.width,0);o.addColorStop(.01,"rgba(255, 255, 255, 1.000)"),o.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=o,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(o,e){this.currentHue=e.hue,this.draw();var t=this.getMarkerCenter(),r=this.getColorByPoint(t.x,t.y);this.setColor(r)}))}}};function a(o,t){this.type=o,this.restrictX=t,this.offset={x:null,y:null},this.height=255,this.$scope=null,this.$element=null,this.get=e.bind(this,function(o,t){this.$scope=o,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",e.bind(this,this.onMouseDown)),this.$scope.$on("mdColorPicker:colorSet",e.bind(this,this.onColorSet)),this.extra&&this.extra(),this.draw()})}a.prototype.$window=e.element(o),a.prototype.getColorByMouse=function(o){var e=o.touches&&o.touches[0],t=e&&e.pageX||o.pageX,r=e&&e.pageY||o.pageY,l=Math.round(t-this.offset.x),a=Math.round(r-this.offset.y);return this.getColorByPoint(l,a)},a.prototype.setMarkerCenter=function(o,t){var r,l,a,i,n=-1*this.marker.offsetWidth/2,d=-1*this.marker.offsetHeight/2;void 0===t?(a=o+d,i=Math.round(Math.max(Math.min(this.height-1+d,a),d)),l=0):(r=o+n,a=t+d,l=Math.floor(Math.max(Math.min(this.height+n,r),n)),i=Math.floor(Math.max(Math.min(this.height+d,a),d))),e.element(this.marker).css({left:l+"px"}),e.element(this.marker).css({top:i+"px"})},a.prototype.getMarkerCenter=function(){return{x:this.marker.offsetLeft+Math.floor(this.marker.offsetWidth/2),y:this.marker.offsetTop+Math.floor(this.marker.offsetHeight/2)}},a.prototype.getImageData=function(o,e){return o=Math.max(0,Math.min(o,this.canvas.width-1)),e=Math.max(0,Math.min(e,this.canvas.height-1)),this.context.getImageData(o,e,1,1).data},a.prototype.onMouseDown=function(o){o.preventDefault(),o.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=e.bind(this,function(o){switch(this.type){case"hue":var e=this.getColorByMouse(o);this.$scope.$broadcast("mdColorPicker:spectrumHueChange",{hue:e});break;case"alpha":var t=this.getColorByMouse(o);this.$scope.color.setAlpha(t),this.$scope.alpha=t,this.$scope.$apply();break;case"spectrum":var r=this.getColorByMouse(o);this.setColor(r)}});this.$window.on("touchmove mousemove",t),this.$window.one("touchend mouseup",e.bind(this,function(){this.$window.off("touchmove mousemove",t),this.$element.css({cursor:"crosshair"})})),t(o)},a.prototype.setColor=function(o){this.$scope.color._r=o.r,this.$scope.color._g=o.g,this.$scope.color._b=o.b,this.$scope.$apply(),this.$scope.$broadcast("mdColorPicker:spectrumColorChange",{color:o})},a.prototype.onColorSet=function(o,e){var t;switch(this.type){case"hue":t=this.$scope.color.toHsv(),this.setMarkerCenter(this.canvas.height-this.canvas.height*(t.h/360));break;case"alpha":this.currentColor=e.color.toRgb(),this.draw();var r=e.color.getAlpha(),l=this.canvas.height-this.canvas.height*r;this.setMarkerCenter(l);break;case"spectrum":t=e.color.toHsv(),this.currentHue=t.h,this.draw();var a=this.canvas.width*t.s,i=this.canvas.height-this.canvas.height*t.v;this.setMarkerCenter(a,i)}},e.module("mdColorPicker",["ngMaterial","ngMessages"]).run(["$templateCache",function(o){var e={clear:'',gradient:'',tune:'',view_module:'',view_headline:'',history:'',clear_all:''};for(var t in e)e.hasOwnProperty(t)&&o.put([t,"svg"].join("."),['',e[t],""].join(""))}]).factory("mdColorGradientCanvas",function(){return function(o){var t=new a(o,"spectrum"!==o);return{template:'
',link:(t=e.merge(t,l[o])).get,controller:function(){}}}}).factory("mdColorPickerHistory",["$injector",function(o){var e=[],t=[],r=!1;try{r=o.get("$cookies")}catch(o){}if(r)for(var l=r.getObject("mdColorPickerHistory")||[],a=0;ai&&(e.pop(),t.pop()),r&&r.putObject("mdColorPickerHistory",t)},get:function(){return e},reset:function(){e=[],t=[],r&&r.putObject("mdColorPickerHistory",t)}}}]).directive("mdColorPicker",["$timeout","mdColorPickerHistory",function(){return{templateUrl:"views/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(o,e,t,r,l){if(void 0!==o.options)for(var a in o.options){var i;if(o.options.hasOwnProperty(a))i=a,o.hasOwnProperty("mdColor"+a.slice(0,1).toUpperCase()+a.slice(1))&&(i="mdColor"+a.slice(0,1).toUpperCase()+a.slice(1)),!i||void 0!==o[i]&&""!==o[i]||(o[i]=o.options[a])}var n=e.controller("ngModel"),d=function(e){o.value=e||n.$viewValue||""};o.mdColorClearButton=void 0===o.mdColorClearButton||o.mdColorClearButton,o.mdColorPreview=void 0===o.mdColorPreview||o.mdColorPreview,o.mdColorAlphaChannel=void 0===o.mdColorAlphaChannel||o.mdColorAlphaChannel,o.mdColorSpectrum=void 0===o.mdColorSpectrum||o.mdColorSpectrum,o.mdColorSliders=void 0===o.mdColorSliders||o.mdColorSliders,o.mdColorGenericPalette=void 0===o.mdColorGenericPalette||o.mdColorGenericPalette,o.mdColorMaterialPalette=void 0===o.mdColorMaterialPalette||o.mdColorMaterialPalette,o.mdColorHistory=void 0===o.mdColorHistory||o.mdColorHistory,o.mdColorHex=void 0===o.mdColorHex||o.mdColorHex,o.mdColorRgb=void 0===o.mdColorRgb||o.mdColorRgb,o.mdColorHsl=void 0===o.mdColorHsl||o.mdColorHsl,d(),o.$watch(function(){return n.$modelValue},function(o){d(o)}),o.$watch("value",function(e,t){""!==e&&void 0!==e&&e||o.clearValue(),e!==t&&n.$setViewValue(e)}),o.clearValue=function(){n.$setViewValue("")},o.showColorPicker=function(e){l.show({value:o.value,defaultValue:o.default,random:o.random,clickOutsideToClose:o.clickOutsideToClose,hasBackdrop:o.hasBackdrop,skipHide:o.skipHide,preserveScope:o.preserveScope,mdColorAlphaChannel:o.mdColorAlphaChannel,mdColorSpectrum:o.mdColorSpectrum,mdColorSliders:o.mdColorSliders,mdColorGenericPalette:o.mdColorGenericPalette,mdColorMaterialPalette:o.mdColorMaterialPalette,mdColorHistory:o.mdColorHistory,mdColorHex:o.mdColorHex,mdColorRgb:o.mdColorRgb,mdColorHsl:o.mdColorHsl,mdColorDefaultTab:o.mdColorDefaultTab,$event:e}).then(function(e){o.value=e})}}],compile:function(o,e){e.type=void 0!==e.type?e.type:0}}}]).directive("mdColorPickerContainer",["$compile","$timeout","$mdColorPalette","mdColorPickerHistory",function(o,t,l,a){return{templateUrl:"views/mdColorPickerContainer.tpl.html",scope:{value:"=?",default:"@",random:"@",ok:"=?",mdColorAlphaChannel:"=",mdColorSpectrum:"=",mdColorSliders:"=",mdColorGenericPalette:"=",mdColorMaterialPalette:"=",mdColorHistory:"=",mdColorHex:"=",mdColorRgb:"=",mdColorHsl:"=",mdColorDefaultTab:"="},controller:["$scope","$element",function(o,i){var n=e.element(i[0].querySelector(".md-color-picker-preview-input")),d=["toHexString","toRgbString","toHslString"];o.default=o.default?o.default:o.random?tinycolor.random():"rgb(255,255,255)",o.value.search("#")>=0?o.type=0:o.value.search("rgb")>=0?o.type=1:o.value.search("hsl")>=0&&(o.type=2),o.color=new r(o.value||o.default),o.alpha=o.color.getAlpha(),o.history=a,o.materialFamily=[],o.whichPane=function(e){var t=0;if(e&&"string"==typeof e){for(var r="mdColor"+e.slice(0,1).toUpperCase()+e.slice(1),l=["mdColorSpectrum","mdColorSliders","mdColorGenericPalette","mdColorMaterialPalette","mdColorHistory"],a=0;a
'),i=e.element('
'),n=e.element('
'),d=e.element('
'),e.forEach(o.palette,function(r){var l=a.clone();e.forEach(r,function(e){var t=i.clone();t.css({height:"25.5px",backgroundColor:e}),t.bind("click",o.setPaletteColor),l.append(t)}),t.append(l)}),e.forEach(o.materialPalette,function(t,r){var a=n.clone();a.html(""+r.replace("-"," ")+""),a.css({height:"75px",backgroundColor:"rgb("+t[500].value[0]+","+t[500].value[1]+","+t[500].value[2]+")"}),o.isDark(t[500].value)&&a.addClass("dark"),l.append(a),e.forEach(t,function(e,t){var r=d.clone();r.css({height:"33px",backgroundColor:"rgb("+e.value[0]+","+e.value[1]+","+e.value[2]+")"}),o.isDark(e.value)&&r.addClass("dark"),r.html(""+t+""),r.bind("click",o.setPaletteColor),l.append(r)})})})}}}]).directive("mdColorPickerHue",["mdColorGradientCanvas",function(o){return new o("hue")}]).directive("mdColorPickerAlpha",["mdColorGradientCanvas",function(o){return new o("alpha")}]).directive("mdColorPickerSpectrum",["mdColorGradientCanvas",function(o){return new o("spectrum")}]).factory("$mdColorPicker",["$q","$mdDialog","mdColorPickerHistory",function(o,e,t){var l;return{show:function(o){return void 0===o&&(o={}),o.hasBackdrop=void 0===o.hasBackdrop||o.hasBackdrop,o.clickOutsideToClose=void 0===o.clickOutsideToClose||o.clickOutsideToClose,o.defaultValue=void 0===o.defaultValue?"#FFFFFF":o.defaultValue,o.focusOnOpen=void 0!==o.focusOnOpen&&o.focusOnOpen,o.preserveScope=void 0===o.preserveScope||o.preserveScope,o.skipHide=void 0===o.skipHide||o.skipHide,o.mdColorAlphaChannel=void 0!==o.mdColorAlphaChannel&&o.mdColorAlphaChannel,o.mdColorSpectrum=void 0===o.mdColorSpectrum||o.mdColorSpectrum,o.mdColorSliders=void 0===o.mdColorSliders||o.mdColorSliders,o.mdColorGenericPalette=void 0===o.mdColorGenericPalette||o.mdColorGenericPalette,o.mdColorMaterialPalette=void 0===o.mdColorMaterialPalette||o.mdColorMaterialPalette,o.mdColorHistory=void 0===o.mdColorHistory||o.mdColorHistory,o.mdColorRgb=void 0===o.mdColorRgb||o.mdColorRgb,o.mdColorHsl=void 0===o.mdColorHsl||o.mdColorHsl,o.mdColorHex=void 0===o.mdColorHex||!o.mdColorRgb&&!o.mdColorHsl||o.mdColorHex,o.mdColorAlphaChannel=!(!o.mdColorRgb&&!o.mdColorHsl)&&o.mdColorAlphaChannel,(l=e.show({templateUrl:"views/mdColorPickerDialog.tpl.html",hasBackdrop:o.hasBackdrop,clickOutsideToClose:o.clickOutsideToClose,controller:["$scope","options",function(o,t){o.close=function(){e.cancel()},o.ok=function(){e.hide(o.value)},o.hide=o.ok,o.value=t.value,o.default=t.defaultValue,o.random=t.random,o.mdColorAlphaChannel=t.mdColorAlphaChannel,o.mdColorSpectrum=t.mdColorSpectrum,o.mdColorSliders=t.mdColorSliders,o.mdColorGenericPalette=t.mdColorGenericPalette,o.mdColorMaterialPalette=t.mdColorMaterialPalette,o.mdColorHistory=t.mdColorHistory,o.mdColorHex=t.mdColorHex,o.mdColorRgb=t.mdColorRgb,o.mdColorHsl=t.mdColorHsl,o.mdColorDefaultTab=t.mdColorDefaultTab}],locals:{options:o},preserveScope:o.preserveScope,skipHide:o.skipHide,targetEvent:o.$event,focusOnOpen:o.focusOnOpen,autoWrap:!1,onShowing:function(){},onComplete:function(){}})).then(function(o){t.add(new r(o))},function(){}),l},hide:function(){return l.hide()},cancel:function(){return l.cancel()}}}])}(window,window.angular),angular.module("mdColorPicker").run(["$templateCache",function(o){"use strict";o.put("views/mdColorPicker.tpl.html",'
'),o.put("views/mdColorPickerContainer.tpl.html",'
R
G
B
A
'),o.put("views/mdColorPickerDialog.tpl.html",'
Cancel Select ')}]); \ No newline at end of file diff --git a/src/scripts/mdColorPicker.js b/src/scripts/mdColorPicker.js index 8f91d48..2f5d8b1 100644 --- a/src/scripts/mdColorPicker.js +++ b/src/scripts/mdColorPicker.js @@ -3,6 +3,7 @@ 'use strict'; // var dateClick; + var TinyColor = tinycolor; var canvasTypes = { @@ -10,8 +11,8 @@ getColorByPoint: function( x, y ) { var imageData = this.getImageData( x, y ); this.setMarkerCenter( y ); - - var hsl = new tinycolor( {r: imageData[0], g: imageData[1], b: imageData[2] } ); + + var hsl = new TinyColor( {r: imageData[0], g: imageData[1], b: imageData[2] } ); return hsl.toHsl().h; }, draw: function() { @@ -646,7 +647,7 @@ } else if ( $scope.value.search('hsl') >= 0 ) { $scope.type = 2; } - $scope.color = new tinycolor($scope.value || $scope.default); // Set initial color + $scope.color = new TinyColor($scope.value || $scope.default); // Set initial color $scope.alpha = $scope.color.getAlpha(); $scope.history = colorHistory; $scope.materialFamily = []; @@ -856,9 +857,9 @@ }; }]) - .directive( 'mdColorPickerHue', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('hue'); }]) - .directive( 'mdColorPickerAlpha', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('alpha'); }]) - .directive( 'mdColorPickerSpectrum', ['mdColorGradientCanvas', function( mdColorGradientCanvas ) { return new mdColorGradientCanvas('spectrum'); }]) + .directive( 'mdColorPickerHue', ['mdColorGradientCanvas', function( MdColorGradientCanvas ) { return new MdColorGradientCanvas('hue'); }]) + .directive( 'mdColorPickerAlpha', ['mdColorGradientCanvas', function( MdColorGradientCanvas ) { return new MdColorGradientCanvas('alpha'); }]) + .directive( 'mdColorPickerSpectrum', ['mdColorGradientCanvas', function( MdColorGradientCanvas ) { return new MdColorGradientCanvas('spectrum'); }]) .factory('$mdColorPicker', ['$q', '$mdDialog', 'mdColorPickerHistory', function ($q, $mdDialog, colorHistory) { var dialog; @@ -945,7 +946,7 @@ }); dialog.then(function (value) { - colorHistory.add(new tinycolor(value)); + colorHistory.add(new TinyColor(value)); }, function () { }); return dialog; From 075b372a1953c31c1054012dab250d60ae6fe1fc Mon Sep 17 00:00:00 2001 From: mostafabarmshory Date: Tue, 9 Oct 2018 11:13:23 +0330 Subject: [PATCH 27/29] Updaget project version --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 313ebbf..a6d8fb0 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "md-color-picker", "moduleName": "mdColorPicker", - "version": "0.2.8", + "version": "0.2.9", "authors": [ "Brian Kelley ", "Mostafa Barmshory " From ee5c78ff562ae1a7fc7e0f9ec699e904ec413159 Mon Sep 17 00:00:00 2001 From: mostafabarmshory Date: Tue, 9 Oct 2018 14:26:16 +0330 Subject: [PATCH 28/29] Ignore kde directory file --- .directory | 6 ------ .gitignore | 1 + 2 files changed, 1 insertion(+), 6 deletions(-) delete mode 100644 .directory diff --git a/.directory b/.directory deleted file mode 100644 index 2c74fc4..0000000 --- a/.directory +++ /dev/null @@ -1,6 +0,0 @@ -[Dolphin] -Timestamp=2018,10,9,9,33,58 -Version=4 - -[Settings] -HiddenFilesShown=true diff --git a/.gitignore b/.gitignore index 36f703a..3f50ae7 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,4 @@ npm-debug.log /package-lock.json /.settings/ /.tmp/ +/.directory From bdd65ae97a3135e7c280300b29506d342a7008be Mon Sep 17 00:00:00 2001 From: mostafabarmshory Date: Fri, 12 Oct 2018 08:57:31 +0330 Subject: [PATCH 29/29] Update group version --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index a6d8fb0..ebd6335 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "md-color-picker", "moduleName": "mdColorPicker", - "version": "0.2.9", + "version": "0.2.10", "authors": [ "Brian Kelley ", "Mostafa Barmshory "