From 4b3274a05daff686fb4831a9300bbc4d276cfe09 Mon Sep 17 00:00:00 2001
From: Elad Bezalel <elad.bezalel@gmail.com>
Date: Wed, 30 Mar 2016 01:23:06 +0300
Subject: [PATCH] feat(colors): directive to use any color from any palette
 everywhere

- added directive

fixes #1269
---
 src/components/colors/colors.js               | 77 +++++++++++++++++++
 .../colors/demoBasicUsage/index.html          | 29 +++++++
 .../colors/demoBasicUsage/script.js           | 19 +++++
 3 files changed, 125 insertions(+)
 create mode 100644 src/components/colors/colors.js
 create mode 100644 src/components/colors/demoBasicUsage/index.html
 create mode 100644 src/components/colors/demoBasicUsage/script.js

diff --git a/src/components/colors/colors.js b/src/components/colors/colors.js
new file mode 100644
index 00000000000..e69011e8d0a
--- /dev/null
+++ b/src/components/colors/colors.js
@@ -0,0 +1,77 @@
+/**
+ * @ngdoc module
+ * @name material.components.colors
+ *
+ * @description
+ * Colors directive
+ */
+angular.module('material.components.colors', [
+    'material.core'
+  ])
+  .directive('mdColors', mdColorsDirective);
+
+/**
+ * @ngdoc directive
+ * @name mdColors
+ * @module material.components.colors
+ *
+ * @restrict A
+ *
+ * @description
+ *
+ *
+ * @usage
+ * <hljs lang="html">
+
+ * </hljs>
+ *
+ */
+
+function mdColorsDirective($mdColorPalette, $mdTheming) {
+  return {
+    restrict: 'A',
+    link: function (scope, elem, attrs) {
+      scope.$watch(attrs.mdColors, function (val) {
+        Object.keys(val).forEach(function (key) {
+          var split = val[key].split('-');
+
+          var theme = 'default';
+
+          // Checking if the first section is actually a theme
+          if ($mdTheming.THEMES[split[0]]) {
+            theme = split.splice(0, 1);
+          }
+
+          var palette = split[0];
+
+          // If the next section is one of the palettes we assume it's a two word palette
+          if (Object.keys($mdColorPalette).indexOf(split[1]) !== -1) {
+            palette += '-' + split.splice(1, 1);
+          }
+          else {
+            // Two word palette can be also written in camelCase, forming camelCase to dash-case
+            palette = palette.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+          }
+
+          // If the palette is not in the palette list it's one of primary/accent/warn/background
+          if (Object.keys($mdColorPalette).indexOf(palette) === -1) {
+            var scheme = $mdTheming.THEMES[theme].colors[palette];
+
+            if (!scheme) {
+              return console.error('mdColors: couldn\'t find \'' + palette + '\' in the palettes.');
+            }
+
+            palette = scheme.name;
+          }
+
+          var hue = split[1] || 500;
+          var opacity = split[2] || 1;
+
+          var color = $mdColorPalette[palette][hue].value;
+
+          elem.css(key, 'rgba(' + color[0] + ', ' + color[1] + ', ' + color[2] + ', ' + opacity + ')');
+        });
+      })
+    }
+  }
+}
diff --git a/src/components/colors/demoBasicUsage/index.html b/src/components/colors/demoBasicUsage/index.html
new file mode 100644
index 00000000000..06537606a05
--- /dev/null
+++ b/src/components/colors/demoBasicUsage/index.html
@@ -0,0 +1,29 @@
+<div ng-controller="BasicDemoCtrl as ctrl" layout="column" ng-cloak>
+  <md-card md-colors="{background: 'myTheme-accent-500-0.87'}">
+    <md-card-title>
+      <span md-colors="{color: 'amber-A700'}">Now you can use</span>
+    </md-card-title>
+  </md-card>
+  <md-card md-colors="{background: 'primary'}">
+    <md-card-title>
+      <span md-colors="{color: 'accent-A200'}">Any color from any palette</span>
+    </md-card-title>
+  </md-card>
+
+  <md-card>
+    <md-card-title>
+      <span md-colors="{color: 'red'}">E</span>
+      <span md-colors="{color: 'pink'}">V</span>
+      <span md-colors="{color: 'purple'}">E</span>
+      <span md-colors="{color: 'deepPurple'}">R</span>
+      <span md-colors="{color: 'indigo'}">Y</span>
+      <span md-colors="{color: 'blue'}">W</span>
+      <span md-colors="{color: 'light-blue'}">H</span>
+      <span md-colors="{color: 'cyan'}">E</span>
+      <span md-colors="{color: 'teal'}">R</span>
+      <span md-colors="{color: 'green'}">E</span>
+      <span md-colors="{color: 'lightGreen'}">!</span>
+      <span md-colors="{color: 'lime'}">!</span>
+    </md-card-title>
+  </md-card>
+</div>
diff --git a/src/components/colors/demoBasicUsage/script.js b/src/components/colors/demoBasicUsage/script.js
new file mode 100644
index 00000000000..35a7554b107
--- /dev/null
+++ b/src/components/colors/demoBasicUsage/script.js
@@ -0,0 +1,19 @@
+(function () {
+  'use strict';
+  angular
+      .module('colorsDemo', ['ngMaterial', 'ngMessages'])
+      .config(function ($mdThemingProvider) {
+        $mdThemingProvider.theme('default')
+            .primaryPalette('purple')
+            .accentPalette('light-green');
+        
+        $mdThemingProvider.theme('myTheme')
+            .primaryPalette('indigo')
+            .accentPalette('pink');
+      })
+      .controller('BasicDemoCtrl', DemoCtrl);
+
+  function DemoCtrl () {
+
+  }
+})();