diff --git a/dist/mdColorPicker.css b/dist/mdColorPicker.css index 566ec68..45f5b74 100644 --- a/dist/mdColorPicker.css +++ b/dist/mdColorPicker.css @@ -1,9 +1,9 @@ -/* -md-color-picker 0.2.0 -https://github.com/brianpkelley/md-color-picker -Brian Kelley -GNU GENERAL PUBLIC LICENSE -*/ +/** + * md-color-picker - Angular-Material inspired color picker. + * @version v0.2.0 + * @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; diff --git a/dist/mdColorPicker.js b/dist/mdColorPicker.js index a954bba..d1cfa83 100644 --- a/dist/mdColorPicker.js +++ b/dist/mdColorPicker.js @@ -1,10 +1,10 @@ +/** + * md-color-picker - Angular-Material inspired color picker. + * @version v0.2.0 + * @link https://github.com/brianpkelley/md-color-picker + * @license MIT + */ ;(function(angular, window, tinycolor) { -/* -md-color-picker 0.2.0 -https://github.com/brianpkelley/md-color-picker -Brian Kelley -GNU GENERAL PUBLIC LICENSE -*/ (function( window, angular, undefined ) { 'use strict'; diff --git a/dist/mdColorPicker.min.css b/dist/mdColorPicker.min.css index 17e974e..67db863 100644 --- a/dist/mdColorPicker.min.css +++ b/dist/mdColorPicker.min.css @@ -1 +1,7 @@ +/** + * md-color-picker - Angular-Material inspired color picker. + * @version v0.2.0 + * @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-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-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>div:not(:first-child){margin-top:16px}.md-color-picker-container .md-color-picker-material .md-color-picker-material-title{font-size:22px;line-height:75px;padding:0 15px;color:rgba(0,0,0,.85)}.md-color-picker-container .md-color-picker-material .md-color-picker-material-title.dark{color:hsla(0,0%,100%,.85)}.md-color-picker-container .md-color-picker-material .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 .md-color-picker-with-label.dark{color:hsla(0,0%,100%,.7)}.md-color-picker-container .md-color-picker-material .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 ac2f183..3031d49 100644 --- a/dist/mdColorPicker.min.js +++ b/dist/mdColorPicker.min.js @@ -1 +1,7 @@ +/** + * md-color-picker - Angular-Material inspired color picker. + * @version v0.2.0 + * @link https://github.com/brianpkelley/md-color-picker + * @license MIT + */ !function(e,t,o){!function(e,t,n){"use strict";var a=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,n){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()})};a.prototype.$window=t.element(e),a.prototype.getColorByMouse=function(e){var t=e.pageX-this.offset.x,o=e.pageY-this.offset.y;return this.getColorByPoint(t,o)},a.prototype.setMarkerCenter=function(e,o){var a=-1*this.marker.offsetWidth/2,i=-1*this.marker.offsetHeight/2;o===n?(o=e+i,o=Math.max(Math.min(this.height+i,o),Math.ceil(i)),e=0):(e+=a,o+=i,e=Math.max(Math.min(this.height+a,e),Math.ceil(a)),o=Math.max(Math.min(this.height+i,o),Math.ceil(i))),t.element(this.marker).css({left:e+"px"}),t.element(this.marker).css({top:o+"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,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},a.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 n=this.getColorByMouse(e);this.setColor(n)}});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)},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,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 n=t.color.getAlpha(),a=this.canvas.height-this.canvas.height*n;this.setMarkerCenter(a);break;case"spectrum":var o=t.color.toHsv();this.currentHue=o.h,this.draw();var i=this.canvas.width*o.s,r=this.canvas.height-this.canvas.height*o.v;this.setMarkerCenter(i,r)}};var i=new a("hue",!0);i.getColorByPoint=function(e,t){var n=this.getImageData(e,t);this.setMarkerCenter(t);var a=new o({r:n[0],g:n[1],b:n[2]});return a.toHsl().h},i.draw=function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=50;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 r=new a("alpha",!0);r.getColorByPoint=function(e,t){var o=this.getImageData(e,t);return this.setMarkerCenter(t),o[3]/255},r.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)},r.extra=function(){this.$scope.$on("mdColorPicker:spectrumColorChange",t.bind(this,function(e,t){this.currentColor=t.color,this.draw()}))};var l=new a("spectrum",!1);l.getColorByPoint=function(e,t){var o=this.getImageData(e,t);return this.setMarkerCenter(e,t),{r:o[0],g:o[1],b:o[2]}},l.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)},l.extra=function(){this.$scope.$on("mdColorPicker:spectrumHueChange",t.bind(this,function(e,t){this.currentHue=t.hue,this.draw();var o=this.getMarkerCenter(),n=this.getColorByPoint(o.x,o.y);this.setColor(n)}))},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=[],n=[],a=!1;try{a=e.get("$cookies")}catch(i){}if(a)for(var r=a.getObject("mdColorPickerHistory")||[],l=0;lc&&(t.pop(),n.pop()),a&&a.putObject("mdColorPickerHistory",n)},get:function(){return t},reset:function(){t=[],n=[],a&&a.putObject("mdColorPickerHistory",n)}}}]).directive("mdColorPicker",["$timeout","mdColorPickerHistory",function(e,t){return{templateUrl:"mdColorPicker.tpl.html",require:"^ngModel",scope:{type:"@",label:"@",icon:"@","default":"@",random:"@",openOnInput:"@",hasBackdrop:"@",clickOutsideToClose:"@"},controller:["$scope","$element","$mdDialog","$mdColorPicker",function(e,t,o,n){var a=!1,i=t.controller("ngModel"),r=function(t){e.value=t||i.$viewValue||""};r(),e.$watch(function(){return i.$modelValue},function(e){r(e)}),e.$watch("value",function(e,t){""!==e&&"undefined"!=typeof e&&e&&e!==t&&i.$setViewValue(e)}),e.clearValue=function(){e.value=""},e.showColorPicker=function(t){a||n.show({value:e.value,defaultValue:e["default"],random:e.random,clickOutsideToClose:e.clickOutsideToClose,hasBackdrop:e.hasBackdrop}).then(function(t){e.value=t})}}],compile:function(e,t){t.type=t.type!==n?t.type:0}}}]).directive("mdColorPickerDialog",["$compile","$timeout","mdColorPickerHistory",function(e,n,a){return{templateUrl:"mdColorPickerDialog.tpl.html",scope:{value:"=?","default":"@",random:"@",ok:"=?"},controller:["$scope","$element","$attrs",function(i,r,l){var c=t.element(r[0].querySelector(".md-color-picker-container")),s=(t.element(c[0].querySelector(".md-color-picker-result")),t.element(r[0].querySelector(".md-color-picker-preview-input"))),d=!1,F=["toHexString","toRgbString","toHslString"];i["default"]=i["default"]?i["default"]:i.random?o.random():"rgb(127, 64, 64)",i.value.search("#")>=0?i.type=0:i.value.search("rgb")>=0?i.type=1:i.value.search("hsl")>=0&&(i.type=2),i.color=new o(i.value||i["default"]),i.alpha=i.color.getAlpha(),i.history=a,i.materialFamily=[],i.whichPane=0,i.inputFocus=!1;var h=9,u=(2*Math.PI/h,[o("rgb(255, 0, 0)"),o("rgb(255, 128, 0)"),o("rgb(255, 255, 0)"),o("rgb(0, 255, 0)"),o("rgb(0, 255, 128)"),o("rgb(0, 255, 255)"),o("rgb(0, 128, 255)"),o("rgb(0, 0, 255)"),o("rgb(128, 0, 255)"),o("rgb(255, 0, 255)")]),m=["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)"];i.palette=[];var p,g,v=[];for(p=-4;4>=p;p++){for(v=[],g=0;gp&&v.push(C.lighten(Math.abs(10*p)).toRgbString()),0===p&&v.push(u[g].toRgbString()),p>0&&v.push(C.darken(p*(p/5)*10).toRgbString())}i.palette.push(v)}i.palette.push(m),i.material={colors:[{Red:["#F44336","#FFEBEE","#FFCDD2","#EF9A9A","#E57373","#EF5350","#F44336","#E53935","#D32F2F","#C62828","#B71C1C","#FF8A80","#FF5252","#FF1744","#D50000"],Pink:["#E91E63","#FCE4EC","#F8BBD0","#F48FB1","#F06292","#EC407A","#E91E63","#D81B60","#C2185B","#AD1457","#880E4F","#FF80AB","#FF4081","#F50057","#C51162"],Purple:["#9C27B0","#F3E5F5","#E1BEE7","#CE93D8","#BA68C8","#AB47BC","#9C27B0","#8E24AA","#7B1FA2","#6A1B9A","#4A148C","#EA80FC","#E040FB","#D500F9","#AA00FF"],"Deep Purple":["#673AB7","#EDE7F6","#D1C4E9","#B39DDB","#9575CD","#7E57C2","#673AB7","#5E35B1","#512DA8","#4527A0","#311B92","#B388FF","#7C4DFF","#651FFF","#6200EA"],Indigo:["#3F51B5","#E8EAF6","#C5CAE9","#9FA8DA","#7986CB","#5C6BC0","#3F51B5","#3949AB","#303F9F","#283593","#1A237E","#8C9EFF","#536DFE","#3D5AFE","#304FFE"],Blue:["#2196F3","#E3F2FD","#BBDEFB","#90CAF9","#64B5F6","#42A5F5","#2196F3","#1E88E5","#1976D2","#1565C0","#0D47A1","#82B1FF","#448AFF","#2979FF","#2962FF"],"Light Blue":["#03A9F4","#E1F5FE","#B3E5FC","#81D4FA","#4FC3F7","#29B6F6","#03A9F4","#039BE5","#0288D1","#0277BD","#01579B","#80D8FF","#40C4FF","#00B0FF","#0091EA"],Cyan:["#00BCD4","#E0F7FA","#B2EBF2","#80DEEA","#4DD0E1","#26C6DA","#00BCD4","#00ACC1","#0097A7","#00838F","#006064","#84FFFF","#18FFFF","#00E5FF","#00B8D4"]},{Teal:["#009688","#E0F2F1","#B2DFDB","#80CBC4","#4DB6AC","#26A69A","#009688","#00897B","#00796B","#00695C","#004D40","#A7FFEB","#64FFDA","#1DE9B6","#00BFA5"],Green:["#4CAF50","#E8F5E9","#C8E6C9","#A5D6A7","#81C784","#66BB6A","#4CAF50","#43A047","#388E3C","#2E7D32","#1B5E20","#B9F6CA","#69F0AE","#00E676","#00C853"],"Light Green":["#8BC34A","#F1F8E9","#DCEDC8","#C5E1A5","#AED581","#9CCC65","#8BC34A","#7CB342","#689F38","#558B2F","#33691E","#CCFF90","#B2FF59","#76FF03","#64DD17"],Lime:["#CDDC39","#F9FBE7","#F0F4C3","#E6EE9C","#DCE775","#D4E157","#CDDC39","#C0CA33","#AFB42B","#9E9D24","#827717","#F4FF81","#EEFF41","#C6FF00","#AEEA00"],Yellow:["#FFEB3B","#FFFDE7","#FFF9C4","#FFF59D","#FFF176","#FFEE58","#FFEB3B","#FDD835","#FBC02D","#F9A825","#F57F17","#FFFF8D","#FFFF00","#FFEA00","#FFD600"],Amber:["#FFC107","#FFF8E1","#FFECB3","#FFE082","#FFD54F","#FFCA28","#FFC107","#FFB300","#FFA000","#FF8F00","#FF6F00","#FFE57F","#FFD740","#FFC400","#FFAB00"],Orange:["#FF9800","#FFF3E0","#FFE0B2","#FFCC80","#FFB74D","#FFA726","#FF9800","#FB8C00","#F57C00","#EF6C00","#E65100","#FFD180","#FFAB40","#FF9100","#FF6D00"],"Deep Orange":["#FF5722","#FBE9E7","#FFCCBC","#FFAB91","#FF8A65","#FF7043","#FF5722","#F4511E","#E64A19","#D84315","#BF360C","#FF9E80","#FF6E40","#FF3D00","#DD2C00"]}],colors2:{Red:["#F44336","#FFEBEE","#FFCDD2","#EF9A9A","#E57373","#EF5350","#F44336","#E53935","#D32F2F","#C62828","#B71C1C","#FF8A80","#FF5252","#FF1744","#D50000"],Pink:["#E91E63","#FCE4EC","#F8BBD0","#F48FB1","#F06292","#EC407A","#E91E63","#D81B60","#C2185B","#AD1457","#880E4F","#FF80AB","#FF4081","#F50057","#C51162"],Purple:["#9C27B0","#F3E5F5","#E1BEE7","#CE93D8","#BA68C8","#AB47BC","#9C27B0","#8E24AA","#7B1FA2","#6A1B9A","#4A148C","#EA80FC","#E040FB","#D500F9","#AA00FF"],"Deep Purple":["#673AB7","#EDE7F6","#D1C4E9","#B39DDB","#9575CD","#7E57C2","#673AB7","#5E35B1","#512DA8","#4527A0","#311B92","#B388FF","#7C4DFF","#651FFF","#6200EA"],Indigo:["#3F51B5","#E8EAF6","#C5CAE9","#9FA8DA","#7986CB","#5C6BC0","#3F51B5","#3949AB","#303F9F","#283593","#1A237E","#8C9EFF","#536DFE","#3D5AFE","#304FFE"],Blue:["#2196F3","#E3F2FD","#BBDEFB","#90CAF9","#64B5F6","#42A5F5","#2196F3","#1E88E5","#1976D2","#1565C0","#0D47A1","#82B1FF","#448AFF","#2979FF","#2962FF"],"Light Blue":["#03A9F4","#E1F5FE","#B3E5FC","#81D4FA","#4FC3F7","#29B6F6","#03A9F4","#039BE5","#0288D1","#0277BD","#01579B","#80D8FF","#40C4FF","#00B0FF","#0091EA"],Cyan:["#00BCD4","#E0F7FA","#B2EBF2","#80DEEA","#4DD0E1","#26C6DA","#00BCD4","#00ACC1","#0097A7","#00838F","#006064","#84FFFF","#18FFFF","#00E5FF","#00B8D4"],Teal:["#009688","#E0F2F1","#B2DFDB","#80CBC4","#4DB6AC","#26A69A","#009688","#00897B","#00796B","#00695C","#004D40","#A7FFEB","#64FFDA","#1DE9B6","#00BFA5"],Green:["#4CAF50","#E8F5E9","#C8E6C9","#A5D6A7","#81C784","#66BB6A","#4CAF50","#43A047","#388E3C","#2E7D32","#1B5E20","#B9F6CA","#69F0AE","#00E676","#00C853"],"Light Green":["#8BC34A","#F1F8E9","#DCEDC8","#C5E1A5","#AED581","#9CCC65","#8BC34A","#7CB342","#689F38","#558B2F","#33691E","#CCFF90","#B2FF59","#76FF03","#64DD17"],Lime:["#CDDC39","#F9FBE7","#F0F4C3","#E6EE9C","#DCE775","#D4E157","#CDDC39","#C0CA33","#AFB42B","#9E9D24","#827717","#F4FF81","#EEFF41","#C6FF00","#AEEA00"],Yellow:["#FFEB3B","#FFFDE7","#FFF9C4","#FFF59D","#FFF176","#FFEE58","#FFEB3B","#FDD835","#FBC02D","#F9A825","#F57F17","#FFFF8D","#FFFF00","#FFEA00","#FFD600"],Amber:["#FFC107","#FFF8E1","#FFECB3","#FFE082","#FFD54F","#FFCA28","#FFC107","#FFB300","#FFA000","#FF8F00","#FF6F00","#FFE57F","#FFD740","#FFC400","#FFAB00"],Orange:["#FF9800","#FFF3E0","#FFE0B2","#FFCC80","#FFB74D","#FFA726","#FF9800","#FB8C00","#F57C00","#EF6C00","#E65100","#FFD180","#FFAB40","#FF9100","#FF6D00"],"Deep Orange":["#FF5722","#FBE9E7","#FFCCBC","#FFAB91","#FF8A65","#FF7043","#FF5722","#F4511E","#E64A19","#D84315","#BF360C","#FF9E80","#FF6E40","#FF3D00","#DD2C00"]},greys:{Brown:["#795548","#EFEBE9","#D7CCC8","#BCAAA4","#A1887F","#8D6E63","#795548","#6D4C41","#5D4037","#4E342E","#3E2723"],Grey:["#9E9E9E","#FAFAFA","#F5F5F5","#EEEEEE","#E0E0E0","#BDBDBD","#9E9E9E","#757575","#616161","#424242","#212121"],"Blue Grey":["#607D8B","#ECEFF1","#CFD8DC","#B0BEC5","#90A4AE","#78909C","#607D8B","#546E7A","#455A64","#37474F","#263238"]},Black:["#000000"],White:["#FFFFFF"],labels:["","50","100","200","300","400","500","600","700","800","900","A100","A200","A300","A400"]},i.isDark=function(e){return o(e).isDark()},i.previewFocus=function(){i.inputFocus=!0,n(function(){s[0].setSelectionRange(0,s[0].value.length)})},i.previewUnfocus=function(){i.inputFocus=!1,s[0].blur()},i.previewBlur=function(){i.inputFocus=!1,i.setValue()},i.previewKeyDown=function(e){13==e.keyCode&&i.ok&&i.ok()},i.setPaletteColor=function(e){i.color=o(e.currentTarget.style.background)},i.setMaterialColor=function(a,r){d&&d.remove(),i.materialFamily=[];var l=t.element(a.currentTarget);d=e(['
','
{{material.labels[$index]}}
',"
"].join("\n"))(i);var c=l.parent().parent();d.css({background:l[0].style.background,top:l[0].offsetTop+"px",left:l[0].offsetLeft+"px",right:Math.max(0,c[0].offsetWidth-(l[0].offsetLeft+l[0].offsetWidth))+"px",bottom:Math.max(0,c[0].offsetHeight-(l[0].offsetTop+l[0].offsetHeight))+"px"}),i.color=o(a.currentTarget.style.background);var s=t.copy(r);s.splice(0,1),c.append(d),i.materialFamily=s,n(function(){d.css({top:0,bottom:"7px",right:"8px",left:"8px"})})},i.setValue=function(){i.color&&i.color&&F[i.type]&&"rgba(0, 0, 0, 0)"!==i.color.toRgbString()&&(i.value=i.color[F[i.type]]())},i.changeValue=function(){i.color=o(i.value),i.$broadcast("mdColorPicker:colorSet",{color:i.color})},i.$watch("alpha",function(e){i.color.setAlpha(e)}),i.$watch("whichPane",function(e){i.$broadcast("mdColorPicker:colorSet",{color:i.color}),d&&d.remove()}),i.$watch("type",function(){s.removeClass("switch"),n(function(){s.addClass("switch")})}),i.$watchGroup(["color.toRgbString()","type"],function(e){i.inputFocus||i.setValue()}),n(function(){i.$broadcast("mdColorPicker:colorSet",{color:i.color}),s.focus(),i.previewFocus()})}]}}]).directive("mdColorPickerHue",[function(){return{template:'
',link:i.get}}]).directive("mdColorPickerAlpha",[function(){return{template:'
',link:r.get}}]).directive("mdColorPickerSpectrum",[function(){return{template:'
{{hue}}',link:l.get}}]).factory("$mdColorPicker",["$q","$mdDialog","mdColorPickerHistory",function(e,t,a){return{show:function(e){e===n&&(e={}),e.hasBackdrop===n&&(e.hasBackdrop=!0),e.clickOutsideToClose===n&&(e.clickOutsideToClose=!0),e.defaultValue===n&&(e.defaultValue="#FFFFFF"),e.focusOnOpen===n&&(e.focusOnOpen=!1);var i=t.show({template:'
Cancel Select ',hasBackdrop:e.hasBackdrop,clickOutsideToClose:e.clickOutsideToClose,controller:["$scope","value","defaultValue","random",function(e,o,n,a){e.close=function(){t.cancel()},e.ok=function(){t.hide(e.value)},e.value=o,e["default"]=n,e.random=a,e.hide=e.ok}],locals:{value:e.value,defaultValue:e["default"],random:e.random},targetEvent:e.$event,focusOnOpen:e.focusOnOpen});return i.then(function(e){a.add(new o(e))},function(){}),i}}}])}(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("mdColorPickerDialog.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 {{key}}\n {{material.labels[$index]}}\n
\n
\n
\n \n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n
\n\n\n \n \n \n
\n \n \n \n
\n\n
\n')}])}(angular,window,tinycolor); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index cb149e0..cc13689 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -19,7 +19,8 @@ var gulp = require('gulp'), http = require('http'), st = require('st'), del = require('del'), - merge = require('merge-stream'); + merge = require('merge-stream'), + header = require('gulp-header'); var debug = false; @@ -41,6 +42,18 @@ var paths = { }; +var pkg = require('./package.json'); +var banner = ['/**', + ' * <%= pkg.name %> - <%= pkg.description %>', + ' * @version v<%= pkg.version %>', + ' * @link <%= pkg.homepage %>', + ' * @license <%= pkg.license %>', + ' */', + ''].join('\n'); + + + + /*==================================================================== = Compile and minify less and css = ====================================================================*/ @@ -50,9 +63,11 @@ gulp.task('less', function () { .pipe(less({strictMath: true})) .pipe(concat(moduleName + '.css')) .pipe(autoprefix({browsers: ['last 2 versions', 'last 4 Android versions']})) + .pipe(header(banner, { pkg : pkg } )) .pipe(gulp.dest(paths.dist)) .pipe(rename({extname: '.min.css'})) .pipe(cssnano({ safe: true })) + .pipe(header(banner, { pkg : pkg } )) .pipe(gulp.dest(paths.dist)) .pipe(livereload()); }); @@ -72,15 +87,18 @@ gulp.task('js', function () { .pipe(gdebug()) + //.pipe(debug({title: 'JS: '})) //.pipe(sourcemaps.init()) .pipe(concat(moduleName + '.js')) //.pipe(sourcemaps.write('.')) .pipe(closure(['angular', 'window', 'tinycolor'])) .pipe(ngAnnotate()) + .pipe(header(banner, { pkg : pkg } )) .pipe(gulp.dest(paths.dist)) .pipe(rename({suffix: '.min'})) .pipe(uglify()) + .pipe(header(banner, { pkg : pkg } )) .pipe(gulp.dest(paths.dist)) .pipe(livereload()); diff --git a/package.json b/package.json index 8fe4012..cfdbb00 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,8 @@ "version": "0.2.0", "description": "Angular-Material inspired color picker.", "main": "dist/mdColorPicker.min.js", - "dependencies": {}, + "dependencies": { + }, "devDependencies": { "del": "^2.0.1", "gulp": "^3.9.0", @@ -21,6 +22,7 @@ "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", diff --git a/src/js/mdColorPicker.js b/src/js/mdColorPicker.js index e2c2551..336a0ed 100644 --- a/src/js/mdColorPicker.js +++ b/src/js/mdColorPicker.js @@ -1,9 +1,3 @@ -/* -md-color-picker 0.2.0 -https://github.com/brianpkelley/md-color-picker -Brian Kelley -GNU GENERAL PUBLIC LICENSE -*/ (function( window, angular, undefined ) { 'use strict'; diff --git a/src/less/mdColorPicker.less b/src/less/mdColorPicker.less index 918d920..0a4c122 100644 --- a/src/less/mdColorPicker.less +++ b/src/less/mdColorPicker.less @@ -1,9 +1,3 @@ -/* -md-color-picker 0.2.0 -https://github.com/brianpkelley/md-color-picker -Brian Kelley -GNU GENERAL PUBLIC LICENSE -*/ @cubic-trans: cubic-bezier(.25,.8,.25,1) .25s; .checkered_bg() {