ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Separate html and js example code

Browse Source
This commit is contained in:
ahocevar
2019-01-07 18:34:43 +01:00
parent c8df836ce1
commit c4c6f84bca
3 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
examples/resources/common.js
View File

@@ -1,6 +1,10 @@
(function() {
var clipboard = new Clipboard('#copy-button');
clipboard.on('success', function(e) {
var htmlClipboard = new Clipboard('#copy-html-button');
htmlClipboard.on('success', function(e) {
e.clearSelection();
});
var jsClipboard = new Clipboard('#copy-js-button');
jsClipboard.on('success', function(e) {
e.clearSelection();
});

4
examples/resources/layout.css
View File

@@ -91,13 +91,13 @@ pre[class*="language-"] {
background: #FFFFFF;
}
#source-controls {
.source-controls {
position: absolute;
margin-top: 20px;
right: 40px;
}
#source-controls a {
.source-controls a {
margin-left: 15px;
}

19
examples/templates/example.html
View File

@@ -113,8 +113,7 @@
</div>
<div class="row-fluid">
<div id="source-controls">
<a id="copy-button" data-clipboard-target="#example-source"><i class="fa fa-clipboard"></i> Copy</a>
<div class="source-controls">
<!-- <a id="codepen-button"><i class="fa fa-codepen"></i> Edit</a> -->
</div>
<form method="POST" id="codepen-form" target="_blank" action="https://codepen.io/pen/define/">
@@ -125,7 +124,12 @@
<textarea class="hidden" name="html">{{ contents }}</textarea>
<input type="hidden" name="data">
</form>
<pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
<hr>
<pre>index.html</pre>
<div class="source-controls">
<a id="copy-html-button" data-clipboard-target="#example-html-source"><i class="fa fa-clipboard"></i> Copy</a>
</div>
<pre><code id="example-html-source" class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;{{ title }}&lt;/title&gt;
@@ -138,10 +142,15 @@
{{ indent css.source spaces=6 }} &lt;/style&gt;{{/if}}
&lt;/head&gt;
&lt;body&gt;
{{ indent contents spaces=4 }} &lt;script&gt;
{{ indent js.source spaces=6 }} &lt;/script&gt;
{{ indent contents spaces=4 }} &lt;script src="index.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<br>
<pre>index.js</pre>
<div class="source-controls">
<a id="copy-js-button" data-clipboard-target="#example-js-source"><i class="fa fa-clipboard"></i> Copy</a>
</div>
<pre><code id="example-js-source" class="language-js">{{ js.source }}</code></pre>
</div>
</div>