angular-material-npfixed
Version:
The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M
399 lines (341 loc) • 12.7 kB
JavaScript
(function () {
"use strict";
/**
* Use a RegExp to check if the `md-colors="<expression>"` is static string
* or one that should be observed and dynamically interpolated.
*/
var STATIC_COLOR_EXPRESSION = /^{((\s|,)*?["'a-zA-Z-]+?\s*?:\s*?('|")[a-zA-Z0-9-.]*('|"))+\s*}$/;
var colorPalettes = null;
/**
* @ngdoc module
* @name material.components.colors
*
* @description
* Define $mdColors service and a `md-colors=""` attribute directive
*/
angular
.module('material.components.colors', ['material.core'])
.directive('mdColors', MdColorsDirective)
.service('$mdColors', MdColorsService);
/**
* @ngdoc service
* @name $mdColors
* @module material.components.colors
*
* @description
* With only defining themes, one couldn't get non ngMaterial elements colored with Material colors,
* `$mdColors` service is used by the md-color directive to convert the 1..n color expressions to RGBA values and will apply
* those values to element as CSS property values.
*
* @usage
* <hljs lang="js">
* angular.controller('myCtrl', function ($mdColors) {
* var color = $mdColors.getThemeColor('myTheme-red-200-0.5');
* ...
* });
* </hljs>
*
*/
function MdColorsService($mdTheming, $mdUtil, $log) {
colorPalettes = colorPalettes || Object.keys($mdTheming.PALETTES);
// Publish service instance
return {
applyThemeColors: applyThemeColors,
getThemeColor: getThemeColor,
hasTheme: hasTheme
};
// ********************************************
// Internal Methods
// ********************************************
/**
* @ngdoc method
* @name $mdColors#applyThemeColors
*
* @description
* Gets a color json object, keys are css properties and values are string of the wanted color
* Then calculate the rgba() values based on the theme color parts
*
* @param {DOMElement} element the element to apply the styles on.
* @param {object} colorExpression json object, keys are css properties and values are string of the wanted color,
* for example: `{color: 'red-A200-0.3'}`.
*
* @usage
* <hljs lang="js">
* app.directive('myDirective', function($mdColors) {
* return {
* ...
* link: function (scope, elem) {
* $mdColors.applyThemeColors(elem, {color: 'red'});
* }
* }
* });
* </hljs>
*/
function applyThemeColors(element, colorExpression) {
try {
if (colorExpression) {
// Assign the calculate RGBA color values directly as inline CSS
element.css(interpolateColors(colorExpression));
}
} catch (e) {
$log.error(e.message);
}
}
/**
* @ngdoc method
* @name $mdColors#getThemeColor
*
* @description
* Get parsed color from expression
*
* @param {string} expression string of a color expression (for instance `'red-700-0.8'`)
*
* @returns {string} a css color expression (for instance `rgba(211, 47, 47, 0.8)`)
*
* @usage
* <hljs lang="js">
* angular.controller('myCtrl', function ($mdColors) {
* var color = $mdColors.getThemeColor('myTheme-red-200-0.5');
* ...
* });
* </hljs>
*/
function getThemeColor(expression) {
var color = extractColorOptions(expression);
return parseColor(color);
}
/**
* Return the parsed color
* @param color hashmap of color definitions
* @param contrast whether use contrast color for foreground
* @returns rgba color string
*/
function parseColor(color, contrast) {
contrast = contrast || false;
var rgbValues = $mdTheming.PALETTES[color.palette][color.hue];
rgbValues = contrast ? rgbValues.contrast : rgbValues.value;
return $mdUtil.supplant('rgba({0}, {1}, {2}, {3})',
[rgbValues[0], rgbValues[1], rgbValues[2], rgbValues[3] || color.opacity]
);
}
/**
* Convert the color expression into an object with scope-interpolated values
* Then calculate the rgba() values based on the theme color parts
*
* @results Hashmap of CSS properties with associated `rgba( )` string vales
*
*
*/
function interpolateColors(themeColors) {
var rgbColors = {};
var hasColorProperty = themeColors.hasOwnProperty('color');
angular.forEach(themeColors, function (value, key) {
var color = extractColorOptions(value);
var hasBackground = key.indexOf('background') > -1;
rgbColors[key] = parseColor(color);
if (hasBackground && !hasColorProperty) {
rgbColors.color = parseColor(color, true);
}
});
return rgbColors;
}
/**
* Check if expression has defined theme
* e.g.
* 'myTheme-primary' => true
* 'red-800' => false
*/
function hasTheme(expression) {
return angular.isDefined($mdTheming.THEMES[expression.split('-')[0]]);
}
/**
* For the evaluated expression, extract the color parts into a hash map
*/
function extractColorOptions(expression) {
var parts = expression.split('-');
var hasTheme = angular.isDefined($mdTheming.THEMES[parts[0]]);
var theme = hasTheme ? parts.splice(0, 1)[0] : $mdTheming.defaultTheme();
return {
theme: theme,
palette: extractPalette(parts, theme),
hue: extractHue(parts, theme),
opacity: parts[2] || 1
};
}
/**
* Calculate the theme palette name
*/
function extractPalette(parts, theme) {
// If the next section is one of the palettes we assume it's a two word palette
// Two word palette can be also written in camelCase, forming camelCase to dash-case
var isTwoWord = parts.length > 1 && colorPalettes.indexOf(parts[1]) !== -1;
var palette = parts[0].replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
if (isTwoWord) palette = parts[0] + '-' + parts.splice(1, 1);
if (colorPalettes.indexOf(palette) === -1) {
// If the palette is not in the palette list it's one of primary/accent/warn/background
var scheme = $mdTheming.THEMES[theme].colors[palette];
if (!scheme) {
throw new Error($mdUtil.supplant('mdColors: couldn\'t find \'{palette}\' in the palettes.', {palette: palette}));
}
palette = scheme.name;
}
return palette;
}
function extractHue(parts, theme) {
var themeColors = $mdTheming.THEMES[theme].colors;
if (parts[1] === 'hue') {
var hueNumber = parseInt(parts.splice(2, 1)[0], 10);
if (hueNumber < 1 || hueNumber > 3) {
throw new Error($mdUtil.supplant('mdColors: \'hue-{hueNumber}\' is not a valid hue, can be only \'hue-1\', \'hue-2\' and \'hue-3\'', {hueNumber: hueNumber}));
}
parts[1] = 'hue-' + hueNumber;
if (!(parts[0] in themeColors)) {
throw new Error($mdUtil.supplant('mdColors: \'hue-x\' can only be used with [{availableThemes}], but was used with \'{usedTheme}\'', {
availableThemes: Object.keys(themeColors).join(', '),
usedTheme: parts[0]
}));
}
return themeColors[parts[0]].hues[parts[1]];
}
return parts[1] || themeColors[parts[0] in themeColors ? parts[0] : 'primary'].hues['default'];
}
}
/**
* @ngdoc directive
* @name mdColors
* @module material.components.colors
*
* @restrict A
*
* @description
* `mdColors` directive will apply the theme-based color expression as RGBA CSS style values.
*
* The format will be similar to our color defining in the scss files:
*
* ## `[?theme]-[palette]-[?hue]-[?opacity]`
* - [theme] - default value is the default theme
* - [palette] - can be either palette name or primary/accent/warn/background
* - [hue] - default is 500 (hue-x can be used with primary/accent/warn/background)
* - [opacity] - default is 1
*
* > `?` indicates optional parameter
*
* @usage
* <hljs lang="html">
* <div md-colors="{background: 'myTheme-accent-900-0.43'}">
* <div md-colors="{color: 'red-A100', 'border-color': 'primary-600'}">
* <span>Color demo</span>
* </div>
* </div>
* </hljs>
*
* `mdColors` directive will automatically watch for changes in the expression if it recognizes an interpolation
* expression or a function. For performance options, you can use `::` prefix to the `md-colors` expression
* to indicate a one-time data binding.
* <hljs lang="html">
* <md-card md-colors="::{background: '{{theme}}-primary-700'}">
* </md-card>
* </hljs>
*
*/
function MdColorsDirective($mdColors, $mdUtil, $log, $parse) {
return {
restrict: 'A',
require: ['^?mdTheme'],
compile: function (tElem, tAttrs) {
var shouldWatch = shouldColorsWatch();
return function (scope, element, attrs, ctrl) {
var mdThemeController = ctrl[0];
var lastColors = {};
var parseColors = function (theme) {
if (typeof theme !== 'string') {
theme = '';
}
if (!attrs.mdColors) {
attrs.mdColors = '{}';
}
/**
* Json.parse() does not work because the keys are not quoted;
* use $parse to convert to a hash map
*/
var colors = $parse(attrs.mdColors)(scope);
/**
* If mdTheme is defined up the DOM tree
* we add mdTheme theme to colors who doesn't specified a theme
*
* # example
* <hljs lang="html">
* <div md-theme="myTheme">
* <div md-colors="{background: 'primary-600'}">
* <span md-colors="{background: 'mySecondTheme-accent-200'}">Color demo</span>
* </div>
* </div>
* </hljs>
*
* 'primary-600' will be 'myTheme-primary-600',
* but 'mySecondTheme-accent-200' will stay the same cause it has a theme prefix
*/
if (mdThemeController) {
Object.keys(colors).forEach(function (prop) {
var color = colors[prop];
if (!$mdColors.hasTheme(color)) {
colors[prop] = (theme || mdThemeController.$mdTheme) + '-' + color;
}
});
}
cleanElement(colors);
return colors;
};
var cleanElement = function (colors) {
if (!angular.equals(colors, lastColors)) {
var keys = Object.keys(lastColors);
if (lastColors.background && !keys.color) {
keys.push('color');
}
keys.forEach(function (key) {
element.css(key, '');
});
}
lastColors = colors;
};
/**
* Registering for mgTheme changes and asking mdTheme controller run our callback whenever a theme changes
*/
var unregisterChanges = angular.noop;
if (mdThemeController) {
unregisterChanges = mdThemeController.registerChanges(function (theme) {
$mdColors.applyThemeColors(element, parseColors(theme));
});
}
scope.$on('$destroy', function () {
unregisterChanges();
});
try {
if (shouldWatch) {
scope.$watch(parseColors, angular.bind(this,
$mdColors.applyThemeColors, element
), true);
}
else {
$mdColors.applyThemeColors(element, parseColors());
}
}
catch (e) {
$log.error(e.message);
}
};
function shouldColorsWatch() {
// Simulate 1x binding and mark mdColorsWatch == false
var rawColorExpression = tAttrs.mdColors;
var bindOnce = rawColorExpression.indexOf('::') > -1;
var isStatic = bindOnce ? true : STATIC_COLOR_EXPRESSION.test(tAttrs.mdColors);
// Remove it for the postLink...
tAttrs.mdColors = rawColorExpression.replace('::', '');
var hasWatchAttr = angular.isDefined(tAttrs.mdColorsWatch);
return (bindOnce || isStatic) ? false :
hasWatchAttr ? $mdUtil.parseAttributeBoolean(tAttrs.mdColorsWatch) : true;
}
}
};
}
})();