Merge pull request #9103 from ahocevar/fix-examples

Make examples more user friendly

examples/resources/common.js

@@ -1,42 +1,46 @@
 (function() {
-  var clipboard = new Clipboard('#copy-button');
-  clipboard.on('success', function(e) {
+
+  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();
+  });
+  var jsClipboard = new Clipboard('#copy-js-button');
+  jsClipboard.on('success', function(e) {
+    e.clearSelection();
+  });
+  var pkgClipboard = new Clipboard('#copy-pkg-button');
+  pkgClipboard.on('success', function(e) {
     e.clearSelection();
   });
 
-  var codepenButton = document.getElementById('codepen-button');
+  var codepenButton = document.getElementsByClassName('codepen-button')[0];
   if (codepenButton) {
     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();
     };
   }

examples/resources/layout.css

@@ -91,22 +91,27 @@ pre[class*="language-"] {
   background: #FFFFFF;
 }
 
-#source-controls {
+pre>legend {
+  font-size: 100%;
+  font-weight: bold;
+}
+
+.source-controls {
   position: absolute;
-  margin-top: 20px;
+  margin-top: 10px;
   right: 40px;
 }
 
-#source-controls a {
+.source-controls a {
   margin-left: 15px;
 }
 
-#copy-button {
+.copy-button {
   text-decoration: none;
   cursor: pointer;
 }
 
-#codepen-button {
+.codepen-button {
   text-decoration: none;
   cursor: pointer;
 }

examples/templates/example.html

@@ -27,6 +27,7 @@
     </script>
     <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
     <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
+    <script src="https://unpkg.com/lz-string@1.4.4/libs/lz-string.min.js"></script>
     <script>
     window.addEventListener("load", function() {
       window.cookieconsent.initialise({
@@ -99,10 +100,14 @@
       </div>
 
       <div class="row-fluid">
+        <a class="codepen-button pull-right"><i class="fa fa-codepen"></i> Edit</a>
         <div class="span12">
           <h4 id="title">{{ title }}</h4>
           {{{ contents }}}
         </div>
+        <form method="POST" id="codepen-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define">
+          <input id="codesandbox-params" type="hidden" name="parameters">
+        </form>
       </div>
 
       <div class="row-fluid">
@@ -113,36 +118,37 @@
       </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>
-          <!-- <a id="codepen-button"><i class="fa fa-codepen"></i> Edit</a> -->
+        <div class="source-controls">
+          <a class="copy-button" id="copy-html-button" data-clipboard-target="#example-html-source"><i class="fa fa-clipboard"></i> Copy</a>
         </div>
-        <form method="POST" id="codepen-form" target="_blank" action="https://codepen.io/pen/define/">
-          <textarea class="hidden" name="title">{{ title }}</textarea>
-          <textarea class="hidden" name="description">{{ shortdesc }}</textarea>
-          <textarea class="hidden" name="js">{{ js.source }}</textarea>
-          <textarea class="hidden" name="css">{{ css.source }}</textarea>
-          <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;
+        <pre><legend>index.html</legend><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;
-    &lt;link rel="stylesheet" href="https://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css"&gt;
     &lt;!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --&gt;
-    &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"&gt;&lt;/script&gt;
-    {{#if extraHead.remote}}
+    &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"&gt;&lt;/script&gt;{{#if extraHead.remote}}
 {{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
     &lt;style&gt;
 {{ 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>
       </div>
+      <div class="row-fluid">
+        <div class="source-controls">
+          <a class="copy-button" id="copy-js-button" data-clipboard-target="#example-js-source"><i class="fa fa-clipboard"></i> Copy</a>
+        </div>
+        <pre><legend>index.js</legend><code id="example-js-source" class="language-js">import 'ol/ol.css';
+{{ js.source }}</code></pre>
+      </div>
+      <div class="row-fluid">
+        <div class="source-controls">
+          <a class="copy-button" id="copy-pkg-button" data-clipboard-target="#example-pkg-source"><i class="fa fa-clipboard"></i> Copy</a>
+        </div>
+        <pre><legend>package.json</legend><code id="example-pkg-source" class="language-js">{{ pkgJson }}</code></pre>
+      </div>
     </div>
 
     <script src="./resources/common.js"></script>

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,38 @@ function getJsSource(chunk, jsName) {
   }
 }
 
+/**
+ * Gets dependencies from the js source.
+ * @param {string} jsSource Source.
+ * @return {Object<string, string>} 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 parts = imp.split('/');
+        let dep;
+        if (imp.startsWith('@')) {
+          dep = parts.slice(0, 2).join('/');
+        } else {
+          dep = parts[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 +200,17 @@ ExampleBuilder.prototype.render = async function(dir, chunk) {
     tag: `<script src="${this.common}.js"></script><script src="${jsName}"></script>`,
     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`;