Minimal source control links

config/examples/example.html

@@ -4,12 +4,13 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
     <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="./resources/layout.css" type="text/css">
     {{{ extraHead }}}
     {{{ css.tag }}}
-    <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
     <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
     <title>{{ title }}</title>
   </head>
@@ -36,16 +37,18 @@
       </div>
 
       <div class="row-fluid">
-        <hr>
+        <div id="source-controls">
-        <form method="POST" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
+          <a id="copy-button"><i class="fa fa-clipboard"></i> Copy</a>
-          <input type="button" class="btn btn-info" id="copy-button" value="Copy example code">
+          <a id="jsfiddle-button"><i class="fa fa-jsfiddle"></i> Edit</a>
-          <input type="submit" class="btn btn-primary" id="jsfiddle-button" value="Create JSFiddle">
+        </div>
+        <form method="POST" id="jsfiddle-form" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
           <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://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js,http://openlayers.org/en/v{{ olVersion }}/css/ol.css,http://openlayers.org/en/v{{ olVersion }}/build/ol.js">
-          <pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
+        </form>
+        <pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;{{ title }}&lt;/title&gt;
@@ -71,7 +74,6 @@
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;</code></pre>
-        </form>
       </div>
     </div>
 

examples/resources/common.js

@@ -10,6 +10,14 @@
     });
   }
 
+  var fiddleButton = document.getElementById('jsfiddle-button');
+  if (fiddleButton) {
+    fiddleButton.onclick = function(event) {
+      event.preventDefault();
+      document.getElementById('jsfiddle-form').submit();
+    };
+  }
+
   if (window.location.host === 'localhost:3000') {
     return;
   }

examples/resources/layout.css

@@ -59,6 +59,36 @@ ol.inline>li {
   font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
 }
 
+pre[class*="language-"] {
+  margin-top: 20px;
+  background: #FFFFFF;
+}
+
+#source-controls {
+  position: absolute;
+  margin-top: 20px;
+  right: 40px;
+}
+
+#source-controls a {
+  margin-left: 15px;
+}
+
+#copy-button {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+#jsfiddle-button {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+pre {
+  border: 1px solid #eee;
+  border-radius: 0;
+}
+
 #tags, #shortdesc, .hidden {
   display: none;
 }