Implement refreshed customiser
Add select indicator Animate selector circle Support for selecting 2 colors Make marker all nice and pretty Show selector numbers Add shadows to selected fields Don't allow reselection of secondary color Fix font baseline issue Avoid some white lines in wheel Add overlap to tiles New SVG filter for shadow Incorporate code into MaterialCustomizer prototype Revert "New SVG filter for shadow" This reverts commit bc23f0d2ba36e6181b527fb87f7b41eb3333cea2. Stronger shadow Refactor init procedure into subroutines First steps of customizer logic recycling Actually call template generation Implement forbidden accents Remove dead code Clean up CSS Make wheel scale Implement new customizer preview Cross browser check Remove slashes Give max-width to customizer Make jshint behavemaster
Alexander Surma
Addy Osmani
parent
fc9310d712
commit
786db4d3e9
|
|
@ -1,175 +1,97 @@
|
|||
.mdl-gen {
|
||||
padding: 24px;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
body {
|
||||
overflow: scroll !important;
|
||||
}
|
||||
|
||||
.mdl-gen--light-text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mdl-gen--dark-text {
|
||||
color: rgb(66,66,66);
|
||||
}
|
||||
|
||||
.mdl-gen-preview {
|
||||
#wheel {
|
||||
position: relative;
|
||||
}
|
||||
#wheel svg {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: 350px;
|
||||
margin: 16px auto 16px auto;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.mdl-gen-preview__content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.mdl-gen-color-row {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
@media (min-width: 840px) {
|
||||
#wheel svg {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-gen-color {
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
height: 80px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.mdl-gen-nocolor {
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
height: 80px;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mdl-gen-textinput {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mdl-gen-textinput__input {
|
||||
-webkit-flex-grow: 1;
|
||||
-webkit-flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
|
||||
.mdl-gen:not(.mdl-gen--selecting-primary) .mdl-gen-color.is-primary {
|
||||
box-shadow: 0 10px 10px 0 rgba(0,0,0,0.19), 0 6px 3px 0 rgba(0,0,0,0.23);
|
||||
z-index: 3;
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.mdl-gen:not(.mdl-gen--selecting-primary) .mdl-gen-color.is-primary:after {
|
||||
content: 'Primary';
|
||||
display: block;
|
||||
#wheel .mdl-gen-download {
|
||||
position: absolute;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 30px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.mdl-gen:not(.mdl-gen--selecting-accent) .mdl-gen-color.is-accent {
|
||||
box-shadow: 0 10px 10px 0 rgba(0,0,0,0.19), 0 6px 3px 0 rgba(0,0,0,0.23);
|
||||
z-index: 4;
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
#wheel .mdl-gen-download .mdl-button {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.mdl-gen:not(.mdl-gen--selecting-accent) .mdl-gen-color.is-accent:after {
|
||||
content: 'Accent';
|
||||
display: block;
|
||||
position: absolute;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 30px;
|
||||
#wheel g[data-color] {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s cubic-bezier(0.4, 0.0, 1, 1);
|
||||
}
|
||||
|
||||
.mdl-gen--selecting-accent .mdl-gen-color--muted:not(.is-primary) {
|
||||
pointer-events: none;
|
||||
cursor: auto;
|
||||
color: white;
|
||||
#wheel .selector {
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s cubic-bezier(0.4, 0.0, 1, 1);
|
||||
fill: #BDBDBD;
|
||||
}
|
||||
#wheel .selected .selector {
|
||||
opacity: 1;
|
||||
}
|
||||
#wheel .label {
|
||||
text-anchor: middle;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s cubic-bezier(0.4, 0.0, 1, 1);
|
||||
fill: white;
|
||||
font-size: 24px;
|
||||
}
|
||||
#wheel .selected--1 .label--1,
|
||||
#wheel .selected--2 .label--2 {
|
||||
opacity: 1;
|
||||
}
|
||||
#wheel svg.hide-nonaccents g[data-color="Blue Grey"]:not(.selected),
|
||||
#wheel svg.hide-nonaccents g[data-color="Brown"]:not(.selected),
|
||||
#wheel svg.hide-nonaccents g[data-color="Grey"]:not(.selected) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mdl-gen-download {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 24px auto 0 auto;
|
||||
text-align: right;
|
||||
#wheel .selected {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.mdl-gen-download .mdl-button {
|
||||
.mdl-gen > .mdl-grid {
|
||||
max-width: 1280px;
|
||||
}
|
||||
.mdl-gen__preview {
|
||||
position: relative;
|
||||
height: 350px;
|
||||
}
|
||||
.mdl-gen__preview .mdl-layout__container {
|
||||
height: auto;
|
||||
}
|
||||
.mdl-gen__preview .mdl-layout__content {
|
||||
padding: 32px;
|
||||
background-color: #EFEFEF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.mdl-gen__preview .mdl-layout__content .mdl-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mdl-gen-fab {
|
||||
position: absolute !important;
|
||||
right: 24px;
|
||||
.mdl-gen__preview .mdl-layout__content .mdl-button--fab {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.mdl-gen--hidden {
|
||||
display: none;
|
||||
.mdl-gen__preview .mdl-layout__content h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.mdl-gen {
|
||||
padding: 16px 16px 24px 16px;
|
||||
}
|
||||
|
||||
.mdl-gen-color {
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.mdl-gen-preview {
|
||||
order: 4;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mdl-gen-download {
|
||||
order: 5;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.mdl-gen:not(.mdl-gen--selecting-primary) .mdl-gen-color.is-primary:after {
|
||||
content: 'P';
|
||||
line-height: 130px;
|
||||
}
|
||||
|
||||
.mdl-gen:not(.mdl-gen--selecting-accent) .mdl-gen-color.is-accent:after {
|
||||
content: 'A';
|
||||
line-height: 130px;
|
||||
}
|
||||
.mdl-gen__panel {
|
||||
padding: 32px;
|
||||
}
|
||||
.mdl-gen__panel--right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
.mdl-gen__desc strong,
|
||||
.mdl-gen__desc p {
|
||||
display: block;
|
||||
margin-bottom: 32px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,60 +1,30 @@
|
|||
/*global MaterialCustomizer:true*/
|
||||
|
||||
/* exported init */
|
||||
function init() {
|
||||
'use strict';
|
||||
|
||||
new MaterialCustomizer(document.getElementById('mdl-gen-body'));
|
||||
var wheel = document.querySelector('#wheel > svg');
|
||||
new MaterialCustomizer(wheel);
|
||||
}
|
||||
|
||||
function MaterialCustomizer(page) {
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
this.page = page;
|
||||
this.colors = null;
|
||||
this.selectedPrimary = null;
|
||||
this.selectedAccent = null;
|
||||
this.selectingPrimary = true;
|
||||
this.blob = null;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
MaterialCustomizer.prototype.init = function() {
|
||||
'use strict';
|
||||
|
||||
if (!this.page.getAttribute('initialized')) {
|
||||
this.changeColor();
|
||||
|
||||
this.colors = this.page.querySelectorAll('.mdl-gen-color');
|
||||
|
||||
for (var i = 0; i < this.colors.length; i++) {
|
||||
this.colors[i].addEventListener('click', this.selectColor.bind(this));
|
||||
|
||||
if (this.colors[i].classList.contains('is-primary')) {
|
||||
this.selectedPrimary = i;
|
||||
function parentWrapper(p) {
|
||||
return p.parentElement || p.parentNode;
|
||||
}
|
||||
|
||||
if (this.colors[i].classList.contains('is-accent')) {
|
||||
this.selectedAccent = i;
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('download').addEventListener('click',
|
||||
this.download.bind(this));
|
||||
|
||||
var isSafari = /constructor/i.test(window.HTMLElement);
|
||||
if (isSafari) {
|
||||
document.getElementById('download').innerHTML = 'Get CSS';
|
||||
} else {
|
||||
document.getElementById('warning').classList.add('mdl-gen--hidden');
|
||||
}
|
||||
|
||||
this.page.setAttribute('initialized', true);
|
||||
}
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.processTemplate = function(response) {
|
||||
'use strict';
|
||||
|
||||
var palettes = [
|
||||
window.MaterialCustomizer = function(wheel) {
|
||||
this.wheel = wheel;
|
||||
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'],
|
||||
|
|
@ -111,20 +81,269 @@ MaterialCustomizer.prototype.processTemplate = function(response) {
|
|||
'96,125,139', '84,110,122', '69,90,100', '55,71,79', '38,50,56']
|
||||
];
|
||||
|
||||
this.init_();
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.init_ = function() {
|
||||
this.config = {
|
||||
width: 650, // width of the SVG panel
|
||||
height: 650, // height of the SVG panel
|
||||
r: 250, // radius of the wheel
|
||||
ri: 100, // radius of the inner hole
|
||||
hd: 40, // height of the dark section
|
||||
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',
|
||||
]
|
||||
};
|
||||
this.forbiddenAccents = ['Blue Grey', 'Brown', 'Grey'];
|
||||
this.numSelected = 0;
|
||||
|
||||
this.calculateValues_();
|
||||
this.buildWheel_();
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.calculateValues_ = function() {
|
||||
var config = this.config;
|
||||
// Calculated values
|
||||
// Angle of each piece of the wheel
|
||||
config.alphaDeg = 360.0 / config.colors.length;
|
||||
config.alphaRad = config.alphaDeg * Math.PI / 180;
|
||||
// Radius of selector circle
|
||||
config.rs = (config.c + config.r) * Math.sin(config.alphaRad / 2);
|
||||
config.rs *= config.mrs;
|
||||
// Angle of selector cone
|
||||
config.selectorAlphaRad = Math.atan(config.rs / config.c) * 2;
|
||||
// Angles of cone tangetial point
|
||||
config.gamma1 = config.alphaRad / 2 - config.selectorAlphaRad / 2;
|
||||
config.gamma2 = config.alphaRad / 2 + config.selectorAlphaRad / 2;
|
||||
// Center of selector circle
|
||||
config.cx = (config.c + config.r) * Math.sin(config.alphaRad) / 2;
|
||||
config.cy = -(config.c + config.r) * (1 + Math.cos(config.alphaRad)) / 2;
|
||||
|
||||
this.config = config;
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.buildWheel_ = function() {
|
||||
var config = this.config;
|
||||
var mainG = this.wheel.querySelector('g.wheel--maing');
|
||||
|
||||
this.wheel.setAttribute('viewBox', '0 0 ' +
|
||||
this.config.width + ' ' + this.config.height);
|
||||
this.wheel.setAttribute('preserveAspectRatio', 'xMidYMid meet');
|
||||
this.wheel.setAttribute('width', this.config.width);
|
||||
this.wheel.setAttribute('height', this.config.height);
|
||||
|
||||
var fieldTpl = this.generateFieldTemplate_();
|
||||
|
||||
var svgNS = 'http://www.w3.org/2000/svg';
|
||||
config.colors.forEach(function(color, idx) {
|
||||
var field = fieldTpl.cloneNode(true);
|
||||
|
||||
for (var i = 1; i <= 2; i++) {
|
||||
var g = document.createElementNS(svgNS, 'g');
|
||||
var label = document.createElementNS(svgNS, 'text');
|
||||
label.setAttribute('class', 'label label--' + i);
|
||||
label.setAttribute('transform',
|
||||
'rotate(' + (-config.alphaDeg * idx) + ')');
|
||||
label.setAttribute('dy', '0.5ex');
|
||||
label.textContent = '' + i;
|
||||
g.appendChild(label);
|
||||
g.setAttribute('transform',
|
||||
'translate(' + config.cx + ',' + config.cy + ')');
|
||||
field.appendChild(g);
|
||||
}
|
||||
field.setAttribute('data-color', color);
|
||||
field.querySelector('.polygons > *:nth-child(1)').style.fill =
|
||||
'rgb(' + this.getColor(color, '500') + ')';
|
||||
field.querySelector('.polygons > *:nth-child(2)').style.fill =
|
||||
'rgb(' + this.getColor(color, '700') + ')';
|
||||
field.querySelector('.polygons').
|
||||
addEventListener('click', this.fieldClicked_.bind(this));
|
||||
field.setAttribute('transform', 'rotate(' + config.alphaDeg * idx + ')');
|
||||
mainG.appendChild(field);
|
||||
}.bind(this));
|
||||
|
||||
mainG.setAttribute('transform',
|
||||
'translate(' + config.width / 2 + ',' + config.height / 2 + ')');
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.generateFieldTemplate_ = function() {
|
||||
var svgNS = 'http://www.w3.org/2000/svg';
|
||||
var config = this.config;
|
||||
var fieldTpl = document.createElementNS(svgNS, 'g');
|
||||
var polygons = document.createElementNS(svgNS, 'g');
|
||||
var lightField = document.createElementNS(svgNS, 'polygon');
|
||||
lightField.setAttribute('points', [
|
||||
[
|
||||
config.ri * Math.sin(config.alphaRad + config.alphaIncr),
|
||||
-config.ri * Math.cos(config.alphaRad + config.alphaIncr)
|
||||
].join(','),
|
||||
[
|
||||
config.r * Math.sin(config.alphaRad + config.alphaIncr),
|
||||
-config.r * Math.cos(config.alphaRad + config.alphaIncr)
|
||||
].join(','),
|
||||
[0, -config.r].join(','),
|
||||
[0, -(config.ri + config.hd)].join(','),
|
||||
].join(' '));
|
||||
var darkField = document.createElementNS(svgNS, 'polygon');
|
||||
darkField.setAttribute('points', [
|
||||
[
|
||||
config.ri * Math.sin(config.alphaRad + config.alphaIncr),
|
||||
-config.ri * Math.cos(config.alphaRad + config.alphaIncr)
|
||||
].join(','),
|
||||
[
|
||||
(config.ri + config.hd) * Math.sin(config.alphaRad + config.alphaIncr),
|
||||
-(config.ri + config.hd) * Math.cos(config.alphaRad + config.alphaIncr)
|
||||
].join(','),
|
||||
[0, -(config.ri + config.hd)].join(','),
|
||||
[0, -config.ri].join(','),
|
||||
].join(' '));
|
||||
polygons.appendChild(lightField);
|
||||
polygons.appendChild(darkField);
|
||||
polygons.setAttribute('class', 'polygons');
|
||||
fieldTpl.appendChild(polygons);
|
||||
|
||||
var selector = document.createElementNS(svgNS, 'path');
|
||||
selector.setAttribute('class', 'selector');
|
||||
selector.setAttribute('d',
|
||||
' M ' +
|
||||
(config.r * Math.sin(config.alphaRad) / 2) +
|
||||
' ' +
|
||||
-(config.r * (1 + Math.cos(config.alphaRad)) / 2) +
|
||||
' L ' +
|
||||
(config.cx - config.rs * Math.cos(config.gamma1)) +
|
||||
' ' +
|
||||
(config.cy - config.rs * Math.sin(config.gamma1)) +
|
||||
' A ' +
|
||||
config.rs +
|
||||
' ' +
|
||||
config.rs +
|
||||
' ' +
|
||||
config.alphaDeg +
|
||||
' 1 1 ' +
|
||||
(config.cx + config.rs * Math.cos(config.gamma2)) +
|
||||
' ' +
|
||||
(config.cy + config.rs * Math.sin(config.gamma2)) +
|
||||
' z '
|
||||
);
|
||||
fieldTpl.appendChild(selector);
|
||||
|
||||
return fieldTpl;
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.fieldClicked_ = function (ev) {
|
||||
var g = parentWrapper(parentWrapper(ev.target));
|
||||
var selectedColor = g.getAttribute('data-color');
|
||||
// Ignore clicks on already selected fields
|
||||
if ((g.getAttribute('class') || '').indexOf('selected') !== -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.numSelected++;
|
||||
switch (this.numSelected) {
|
||||
case 2:
|
||||
if (this.forbiddenAccents.indexOf(selectedColor) !== -1) {
|
||||
this.numSelected--;
|
||||
return;
|
||||
}
|
||||
this.highlightField_(g);
|
||||
this.wheel.setAttribute('class', '');
|
||||
window.requestAnimationFrame(this.changeColor.bind(this));
|
||||
break;
|
||||
case 3:
|
||||
Array.prototype.forEach.call(
|
||||
this.wheel.querySelector('g.wheel--maing').childNodes,
|
||||
function(f) {
|
||||
f.setAttribute('class', '');
|
||||
f.querySelector('.polygons').setAttribute('filter', '');
|
||||
}
|
||||
);
|
||||
this.numSelected = 1;
|
||||
/* falls through */
|
||||
case 1:
|
||||
this.highlightField_(g);
|
||||
window.requestAnimationFrame(function() {
|
||||
this.wheel.setAttribute('class', 'hide-nonaccents');
|
||||
}.bind(this));
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.highlightField_ = function(g) {
|
||||
var parent = parentWrapper(g);
|
||||
|
||||
// Make the current polygon the last child of its parent
|
||||
// so shadows are visible.
|
||||
parent.removeChild(g);
|
||||
parent.appendChild(g);
|
||||
|
||||
// We changed the DOM hierarchy, CSS animations might not show until
|
||||
// DOM has updated internally.
|
||||
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));
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.getColor = function(name, lightness) {
|
||||
var r = this.palettes[this.paletteIndices.indexOf(name)];
|
||||
if (!r) {
|
||||
return null;
|
||||
}
|
||||
return r[this.lightnessIndices.indexOf(lightness)];
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.processTemplate = function(response) {
|
||||
var generated = response;
|
||||
|
||||
var primary = palettes[this.selectedPrimary][5];
|
||||
var primaryDark = palettes[this.selectedPrimary][7];
|
||||
var accent = palettes[this.selectedAccent][11];
|
||||
var primaryColor = this.wheel.querySelector('.selected--1')
|
||||
.getAttribute('data-color');
|
||||
var secondaryColor = this.wheel.querySelector('.selected--2')
|
||||
.getAttribute('data-color');
|
||||
|
||||
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,
|
||||
'\\$color-primary-dark', primaryDark);
|
||||
|
||||
generated = this.replaceKeyword(
|
||||
generated, '\\$color-primary-contrast', this.calculateTextColor(primary));
|
||||
generated,
|
||||
'\\$color-primary-contrast', this.calculateTextColor(primary));
|
||||
|
||||
generated = this.replaceKeyword(
|
||||
generated, '\\$color-accent-contrast', this.calculateTextColor(accent));
|
||||
generated,
|
||||
'\\$color-accent-contrast', this.calculateTextColor(accent));
|
||||
|
||||
generated = this.replaceKeyword(generated, '\\$color-primary', primary);
|
||||
|
||||
|
|
@ -132,41 +351,33 @@ MaterialCustomizer.prototype.processTemplate = function(response) {
|
|||
|
||||
window.generated = generated;
|
||||
return generated;
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.calculateChannel = function(component) {
|
||||
'use strict';
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.calculateChannel = function(component) {
|
||||
component = component / 255;
|
||||
|
||||
return component < 0.03928 ?
|
||||
component / 12.92 : Math.pow((component + 0.055) / 1.055, 2.4);
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.calculateLuminance = function(color) {
|
||||
'use strict';
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.calculateLuminance = function(color) {
|
||||
var components = color.split(',');
|
||||
var red = this.calculateChannel(parseInt(components[0]));
|
||||
var green = this.calculateChannel(parseInt(components[1]));
|
||||
var blue = this.calculateChannel(parseInt(components[2]));
|
||||
|
||||
return (0.2126 * red) + (0.7152 * green) + (0.0722 * blue);
|
||||
};
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.calculateContrast =
|
||||
MaterialCustomizer.prototype.calculateContrast =
|
||||
function(background, foreground) {
|
||||
'use strict';
|
||||
|
||||
var backLum = this.calculateLuminance(background) + 0.05;
|
||||
var foreLum = this.calculateLuminance(foreground) + 0.05;
|
||||
|
||||
return Math.max(backLum, foreLum) / Math.min(backLum, foreLum);
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.calculateTextColor = function(background) {
|
||||
'use strict';
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.calculateTextColor = function(background) {
|
||||
var minimumContrast = 3.1;
|
||||
var light = '255,255,255';
|
||||
var dark = '66,66,66';
|
||||
|
|
@ -180,17 +391,13 @@ MaterialCustomizer.prototype.calculateTextColor = function(background) {
|
|||
var blackContrast = this.calculateContrast(background, dark);
|
||||
return blackContrast > whiteContrast ? dark : light;
|
||||
}
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.replaceKeyword = function(str, key, val) {
|
||||
'use strict';
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.replaceKeyword = function(str, key, val) {
|
||||
return str.replace(new RegExp(key, 'g'), val);
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.changeColor = function() {
|
||||
'use strict';
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.changeColor = function() {
|
||||
var oldStyle = document.getElementById('main-stylesheet');
|
||||
|
||||
var req = new XMLHttpRequest();
|
||||
|
|
@ -207,54 +414,22 @@ MaterialCustomizer.prototype.changeColor = function() {
|
|||
};
|
||||
req.open('get', '../material.min.css.template', true);
|
||||
req.send();
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.download = function() {
|
||||
'use strict';
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.download = function() {
|
||||
// Workaround for IE.
|
||||
if (window.navigator.msSaveBlob) {
|
||||
window.navigator.msSaveBlob(this.blob, 'material.min.css');
|
||||
}
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.prepareDownload = function() {
|
||||
'use strict';
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.prepareDownload = function() {
|
||||
var link = document.getElementById('download');
|
||||
var blob = new Blob([window.generated], {type: 'text/css'});
|
||||
this.blob = blob;
|
||||
var url = URL.createObjectURL(blob);
|
||||
link.setAttribute('href', url);
|
||||
link.setAttribute('download', 'material.min.css');
|
||||
};
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.selectColor = function(event) {
|
||||
'use strict';
|
||||
|
||||
var index = event.target.getAttribute('index');
|
||||
|
||||
if (!this.selectingPrimary && this.selectedPrimary === index) {
|
||||
this.colors[this.selectedPrimary].classList.remove('is-primary');
|
||||
this.colors[this.selectedAccent].classList.remove('is-accent');
|
||||
this.selectingPrimary = true;
|
||||
this.page.classList.add('mdl-gen--selecting-primary');
|
||||
this.page.classList.remove('mdl-gen--selecting-accent');
|
||||
} else if (this.selectingPrimary) {
|
||||
this.page.classList.remove('mdl-gen--selecting-primary');
|
||||
this.colors[this.selectedPrimary].classList.remove('is-primary');
|
||||
this.selectedPrimary = index;
|
||||
this.colors[index].classList.add('is-primary');
|
||||
this.selectingPrimary = false;
|
||||
this.page.classList.add('mdl-gen--selecting-accent');
|
||||
} else {
|
||||
this.page.classList.remove('mdl-gen--selecting-primary');
|
||||
this.colors[this.selectedAccent].classList.remove('is-accent');
|
||||
this.selectedAccent = index;
|
||||
this.colors[index].classList.add('is-accent');
|
||||
this.selectingPrimary = true;
|
||||
this.page.classList.remove('mdl-gen--selecting-accent');
|
||||
}
|
||||
|
||||
this.changeColor();
|
||||
};
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -4,10 +4,4 @@ title: Customize & Download
|
|||
bodyclass: customize
|
||||
include_prefix: ../
|
||||
---
|
||||
|
||||
|
||||
Pick a primary and accent color for your theme. When you're
|
||||
ready, click the `Download CSS` button to get your
|
||||
customised version of Material Design Lite.
|
||||
|
||||
<iframe src="../embedded_customizer/index.html" height="800px"/>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,6 @@
|
|||
|
||||
{% block content %}
|
||||
|
||||
<span class="docs-text-styling">
|
||||
<h1>{{page.title}}</h1>
|
||||
|
||||
{{content|safe}}
|
||||
</span>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -13,24 +13,37 @@
|
|||
|
||||
<link rel="stylesheet" href="{{page.include_prefix}}material.min.css" id="main-stylesheet">
|
||||
<link rel="stylesheet" href="{{page.include_prefix}}assets/customizer.css">
|
||||
<script src="{{page.include_prefix}}assets/customizer.js"></script>
|
||||
</head>
|
||||
<body class="mdl-gen mdl-color--grey-200" onload="init();" id="mdl-gen-body">
|
||||
<div class="mdl-gen-color-row">
|
||||
<div class="mdl-gen-color mdl-color--red mdl-gen--light-text" index="0">Red</div>
|
||||
<div class="mdl-gen-color mdl-color--pink mdl-gen--light-text is-accent" index="1">Pink</div>
|
||||
<div class="mdl-gen-color mdl-color--purple mdl-gen--light-text" index="2">Purple</div>
|
||||
<div class="mdl-gen-color mdl-color--deep-purple mdl-gen--light-text" index="3">Deep Purple</div>
|
||||
<div class="mdl-gen-color mdl-color--indigo mdl-gen--light-text is-primary" index="4">Indigo</div>
|
||||
<body class="mdl-gen" onload="init();">
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-gen__panel mdl-gen__panel--left mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col">
|
||||
<div id="wheel">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<filter id="drop-shadow">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3.2"/>
|
||||
<feOffset dx="0" dy="0" result="offsetblur"/>
|
||||
<feFlood flood-color="rgba(0,0,0,1)"/>
|
||||
<feComposite in2="offsetblur" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g class="wheel--maing"></g>
|
||||
</svg>
|
||||
<div class="mdl-gen-download">
|
||||
<a href="#" id="download" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--fab"><i class="material-icons">file_download</i></a>
|
||||
</div>
|
||||
<div class="mdl-gen-color-row">
|
||||
<div class="mdl-gen-color mdl-color--blue mdl-gen--light-text" index="5">Blue</div>
|
||||
<div class="mdl-gen-color mdl-color--light-blue mdl-gen--dark-text" index="6">Light Blue</div>
|
||||
<div class="mdl-gen-color mdl-color--cyan mdl-gen--dark-text" index="7">Cyan</div>
|
||||
<div class="mdl-gen-color mdl-color--teal mdl-gen--light-text" index="8">Teal</div>
|
||||
<div class="mdl-gen-color mdl-color--green mdl-gen--dark-text" index="9">Green</div>
|
||||
</div>
|
||||
<div class="mdl-gen-preview mdl-shadow--3dp">
|
||||
</div>
|
||||
<div class="mdl-gen__panel--right mdl-gen__panel mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col">
|
||||
<div class="mdl-gen__desc">
|
||||
<strong>Custom CSS theme builder</strong>
|
||||
<p>Click on the color wheel to choose a primary (1) and accent (2) color to preview the theme below. When you’ve selected a color combination you like, download the CSS by clicking the white button in the middle.</p>
|
||||
</div>
|
||||
<div class="mdl-gen__preview">
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<svg class="mdl-layout-icon" width="411px" height="406px" viewBox="0 0 411 406" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
|
|
@ -42,15 +55,6 @@
|
|||
</svg>
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-layout-title">Theme Preview</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean">
|
||||
<i class="material-icons">search</i>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
|
|
@ -61,57 +65,21 @@
|
|||
<a class="mdl-navigation__link" href="#">Here</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-gen-preview__content mdl-layout__content">
|
||||
<main class="mdl-layout__content">
|
||||
<h3>Try it out</h3>
|
||||
<p>
|
||||
<div class="mdl-gen-textinput">
|
||||
<div class="mdl-gen-textinput__input">
|
||||
<div class="mdl-textfield mdl-textfield--full-width mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" id="sample1" />
|
||||
<label class="mdl-textfield__label" for="sample1">Type Something...</label>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Button</button>
|
||||
</div>
|
||||
Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
<input class="mdl-slider mdl-js-slider" type="range"
|
||||
min="0" max="100" value="50" tabindex="0"/>
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
<button class="mdl-gen-fab mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">
|
||||
<i class="material-icons">add</i>
|
||||
<button class="mdl-button mdl-button--colored mdl-button--raised">BUTTON</button>
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">
|
||||
<i class="material-icons">email</i>
|
||||
</button>
|
||||
</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-gen-color-row">
|
||||
<div class="mdl-gen-color mdl-color--light-green mdl-gen--dark-text" index="10">Light Green</div>
|
||||
<div class="mdl-gen-color mdl-color--lime mdl-gen--dark-text" index="11">Lime</div>
|
||||
<div class="mdl-gen-color mdl-color--yellow mdl-gen--dark-text" index="12">Yellow</div>
|
||||
<div class="mdl-gen-color mdl-color--amber mdl-gen--dark-text" index="13">Amber</div>
|
||||
<div class="mdl-gen-color mdl-color--orange mdl-gen--dark-text" index="14">Orange</div>
|
||||
</div>
|
||||
<div class="mdl-gen-color-row">
|
||||
<div class="mdl-gen-color mdl-color--deep-orange mdl-gen--light-text" index="15">Deep Orange</div>
|
||||
<div class="mdl-gen-color mdl-gen-color--muted mdl-color--brown mdl-gen--light-text" index="16">Brown</div>
|
||||
<div class="mdl-gen-nocolor"></div>
|
||||
<div class="mdl-gen-color mdl-gen-color--muted mdl-color--grey mdl-gen--dark-text" index="17">Grey</div>
|
||||
<div class="mdl-gen-color mdl-gen-color--muted mdl-color--blue-grey mdl-gen--light-text" index="18">Blue Grey</div>
|
||||
</div>
|
||||
|
||||
<div class="mdl-gen-download">
|
||||
<a href="" id="download" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Download CSS</a>
|
||||
</div>
|
||||
<div id="warning">
|
||||
<div class="mdl-tooltip mdl-tooltip--large" for="download">
|
||||
Due to browser issues, clicking this may open a page that you will need to manually save.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{page.include_prefix}}assets/customizer.js"></script>
|
||||
<script src="{{page.include_prefix}}material.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue