diff --git a/README.md b/README.md index 3cbcb0d..074b8ca 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,10 @@ # md-color-picker Angular-Material based color picker with no jQuery or other DOM/utility library dependencies. -![preview](https://raw.githubusercontent.com/brianpkelley/md-color-picker/master/md-color-picker.png) +[![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) + +![preview](https://raw.githubusercontent.com/brianpkelley/md-color-picker/feature/v0.2.5/md-color-picker-2.png) ## Demo Try out the demo here: **[GitHub Page](http://brianpkelley.github.io/md-color-picker/)** @@ -20,6 +23,13 @@ npm install md-color-picker bower install md-color-picker ``` +## Angular dependencies +- [Angular Material](https://material.angularjs.org) +- [ngCookies](https://docs.angularjs.org/api/ngCookies) (optional) + +## Other dependencies +The only other dependency is [tinycolor.js](https://github.com/bgrins/TinyColor) which is an exceptional color manipulation library. + ## Usage - Include the css. ````html @@ -35,20 +45,64 @@ bower install md-color-picker var app = angular.module('myApp', ['ngMaterial','ngCookies', 'mdColorPicker']); ```` -- Place the directive wherever it is needed. -_note:_ this breaks the old version 0.1 as it now uses _ng-model_ instead of _value_ - +- Place the directive wherever it is needed. _note:_ this breaks the old version 0.1 as it now uses _ng-model_ instead of _value_ ````html
```` -## Angular dependencies -- [Angular Material](https://material.angularjs.org) -- [ngCookies](https://docs.angularjs.org/api/ngCookies) (optional) +## Options -## Other dependencies -The only other dependency is [tinycolor.js](https://github.com/bgrins/TinyColor) which is an exceptional color manipulation library. +Options may be set either by an options object on the `md-color-picker` attribute and/or using attributes. If an option is present on both the options object and as an attribute, the attribute will take precedence. + +**Setting options by scope object** +```js +// Controller +$scope.scopeVariable.options = { + label: "Choose a color", + icon: "brush", + default: "#f00", + genericPalette: false, + history: false +}; +``` +```html +
+``` + +**Setting options by attribute** +```html +
+``` +| Option Object name | Attribute Option name | Type | Default | Description | +|--------------------- |--------------------------- |------------- |-------------------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| type | type | Int | 0 | Default output type. 0: hex, 1: rgb, 2: hsl | +| label | label | String | "" | The lable for the input. | +| icon | icon | String | "" | Material Icon name. https://design.google.com/icons/ | +| random | random | Boolean | false | Select a random color on open | +| default | default | Color | "rgb(255,255,255)" | Default color | +| openOnInput | open-on-input | Boolean | true | Open color picker when user clicks on the input field. If disabled, color picker will only open when clicking on the preview. | +| hasBackdrop | has-backdrop | Boolean | true | Dialog Backdrop. https://material.angularjs.org/latest/api/service/$mdDialog | +| clickOutsideToClose | click-outside-to-close | Boolean | true | Dialog click outside to close. https://material.angularjs.org/latest/api/service/$mdDialog | +| skipHide | skip-hide | Boolean | true | Allows for opening multiple dialogs. https://github.com/angular/material/issues/7262 | +| preserveScope | preserve-scope | Boolean | true | Dialog preserveScope. https://material.angularjs.org/latest/api/service/$mdDialog | +| clearButton | md-color-clear-button | Boolean | true | Show the "clear" button inside of the input. | +| preview | md-color-preview | Boolean | true | Show the color preview circle next to the input. | +| alphaChannel | md-color-alpha-channel | Boolean | true | Enable alpha channel. | +| spectrum | md-color-spectrum | Boolean | true | Show the spectrum tab. | +| sliders | md-color-sliders | Boolean | true | Show the sliders tab. | +| 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. | +| 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. | ## Disclaimer diff --git a/bower.json b/bower.json index 64c6e2c..e2cd0f3 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "md-color-picker", - "version": "0.2.1", + "version": "0.2.5", "authors": [ "Brian Kelley " ], @@ -10,7 +10,9 @@ "dist/mdColorPicker.min.css" ], "dependencies": { - "tinycolor": ">=1.2.1" + "tinycolor": ">=1.2.1", + "angular": ">=1.5.0", + "angular-material": ">=1.0.5" }, "keywords": [ "color-picker", diff --git a/demo/index.html b/demo/index.html index 91fafa8..e265242 100644 --- a/demo/index.html +++ b/demo/index.html @@ -14,14 +14,14 @@ - + - +

Angular md-color-picker

*** BETA ***
@@ -71,12 +71,23 @@

Text Style

- -
+
- font_download -
+
@@ -103,10 +114,10 @@
Text Preview
- + - + diff --git a/demo/js/app.js b/demo/js/app.js index 26dbc1d..ecddfa3 100644 --- a/demo/js/app.js +++ b/demo/js/app.js @@ -17,4 +17,18 @@ app.controller('MainCtrl', function($scope) { $scope.textColor; $scope.textBackground; + $scope.backgroundOptions = { + label: "Text Background", + icon: "font_download", + + hasBackdrop: true, + clickOutsideToClose: true, + random: true, + openOnInput: true, + + alphaChannel: false, + history: false, + defaultTab: 1 + } + }); diff --git a/dist/mdColorPicker.css b/dist/mdColorPicker.css index 2ad5aa4..927c356 100644 --- a/dist/mdColorPicker.css +++ b/dist/mdColorPicker.css @@ -1,6 +1,6 @@ /** * md-color-picker - Angular-Material inspired color picker. - * @version v0.2.1 + * @version v0.2.5 * @link https://github.com/brianpkelley/md-color-picker * @license MIT */ @@ -169,7 +169,7 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear, 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-template] { +.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 { @@ -215,6 +215,10 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear, 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; @@ -245,28 +249,29 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear, 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 { +.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 .md-color-picker-material-title.dark { +.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 .md-color-picker-with-label { +.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 .md-color-picker-with-label.dark { +.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 .md-color-picker-material-colors { +.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; diff --git a/dist/mdColorPicker.js b/dist/mdColorPicker.js index 688235a..25a7556 100644 --- a/dist/mdColorPicker.js +++ b/dist/mdColorPicker.js @@ -1,6 +1,6 @@ /** * md-color-picker - Angular-Material inspired color picker. - * @version v0.2.1 + * @version v0.2.5 * @link https://github.com/brianpkelley/md-color-picker * @license MIT */ @@ -8,7 +8,7 @@ (function( window, angular, undefined ) { 'use strict'; - +var dateClick; var GradientCanvas = function( type, restrictX ) { @@ -74,7 +74,7 @@ GradientCanvas.prototype.setMarkerCenter = function( x, y ) { var yOffset = -1 * this.marker.offsetHeight / 2; if ( y === undefined ) { y = x + yOffset; - y = Math.max( Math.min( this.height + yOffset, y ), Math.ceil( yOffset ) ); + y = Math.max( Math.min( this.height-1 + yOffset, y ), Math.ceil( yOffset ) ); x = 0; } else { @@ -201,7 +201,7 @@ hueLinkFn.draw = function() { this.$element.css({'height': this.height + 'px'}); this.canvas.height = this.height; - this.canvas.width = 50; + this.canvas.width = this.height; @@ -396,18 +396,58 @@ angular.module('mdColorPicker', []) // Added required controller ngModel require: '^ngModel', scope: { + options: '=mdColorPicker', + + // Input options type: '@', label: '@', icon: '@', - default: '@', random: '@', + default: '@', + + // Dialog Options openOnInput: '@', hasBackdrop: '@', - clickOutsideToClose: '@' + clickOutsideToClose: '@', + skipHide: '@', + preserveScope: '@', + + // Advanced options + mdColorClearButton: '=', + mdColorPreview: '=', + + mdColorAlphaChannel: '=', + mdColorSpectrum: '=', + mdColorSliders: '=', + mdColorGenericPalette: '=', + mdColorMaterialPalette: '=', + mdColorHistory: '=', + mdColorDefaultTab: '@' }, - controller: ['$scope', '$element', '$mdDialog', '$mdColorPicker', function( $scope, $element, $mdDialog, $mdColorPicker ) { + controller: ['$scope', '$element', '$attrs', '$mdDialog', '$mdColorPicker', function( $scope, $element, $attrs, $mdDialog, $mdColorPicker ) { var didJustClose = false; + // Merge Options Object with scope. Scope will take precedence much like css vs style attribute. + 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 ) ) { + 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); + } + + if ( scopeKey && $scope[scopeKey] === undefined ) { + $scope[scopeKey] = $scope.options[opt]; + } + } + } + } + + console.log( $scope ); + // Get ngModelController from the current element var ngModel = $element.controller('ngModel'); @@ -416,6 +456,19 @@ angular.module('mdColorPicker', []) $scope.value = val || ngModel.$viewValue || ''; }; + // Defaults + // Everything is enabled by default. + $scope.mdColorClearButton = $scope.mdColorClearButton === undefined ? true : $scope.mdColorClearButton; + $scope.mdColorPreview = $scope.mdColorPreview === undefined ? true : $scope.mdColorPreview; + + $scope.mdColorAlphaChannel = $scope.mdColorAlphaChannel === undefined ? true : $scope.mdColorAlphaChannel; + $scope.mdColorSpectrum = $scope.mdColorSpectrum === undefined ? true : $scope.mdColorSpectrum; + $scope.mdColorSliders = $scope.mdColorSliders === undefined ? true : $scope.mdColorSliders; + $scope.mdColorGenericPalette = $scope.mdColorGenericPalette === undefined ? true : $scope.mdColorGenericPalette; + $scope.mdColorMaterialPalette = $scope.mdColorMaterialPalette === undefined ? true : $scope.mdColorMaterialPalette; + $scope.mdColorHistory = $scope.mdColorHistory === undefined ? true : $scope.mdColorHistory; + + // Set the starting value updateValue(); @@ -442,33 +495,87 @@ angular.module('mdColorPicker', []) if ( didJustClose ) { return; } + // dateClick = Date.now(); + console.log( "CLICK OPEN", dateClick, $scope ); + $mdColorPicker.show({ value: $scope.value, defaultValue: $scope.default, random: $scope.random, clickOutsideToClose: $scope.clickOutsideToClose, - hasBackdrop: $scope.hasBackdrop + hasBackdrop: $scope.hasBackdrop, + skipHide: $scope.skipHide, + preserveScope: $scope.preserveScope, + + mdColorAlphaChannel: $scope.mdColorAlphaChannel, + mdColorSpectrum: $scope.mdColorSpectrum, + mdColorSliders: $scope.mdColorSliders, + mdColorGenericPalette: $scope.mdColorGenericPalette, + mdColorMaterialPalette: $scope.mdColorMaterialPalette, + mdColorHistory: $scope.mdColorHistory, + mdColorDefaultTab: $scope.mdColorDefaultTab, + + $event: $event, + }).then(function( color ) { $scope.value = color; }); }; }], compile: function( element, attrs ) { + //attrs.value = attrs.value || "#ff0000"; attrs.type = attrs.type !== undefined ? attrs.type : 0; + } }; }]) - .directive( 'mdColorPickerDialog', ['$compile','$timeout','mdColorPickerHistory', function( $compile, $timeout, colorHistory ) { + .directive( 'mdColorPickerContainer', ['$compile','$timeout','$mdColorPalette','mdColorPickerHistory', function( $compile, $timeout, $mdColorPalette, colorHistory ) { return { - templateUrl: 'mdColorPickerDialog.tpl.html', + templateUrl: 'mdColorPickerContainer.tpl.html', scope: { value: '=?', default: '@', random: '@', - ok: '=?' + ok: '=?', + mdColorAlphaChannel: '=', + mdColorSpectrum: '=', + mdColorSliders: '=', + mdColorGenericPalette: '=', + mdColorMaterialPalette: '=', + mdColorHistory: '=', + mdColorDefaultTab: '=' }, controller: ["$scope", "$element", "$attrs", function( $scope, $element, $attrs ) { + console.log( "mdColorPickerContainer Controller", Date.now() - dateClick, $scope ); + + function getTabIndex( tab ) { + console.log( tab ); + var index = 0; + if ( tab && typeof( tab ) === 'string' ) { +/* 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++ ) { + //console.log( tabs[x]('ng-if') ); + //if ( tabs[x].getAttribute('ng-if') == tabName ) { + if ( tabs[x] == tabName ) { + if ( $scope[tabName] ) { + index = x; + break; + } + } + } + } else if ( tab && typeof ( tab ) === 'number') { + index = tab; + } + + return index; + } /////////////////////////////////// // Variables @@ -476,7 +583,6 @@ angular.module('mdColorPicker', []) 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 materialPreview = false; var outputFn = [ 'toHexString', @@ -486,7 +592,7 @@ angular.module('mdColorPicker', []) - $scope.default = $scope.default ? $scope.default : $scope.random ? tinycolor.random() : 'rgb(127, 64, 64)'; + $scope.default = $scope.default ? $scope.default : $scope.random ? tinycolor.random() : 'rgb(255,255,255)'; if ( $scope.value.search('#') >= 0 ) { $scope.type = 0; } else if ( $scope.value.search('rgb') >= 0 ) { @@ -499,119 +605,40 @@ angular.module('mdColorPicker', []) $scope.history = colorHistory; $scope.materialFamily = []; - $scope.whichPane = 0; + $scope.whichPane = getTabIndex( $scope.mdColorDefaultTab ); $scope.inputFocus = false; // Colors for the palette screen /////////////////////////////////// var steps = 9; var freq = 2*Math.PI/steps; - var basePalette = [ - tinycolor('rgb(255, 0, 0)'), // Red - tinycolor('rgb(255, 128, 0)'), // Orange - tinycolor('rgb(255, 255, 0)'), // Yellow - tinycolor('rgb(0, 255, 0)'), // Green - tinycolor('rgb(0, 255, 128)'), // - tinycolor('rgb(0, 255, 255)'), // Teal - tinycolor('rgb(0, 128, 255)'), // - tinycolor('rgb(0, 0, 255)'), // Blue - tinycolor('rgb(128, 0, 255)'), // Purple - tinycolor('rgb(255, 0, 255)') // Fusia - ]; - var grays = [ - 'rgb(255, 255, 255)', // White - '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)' // Black - ]; - $scope.palette = [ + $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)"] ]; - var colors = []; - var x, y; - for ( x = -4; x <= 4; x++ ) { - colors = []; - for ( y = 0; y < basePalette.length; y++ ) { - var newColor = new tinycolor( basePalette[y].toRgb() ); - if ( x < 0 ) { - colors.push( newColor.lighten( Math.abs( x * 10 ) ).toRgbString() ); - } - if ( x === 0 ) { - colors.push( basePalette[y].toRgbString() ); - } - if ( x > 0 ) { - colors.push( newColor.darken( (x * ( x / 5 )) * 10 ).toRgbString() ); - } - } - $scope.palette.push( colors ); - } - $scope.palette.push( grays ); - - - $scope.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"] - }; - + $scope.materialPalette = $mdColorPalette; /////////////////////////////////// // Functions /////////////////////////////////// $scope.isDark = function isDark( color ) { - return tinycolor( color ).isDark(); - } + if ( angular.isArray( color ) ) { + return tinycolor( {r: color[0], g: color[1], b: color[2] }).isDark(); + } else { + return tinycolor( color ).isDark(); + } + + }; $scope.previewFocus = function() { $scope.inputFocus = true; $timeout( function() { @@ -633,57 +660,12 @@ angular.module('mdColorPicker', []) } }; $scope.setPaletteColor = function( event ) { - $scope.color = tinycolor( event.currentTarget.style.background ); - }; - $scope.setMaterialColor = function( event, family ) { - if ( materialPreview ) { - materialPreview.remove(); - } - $scope.materialFamily = []; - - - var currentEl = angular.element( event.currentTarget ); - materialPreview = $compile([ '
', - '
{{material.labels[$index]}}
', - '
'].join('\n'))($scope); - var parent = currentEl.parent().parent(); - - materialPreview.css({ - 'background': currentEl[0].style.background, - 'top': currentEl[0].offsetTop + 'px', - 'left': currentEl[0].offsetLeft + 'px', - 'right': Math.max( 0, parent[0].offsetWidth - ( currentEl[0].offsetLeft + currentEl[0].offsetWidth ) ) + 'px', - 'bottom': Math.max( 0, parent[0].offsetHeight - ( currentEl[0].offsetTop + currentEl[0].offsetHeight ) ) + 'px' - }); - - $scope.color = tinycolor( event.currentTarget.style.background ); - var materialFamily = angular.copy(family); - materialFamily.splice(0,1); - - parent.append( materialPreview ); - $scope.materialFamily = materialFamily; - $timeout(function() { - materialPreview.css({ - top: 0, - bottom: '7px', - right: '8px', - left: '8px' - }); + console.log( event.target.style.backgroundColor ); + $timeout( function() { + $scope.color = tinycolor( event.target.style.backgroundColor ); }); - - /* var x = 0; - var showShades = function showShades() { - $scope.materialFamily.push( materialFamily[x] ); - x++; - if ( x < materialFamily.length ) { - $timeout( showShades, 50 ); - } - }; - showShades(); - */ - - }; + $scope.setValue = function setValue() { // Set the value if available if ( $scope.color && $scope.color && outputFn[$scope.type] && $scope.color.toRgbString() !== 'rgba(0, 0, 0, 0)' ) { @@ -700,18 +682,16 @@ angular.module('mdColorPicker', []) /////////////////////////////////// // Watches and Events /////////////////////////////////// - $scope.$watch( 'alpha', function( newValue ) { + $scope.$watch( 'color._a', function( newValue ) { $scope.color.setAlpha( newValue ); - }); + }, true); $scope.$watch( 'whichPane', function( newValue ) { // 0 - spectrum selector // 1 - sliders // 2 - palette $scope.$broadcast('mdColorPicker:colorSet', {color: $scope.color }); - if ( materialPreview ) { - materialPreview.remove(); - } + }); $scope.$watch( 'type', function() { @@ -732,75 +712,171 @@ angular.module('mdColorPicker', []) // INIT // Let all the other directives initialize /////////////////////////////////// + // console.log( "mdColorPickerContainer Controller PRE Timeout", Date.now() - dateClick ); $timeout( function() { + // console.log( "mdColorPickerContainer Controller Timeout", Date.now() - dateClick ); $scope.$broadcast('mdColorPicker:colorSet', { color: $scope.color }); previewInput.focus(); $scope.previewFocus(); }); - }] - } + }], + link: function( scope, element, attrs ) { + + var tabs = element[0].getElementsByTagName( 'md-tab' ); + console.log( element, tabs.length ); + /* + 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') ); + var paletteRow = angular.element('
'); + var paletteCell = angular.element('
'); + + var materialTitle = angular.element('
'); + var materialRow = angular.element('
'); + + + + angular.forEach(scope.palette, function( value, key ) { + var row = paletteRow.clone(); + angular.forEach( value, function( color ) { + var cell = paletteCell.clone(); + cell.css({ + height: '25.5px', + backgroundColor: color + }); + cell.bind('click', scope.setPaletteColor ); + row.append( cell ); + }); + + paletteContainer.append( row ); + }); + + angular.forEach(scope.materialPalette, function( value, key ) { + var title = materialTitle.clone(); + title.html(''+key.replace('-',' ')+''); + title.css({ + height: '75px', + backgroundColor: 'rgb('+value['500'].value[0]+','+value['500'].value[1]+','+value['500'].value[2]+')' + }); + if ( scope.isDark(value['500'].value) ) { + title.addClass('dark'); + } + + materialContainer.append( title ); + + angular.forEach( value, function( color, label ) { + + var row = materialRow.clone(); + row.css({ + height: '33px', + backgroundColor: 'rgb('+color.value[0]+','+color.value[1]+','+color.value[2]+')' + }); + if ( scope.isDark(color.value) ) { + row.addClass('dark'); + } + + row.html(''+label+''); + row.bind('click', scope.setPaletteColor ); + materialContainer.append( row ); + }); + + + }); + } + } + }; }]) .directive( 'mdColorPickerHue', [function() { return { template: '
', - link: hueLinkFn.get + link: hueLinkFn.get, + controller: function() { + // console.log( "mdColorPickerHue Controller", Date.now() - dateClick ); + } }; }]) .directive( 'mdColorPickerAlpha', [function() { return { template: '
', - link: alphaLinkFn.get + link: alphaLinkFn.get, + controller: function() { + // console.log( "mdColorPickerAlpha Controller", Date.now() - dateClick ); + } }; }]) .directive( 'mdColorPickerSpectrum', [function() { return { template: '
{{hue}}', - link: spectrumLinkFn.get + link: spectrumLinkFn.get, + controller: function() { + // console.log( "mdColorPickerSpectrum Controller", Date.now() - dateClick ); + } }; }]) .factory('$mdColorPicker', ['$q', '$mdDialog', 'mdColorPickerHistory', function ($q, $mdDialog, colorHistory) { + var dialog; + return { show: function (options) { - //var result = $q.defer(); - - if (options === undefined) - { + if ( options === undefined ) { options = {}; } + console.log( 'DIALOG OPTIONS', options ); + // Defaults + // Dialog Properties + 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; + options.preserveScope = options.preserveScope === undefined ? true : options.preserveScope; + options.skipHide = options.skipHide === undefined ? true : options.skipHide; - if (options.hasBackdrop === undefined) - options.hasBackdrop = true; + // mdColorPicker Properties + options.mdColorAlphaChannel = options.mdColorAlphaChannel === undefined ? false : options.mdColorAlphaChannel; + options.mdColorSpectrum = options.mdColorSpectrum === undefined ? true : options.mdColorSpectrum; + options.mdColorSliders = options.mdColorSliders === undefined ? true : options.mdColorSliders; + options.mdColorGenericPalette = options.mdColorGenericPalette === undefined ? true : options.mdColorGenericPalette; + options.mdColorMaterialPalette = options.mdColorMaterialPalette === undefined ? true : options.mdColorMaterialPalette; + options.mdColorHistory = options.mdColorHistory === undefined ? true : options.mdColorHistory; - if (options.clickOutsideToClose === undefined) - options.clickOutsideToClose = true; - if (options.defaultValue === undefined) - options.defaultValue = '#FFFFFF'; - if (options.focusOnOpen === undefined) - options.focusOnOpen = false; - var dialog = $mdDialog.show({ - template: ''+ - ''+ - '
'+ - ' '+ - ' Cancel'+ - ' Select'+ - ' '+ - '', + dialog = $mdDialog.show({ + templateUrl: 'mdColorPickerDialog.tpl.html', hasBackdrop: options.hasBackdrop, clickOutsideToClose: options.clickOutsideToClose, - controller: ['$scope', 'value', 'defaultValue', 'random', function( $scope, value, defaultValue, random ) { - + controller: ['$scope', 'options', function( $scope, options ) { + //console.log( "DIALOG CONTROLLER OPEN", Date.now() - dateClick ); $scope.close = function close() { $mdDialog.cancel(); @@ -809,20 +885,39 @@ angular.module('mdColorPicker', []) { $mdDialog.hide( $scope.value ); }; - - $scope.value = value; - $scope.default = defaultValue; - $scope.random = random; $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.mdColorDefaultTab = options.mdColorDefaultTab; + }], locals: { - value: options.value, - defaultValue: options.default, - random: options.random + options: options, }, + preserveScope: options.preserveScope, + skipHide: options.skipHide, + targetEvent: options.$event, - focusOnOpen: options.focusOnOpen + focusOnOpen: options.focusOnOpen, + autoWrap: false, + onShowing: function() { + // console.log( "DIALOG OPEN START", Date.now() - dateClick ); + }, + onComplete: function() { + // console.log( "DIALOG OPEN COMPLETE", Date.now() - dateClick ); + } }); dialog.then(function (value) { @@ -830,11 +925,18 @@ angular.module('mdColorPicker', []) }, function () { }); return dialog; - } + }, + hide: function() { + return dialog.hide(); + }, + cancel: function() { + return dialog.cancel(); + } }; }]); })( 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("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.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 diff --git a/dist/mdColorPicker.min.css b/dist/mdColorPicker.min.css index 1dc9c1d..a46ca0a 100644 --- a/dist/mdColorPicker.min.css +++ b/dist/mdColorPicker.min.css @@ -1,7 +1,7 @@ /** * md-color-picker - Angular-Material inspired color picker. - * @version v0.2.1 + * @version v0.2.5 * @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 +[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 diff --git a/dist/mdColorPicker.min.js b/dist/mdColorPicker.min.js index cd4fe7d..dc09af3 100644 --- a/dist/mdColorPicker.min.js +++ b/dist/mdColorPicker.min.js @@ -1,7 +1,7 @@ /** * md-color-picker - Angular-Material inspired color picker. - * @version v0.2.1 + * @version v0.2.5 * @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 +!function(e,t,o){!function(e,t,r){"use strict";var l,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,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()})};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 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"})},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 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)},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 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 n=new a("hue",!0);n.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},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(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 i=new a("alpha",!0);i.getColorByPoint=function(e,t){var o=this.getImageData(e,t);return this.setMarkerCenter(t),o[3]/255},i.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)},i.extra=function(){this.$scope.$on("mdColorPicker:spectrumColorChange",t.bind(this,function(e,t){this.currentColor=t.color,this.draw()}))};var c=new a("spectrum",!1);c.getColorByPoint=function(e,t){var o=this.getImageData(e,t);return this.setMarkerCenter(e,t),{r:o[0],g:o[1],b:o[2]}},c.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)},c.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,a,n){var i=!1;if(e.options!==r)for(var c in e.options)if(e.options.hasOwnProperty(c)){var s=r;e.hasOwnProperty(c)?s=c:e.hasOwnProperty("mdColor"+c.slice(0,1).toUpperCase()+c.slice(1))&&(s="mdColor"+c.slice(0,1).toUpperCase()+c.slice(1)),s&&e[s]===r&&(e[s]=e.options[c])}console.log(e);var d=t.controller("ngModel"),h=function(t){e.value=t||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,h(),e.$watch(function(){return d.$modelValue},function(e){h(e)}),e.$watch("value",function(e,t){""!==e&&"undefined"!=typeof e&&e&&e!==t&&d.$setViewValue(e)}),e.clearValue=function(){e.value=""},e.showColorPicker=function(t){i||(console.log("CLICK OPEN",l,e),n.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,a,n){return{templateUrl:"mdColorPickerContainer.tpl.html",scope:{value:"=?","default":"@",random:"@",ok:"=?",mdColorAlphaChannel:"=",mdColorSpectrum:"=",mdColorSliders:"=",mdColorGenericPalette:"=",mdColorMaterialPalette:"=",mdColorHistory:"=",mdColorDefaultTab:"="},controller:["$scope","$element","$attrs",function(e,i,c){function s(t){console.log(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=n,e.materialFamily=[],e.whichPane=s(e.mdColorDefaultTab),e.inputFocus=!1;var u=9;2*Math.PI/u;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=a,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(){h[0].setSelectionRange(0,h[0].value.length)})},e.previewUnfocus=function(){e.inputFocus=!1,h[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){console.log(t.target.style.backgroundColor),r(function(){e.color=o(t.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=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(){h.removeClass("switch"),r(function(){h.addClass("switch")})}),e.$watchGroup(["color.toRgbString()","type"],function(t){e.inputFocus||e.setValue()}),r(function(){e.$broadcast("mdColorPicker:colorSet",{color:e.color}),h.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)})})}var n=o[0].getElementsByTagName("md-tab");console.log(o,n.length),r(function(){a()})}}}]).directive("mdColorPickerHue",[function(){return{template:'
',link:n.get,controller:function(){}}}]).directive("mdColorPickerAlpha",[function(){return{template:'
',link:i.get,controller:function(){}}}]).directive("mdColorPickerSpectrum",[function(){return{template:'
{{hue}}',link:c.get,controller:function(){}}}]).factory("$mdColorPicker",["$q","$mdDialog","mdColorPickerHistory",function(e,t,l){var a;return{show:function(e){return e===r&&(e={}),console.log("DIALOG OPTIONS",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 diff --git a/gulpfile.js b/gulpfile.js index cc13689..00da597 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -109,7 +109,7 @@ gulp.task('js', function () { ====================================================================*/ gulp.task('demo-resources', function () { - gulp.src(['demo/*.{js,css}', 'demo/redirect.html']) + gulp.src(['demo/**/*.{js,css}', 'demo/redirect.html']) .pipe(gulp.dest('dist/demo')) .pipe(livereload()); diff --git a/md-color-picker-2.png b/md-color-picker-2.png new file mode 100644 index 0000000..fc6495e Binary files /dev/null and b/md-color-picker-2.png differ diff --git a/package.json b/package.json index 01a02ee..d7c0601 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,10 @@ { "name": "md-color-picker", - "version": "0.2.1", + "version": "0.2.5", "description": "Angular-Material inspired color picker.", "main": "dist/mdColorPicker.min.js", "dependencies": { + "tinycolor2": "*" }, "devDependencies": { "del": "^2.0.1", diff --git a/src/js/mdColorPicker.js b/src/js/mdColorPicker.js index 336a0ed..7167d4a 100644 --- a/src/js/mdColorPicker.js +++ b/src/js/mdColorPicker.js @@ -1,7 +1,7 @@ (function( window, angular, undefined ) { 'use strict'; - +var dateClick; var GradientCanvas = function( type, restrictX ) { @@ -67,7 +67,7 @@ GradientCanvas.prototype.setMarkerCenter = function( x, y ) { var yOffset = -1 * this.marker.offsetHeight / 2; if ( y === undefined ) { y = x + yOffset; - y = Math.max( Math.min( this.height + yOffset, y ), Math.ceil( yOffset ) ); + y = Math.max( Math.min( this.height-1 + yOffset, y ), Math.ceil( yOffset ) ); x = 0; } else { @@ -194,7 +194,7 @@ hueLinkFn.draw = function() { this.$element.css({'height': this.height + 'px'}); this.canvas.height = this.height; - this.canvas.width = 50; + this.canvas.width = this.height; @@ -389,18 +389,58 @@ angular.module('mdColorPicker', []) // Added required controller ngModel require: '^ngModel', scope: { + options: '=mdColorPicker', + + // Input options type: '@', label: '@', icon: '@', - default: '@', random: '@', + default: '@', + + // Dialog Options openOnInput: '@', hasBackdrop: '@', - clickOutsideToClose: '@' + clickOutsideToClose: '@', + skipHide: '@', + preserveScope: '@', + + // Advanced options + mdColorClearButton: '=', + mdColorPreview: '=', + + mdColorAlphaChannel: '=', + mdColorSpectrum: '=', + mdColorSliders: '=', + mdColorGenericPalette: '=', + mdColorMaterialPalette: '=', + mdColorHistory: '=', + mdColorDefaultTab: '@' }, - controller: ['$scope', '$element', '$mdDialog', '$mdColorPicker', function( $scope, $element, $mdDialog, $mdColorPicker ) { + controller: ['$scope', '$element', '$attrs', '$mdDialog', '$mdColorPicker', function( $scope, $element, $attrs, $mdDialog, $mdColorPicker ) { var didJustClose = false; + // Merge Options Object with scope. Scope will take precedence much like css vs style attribute. + 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 ) ) { + 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); + } + + if ( scopeKey && $scope[scopeKey] === undefined ) { + $scope[scopeKey] = $scope.options[opt]; + } + } + } + } + + console.log( $scope ); + // Get ngModelController from the current element var ngModel = $element.controller('ngModel'); @@ -409,6 +449,19 @@ angular.module('mdColorPicker', []) $scope.value = val || ngModel.$viewValue || ''; }; + // Defaults + // Everything is enabled by default. + $scope.mdColorClearButton = $scope.mdColorClearButton === undefined ? true : $scope.mdColorClearButton; + $scope.mdColorPreview = $scope.mdColorPreview === undefined ? true : $scope.mdColorPreview; + + $scope.mdColorAlphaChannel = $scope.mdColorAlphaChannel === undefined ? true : $scope.mdColorAlphaChannel; + $scope.mdColorSpectrum = $scope.mdColorSpectrum === undefined ? true : $scope.mdColorSpectrum; + $scope.mdColorSliders = $scope.mdColorSliders === undefined ? true : $scope.mdColorSliders; + $scope.mdColorGenericPalette = $scope.mdColorGenericPalette === undefined ? true : $scope.mdColorGenericPalette; + $scope.mdColorMaterialPalette = $scope.mdColorMaterialPalette === undefined ? true : $scope.mdColorMaterialPalette; + $scope.mdColorHistory = $scope.mdColorHistory === undefined ? true : $scope.mdColorHistory; + + // Set the starting value updateValue(); @@ -435,33 +488,87 @@ angular.module('mdColorPicker', []) if ( didJustClose ) { return; } + // dateClick = Date.now(); + console.log( "CLICK OPEN", dateClick, $scope ); + $mdColorPicker.show({ value: $scope.value, defaultValue: $scope.default, random: $scope.random, clickOutsideToClose: $scope.clickOutsideToClose, - hasBackdrop: $scope.hasBackdrop + hasBackdrop: $scope.hasBackdrop, + skipHide: $scope.skipHide, + preserveScope: $scope.preserveScope, + + mdColorAlphaChannel: $scope.mdColorAlphaChannel, + mdColorSpectrum: $scope.mdColorSpectrum, + mdColorSliders: $scope.mdColorSliders, + mdColorGenericPalette: $scope.mdColorGenericPalette, + mdColorMaterialPalette: $scope.mdColorMaterialPalette, + mdColorHistory: $scope.mdColorHistory, + mdColorDefaultTab: $scope.mdColorDefaultTab, + + $event: $event, + }).then(function( color ) { $scope.value = color; }); }; }], compile: function( element, attrs ) { + //attrs.value = attrs.value || "#ff0000"; attrs.type = attrs.type !== undefined ? attrs.type : 0; + } }; }]) - .directive( 'mdColorPickerDialog', ['$compile','$timeout','mdColorPickerHistory', function( $compile, $timeout, colorHistory ) { + .directive( 'mdColorPickerContainer', ['$compile','$timeout','$mdColorPalette','mdColorPickerHistory', function( $compile, $timeout, $mdColorPalette, colorHistory ) { return { - templateUrl: 'mdColorPickerDialog.tpl.html', + templateUrl: 'mdColorPickerContainer.tpl.html', scope: { value: '=?', default: '@', random: '@', - ok: '=?' + ok: '=?', + mdColorAlphaChannel: '=', + mdColorSpectrum: '=', + mdColorSliders: '=', + mdColorGenericPalette: '=', + mdColorMaterialPalette: '=', + mdColorHistory: '=', + mdColorDefaultTab: '=' }, controller: function( $scope, $element, $attrs ) { + console.log( "mdColorPickerContainer Controller", Date.now() - dateClick, $scope ); + + function getTabIndex( tab ) { + console.log( tab ); + var index = 0; + if ( tab && typeof( tab ) === 'string' ) { +/* 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++ ) { + //console.log( tabs[x]('ng-if') ); + //if ( tabs[x].getAttribute('ng-if') == tabName ) { + if ( tabs[x] == tabName ) { + if ( $scope[tabName] ) { + index = x; + break; + } + } + } + } else if ( tab && typeof ( tab ) === 'number') { + index = tab; + } + + return index; + } /////////////////////////////////// // Variables @@ -469,7 +576,6 @@ angular.module('mdColorPicker', []) 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 materialPreview = false; var outputFn = [ 'toHexString', @@ -479,7 +585,7 @@ angular.module('mdColorPicker', []) - $scope.default = $scope.default ? $scope.default : $scope.random ? tinycolor.random() : 'rgb(127, 64, 64)'; + $scope.default = $scope.default ? $scope.default : $scope.random ? tinycolor.random() : 'rgb(255,255,255)'; if ( $scope.value.search('#') >= 0 ) { $scope.type = 0; } else if ( $scope.value.search('rgb') >= 0 ) { @@ -492,119 +598,40 @@ angular.module('mdColorPicker', []) $scope.history = colorHistory; $scope.materialFamily = []; - $scope.whichPane = 0; + $scope.whichPane = getTabIndex( $scope.mdColorDefaultTab ); $scope.inputFocus = false; // Colors for the palette screen /////////////////////////////////// var steps = 9; var freq = 2*Math.PI/steps; - var basePalette = [ - tinycolor('rgb(255, 0, 0)'), // Red - tinycolor('rgb(255, 128, 0)'), // Orange - tinycolor('rgb(255, 255, 0)'), // Yellow - tinycolor('rgb(0, 255, 0)'), // Green - tinycolor('rgb(0, 255, 128)'), // - tinycolor('rgb(0, 255, 255)'), // Teal - tinycolor('rgb(0, 128, 255)'), // - tinycolor('rgb(0, 0, 255)'), // Blue - tinycolor('rgb(128, 0, 255)'), // Purple - tinycolor('rgb(255, 0, 255)') // Fusia - ]; - var grays = [ - 'rgb(255, 255, 255)', // White - '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)' // Black - ]; - $scope.palette = [ + $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)"] ]; - var colors = []; - var x, y; - for ( x = -4; x <= 4; x++ ) { - colors = []; - for ( y = 0; y < basePalette.length; y++ ) { - var newColor = new tinycolor( basePalette[y].toRgb() ); - if ( x < 0 ) { - colors.push( newColor.lighten( Math.abs( x * 10 ) ).toRgbString() ); - } - if ( x === 0 ) { - colors.push( basePalette[y].toRgbString() ); - } - if ( x > 0 ) { - colors.push( newColor.darken( (x * ( x / 5 )) * 10 ).toRgbString() ); - } - } - $scope.palette.push( colors ); - } - $scope.palette.push( grays ); - - - $scope.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"] - }; - + $scope.materialPalette = $mdColorPalette; /////////////////////////////////// // Functions /////////////////////////////////// $scope.isDark = function isDark( color ) { - return tinycolor( color ).isDark(); - } + if ( angular.isArray( color ) ) { + return tinycolor( {r: color[0], g: color[1], b: color[2] }).isDark(); + } else { + return tinycolor( color ).isDark(); + } + + }; $scope.previewFocus = function() { $scope.inputFocus = true; $timeout( function() { @@ -626,57 +653,12 @@ angular.module('mdColorPicker', []) } }; $scope.setPaletteColor = function( event ) { - $scope.color = tinycolor( event.currentTarget.style.background ); - }; - $scope.setMaterialColor = function( event, family ) { - if ( materialPreview ) { - materialPreview.remove(); - } - $scope.materialFamily = []; - - - var currentEl = angular.element( event.currentTarget ); - materialPreview = $compile([ '
', - '
{{material.labels[$index]}}
', - '
'].join('\n'))($scope); - var parent = currentEl.parent().parent(); - - materialPreview.css({ - 'background': currentEl[0].style.background, - 'top': currentEl[0].offsetTop + 'px', - 'left': currentEl[0].offsetLeft + 'px', - 'right': Math.max( 0, parent[0].offsetWidth - ( currentEl[0].offsetLeft + currentEl[0].offsetWidth ) ) + 'px', - 'bottom': Math.max( 0, parent[0].offsetHeight - ( currentEl[0].offsetTop + currentEl[0].offsetHeight ) ) + 'px' - }); - - $scope.color = tinycolor( event.currentTarget.style.background ); - var materialFamily = angular.copy(family); - materialFamily.splice(0,1); - - parent.append( materialPreview ); - $scope.materialFamily = materialFamily; - $timeout(function() { - materialPreview.css({ - top: 0, - bottom: '7px', - right: '8px', - left: '8px' - }); + console.log( event.target.style.backgroundColor ); + $timeout( function() { + $scope.color = tinycolor( event.target.style.backgroundColor ); }); - - /* var x = 0; - var showShades = function showShades() { - $scope.materialFamily.push( materialFamily[x] ); - x++; - if ( x < materialFamily.length ) { - $timeout( showShades, 50 ); - } - }; - showShades(); - */ - - }; + $scope.setValue = function setValue() { // Set the value if available if ( $scope.color && $scope.color && outputFn[$scope.type] && $scope.color.toRgbString() !== 'rgba(0, 0, 0, 0)' ) { @@ -693,18 +675,16 @@ angular.module('mdColorPicker', []) /////////////////////////////////// // Watches and Events /////////////////////////////////// - $scope.$watch( 'alpha', function( newValue ) { + $scope.$watch( 'color._a', function( newValue ) { $scope.color.setAlpha( newValue ); - }); + }, true); $scope.$watch( 'whichPane', function( newValue ) { // 0 - spectrum selector // 1 - sliders // 2 - palette $scope.$broadcast('mdColorPicker:colorSet', {color: $scope.color }); - if ( materialPreview ) { - materialPreview.remove(); - } + }); $scope.$watch( 'type', function() { @@ -725,75 +705,171 @@ angular.module('mdColorPicker', []) // INIT // Let all the other directives initialize /////////////////////////////////// + // console.log( "mdColorPickerContainer Controller PRE Timeout", Date.now() - dateClick ); $timeout( function() { + // console.log( "mdColorPickerContainer Controller Timeout", Date.now() - dateClick ); $scope.$broadcast('mdColorPicker:colorSet', { color: $scope.color }); previewInput.focus(); $scope.previewFocus(); }); + }, + link: function( scope, element, attrs ) { + + var tabs = element[0].getElementsByTagName( 'md-tab' ); + console.log( element, tabs.length ); + /* + 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') ); + var paletteRow = angular.element('
'); + var paletteCell = angular.element('
'); + + var materialTitle = angular.element('
'); + var materialRow = angular.element('
'); + + + + angular.forEach(scope.palette, function( value, key ) { + var row = paletteRow.clone(); + angular.forEach( value, function( color ) { + var cell = paletteCell.clone(); + cell.css({ + height: '25.5px', + backgroundColor: color + }); + cell.bind('click', scope.setPaletteColor ); + row.append( cell ); + }); + + paletteContainer.append( row ); + }); + + angular.forEach(scope.materialPalette, function( value, key ) { + var title = materialTitle.clone(); + title.html(''+key.replace('-',' ')+''); + title.css({ + height: '75px', + backgroundColor: 'rgb('+value['500'].value[0]+','+value['500'].value[1]+','+value['500'].value[2]+')' + }); + if ( scope.isDark(value['500'].value) ) { + title.addClass('dark'); + } + + materialContainer.append( title ); + + angular.forEach( value, function( color, label ) { + + var row = materialRow.clone(); + row.css({ + height: '33px', + backgroundColor: 'rgb('+color.value[0]+','+color.value[1]+','+color.value[2]+')' + }); + if ( scope.isDark(color.value) ) { + row.addClass('dark'); + } + + row.html(''+label+''); + row.bind('click', scope.setPaletteColor ); + materialContainer.append( row ); + }); + + + }); + } } - } + }; }]) .directive( 'mdColorPickerHue', [function() { return { template: '
', - link: hueLinkFn.get + link: hueLinkFn.get, + controller: function() { + // console.log( "mdColorPickerHue Controller", Date.now() - dateClick ); + } }; }]) .directive( 'mdColorPickerAlpha', [function() { return { template: '
', - link: alphaLinkFn.get + link: alphaLinkFn.get, + controller: function() { + // console.log( "mdColorPickerAlpha Controller", Date.now() - dateClick ); + } }; }]) .directive( 'mdColorPickerSpectrum', [function() { return { template: '
{{hue}}', - link: spectrumLinkFn.get + link: spectrumLinkFn.get, + controller: function() { + // console.log( "mdColorPickerSpectrum Controller", Date.now() - dateClick ); + } }; }]) .factory('$mdColorPicker', ['$q', '$mdDialog', 'mdColorPickerHistory', function ($q, $mdDialog, colorHistory) { + var dialog; + return { show: function (options) { - //var result = $q.defer(); - - if (options === undefined) - { + if ( options === undefined ) { options = {}; } + console.log( 'DIALOG OPTIONS', options ); + // Defaults + // Dialog Properties + 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; + options.preserveScope = options.preserveScope === undefined ? true : options.preserveScope; + options.skipHide = options.skipHide === undefined ? true : options.skipHide; - if (options.hasBackdrop === undefined) - options.hasBackdrop = true; + // mdColorPicker Properties + options.mdColorAlphaChannel = options.mdColorAlphaChannel === undefined ? false : options.mdColorAlphaChannel; + options.mdColorSpectrum = options.mdColorSpectrum === undefined ? true : options.mdColorSpectrum; + options.mdColorSliders = options.mdColorSliders === undefined ? true : options.mdColorSliders; + options.mdColorGenericPalette = options.mdColorGenericPalette === undefined ? true : options.mdColorGenericPalette; + options.mdColorMaterialPalette = options.mdColorMaterialPalette === undefined ? true : options.mdColorMaterialPalette; + options.mdColorHistory = options.mdColorHistory === undefined ? true : options.mdColorHistory; - if (options.clickOutsideToClose === undefined) - options.clickOutsideToClose = true; - if (options.defaultValue === undefined) - options.defaultValue = '#FFFFFF'; - if (options.focusOnOpen === undefined) - options.focusOnOpen = false; - var dialog = $mdDialog.show({ - template: ''+ - ''+ - '
'+ - ' '+ - ' Cancel'+ - ' Select'+ - ' '+ - '', + dialog = $mdDialog.show({ + templateUrl: 'mdColorPickerDialog.tpl.html', hasBackdrop: options.hasBackdrop, clickOutsideToClose: options.clickOutsideToClose, - controller: ['$scope', 'value', 'defaultValue', 'random', function( $scope, value, defaultValue, random ) { - + controller: ['$scope', 'options', function( $scope, options ) { + //console.log( "DIALOG CONTROLLER OPEN", Date.now() - dateClick ); $scope.close = function close() { $mdDialog.cancel(); @@ -802,20 +878,39 @@ angular.module('mdColorPicker', []) { $mdDialog.hide( $scope.value ); }; - - $scope.value = value; - $scope.default = defaultValue; - $scope.random = random; $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.mdColorDefaultTab = options.mdColorDefaultTab; + }], locals: { - value: options.value, - defaultValue: options.default, - random: options.random + options: options, }, + preserveScope: options.preserveScope, + skipHide: options.skipHide, + targetEvent: options.$event, - focusOnOpen: options.focusOnOpen + focusOnOpen: options.focusOnOpen, + autoWrap: false, + onShowing: function() { + // console.log( "DIALOG OPEN START", Date.now() - dateClick ); + }, + onComplete: function() { + // console.log( "DIALOG OPEN COMPLETE", Date.now() - dateClick ); + } }); dialog.then(function (value) { @@ -823,7 +918,13 @@ angular.module('mdColorPicker', []) }, function () { }); return dialog; - } + }, + hide: function() { + return dialog.hide(); + }, + cancel: function() { + return dialog.cancel(); + } }; }]); })( window, window.angular ); diff --git a/src/less/mdColorPicker.less b/src/less/mdColorPicker.less index 0a4c122..f5e7bb7 100644 --- a/src/less/mdColorPicker.less +++ b/src/less/mdColorPicker.less @@ -209,7 +209,7 @@ md-color-picker .md-color-picker-input-container, height: 255px; padding: 0px 8px 0; - [md-template] { + [md-tabs-template] { height: 100%; } } @@ -269,6 +269,10 @@ md-color-picker .md-color-picker-input-container, overflow: hidden; width: 30px; + &.md-color-picker-wide { + width: 67px; + } + .md-color-picker-marker { height: 5px; width: 100%; @@ -324,9 +328,9 @@ md-color-picker .md-color-picker-input-container, } } - .md-color-picker-material { + .md-color-picker-material-palette { > div:not(:first-child) { - margin-top: 16px; + } .md-color-picker-material-title { font-size: 22px; @@ -334,9 +338,13 @@ md-color-picker .md-color-picker-input-container, padding: 0 15px; color: rgba(0,0,0,0.85); + text-transform: capitalize; &.dark { color: rgba(255,255,255,0.85); } + &:not(:first-child){ + margin-top: 16px; + } } .md-color-picker-with-label { font-size: 12px; diff --git a/src/templates/mdColorPicker.tpl.html b/src/templates/mdColorPicker.tpl.html index 2c4565c..e313f22 100644 --- a/src/templates/mdColorPicker.tpl.html +++ b/src/templates/mdColorPicker.tpl.html @@ -1,12 +1,12 @@
-
+
- + - +
diff --git a/src/templates/mdColorPickerContainer.tpl.html b/src/templates/mdColorPickerContainer.tpl.html new file mode 100644 index 0000000..29cee87 --- /dev/null +++ b/src/templates/mdColorPickerContainer.tpl.html @@ -0,0 +1,128 @@ +
+
+ +
+ +
+ +
+ +
+
+ + + + + + +
+
+
+ +
+ + + + + + +
+
+
+
+
+ + + + + + + +
+
+
+ R +
+ + +
+ +
+
+
+
+ G +
+ + +
+ +
+
+
+
+ B +
+ + +
+ +
+
+
+
+ A +
+ + +
+ +
+
+
+ + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+
+
+
+
+
+ + + + + +
+ + + +
+ +
diff --git a/src/templates/mdColorPickerDialog.tpl.html b/src/templates/mdColorPickerDialog.tpl.html index b310a2a..89655b4 100644 --- a/src/templates/mdColorPickerDialog.tpl.html +++ b/src/templates/mdColorPickerDialog.tpl.html @@ -1,149 +1,19 @@ -
-
- -
- -
- -
- -
-
- - - - - - -
-
-
- -
- - - - - - -
-
-
-
-
- - - - - - - -
-
-
- R -
- - -
- -
-
-
-
- G -
- - -
- -
-
-
-
- B -
- - -
- -
-
-
-
- A -
- - -
- -
-
-
- - - - - - - -
-
-
-
-
- - - - - - - -
-
-
- {{key}} - {{material.labels[$index]}} -
-
-
- - - - - - - - -
-
-
-
-
-
- - - - - -
- - - -
- -
+ +
+ + Cancel + Select + +