mirror of
https://github.com/google/material-design-lite.git
synced 2024-09-11 12:25:38 +03:00
Updated button readme.md so that demos look better. Added an option to disable the codeine button (.codepen-button-disabled on <pre>)
This commit is contained in:
Nicolas Garnier
Addy Osmani
parent
b9c24b0cd9
commit
35b232fec0
BIN
docs/_assets/codepen-logo.png
Normal file
BIN
docs/_assets/codepen-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
80
docs/_assets/codepen.js
Normal file
80
docs/_assets/codepen.js
Normal file
@ -0,0 +1,80 @@
|
||||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
function CodeBlockCodePen() {
|
||||
'use strict';
|
||||
|
||||
this.htmlCodeBlocks = document.getElementsByClassName('language-markup');
|
||||
this.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates CodePen buttons in all code blocks (`pre`) that are HTML.
|
||||
*/
|
||||
CodeBlockCodePen.prototype.init = function() {
|
||||
'use strict';
|
||||
|
||||
// Also insert the MDL Library.
|
||||
var mdlLibs = '<!-- MDL library and Material icons font -->\n' +
|
||||
'<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">\n' +
|
||||
'<link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css">\n' +
|
||||
'<script src="https://storage.googleapis.com/materialdesignlite/material.min.js"></script>\n\n';
|
||||
|
||||
for (var i = 0, len = this.htmlCodeBlocks.length; i < len; i++) {
|
||||
var pre = this.htmlCodeBlocks[i];
|
||||
|
||||
// If pre is a <code> node we check if it's enclosed in a <pre> tag and
|
||||
// process that instead.
|
||||
if (pre.tagName.toLowerCase() !== 'pre') {
|
||||
pre = pre.parentNode;
|
||||
}
|
||||
// Verify there is not already a codePen Button and that we are in a <pre>.
|
||||
if (pre.getElementsByTagName('form').length > 0 ||
|
||||
pre.tagName.toLowerCase() !== 'pre') {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Create the CodePen Form and add it to the <pre> block.
|
||||
var form = document.createElement('form');
|
||||
form.classList.add('codepen-button');
|
||||
form.setAttribute('action', 'http://codepen.io/pen/define');
|
||||
form.setAttribute('method', 'POST');
|
||||
form.addEventListener('click', this.clickHandler(form));
|
||||
var input = document.createElement('input');
|
||||
input.setAttribute('type', 'hidden');
|
||||
input.setAttribute('name', 'data');
|
||||
input.setAttribute('value', JSON.stringify({html: mdlLibs + pre.innerText}));
|
||||
form.appendChild(input);
|
||||
pre.appendChild(form);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Click handler for CodePEn buttons. Simply submits the form to CodePen.
|
||||
*/
|
||||
CodeBlockCodePen.prototype.clickHandler = function(form) {
|
||||
'use strict';
|
||||
|
||||
return function() {
|
||||
form.submit();
|
||||
};
|
||||
};
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
'use strict';
|
||||
|
||||
new CodeBlockCodePen();
|
||||
});
|
||||
@ -1,36 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
function addPenButtons() {
|
||||
var codeList = document.getElementsByTagName('pre');
|
||||
|
||||
for (var i = 0, len = codeList.length; i < len; i++) {
|
||||
var elem = codeList[i],
|
||||
HTML = '',
|
||||
CSS = '',
|
||||
JS = '';
|
||||
|
||||
HTML = elem.innerText;
|
||||
var data = {
|
||||
html : HTML,
|
||||
css : CSS,
|
||||
js : JS
|
||||
};
|
||||
var JSONstring =
|
||||
JSON.stringify(data)
|
||||
// Quotes will screw up the JSON
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
|
||||
var form =
|
||||
'<form name="pen-form" action="http://codepen.io/pen/define" method="POST" target="_blank">' +
|
||||
'<input type="hidden" name="data" value=\'' +
|
||||
JSONstring +
|
||||
'\'>' +
|
||||
'<input type="image" src="http://s.cdpn.io/3/cp-arrow-right.svg" class="codepen-mover-button" width="40" height="40" value="Create New Pen with Prefilled Data">' +
|
||||
'</form>';
|
||||
|
||||
elem.innerHTML += form;
|
||||
}
|
||||
}
|
||||
|
||||
addPenButtons();
|
||||
@ -634,6 +634,47 @@ body:not(.about) .mdl-navigation__link.download > button {
|
||||
padding-right: 1%;
|
||||
}
|
||||
}
|
||||
/* Open with CodePen Button */
|
||||
.codepen-button {
|
||||
z-index: 1000;
|
||||
cursor: pointer;
|
||||
background-image: url('codepen-logo.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 5px center;
|
||||
background-size: 26px 26px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -125px;
|
||||
width: 165px;
|
||||
height: 46px;
|
||||
display: inline-block;
|
||||
opacity: 0.6;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
color: black;
|
||||
padding: 13px 15px 5px 50px;
|
||||
transition: right 0.5s, background-color 0.5s, opacity 0.5s, background-size 0.3s;
|
||||
}
|
||||
.codepen-button::after {
|
||||
content: 'Open in CodePen';
|
||||
}
|
||||
.codepen-button:hover {
|
||||
opacity: 1;
|
||||
right: 0;
|
||||
background-size: 36px 36px;
|
||||
background-color: rgb(248,248,248);
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
.docs-layout pre[class*=language-markup] {
|
||||
padding-right: 0;
|
||||
}
|
||||
.docs-layout pre[class*=language-markup] code {
|
||||
padding-right: 50px;
|
||||
}
|
||||
.codepen-button-disabled .codepen-button {
|
||||
display: none;
|
||||
}
|
||||
/* Prism and code blocks styling and overrides */
|
||||
.token.attr-name, .token.builtin, .token.selector, .token.string {
|
||||
color: #E91E63;
|
||||
@ -653,7 +694,6 @@ body:not(.about) .mdl-navigation__link.download > button {
|
||||
}
|
||||
.docs-layout pre {
|
||||
padding: 16px;
|
||||
padding-right: 65px;
|
||||
font-size: 87%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@ -810,7 +850,6 @@ code[class*=language-], pre[class*=language-] {
|
||||
.started pre {
|
||||
width: 640px;
|
||||
box-sizing: border-box;
|
||||
padding-right: 16px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.started .snippet-group {
|
||||
|
||||
4
docs/_templates/layout.html
vendored
4
docs/_templates/layout.html
vendored
@ -109,8 +109,6 @@
|
||||
This is a <em>preview</em> of Material Design Lite. It is still very much work-in-progress. We are launching soon!
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
@ -120,6 +118,8 @@
|
||||
ga('create', 'UA-XXXXX-X', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<!-- Add Copy-to-CodePen buttons to code blocks -->
|
||||
<script src="{{page.include_prefix}}assets/codepen.js"></script>
|
||||
<!-- Enable Prism syntax highlighting -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
|
||||
<script src="{{page.include_prefix}}assets/main.js"></script>
|
||||
|
||||
@ -29,12 +29,12 @@ A button with the "raised" effect.
|
||||
|
||||
A button with the "fab" effect.
|
||||
```html
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab">Help</button>
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab">OK</button>
|
||||
```
|
||||
|
||||
A button with the "icon" and "colored" effects.
|
||||
A button with the "icon", "raised" and "colored" effects.
|
||||
```html
|
||||
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">?</button>
|
||||
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored mdl-button--raised">?</button>
|
||||
```
|
||||
|
||||
|
||||
@ -51,6 +51,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
||||
| `mdl-button--mini-fab` | Applies *mini-fab* (small fab circular) display effect | Mutually exclusive with *raised*, *fab*, and *icon* |
|
||||
| `mdl-button--icon` | Applies *icon* (small plain circular) display effect | Mutually exclusive with *raised*, *fab*, and *mini-fab* |
|
||||
| `mdl-button--colored` | Applies *colored* display effect | Colors are defined in `material.min.css` |
|
||||
| `mdl-button--accent` | Applies *accent* color display effect | Colors are defined in `material.min.css` |
|
||||
| `mdl-js-ripple-effect` | Applies *ripple* click effect | May be used in combination with any other classes |
|
||||
|
||||
>**Note:** Disabled versions of all the available button types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised Ripples Disabled</button>`
|
||||
|
||||
Loading…
Reference in New Issue
Block a user