Show CDN url in customizer (Closes #414)
Alexander Surma
Addy Osmani
parent
023b5f3a7b
commit
19de3ac99b
|
|
@ -6,6 +6,7 @@ body {
|
|||
}
|
||||
#wheel svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 840px) {
|
||||
|
|
@ -88,6 +89,7 @@ body {
|
|||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.mdl-gen__desc strong,
|
||||
.mdl-gen__desc p {
|
||||
|
|
@ -95,3 +97,13 @@ body {
|
|||
margin-bottom: 32px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
.mdl-gen__cdn {
|
||||
padding: 0 32px;
|
||||
}
|
||||
.mdl-gen__cdn .demo-code code {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mdl-gen__cdn .demo-code code.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ function init() {
|
|||
'use strict';
|
||||
|
||||
var wheel = document.querySelector('#wheel > svg');
|
||||
new MaterialCustomizer(wheel);
|
||||
var cdn = document.querySelector('.mdl-gen__cdn code');
|
||||
new MaterialCustomizer(wheel, cdn);
|
||||
}
|
||||
|
||||
(function() {
|
||||
|
|
@ -15,8 +16,10 @@ function init() {
|
|||
return p.parentElement || p.parentNode;
|
||||
}
|
||||
|
||||
window.MaterialCustomizer = function(wheel) {
|
||||
window.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',
|
||||
|
|
@ -271,7 +274,10 @@ function init() {
|
|||
}
|
||||
this.highlightField_(g);
|
||||
this.wheel.setAttribute('class', '');
|
||||
window.requestAnimationFrame(this.changeColor.bind(this));
|
||||
window.requestAnimationFrame(function() {
|
||||
this.updateCDN();
|
||||
this.changeColor();
|
||||
}.bind(this));
|
||||
break;
|
||||
case 3:
|
||||
Array.prototype.forEach.call(
|
||||
|
|
@ -292,6 +298,23 @@ 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(' ', '_');
|
||||
|
||||
this.cdn.className = 'visible';
|
||||
this.cdn.textContent = this.cdnTpl
|
||||
.replace('$primary', primaryColor)
|
||||
.replace('$accent', secondaryColor);
|
||||
Prism.highlightElement(this.cdn);
|
||||
};
|
||||
|
||||
MaterialCustomizer.prototype.highlightField_ = function(g) {
|
||||
var parent = parentWrapper(g);
|
||||
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ title: Customize & Download
|
|||
bodyclass: customize
|
||||
include_prefix: ../
|
||||
---
|
||||
<iframe src="../embedded_customizer/index.html" height="800px"/>
|
||||
<iframe src="../embedded_customizer/index.html" height="960px"/>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
|
||||
<link rel="stylesheet" href="{{page.include_prefix}}material.min.css" id="main-stylesheet">
|
||||
<link rel="stylesheet" href="{{page.include_prefix}}assets/customizer.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
|
||||
</head>
|
||||
<body class="mdl-gen" onload="init();">
|
||||
<div class="mdl-grid">
|
||||
|
|
@ -41,7 +42,7 @@
|
|||
<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>
|
||||
<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, either reference our hosted CSS (see blow) or 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">
|
||||
|
|
@ -78,8 +79,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-gen__cdn mdl-cell mdl-cell--12-col">
|
||||
<pre class="demo-code language-markup"><code class="language-markup" data-language="markup"> <link rel="stylehsheet" href="http://getmdl.io/1.0.0/material.$primary-$accent.min.css" /> </code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<script src="{{page.include_prefix}}assets/customizer.js"></script>
|
||||
<script src="{{page.include_prefix}}material.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue