From c4c6f84bca0c96095f01d3e957a6603a3c2b3a60 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Mon, 7 Jan 2019 18:34:43 +0100 Subject: [PATCH 1/5] Separate html and js example code --- examples/resources/common.js | 8 ++++++-- examples/resources/layout.css | 4 ++-- examples/templates/example.html | 19 ++++++++++++++----- 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/examples/resources/common.js b/examples/resources/common.js index cf08daeb91..623f8bea92 100644 --- a/examples/resources/common.js +++ b/examples/resources/common.js @@ -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(); }); diff --git a/examples/resources/layout.css b/examples/resources/layout.css index 021776f301..3cc66a1072 100644 --- a/examples/resources/layout.css +++ b/examples/resources/layout.css @@ -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; } diff --git a/examples/templates/example.html b/examples/templates/example.html index 5ecbafe2c4..83fc621c19 100644 --- a/examples/templates/example.html +++ b/examples/templates/example.html @@ -113,8 +113,7 @@
-
- Copy +
@@ -125,7 +124,12 @@
- 
<!DOCTYPE html>
+        

+        
index.html

+        

+           Copy
+        

+        
<!DOCTYPE html>
 <html>
   <head>
     <title>{{ title }}</title>
@@ -138,10 +142,15 @@
 {{ indent css.source spaces=6 }}    </style>{{/if}}
   </head>
   <body>
-{{ indent contents spaces=4 }}    <script>
-{{ indent js.source spaces=6 }}    </script>
+{{ indent contents spaces=4 }}    <script src="index.js"></script>
   </body>
 </html>

+        

+        
index.js

+        

+           Copy
+        

+        
{{ js.source }}
From f368fa1a2863711fe425712f86da890861f0f138 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Wed, 9 Jan 2019 21:47:48 +0100 Subject: [PATCH 2/5] Improve layout --- examples/resources/common.js | 2 +- examples/resources/layout.css | 11 ++++++++--- examples/templates/example.html | 29 ++++++++--------------------- 3 files changed, 17 insertions(+), 25 deletions(-) diff --git a/examples/resources/common.js b/examples/resources/common.js index 623f8bea92..8bfed4ab7b 100644 --- a/examples/resources/common.js +++ b/examples/resources/common.js @@ -8,7 +8,7 @@ e.clearSelection(); }); - var codepenButton = document.getElementById('codepen-button'); + var codepenButton = document.getElementsByClassName('codepen-button')[0]; if (codepenButton) { codepenButton.onclick = function(event) { event.preventDefault(); diff --git a/examples/resources/layout.css b/examples/resources/layout.css index 3cc66a1072..a1873a1222 100644 --- a/examples/resources/layout.css +++ b/examples/resources/layout.css @@ -91,9 +91,14 @@ pre[class*="language-"] { background: #FFFFFF; } +pre>legend { + font-size: 100%; + font-weight: bold; +} + .source-controls { position: absolute; - margin-top: 20px; + margin-top: 10px; right: 40px; } @@ -101,12 +106,12 @@ pre[class*="language-"] { margin-left: 15px; } -#copy-button { +.copy-button { text-decoration: none; cursor: pointer; } -#codepen-button { +.codepen-button { text-decoration: none; cursor: pointer; } diff --git a/examples/templates/example.html b/examples/templates/example.html index 83fc621c19..f3a0df0734 100644 --- a/examples/templates/example.html +++ b/examples/templates/example.html @@ -99,6 +99,7 @@
+

{{ title }}

{{{ contents }}} @@ -114,29 +115,15 @@
- + Copy
-
- - - - - - -
-
- 
index.html
-
- Copy -
- 
<!DOCTYPE html>
+        
index.html<!DOCTYPE html>
 <html>
   <head>
     <title>{{ title }}</title>
     <link rel="stylesheet" href="https://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css">
     <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
-    {{#if extraHead.remote}}
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>{{#if extraHead.remote}}
 {{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
     <style>
 {{ indent css.source spaces=6 }}    </style>{{/if}}
@@ -145,12 +132,12 @@
 {{ indent contents spaces=4 }}    <script src="index.js"></script>
   </body>
 </html>

-        

-        
index.js

+
+
- Copy + Copy
- 
{{ js.source }}
+ 
index.js{{ js.source }}
From 9372bc9157e33318589a64dd6e1176f3c4056efd Mon Sep 17 00:00:00 2001 From: ahocevar Date: Thu, 10 Jan 2019 18:31:26 +0100 Subject: [PATCH 3/5] Add package.json source --- examples/resources/common.js | 4 +++ examples/templates/example.html | 10 ++++++-- examples/webpack/example-builder.js | 38 +++++++++++++++++++++++++++++ 3 files changed, 50 insertions(+), 2 deletions(-) diff --git a/examples/resources/common.js b/examples/resources/common.js index 8bfed4ab7b..0257267e5d 100644 --- a/examples/resources/common.js +++ b/examples/resources/common.js @@ -7,6 +7,10 @@ jsClipboard.on('success', function(e) { e.clearSelection(); }); + var pkgClipboard = new Clipboard('#copy-pkg-button'); + pkgClipboard.on('success', function(e) { + e.clearSelection(); + }); var codepenButton = document.getElementsByClassName('codepen-button')[0]; if (codepenButton) { diff --git a/examples/templates/example.html b/examples/templates/example.html index f3a0df0734..d5a72c96d6 100644 --- a/examples/templates/example.html +++ b/examples/templates/example.html @@ -121,7 +121,6 @@ <html> <head> <title>{{ title }}</title> - <link rel="stylesheet" href="https://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css"> <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>{{#if extraHead.remote}} {{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}} @@ -137,7 +136,14 @@
Copy
- 
index.js{{ js.source }}
+ 
index.jsimport 'ol/ol.css';
+{{ js.source }}
+
+
+
+ Copy +
+ 
package.json{{ pkgJson }}
diff --git a/examples/webpack/example-builder.js b/examples/webpack/example-builder.js index 218b6d37d9..2b5ed31eb8 100644 --- a/examples/webpack/example-builder.js +++ b/examples/webpack/example-builder.js @@ -10,6 +10,7 @@ const RawSource = require('webpack-sources').RawSource; const readFile = promisify(fs.readFile); const isCssRegEx = /\.css$/; const isJsRegEx = /\.js(\?.*)?$/; +const importRegEx = /^import .* from '(.*)';$/; handlebars.registerHelper('md', str => new handlebars.SafeString(marked(str))); @@ -83,6 +84,32 @@ function getJsSource(chunk, jsName) { } } +/** + * Gets dependencies from the js source. + * @param {string} jsSource Source. + * @return {Object} dependencies + */ +function getDependencies(jsSource) { + const lines = jsSource.split('\n'); + const dependencies = { + ol: pkg.version + }; + for (let i = 0, ii = lines.length; i < ii; ++i) { + const line = lines[i]; + const importMatch = line.match(importRegEx); + if (importMatch) { + const imp = importMatch[1]; + if (!imp.startsWith('ol/') && imp != 'ol') { + const dep = imp.split('/')[0]; + if (dep in pkg.devDependencies) { + dependencies[dep] = pkg.devDependencies[dep]; + } + } + } + } + return dependencies; +} + /** * A webpack plugin that builds the html files for our examples. * @param {Object} config Plugin configuration. Requires a `templates` property @@ -167,6 +194,17 @@ ExampleBuilder.prototype.render = async function(dir, chunk) { tag: ``, source: jsSource }; + data.pkgJson = JSON.stringify({ + name: name, + dependencies: getDependencies(jsSource), + devDependencies: { + parcel: '1.11.0' + }, + scripts: { + start: 'parcel index.html', + build: 'parcel build --experimental-scope-hoisting --public-url . index.html' + } + }, null, 2); // check for example css const cssName = `${name}.css`; From 138cc55b346e1ef98e4b3895cdfc19b0b966b304 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Thu, 10 Jan 2019 22:14:05 +0100 Subject: [PATCH 4/5] Add Edit button for editing in codesandbox --- examples/resources/common.js | 52 +++++++++++++++------------------ examples/templates/example.html | 6 +++- 2 files changed, 29 insertions(+), 29 deletions(-) diff --git a/examples/resources/common.js b/examples/resources/common.js index 0257267e5d..e5fcee19e5 100644 --- a/examples/resources/common.js +++ b/examples/resources/common.js @@ -1,4 +1,12 @@ (function() { + + function compress(json) { + return LZString.compressToBase64(JSON.stringify(json)) + .replace(/\+/g, `-`) + .replace(/\//g, `_`) + .replace(/=+$/, ``); + } + var htmlClipboard = new Clipboard('#copy-html-button'); htmlClipboard.on('success', function(e) { e.clearSelection(); @@ -17,34 +25,22 @@ codepenButton.onclick = function(event) { event.preventDefault(); var form = document.getElementById('codepen-form'); - - // Doc : https://blog.codepen.io/documentation/api/prefill/ - - var resources = form.resources.value.split(','); - - var data = { - title: form.title.value, - description: form.description.value, - layout: 'left', - html: form.html.value, - css: form.css.value, - js: form.js.value, - css_external: resources.filter(function(resource) { - return resource.lastIndexOf('.css') === resource.length - 4; - }).join(';'), - js_external: resources.filter(function(resource) { - return resource.lastIndexOf('.js') === resource.length - 3; - }).join(';') - }; - - // binary flags to display html, css, js and/or console tabs - data.editors = '' + Number(data.html.length > 0) + - Number(data.css.length > 0) + - Number(data.js.length > 0) + - Number(data.js.indexOf('console') > 0); - - form.data.value = JSON.stringify(data); - + const html = document.getElementById('example-html-source').innerText; + const js = document.getElementById('example-js-source').innerText; + const pkgJson = document.getElementById('example-pkg-source').innerText; + form.parameters.value = compress({ + files: { + 'index.html': { + content: html + }, + 'index.js': { + content: js + }, + "package.json": { + content: pkgJson + } + } + }); form.submit(); }; } diff --git a/examples/templates/example.html b/examples/templates/example.html index d5a72c96d6..03e4292bd7 100644 --- a/examples/templates/example.html +++ b/examples/templates/example.html @@ -27,6 +27,7 @@ +