mirror of
https://github.com/google/material-design-lite.git
synced 2024-09-11 12:25:38 +03:00
Refactor customiser
Decouple rendering from DOM Don't do DOM operations if no DOM has been given Make downloading someone else's responsibility Generate ALL the stylesheets (closes #394) Fix downloading on IE Add utility functions Move constants to the top Add TODO comment to gen task
This commit is contained in:
Alexander Surma
Addy Osmani
parent
510a38ad17
commit
7c71c9b62a
@ -1,4 +1,5 @@
|
||||
/*global MaterialCustomizer:true*/
|
||||
/*global MaterialCustomizer:true,Prism:true*/
|
||||
|
||||
|
||||
/* exported init */
|
||||
function init() {
|
||||
@ -7,90 +8,115 @@ function init() {
|
||||
var wheel = document.querySelector('#wheel > svg');
|
||||
var cdn = document.querySelector('.mdl-gen__cdn .mdl-gen__cdn-link');
|
||||
var mc = new MaterialCustomizer(wheel, cdn);
|
||||
mc.numSelected = 1;
|
||||
mc.highlightField('Indigo');
|
||||
mc.numSelected = 2;
|
||||
mc.highlightField('Pink');
|
||||
window.requestAnimationFrame(function() {
|
||||
mc.updateCDN();
|
||||
mc.changeColor();
|
||||
});
|
||||
|
||||
// Workaround for IE.
|
||||
var dl = document.querySelector('#download');
|
||||
dl.addEventListener('click', function() {
|
||||
if (window.navigator.msSaveBlob) {
|
||||
window.navigator.msSaveBlob(this.blob, 'material.min.css');
|
||||
}
|
||||
}.bind(mc));
|
||||
|
||||
// Download template
|
||||
var req = new XMLHttpRequest();
|
||||
req.onload = function() {
|
||||
mc.template = this.responseText;
|
||||
mc.highlightField('Indigo');
|
||||
mc.highlightField('Pink');
|
||||
window.requestAnimationFrame(function() {
|
||||
mc.updateCDN();
|
||||
mc.updateStylesheet();
|
||||
});
|
||||
};
|
||||
req.open('get', '../material.min.css.template', true);
|
||||
req.send();
|
||||
}
|
||||
|
||||
(function() {
|
||||
MaterialCustomizer = (function() {
|
||||
'use strict';
|
||||
|
||||
var COLORS = ['Cyan', 'Teal', 'Green', 'Light Green', 'Lime',
|
||||
'Yellow', 'Amber', 'Orange', 'Brown', 'Blue Grey',
|
||||
'Grey', 'Deep Orange', 'Red', 'Pink', 'Purple',
|
||||
'Deep Purple', 'Indigo', 'Blue', 'Light Blue'];
|
||||
var FORBIDDEN_ACCENTS = ['Blue Grey', 'Brown', 'Grey'];
|
||||
var MD_COLORS = ['Red', 'Pink', 'Purple', 'Deep Purple', 'Indigo',
|
||||
'Blue', 'Light Blue', 'Cyan', 'Teal', 'Green',
|
||||
'Light Green', 'Lime', 'Yellow', 'Amber', 'Orange',
|
||||
'Deep Orange', 'Brown', 'Grey', 'Blue Grey'];
|
||||
var MD_SHADES = ['50', '100', '200', '300', '400',
|
||||
'500', '600', '700', '800', '900',
|
||||
'A100', 'A200', 'A400', 'A700'];
|
||||
var MD_PALETTE = [
|
||||
['255,235,238', '255,205,210', '239,154,154', '229,115,115', '239,83,80',
|
||||
'244,67,54', '229,57,53', '211,47,47', '198,40,40', '183,28,28',
|
||||
'255,138,128', '255,82,82', '255,23,68', '213,0,0'],
|
||||
['252,228,236', '248,187,208', '244,143,177', '240,98,146', '236,64,122',
|
||||
'233,30,99', '216,27,96', '194,24,91', '173,20,87', '136,14,79',
|
||||
'255,128,171', '255,64,129', '245,0,87', '197,17,98'],
|
||||
['243,229,245', '225,190,231', '206,147,216', '186,104,200', '171,71,188',
|
||||
'156,39,176', '142,36,170', '123,31,162', '106,27,154', '74,20,140',
|
||||
'234,128,252', '224,64,251', '213,0,249', '170,0,255'],
|
||||
['237,231,246', '209,196,233', '179,157,219', '149,117,205', '126,87,194',
|
||||
'103,58,183', '94,53,177', '81,45,168', '69,39,160', '49,27,146',
|
||||
'179,136,255', '124,77,255', '101,31,255', '98,0,234'],
|
||||
['232,234,246', '197,202,233', '159,168,218', '121,134,203', '92,107,192',
|
||||
'63,81,181', '57,73,171', '48,63,159', '40,53,147', '26,35,126',
|
||||
'140,158,255', '83,109,254', '61,90,254', '48,79,254'],
|
||||
['227,242,253', '187,222,251', '144,202,249', '100,181,246', '66,165,245',
|
||||
'33,150,243', '30,136,229', '25,118,210', '21,101,192', '13,71,161',
|
||||
'130,177,255', '68,138,255', '41,121,255', '41,98,255'],
|
||||
['225,245,254', '179,229,252', '129,212,250', '79,195,247', '41,182,246',
|
||||
'3,169,244', '3,155,229', '2,136,209', '2,119,189', '1,87,155',
|
||||
'128,216,255', '64,196,255', '0,176,255', '0,145,234'],
|
||||
['224,247,250', '178,235,242', '128,222,234', '77,208,225', '38,198,218',
|
||||
'0,188,212', '0,172,193', '0,151,167', '0,131,143', '0,96,100',
|
||||
'132,255,255', '24,255,255', '0,229,255', '0,184,212'],
|
||||
['224,242,241', '178,223,219', '128,203,196', '77,182,172', '38,166,154',
|
||||
'0,150,136', '0,137,123', '0,121,107', '0,105,92', '0,77,64',
|
||||
'167,255,235', '100,255,218', '29,233,182', '0,191,165'],
|
||||
['232,245,233', '200,230,201', '165,214,167', '129,199,132', '102,187,106',
|
||||
'76,175,80', '67,160,71', '56,142,60', '46,125,50', '27,94,32',
|
||||
'185,246,202', '105,240,174', '0,230,118', '0,200,83'],
|
||||
['241,248,233', '220,237,200', '197,225,165', '174,213,129', '156,204,101',
|
||||
'139,195,74', '124,179,66', '104,159,56', '85,139,47', '51,105,30',
|
||||
'204,255,144', '178,255,89', '118,255,3', '100,221,23'],
|
||||
['249,251,231', '240,244,195', '230,238,156', '220,231,117', '212,225,87',
|
||||
'205,220,57', '192,202,51', '175,180,43', '158,157,36', '130,119,23',
|
||||
'244,255,129', '238,255,65', '198,255,0', '174,234,0'],
|
||||
['255,253,231', '255,249,196', '255,245,157', '255,241,118', '255,238,88',
|
||||
'255,235,59', '253,216,53', '251,192,45', '249,168,37', '245,127,23',
|
||||
'255,255,141', '255,255,0', '255,234,0', '255,214,0'],
|
||||
['255,248,225', '255,236,179', '255,224,130', '255,213,79', '255,202,40',
|
||||
'255,193,7', '255,179,0', '255,160,0', '255,143,0', '255,111,0',
|
||||
'255,229,127', '255,215,64', '255,196,0', '255,171,0'],
|
||||
['255,243,224', '255,224,178', '255,204,128', '255,183,77', '255,167,38',
|
||||
'255,152,0', '251,140,0', '245,124,0', '239,108,0', '230,81,0',
|
||||
'255,209,128', '255,171,64', '255,145,0', '255,109,0'],
|
||||
['251,233,231', '255,204,188', '255,171,145', '255,138,101', '255,112,67',
|
||||
'255,87,34', '244,81,30', '230,74,25', '216,67,21', '191,54,12',
|
||||
'255,158,128', '255,110,64', '255,61,0', '221,44,0'],
|
||||
['239,235,233', '215,204,200', '188,170,164', '161,136,127', '141,110,99',
|
||||
'121,85,72', '109,76,65', '93,64,55', '78,52,46', '62,39,35'],
|
||||
['250,250,250', '245,245,245', '238,238,238', '224,224,224', '189,189,189',
|
||||
'158,158,158', '117,117,117', '97,97,97', '66,66,66', '33,33,33'],
|
||||
['236,239,241', '207,216,220', '176,190,197', '144,164,174', '120,144,156',
|
||||
'96,125,139', '84,110,122', '69,90,100', '55,71,79', '38,50,56']
|
||||
];
|
||||
|
||||
function parentWrapper(p) {
|
||||
return p.parentElement || p.parentNode;
|
||||
}
|
||||
|
||||
window.MaterialCustomizer = function(wheel, cdn) {
|
||||
var MaterialCustomizer = function(wheel, cdn) {
|
||||
this.wheel = wheel;
|
||||
this.cdn = cdn;
|
||||
this.cdnTpl = cdn.textContent;
|
||||
this.paletteIndices = ['Red', 'Pink', 'Purple', 'Deep Purple', 'Indigo',
|
||||
'Blue', 'Light Blue', 'Cyan', 'Teal', 'Green',
|
||||
'Light Green', 'Lime', 'Yellow', 'Amber', 'Orange',
|
||||
'Deep Orange', 'Brown', 'Grey', 'Blue Grey'];
|
||||
this.lightnessIndices = ['50', '100', '200', '300', '400',
|
||||
'500', '600', '700', '800', '900',
|
||||
'A100', 'A200', 'A400', 'A700'];
|
||||
this.palettes = [
|
||||
['255,235,238', '255,205,210', '239,154,154', '229,115,115', '239,83,80',
|
||||
'244,67,54', '229,57,53', '211,47,47', '198,40,40', '183,28,28',
|
||||
'255,138,128', '255,82,82', '255,23,68', '213,0,0'],
|
||||
['252,228,236', '248,187,208', '244,143,177', '240,98,146', '236,64,122',
|
||||
'233,30,99', '216,27,96', '194,24,91', '173,20,87', '136,14,79',
|
||||
'255,128,171', '255,64,129', '245,0,87', '197,17,98'],
|
||||
['243,229,245', '225,190,231', '206,147,216', '186,104,200', '171,71,188',
|
||||
'156,39,176', '142,36,170', '123,31,162', '106,27,154', '74,20,140',
|
||||
'234,128,252', '224,64,251', '213,0,249', '170,0,255'],
|
||||
['237,231,246', '209,196,233', '179,157,219', '149,117,205', '126,87,194',
|
||||
'103,58,183', '94,53,177', '81,45,168', '69,39,160', '49,27,146',
|
||||
'179,136,255', '124,77,255', '101,31,255', '98,0,234'],
|
||||
['232,234,246', '197,202,233', '159,168,218', '121,134,203', '92,107,192',
|
||||
'63,81,181', '57,73,171', '48,63,159', '40,53,147', '26,35,126',
|
||||
'140,158,255', '83,109,254', '61,90,254', '48,79,254'],
|
||||
['227,242,253', '187,222,251', '144,202,249', '100,181,246', '66,165,245',
|
||||
'33,150,243', '30,136,229', '25,118,210', '21,101,192', '13,71,161',
|
||||
'130,177,255', '68,138,255', '41,121,255', '41,98,255'],
|
||||
['225,245,254', '179,229,252', '129,212,250', '79,195,247', '41,182,246',
|
||||
'3,169,244', '3,155,229', '2,136,209', '2,119,189', '1,87,155',
|
||||
'128,216,255', '64,196,255', '0,176,255', '0,145,234'],
|
||||
['224,247,250', '178,235,242', '128,222,234', '77,208,225', '38,198,218',
|
||||
'0,188,212', '0,172,193', '0,151,167', '0,131,143', '0,96,100',
|
||||
'132,255,255', '24,255,255', '0,229,255', '0,184,212'],
|
||||
['224,242,241', '178,223,219', '128,203,196', '77,182,172', '38,166,154',
|
||||
'0,150,136', '0,137,123', '0,121,107', '0,105,92', '0,77,64',
|
||||
'167,255,235', '100,255,218', '29,233,182', '0,191,165'],
|
||||
['232,245,233', '200,230,201', '165,214,167', '129,199,132', '102,187,106',
|
||||
'76,175,80', '67,160,71', '56,142,60', '46,125,50', '27,94,32',
|
||||
'185,246,202', '105,240,174', '0,230,118', '0,200,83'],
|
||||
['241,248,233', '220,237,200', '197,225,165', '174,213,129', '156,204,101',
|
||||
'139,195,74', '124,179,66', '104,159,56', '85,139,47', '51,105,30',
|
||||
'204,255,144', '178,255,89', '118,255,3', '100,221,23'],
|
||||
['249,251,231', '240,244,195', '230,238,156', '220,231,117', '212,225,87',
|
||||
'205,220,57', '192,202,51', '175,180,43', '158,157,36', '130,119,23',
|
||||
'244,255,129', '238,255,65', '198,255,0', '174,234,0'],
|
||||
['255,253,231', '255,249,196', '255,245,157', '255,241,118', '255,238,88',
|
||||
'255,235,59', '253,216,53', '251,192,45', '249,168,37', '245,127,23',
|
||||
'255,255,141', '255,255,0', '255,234,0', '255,214,0'],
|
||||
['255,248,225', '255,236,179', '255,224,130', '255,213,79', '255,202,40',
|
||||
'255,193,7', '255,179,0', '255,160,0', '255,143,0', '255,111,0',
|
||||
'255,229,127', '255,215,64', '255,196,0', '255,171,0'],
|
||||
['255,243,224', '255,224,178', '255,204,128', '255,183,77', '255,167,38',
|
||||
'255,152,0', '251,140,0', '245,124,0', '239,108,0', '230,81,0',
|
||||
'255,209,128', '255,171,64', '255,145,0', '255,109,0'],
|
||||
['251,233,231', '255,204,188', '255,171,145', '255,138,101', '255,112,67',
|
||||
'255,87,34', '244,81,30', '230,74,25', '216,67,21', '191,54,12',
|
||||
'255,158,128', '255,110,64', '255,61,0', '221,44,0'],
|
||||
['239,235,233', '215,204,200', '188,170,164', '161,136,127', '141,110,99',
|
||||
'121,85,72', '109,76,65', '93,64,55', '78,52,46', '62,39,35'],
|
||||
['250,250,250', '245,245,245', '238,238,238', '224,224,224', '189,189,189',
|
||||
'158,158,158', '117,117,117', '97,97,97', '66,66,66', '33,33,33'],
|
||||
['236,239,241', '207,216,220', '176,190,197', '144,164,174', '120,144,156',
|
||||
'96,125,139', '84,110,122', '69,90,100', '55,71,79', '38,50,56']
|
||||
];
|
||||
if (this.cdn) {
|
||||
this.cdnTpl = cdn.textContent;
|
||||
}
|
||||
this.paletteIndices = MD_COLORS;
|
||||
this.lightnessIndices = MD_SHADES;
|
||||
this.palettes = MD_PALETTE;
|
||||
|
||||
this.init_();
|
||||
};
|
||||
@ -105,33 +131,14 @@ function init() {
|
||||
c: 40, // Distance(center of selector circle, border of wheel)
|
||||
mrs: 0.5, // Percent of available width to use as radius for selector circle
|
||||
alphaIncr: 0.005, // Value to add to alpha to make tiles overlap slightly
|
||||
colors: [
|
||||
'Cyan',
|
||||
'Teal',
|
||||
'Green',
|
||||
'Light Green',
|
||||
'Lime',
|
||||
'Yellow',
|
||||
'Amber',
|
||||
'Orange',
|
||||
'Brown',
|
||||
'Blue Grey',
|
||||
'Grey',
|
||||
'Deep Orange',
|
||||
'Red',
|
||||
'Pink',
|
||||
'Purple',
|
||||
'Deep Purple',
|
||||
'Indigo',
|
||||
'Blue',
|
||||
'Light Blue',
|
||||
]
|
||||
colors: COLORS
|
||||
};
|
||||
this.forbiddenAccents = ['Blue Grey', 'Brown', 'Grey'];
|
||||
this.numSelected = 0;
|
||||
|
||||
this.forbiddenAccents = FORBIDDEN_ACCENTS;
|
||||
this.calculateValues_();
|
||||
this.buildWheel_();
|
||||
|
||||
if (this.wheel) {
|
||||
this.buildWheel_();
|
||||
}
|
||||
|
||||
return;
|
||||
};
|
||||
@ -265,29 +272,37 @@ function init() {
|
||||
return fieldTpl;
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.getNumSelected = function() {
|
||||
if (this.wheel.querySelector('.selected--2')) {
|
||||
return 2;
|
||||
} else if (this.wheel.querySelector('.selected--1')) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.fieldClicked_ = function (ev) {
|
||||
var g = parentWrapper(parentWrapper(ev.target));
|
||||
var selectedColor = g.getAttribute('data-color');
|
||||
var numSelected = this.getNumSelected();
|
||||
// Ignore clicks on already selected fields
|
||||
if ((g.getAttribute('class') || '').indexOf('selected--1') !== -1 && this.numSelected === 1) {
|
||||
if ((g.getAttribute('class') || '').indexOf('selected--1') !== -1 && numSelected === 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.numSelected++;
|
||||
switch (this.numSelected) {
|
||||
case 2:
|
||||
switch (numSelected) {
|
||||
case 1:
|
||||
if (this.forbiddenAccents.indexOf(selectedColor) !== -1) {
|
||||
this.numSelected--;
|
||||
return;
|
||||
}
|
||||
this.highlightField(g.getAttribute('data-color'));
|
||||
this.wheel.setAttribute('class', '');
|
||||
window.requestAnimationFrame(function() {
|
||||
this.updateCDN();
|
||||
this.changeColor();
|
||||
this.updateStylesheet();
|
||||
}.bind(this));
|
||||
break;
|
||||
case 3:
|
||||
case 2:
|
||||
Array.prototype.forEach.call(
|
||||
this.wheel.querySelector('g.wheel--maing').childNodes,
|
||||
function(f) {
|
||||
@ -295,9 +310,8 @@ function init() {
|
||||
f.querySelector('.polygons').setAttribute('filter', '');
|
||||
}
|
||||
);
|
||||
this.numSelected = 1;
|
||||
/* falls through */
|
||||
case 1:
|
||||
case 0:
|
||||
this.highlightField(g.getAttribute('data-color'));
|
||||
window.requestAnimationFrame(function() {
|
||||
this.wheel.setAttribute('class', 'hide-nonaccents');
|
||||
@ -306,19 +320,35 @@ function init() {
|
||||
}
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.updateCDN = function() {
|
||||
var primaryColor = this.wheel.querySelector('.selected--1')
|
||||
.getAttribute('data-color')
|
||||
.toLowerCase()
|
||||
.replace(' ', '_');
|
||||
var secondaryColor = this.wheel.querySelector('.selected--2')
|
||||
.getAttribute('data-color')
|
||||
.toLowerCase()
|
||||
.replace(' ', '_');
|
||||
MaterialCustomizer.prototype.replaceDict = function(s, dict) {
|
||||
for (var key in dict) {
|
||||
s = s.replace(new RegExp(key, 'g'), dict[key]);
|
||||
}
|
||||
return s;
|
||||
};
|
||||
|
||||
this.cdn.textContent = this.cdnTpl
|
||||
.replace('$primary', primaryColor)
|
||||
.replace('$accent', secondaryColor);
|
||||
MaterialCustomizer.prototype.urlsafeName = function(s) {
|
||||
return s.toLowerCase().replace(' ', '_');
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.getSelectedPrimary = function() {
|
||||
return this.wheel.querySelector('.selected--1')
|
||||
.getAttribute('data-color');
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.getSelectedSecondary = function() {
|
||||
return this.wheel.querySelector('.selected--2')
|
||||
.getAttribute('data-color');
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.updateCDN = function() {
|
||||
var primaryColor = this.getSelectedPrimary();
|
||||
var secondaryColor = this.getSelectedSecondary();
|
||||
|
||||
this.cdn.textContent = this.replaceDict(this.cdnTpl, {
|
||||
'\\$primary': this.urlsafeName(primaryColor),
|
||||
'\\$accent': this.urlsafeName(secondaryColor)
|
||||
});
|
||||
Prism.highlightElement(this.cdn);
|
||||
};
|
||||
|
||||
@ -333,15 +363,14 @@ function init() {
|
||||
|
||||
// We changed the DOM hierarchy, CSS animations might not show until
|
||||
// DOM has updated internally.
|
||||
g.setAttribute('class', 'selected selected--' + (this.getNumSelected() + 1));
|
||||
|
||||
var isIE = window.navigator.msPointerEnabled;
|
||||
window.requestAnimationFrame(function() {
|
||||
g.setAttribute('class', 'selected selected--' + this);
|
||||
// FIXME: Shadows in IE10 don't disappear, for now they are disabled
|
||||
if (!isIE) {
|
||||
g.querySelector('.polygons')
|
||||
.setAttribute('filter', 'url(#drop-shadow)');
|
||||
}
|
||||
}.bind(this.numSelected));
|
||||
// FIXME: Shadows in IE10 don't disappear, for now they are disabled
|
||||
if (!isIE) {
|
||||
g.querySelector('.polygons')
|
||||
.setAttribute('filter', 'url(#drop-shadow)');
|
||||
}
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.getColor = function(name, lightness) {
|
||||
@ -352,36 +381,18 @@ function init() {
|
||||
return r[this.lightnessIndices.indexOf(lightness)];
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.processTemplate = function(response) {
|
||||
var generated = response;
|
||||
|
||||
var primaryColor = this.wheel.querySelector('.selected--1')
|
||||
.getAttribute('data-color');
|
||||
var secondaryColor = this.wheel.querySelector('.selected--2')
|
||||
.getAttribute('data-color');
|
||||
|
||||
MaterialCustomizer.prototype.processTemplate = function(primaryColor, secondaryColor) {
|
||||
var primary = this.getColor(primaryColor, '500');
|
||||
var primaryDark = this.getColor(primaryColor, '700');
|
||||
var accent = this.getColor(secondaryColor, 'A200');
|
||||
|
||||
generated = this.replaceKeyword(
|
||||
generated,
|
||||
'\\$color-primary-dark', primaryDark);
|
||||
|
||||
generated = this.replaceKeyword(
|
||||
generated,
|
||||
'\\$color-primary-contrast', this.calculateTextColor(primary));
|
||||
|
||||
generated = this.replaceKeyword(
|
||||
generated,
|
||||
'\\$color-accent-contrast', this.calculateTextColor(accent));
|
||||
|
||||
generated = this.replaceKeyword(generated, '\\$color-primary', primary);
|
||||
|
||||
generated = this.replaceKeyword(generated, '\\$color-accent', accent);
|
||||
|
||||
window.generated = generated;
|
||||
return generated;
|
||||
return this.replaceDict(this.template, {
|
||||
'\\$color-primary-dark': primaryDark,
|
||||
'\\$color-primary-contrast': this.calculateTextColor(primary),
|
||||
'\\$color-accent-contrast': this.calculateTextColor(accent),
|
||||
'\\$color-primary': primary,
|
||||
'\\$color-accent': accent
|
||||
});
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.calculateChannel = function(component) {
|
||||
@ -428,38 +439,35 @@ function init() {
|
||||
return str.replace(new RegExp(key, 'g'), val);
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.changeColor = function() {
|
||||
MaterialCustomizer.prototype.updateStylesheet = function() {
|
||||
var oldStyle = document.getElementById('main-stylesheet');
|
||||
var newStyle = document.createElement('style');
|
||||
newStyle.id = 'main-stylesheet';
|
||||
|
||||
var req = new XMLHttpRequest();
|
||||
var self = this;
|
||||
req.onload = function() {
|
||||
var style = document.createElement('style');
|
||||
style.id = 'main-stylesheet';
|
||||
style.textContent = self.processTemplate(this.responseText);
|
||||
if (oldStyle && oldStyle.parentNode) {
|
||||
oldStyle.parentNode.removeChild(oldStyle);
|
||||
}
|
||||
document.head.appendChild(style);
|
||||
self.prepareDownload();
|
||||
};
|
||||
req.open('get', '../material.min.css.template', true);
|
||||
req.send();
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.download = function() {
|
||||
// Workaround for IE.
|
||||
if (window.navigator.msSaveBlob) {
|
||||
window.navigator.msSaveBlob(this.blob, 'material.min.css');
|
||||
var style = this.processTemplate(
|
||||
this.getSelectedPrimary(),
|
||||
this.getSelectedSecondary());
|
||||
if (oldStyle && oldStyle.parentNode) {
|
||||
oldStyle.parentNode.removeChild(oldStyle);
|
||||
}
|
||||
newStyle.textContent = style;
|
||||
document.head.appendChild(newStyle);
|
||||
this.prepareDownload(style);
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.prepareDownload = function() {
|
||||
MaterialCustomizer.prototype.prepareDownload = function(content) {
|
||||
var link = document.getElementById('download');
|
||||
var blob = new Blob([window.generated], {type: 'text/css'});
|
||||
var blob = new Blob([content], {type: 'text/css'});
|
||||
this.blob = blob;
|
||||
var url = URL.createObjectURL(blob);
|
||||
link.setAttribute('href', url);
|
||||
link.setAttribute('download', 'material.min.css');
|
||||
};
|
||||
|
||||
return MaterialCustomizer;
|
||||
})();
|
||||
|
||||
// For NodeJS usage
|
||||
if (module) {
|
||||
module.exports = MaterialCustomizer;
|
||||
}
|
||||
|
||||
24
gulpfile.js
24
gulpfile.js
@ -32,6 +32,7 @@ var path = require('path');
|
||||
var pkg = require('./package.json');
|
||||
var through = require('through2');
|
||||
var swig = require('swig');
|
||||
var MaterialCustomizer = require('./docs/_assets/customizer.js');
|
||||
var hostedLibsUrlPrefix = 'http://code.getmdl.io';
|
||||
var bucketProd = 'gs://www.getmdl.io';
|
||||
var bucketStaging = 'gs://mdl-staging';
|
||||
@ -670,3 +671,26 @@ gulp.task('templates:fonts', function() {
|
||||
|
||||
gulp.task('templates', ['templates:static', 'templates:images', 'templates:mdl',
|
||||
'templates:fonts', 'templates:styles']);
|
||||
|
||||
gulp.task('styles:gen', ['styles'], function() {
|
||||
// TODO: This task needs refactoring once we turn MaterialCustomizer
|
||||
// into a proper Node module.
|
||||
var mc = new MaterialCustomizer();
|
||||
mc.template = fs.readFileSync('./dist/material.min.css.template').toString();
|
||||
|
||||
var stream = gulp.src('');
|
||||
mc.paletteIndices.forEach(function(primary) {
|
||||
mc.paletteIndices.forEach(function(accent) {
|
||||
if (mc.forbiddenAccents.indexOf(accent) !== -1) {
|
||||
return;
|
||||
}
|
||||
var primaryName = primary.toLowerCase().replace(' ', '_');
|
||||
var accentName = accent.toLowerCase().replace(' ', '_');
|
||||
stream = stream.pipe($.file(
|
||||
'material.' + primaryName + '-' + accentName + '.min.css',
|
||||
mc.processTemplate(primary, accent)
|
||||
));
|
||||
});
|
||||
});
|
||||
stream.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
"gulp-connect": "^2.2.0",
|
||||
"gulp-css-inline-images": "^0.1.1",
|
||||
"gulp-csso": "^1.0.0",
|
||||
"gulp-file": "^0.2.0",
|
||||
"gulp-filter": "^2.0.2",
|
||||
"gulp-flatten": "0.0.4",
|
||||
"gulp-front-matter": "^1.2.2",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user