Add link to codepen in examples

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;

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;
   }

examples/resources/layout.css

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