From 0850e612c5da8c2b1c5ad40591e606c1418cb062 Mon Sep 17 00:00:00 2001
From: Thomas Chandelle <thomas.chandelle@1spatial.com>
Date: Thu, 12 Jan 2017 09:53:05 +0100
Subject: [PATCH 1/2] Add link to codepen in examples

---
 config/examples/example.html  | 10 ++++++++++
 examples/resources/common.js  | 37 +++++++++++++++++++++++++++++++++++
 examples/resources/layout.css |  1 +
 3 files changed, 48 insertions(+)

diff --git a/config/examples/example.html b/config/examples/example.html
index 4ef6d52fac..48b3b70770 100644
--- a/config/examples/example.html
+++ b/config/examples/example.html
@@ -60,6 +60,7 @@
         <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/">
           <textarea class="hidden" name="js">{{ js.source }}</textarea>
@@ -68,6 +69,15 @@
           <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 }}">
         </form>
+        <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="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;
   &lt;head&gt;
diff --git a/examples/resources/common.js b/examples/resources/common.js
index 46233307e2..d18dc02133 100644
--- a/examples/resources/common.js
+++ b/examples/resources/common.js
@@ -18,6 +18,43 @@
     };
   }
 
+  var codepenButton = document.getElementById('codepen-button');
+  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);
+
+      form.submit();
+    };
+  }
+
   if (window.location.host === 'localhost:3000') {
     return;
   }
diff --git a/examples/resources/layout.css b/examples/resources/layout.css
index e04323098e..1f839e4deb 100644
--- a/examples/resources/layout.css
+++ b/examples/resources/layout.css
@@ -106,6 +106,7 @@ pre[class*="language-"] {
   cursor: pointer;
 }
 
+#codepen-button,
 #jsfiddle-button {
   text-decoration: none;
   cursor: pointer;

From 89dd4af9cb7ff748474247809e4561c3f0d638db Mon Sep 17 00:00:00 2001
From: Thomas Chandelle <thomas.chandelle@1spatial.com>
Date: Wed, 8 Feb 2017 08:42:43 +0100
Subject: [PATCH 2/2] Remove JSFiddle

---
 config/examples/example.html  | 8 --------
 examples/resources/common.js  | 8 --------
 examples/resources/layout.css | 3 +--
 tasks/build-examples.js       | 8 ++++----
 4 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/config/examples/example.html b/config/examples/example.html
index 48b3b70770..16b86ba499 100644
--- a/config/examples/example.html
+++ b/config/examples/example.html
@@ -59,16 +59,8 @@
       <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/">
-          <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 }}">
-        </form>
         <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>
diff --git a/examples/resources/common.js b/examples/resources/common.js
index d18dc02133..1fbe678761 100644
--- a/examples/resources/common.js
+++ b/examples/resources/common.js
@@ -10,14 +10,6 @@
     });
   }
 
-  var fiddleButton = document.getElementById('jsfiddle-button');
-  if (fiddleButton) {
-    fiddleButton.onclick = function(event) {
-      event.preventDefault();
-      document.getElementById('jsfiddle-form').submit();
-    };
-  }
-
   var codepenButton = document.getElementById('codepen-button');
   if (codepenButton) {
     codepenButton.onclick = function(event) {
diff --git a/examples/resources/layout.css b/examples/resources/layout.css
index 1f839e4deb..021776f301 100644
--- a/examples/resources/layout.css
+++ b/examples/resources/layout.css
@@ -106,8 +106,7 @@ pre[class*="language-"] {
   cursor: pointer;
 }
 
-#codepen-button,
-#jsfiddle-button {
+#codepen-button {
   text-decoration: none;
   cursor: pointer;
 }
diff --git a/tasks/build-examples.js b/tasks/build-examples.js
index 096583e278..cd89992937 100644
--- a/tasks/build-examples.js
+++ b/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(',') : '';
       }
     }
   }