(js) mdColors module to expose the themes colors
parent
11e7af3450
commit
7a7547c7c3
|
@ -0,0 +1,143 @@
|
|||
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
||||
|
||||
/*
|
||||
* https://github.com/angular/material/issues/1269
|
||||
* https://gist.github.com/senthilprabhut/dd2147ebabc89bf223e7
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var _$mdThemingProvider;
|
||||
|
||||
angular
|
||||
.module('mdColors', ['mdColors'])
|
||||
.config(configure)
|
||||
.run(runBlock);
|
||||
|
||||
/**
|
||||
* @ngInject
|
||||
*/
|
||||
configure.$inject = ['$mdThemingProvider'];
|
||||
function configure($mdThemingProvider) {
|
||||
_$mdThemingProvider = $mdThemingProvider;
|
||||
}
|
||||
|
||||
/**
|
||||
* @ngInject
|
||||
*/
|
||||
runBlock.$inject = ['$interpolate', '$document'];
|
||||
function runBlock($interpolate, $document) {
|
||||
|
||||
function buildCssSelectors(selectors) {
|
||||
var result = selectors.join('');
|
||||
return result;
|
||||
}
|
||||
|
||||
var fgDefault = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-fg']) + ' { color:{{value}};}'),
|
||||
bgDefault = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-bg']) + ' { background-color:{{value}};}'),
|
||||
bdrDefault = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-bdr']) + ' { border-color:{{value}};}'),
|
||||
fgDefaultHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{hue}}','.md-fg']) + ' { color:{{value}};}'),
|
||||
bgDefaultHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{hue}}','.md-bg']) + ' { background-color:{{value}};}'),
|
||||
fgColor = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}','.md-fg']) + ' { color:{{value}};}'),
|
||||
bgColor = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}','.md-bg']) + ' { background-color:{{value}};}'),
|
||||
bdrColor = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}','.md-bdr']) + ' { border-color:{{value}};}'),
|
||||
fgHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}.md-{{hue}}','.md-fg']) + ' { color:{{value}};}'),
|
||||
bgHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}.md-{{hue}}','.md-bg']) + ' { background-color:{{value}};}'),
|
||||
customSheet = getStyleSheet(),
|
||||
index = 0;
|
||||
|
||||
// Clear out old rules from stylesheet
|
||||
while (customSheet.cssRules.length > 0 ) {
|
||||
customSheet.deleteRule(0);
|
||||
}
|
||||
angular.forEach(_$mdThemingProvider._THEMES, function(theme, themeName){
|
||||
// Add default selectors - primary is the default palette
|
||||
addRule(fgDefault, bgDefault, themeName, 'primary',
|
||||
_$mdThemingProvider._PALETTES[theme.colors.primary.name][theme.colors.primary.hues.default]);
|
||||
addRule(fgDefaultHue, bgDefaultHue, themeName, 'primary',
|
||||
_$mdThemingProvider._PALETTES[theme.colors.primary.name][theme.colors.primary.hues['hue-2'] ], 'hue-2');
|
||||
addRule(fgDefaultHue, bgDefaultHue, themeName, 'primary',
|
||||
_$mdThemingProvider._PALETTES[theme.colors.primary.name][theme.colors.primary.hues['hue-3'] ], 'hue-3');
|
||||
addRule(fgDefaultHue, bgDefaultHue, themeName, 'primary',
|
||||
_$mdThemingProvider._PALETTES[theme.colors.primary.name][theme.colors.primary.hues['hue-1'] ], 'hue-1');
|
||||
addBorderRule(bdrDefault, themeName, 'primary',
|
||||
_$mdThemingProvider._PALETTES[theme.colors.primary.name][theme.colors.primary.hues.default]);
|
||||
|
||||
// Add selectors for palettes - accent, background, primary and warn
|
||||
angular.forEach(theme.colors, function(color, paletteName){
|
||||
addRule(fgColor, bgColor, themeName, paletteName, _$mdThemingProvider._PALETTES[color.name][color.hues.default]);
|
||||
addBorderRule(bdrColor, themeName, paletteName, _$mdThemingProvider._PALETTES[color.name][color.hues.default]);
|
||||
addRule(fgHue, bgHue, themeName, paletteName, _$mdThemingProvider._PALETTES[color.name][color.hues['hue-2'] ], 'hue-2');
|
||||
addRule(fgHue, bgHue, themeName, paletteName, _$mdThemingProvider._PALETTES[color.name][color.hues['hue-3'] ], 'hue-3');
|
||||
addRule(fgHue, bgHue, themeName, paletteName, _$mdThemingProvider._PALETTES[color.name][color.hues['hue-1'] ], 'hue-1');
|
||||
});
|
||||
});
|
||||
|
||||
function addRule(fgInterpolate, bgInterpolate, themeName, paletteName, colorArray, hueName){
|
||||
// Set up interpolation functions to build css rules.
|
||||
if (!colorArray) return;
|
||||
var colorValue = 'rgb(' + colorArray.value[0] + ',' + colorArray.value[1] + ',' + colorArray.value[2] + ')';
|
||||
|
||||
// Insert foreground color rule
|
||||
customSheet.insertRule(fgInterpolate({
|
||||
theme: themeName,
|
||||
palette: paletteName,
|
||||
value: colorValue,
|
||||
hue: hueName
|
||||
}), index);
|
||||
index += 1;
|
||||
|
||||
console.debug(fgInterpolate({
|
||||
theme: themeName,
|
||||
palette: paletteName,
|
||||
value: colorValue,
|
||||
hue: hueName
|
||||
}));
|
||||
|
||||
// Insert background color rule
|
||||
customSheet.insertRule(bgInterpolate({
|
||||
theme: themeName,
|
||||
palette: paletteName,
|
||||
value: colorValue,
|
||||
hue: hueName
|
||||
}), index);
|
||||
index += 1;
|
||||
|
||||
console.debug(bgInterpolate({
|
||||
theme: themeName,
|
||||
palette: paletteName,
|
||||
value: colorValue,
|
||||
hue: hueName
|
||||
}));
|
||||
}
|
||||
|
||||
function addBorderRule(bdrInterpolate, themeName, paletteName, colorArray, hueName){
|
||||
// Set up interpolation functions to build css rule for border color.
|
||||
if (!colorArray) return;
|
||||
var colorValue = 'rgb(' + colorArray.value[0] + ',' + colorArray.value[1] + ',' + colorArray.value[2] + ')';
|
||||
|
||||
customSheet.insertRule(bdrInterpolate({
|
||||
theme: themeName,
|
||||
palette: paletteName,
|
||||
value: colorValue,
|
||||
hue: hueName
|
||||
}), index);
|
||||
index += 1;
|
||||
}
|
||||
|
||||
function getStyleSheet() {
|
||||
// function to add a dynamic style-sheet to the document
|
||||
var style = $document[0].head.querySelector('style[title="Dynamic-Generated-by-mdColors"]');
|
||||
if (style === null) {
|
||||
style = $document[0].createElement('style');
|
||||
style.title = 'Dynamic-Generated-by-mdColors';
|
||||
// WebKit hack... (not sure if still needed)
|
||||
style.appendChild($document[0].createTextNode(''));
|
||||
$document[0].head.appendChild(style);
|
||||
}
|
||||
return style.sheet;
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
Loading…
Reference in New Issue