Merge pull request #6461 from tchandelle/codepen

Add button to edit examples in CodePen

config/examples/example.html

@@ -59,14 +59,16 @@
       <div class="row-fluid">
         <div id="source-controls">
           <a id="copy-button"><i class="fa fa-clipboard"></i> Copy</a>
-          <a id="jsfiddle-button"><i class="fa fa-jsfiddle"></i> Edit</a>
+          <a id="codepen-button"><i class="fa fa-codepen"></i> Edit</a>
         </div>
-        <form method="POST" id="jsfiddle-form" target="_blank" action="https://jsfiddle.net/api/post/library/pure/">
+        <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="wrap" value="l">
           <input type="hidden" name="resources" value="https://openlayers.org/en/v{{ olVersion }}/css/ol.css,https://openlayers.org/en/v{{ olVersion }}/build/ol.js{{ extraResources }}">
+          <input type="hidden" name="data">
         </form>
         <pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
 &lt;html&gt;

examples/resources/common.js

@@ -10,11 +10,40 @@
     });
   }
 
-  var fiddleButton = document.getElementById('jsfiddle-button');
-  if (fiddleButton) {
-    fiddleButton.onclick = function(event) {
+  var codepenButton = document.getElementById('codepen-button');
+  if (codepenButton) {
+    codepenButton.onclick = function(event) {
       event.preventDefault();
-      document.getElementById('jsfiddle-form').submit();
+      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);
+
+      form.submit();
     };
   }
 

examples/resources/layout.css

@@ -106,7 +106,7 @@ pre[class*="language-"] {
   cursor: pointer;
 }
 
-#jsfiddle-button {
+#codepen-button {
   text-decoration: none;
   cursor: pointer;
 }

tasks/build-examples.js

@@ -56,7 +56,7 @@ function getLinkToApiHtml(requires) {
  * example HTML file, this adds metadata for related js and css resources. When
  * these files are run through the example template, the extra metadata is used
  * to show the complete example source in the textarea and submit the parts to
- * jsFiddle.
+ * CodePen.
  *
  * @param {Object} files The file lookup provided by Metalsmith.  Property names
  *     are file paths relative to the source directory.  The file objects
@@ -111,13 +111,13 @@ function augmentExamples(files, metalsmith, done) {
       if (file.resources) {
         var resources = [];
         var remoteResources = [];
-        var fiddleResources = [];
+        var codePenResources = [];
         for (var i = 0, ii = file.resources.length; i < ii; ++i) {
           var resource = file.resources[i];
           var remoteResource = resource.indexOf('//') === -1 ?
               'https://openlayers.org/en/v' + pkg.version + '/examples/' +
                   resource : resource;
-          fiddleResources[i] = remoteResource;
+          codePenResources[i] = remoteResource;
           if (isJsRegEx.test(resource)) {
             resources[i] = '<script src="' + resource + '"></script>';
             remoteResources[i] = '<script src="' + remoteResource +
@@ -138,7 +138,7 @@ function augmentExamples(files, metalsmith, done) {
           remote: remoteResources.join('\n')
         };
         file.extraResources = file.resources.length ?
-            ',' + fiddleResources.join(',') : '';
+            ',' + codePenResources.join(',') : '';
       }
     }
   }