google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Now embed the code in the <pre> block and in the flash element (for copy paste) directly instead of relying on JS to copy it.

master
Nicolas Garnier 2015-06-24 14:24:27 +01:00 committed by Addy Osmani
parent 310c6c89a9
commit c67ec357b9
1 changed files with 15 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
docs/_templates/snippets.html vendored
View File

@ -5,8 +5,8 @@
{% for snippet in snippet_group %}
{% set snippet_file = "../../src/" + component_name + "/snippets/" + snippet.file %}
<div class="snippet-demo">
<div class="snippet-demo-container" id="{{ component_name }}/{{ snippet.file }}/demo">
{% include snippet_file ignore missing %}
<div class="snippet-demo-container">
{% include snippet_file ignore missing %}
</div>
</div>
{%- endfor %}
@ -16,8 +16,19 @@
<div class="snippet-caption"></div>
{% for snippet in snippet_group %}
<div class="snippet-caption">
<button class="mdl-color-text--grey-600 mdl-button mdl-js-button mdl-js-ripple-effect" id="{{ component_name }}/{{ snippet.file }}/copy" href="#{{ component_name }}/{{ snippet.file }}">
<button class="mdl-color-text--grey-600 mdl-button mdl-js-button mdl-js-ripple-effect" href="#{{ component_name }}/{{ snippet.file }}">
<i class="material-icons copy">content_copy</i> {{ snippet.caption }}
<object class="snippet-copy" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="movie" value="../assets/clippy.swf"/>
<param name="wmode" value="transparent" />
<param name="quality" value="low" />
<param name="scale" value="exactfit" />
<embed src="../assets/clippy.swf"
scale="exactfit"
quality="low"
wmode="transparent"
FlashVars="text={% filter replace('html') %}{% include snippet_file ignore missing %}{% endfilter %}"/>
</object>
</button>
</div>
{%- endfor %}
@ -25,29 +36,6 @@
</div>
</div>
<div class="snippet-code">
<pre class="language-markup">{% for snippet in snippet_group %}<code id="{{ component_name }}/{{ snippet.file }}"></code>{%- endfor %}</pre>
<script>
// Grab the MDL element code now and inject it into the <code> block and the copy-paste button.
// We're doing this inline/now to make sure this is done before the MDL library modifies the DOM.
{% for snippet in snippet_group %}
var demoContainer = document.getElementById("{{ component_name }}/{{ snippet.file }}/demo");
var codeContainer = document.getElementById("{{ component_name }}/{{ snippet.file }}");
var copyButton = document.getElementById("{{ component_name }}/{{ snippet.file }}/copy");
// Put the code in the <code> block.
var code = demoContainer.innerHTML.trim();
codeContainer.textContent = code + "\n";
// Add the copy-to-clipboard Flash button overlay in the button.
var clippySwf = '<object class="snippet-copy" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">' +
'<param name="movie" value="/assets/clippy.swf"/>' +
'<param name="wmode" value="transparent" />' +
'<param name="quality" value="low" />' +
'<param name="scale" value="exactfit" />' +
'<embed src="/assets/clippy.swf" scale="exactfit" quality="low" wmode="transparent" FlashVars="text=' + code.replace(/"/g, '&quot;') + '"/>' +
'</object>';
copyButton.innerHTML += clippySwf;
{%- endfor %}
</script>
<pre class="language-markup">{% for snippet in snippet_group %}<code id="{{ component_name }}/{{ snippet.file }}">{% filter e('html') %}{% include snippet_file ignore missing %}{% endfilter %}</code>{%- endfor %}</pre>
</div>
</div>