Merge pull request #1669 from wilzbach/open-in-editor

Add 'Open in editor' button for runnable code examples
merged-on-behalf-of: Vladimir Panteleev <github@thecybershadow.net>

Author: dlang-bot

css/style.css

@@ -1686,7 +1686,7 @@ div.d_code_output, div.d_code_stdin, div.d_code_args, div.d_code_unittest
 .CodeMirror {line-height: normal; border: 1px solid #CCC; background: #FCFCFC; height: auto}
 .cm-s-eclipse .CodeMirror-matchingbracket {border:1px solid grey;color:black !important;}
 
-input.runButton, input.resetButton, input.argsButton, input.inputButton, input.editButton
+input.runButton, input.resetButton, input.argsButton, input.inputButton, input.editButton, input.openInEditorButton
 {
     -moz-box-shadow:inset 0 1px 0 0 #ffffff;
     -webkit-box-shadow:inset 0 1px 0 0 #ffffff;
@@ -1727,6 +1727,29 @@ input.editButton:active
 }
 input.resetButton{display: none}
 
+div.editButton, div.openInEditorButton, div.runButton, div.resetButton {
+    display: inline-block;
+    margin-right: 10px;
+    cursor: pointer;
+    color: #333;
+    background: white;
+    border: 1px solid #CCC;
+    border-radius: 4px;
+    padding: 0.3em 0.6em;
+    display: inline-block;
+    text-decoration: none;
+}
+div.openInEditorButton {
+    margin-right: 0;
+    float: right;
+}
+.unittest_examples .d_example_buttons {
+    margin-top: 10px;
+}
+.unittest_examples .CodeMirror, .unittest_examples .d_code_output {
+    margin-top: 10px;
+}
+
 /* Style for the example run buttons on the Phobos library documentation */
 .d_example_buttons {
     text-align: left;

js/run.js

@@ -229,9 +229,10 @@ function setupTextarea(el, opts)
         return (parseInt(par.css('height')) - diff) + 'px';
     };
 
-    var runBtn = parent.children("input.runButton");
-    var editBtn = parent.children("input.editButton");
-    var resetBtn = parent.children("input.resetButton");
+    var runBtn = parent.children(".runButton");
+    var editBtn = parent.children(".editButton");
+    var resetBtn = parent.children(".resetButton");
+    var openInEditorBtn = parent.children(".openInEditorButton");
 
     var code = $(editor.getWrapperElement());
     code.css('display', 'none');
@@ -358,6 +359,10 @@ function setupTextarea(el, opts)
             }
         });
     });
+    openInEditorBtn.click(function(){
+      var url = "https://tour.dlang.org/editor?source=" + encodeURIComponent(opts.transformOutput(editor.getValue()));
+      window.open(url, "_blank");
+    });
     return editor;
 };
 

js/run_examples.js

@@ -25,11 +25,11 @@ function wrapIntoMain(code) {
         codeOut += code;
     }
     else {
-        var codeOut = "void main(){ ";
-        codeOut += "import " + currentPackage + "; ";
+        var codeOut = "void main()\n{\n";
+        codeOut += "    import " + currentPackage + ";\n";
         // writing to the stdout is probably often used
-        codeOut += "import std.stdio: write, writeln, writef, writefln; ";
-        codeOut += code;
+        codeOut += "    import std.stdio: write, writeln, writef, writefln;\n    ";
+        codeOut += code.split("\n").join("\n    ");
         codeOut += "\n}";
     }
     return codeOut;
@@ -70,18 +70,19 @@ $(document).ready(function()
             return;
 
         currentExample.replaceWith(
-                '<div>'
-                    + '<div class="d_example_buttons">'
-                        + '<input type="button" class="editButton" value="Edit">'
-                        + '<input type="button" class="runButton" value="Run">'
-                        + '<input type="button" class="resetButton" value="Reset">'
-                    + '</div>'
+                '<div class="unittest_examples">'
                     + '<div class="d_code">'
                         + '<pre class="d_code">'+orig+'</pre>'
                     + '</div>'
                     + '<div class="d_run_code" style="display: block">'
                         + '<textarea class="d_code" style="display: none;"></textarea>'
                     + '</div>'
+                    + '<div class="d_example_buttons">'
+          + '<div class="editButton"><i class="fa fa-edit" aria-hidden="true"></i> Edit</div>'
+          + '<div class="runButton"><i class="fa fa-play" aria-hidden="true"></i> Run</div>'
+          + '<div class="resetButton"><i class="fa fa-undo " aria-hidden="true"></i> Reset</div>'
+          + '<div class="openInEditorButton" title="Open in an external editor"><i class="fa fa-external-link" aria-hidden="true"></i></div>'
+                    + '</div>'
                     + '<div class="d_code_output"><span class="d_code_title">Application output</span><br><pre class="d_code_output" readonly>Running...</pre>'
                 + '</div>'
         );