From d9810d3e13937618f1bf795c4d018b4025d21da9 Mon Sep 17 00:00:00 2001 From: pkurochka Date: Wed, 2 Nov 2016 19:44:04 +0200 Subject: [PATCH 1/2] added an output to notify when color is selected --- demo/js/app.js | 4 +++- index.html | 1 + src/js/mdColorPicker.js | 6 +++++- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/demo/js/app.js b/demo/js/app.js index 5f44aed..b1f6f68 100644 --- a/demo/js/app.js +++ b/demo/js/app.js @@ -32,5 +32,7 @@ app.controller('MainCtrl', function($scope) { defaultTab: 1, }; $scope.textConfig.showPreview = true; - + $scope.onColorSelect = function (color) { + console.log(color) + }; }); diff --git a/index.html b/index.html index 8bed5a9..90d34c6 100644 --- a/index.html +++ b/index.html @@ -79,6 +79,7 @@

Text Style

ng-model="textConfig.textBackground" md-color-history="true" md-color-alpha-channel="true" + md-color-on-select="onColorSelect(color)" > diff --git a/src/js/mdColorPicker.js b/src/js/mdColorPicker.js index 9d29097..ec0bdd7 100644 --- a/src/js/mdColorPicker.js +++ b/src/js/mdColorPicker.js @@ -461,7 +461,8 @@ angular.module('mdColorPicker', []) mdColorHex: '=?', mdColorRgb: '=?', mdColorHsl: '=?', - mdColorDefaultTab: '=?' + mdColorDefaultTab: '=?', + mdColorOnSelect: '&?' }, controller: ['$scope', '$element', '$attrs', '$mdDialog', '$mdColorPicker', function( $scope, $element, $attrs, $mdDialog, $mdColorPicker ) { var didJustClose = false; @@ -506,6 +507,7 @@ angular.module('mdColorPicker', []) $scope.mdColorHex = $scope.mdColorHex === undefined ? true : $scope.mdColorHex; $scope.mdColorRgb = $scope.mdColorRgb === undefined ? true : $scope.mdColorRgb; $scope.mdColorHsl = $scope.mdColorHsl === undefined ? true : $scope.mdColorHsl; + $scope.mdColorOnSelect = $scope.mdColorOnSelect === undefined ? function() {} : $scope.mdColorOnSelect; // Set the starting value updateValue(); @@ -554,6 +556,7 @@ angular.module('mdColorPicker', []) mdColorRgb: $scope.mdColorRgb, mdColorHsl: $scope.mdColorHsl, mdColorDefaultTab: $scope.mdColorDefaultTab, + mdColorOnSelect: $scope.mdColorOnSelect, $event: $event, @@ -938,6 +941,7 @@ angular.module('mdColorPicker', []) dialog.then(function (value) { colorHistory.add(new tinycolor(value)); + options.mdColorOnSelect({color: value}); }, function () { }); return dialog; From a21e5840c240eedb69161fbced4e7f70b5b0dd4f Mon Sep 17 00:00:00 2001 From: pkurochka Date: Wed, 2 Nov 2016 20:11:43 +0200 Subject: [PATCH 2/2] updated readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index ed80458..7fb5366 100644 --- a/README.md +++ b/README.md @@ -107,6 +107,7 @@ $scope.scopeVariable.options = { | rgb | md-color-rgb | Boolean | true | Show the RGB values tab. | | hsl | md-color-hsl | Boolean | true | Show the HSL values tab. | | defaultTab | md-color-default-tab | String, Int | "spectrum" | Which tab should be selected when opening. Can either be a string or index. If the value is an index, do not count hidden/disabled tabs. | +| onSelect | md-color-on-select | Function | function() {} | Callback which is called when color is selected. Please note: it works only via attribute now | ## Disclaimer