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() { (function() {
var clipboard = new Clipboard('#copy-button'); var htmlClipboard = new Clipboard('#copy-html-button');
clipboard.on('success', function(e) { htmlClipboard.on('success', function(e) {
e.clearSelection();
});
var jsClipboard = new Clipboard('#copy-js-button');
jsClipboard.on('success', function(e) {
e.clearSelection(); e.clearSelection();
}); });

4
examples/resources/layout.css
View File

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

19
examples/templates/example.html
View File

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