Merge pull request #381 from Pomax/jsrun

reload button + disable JS checkbox
mozilla · Mar 7, 2014 · 5d656cc · 5d656cc
2 parents 1b4d48d + 51e2b3b
commit 5d656cc
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 4 deletions.
diff --git a/locale/en_US/thimble.webmaker.org.json b/locale/en_US/thimble.webmaker.org.json
@@ -1,6 +1,7 @@
 {
 	"An error occurred": "An error occurred",
 	"Are you sure you want to publish your page?": "Are you sure you want to publish your page?",
+	"auto-run JS": "auto-run JavaScript",
 	"Cancel": "Cancel",
 	"Change text size": "Change text size",
 	"change the text in the title": "(you will have to change the text in the <title> element on your page)",

diff --git a/public/friendlycode/css/editor.less b/public/friendlycode/css/editor.less
@@ -531,3 +531,14 @@ div.editor-actions {
   height: 100%;
   overflow: auto;
 }
+
+.preview-pane-nav-options fieldset {
+  display: inline-block;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.preview-pane-nav-options fieldset {
+  font-size: 80%;
+}
diff --git a/public/friendlycode/js/fc/ui/live-preview.js b/public/friendlycode/js/fc/ui/live-preview.js
@@ -54,6 +54,9 @@ define(["jquery", "backbone-events", "./mark-tracker"], function($, BackboneEven
         // add the preview iframe to the editor on the first
         // attempt to parse the Code Mirror text.
         if(!iframe.contentWindow) {
+          document.querySelector(".reload-button").onclick = function() {
+            codeMirror.reparse();
+          };
           previewArea.append(iframe);
           telegraph = iframe.contentWindow;
           listenForEvents();
@@ -63,6 +66,7 @@ define(["jquery", "backbone-events", "./mark-tracker"], function($, BackboneEven
         // we treat all changes as a full refresh.
         var message = JSON.stringify({
           type: "overwrite",
+          runjs: document.getElementById('preview-run-js').checked,
           sourceCode: event.sourceCode
         });
 

diff --git a/public/friendlycode/templates/previewloader.html b/public/friendlycode/templates/previewloader.html
@@ -116,11 +116,21 @@
        * content management object
        */
       var content = {
-        overwrite: function overwriteIFrame(sourceCode) {
+        overwrite: function overwriteIFrame(data) {
+          var sourceCode = data.sourceCode,
+              runjs = !!data.runjs;
           var iframe = document.createElement("iframe");
           iframe.style.opacity = 0.0;
           document.body.appendChild(iframe);
 
+          // disable scripts if so instructed. We don't
+          // actually strip them, we just give them a
+          // script type that is non-executing.
+          if(!runjs) {
+            var script = /<script\s*(type=["'][^\/]+\/javascript["'])?>/g;
+            sourceCode = sourceCode.replace(script, "<script type='text/disabled'>");
+          }
+
           // set new content
           doc = iframe.contentDocument;
           doc.open();
@@ -165,7 +175,7 @@
               if(!owner) { owner = event.source; }
 
               if ("sourceCode" in data && typeof data.sourceCode === "string") {
-                content[data.type](data.sourceCode);
+                content.overwrite(data);
               } else {
                 console.error("preview payload had no associated, valid sourceCode", event.data);
               }
@@ -188,4 +198,4 @@
   <body>
     <iframe></iframe>
   </body>
-</html>
+</html>
diff --git a/views/friendlycode/templates/nav-options.html b/views/friendlycode/templates/nav-options.html
@@ -27,7 +27,13 @@
   <div class="preview-pane-nav-options">
     <!-- previous, save draft, publish -->
      <div class="preview-nav-item nav-item">
-       <span class="icon">&nbsp;</span>{{ gettext("Preview") }}<div class="pane-indicator enabled"></div>
+       <span class="icon">&nbsp;</span>{{ gettext("Preview") }}
+       <button class="reload-button wm-button wm-button-blue short">{{ gettext("reload") }}</button>
+       <fieldset>
+         <input type="checkbox" id="preview-run-js" checked>
+         <label for="preview-run-js">{{ gettext("auto-run JS") }}</label>
+       </fieldset>
+       <div class="pane-indicator enabled"></div>
      </div>
      <div class="nav-item buttons">
        <a class="page-view-link" href="" target="_blank"><div class="page-view-button wm-button wm-button-blue short">{{ gettext("View") }}</div></a>