Embeded mode preview for Scastie

see: scalacenter/scastie#269

Author: MasseGuillaume

_includes/scastie.html

@@ -2,7 +2,13 @@
 	<div class="wrap">
 		<div class="heading-line">
 			<h2><span>Run Scala in your browser</span></h2>
-			<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo neque eget placerat dapibus. Mauris ullamcorper dui eu pellentesque venenatis. Nam non elit vitae dolor posuere eleifend a facilisis diam</p>
+			<p class="lead">
+        Scastie is Scala + SBT in your browser!
+        You can use any version of Scala, or even alternate backends
+        such as Dotty, Scala.js, Scala Native, and Typelevel Scala. You can use
+        any published library. You can save and share Scala programs/builds
+        with anybody.
+      </p>
 		</div>
 	</div>
 	<div class="call-to-action action-medium">
@@ -20,4 +26,4 @@ <h2><span>Run Scala in your browser</span></h2>
 			</div>
 		</div>
 	</div>
-</section>
+</section>m

resources/js/functions.js

@@ -234,33 +234,52 @@ $(document).ready(function() {
 
 // Scala in the browser
 $(document).ready(function() {
-    if ($("#scastie-textarea").length) {
-        var editor = CodeMirror.fromTextArea(document.getElementById("scastie-textarea"), {
-            lineNumbers: true,
-            matchBrackets: true,
-            theme: "monokai",
-            mode: "text/x-scala",
-            autoRefresh: true,
-            fixedGutter: false
-          });
-        editor.setSize("100%", ($("#scastie-code-container").height()));
-
-        var codeSnippet = "List(\"Hello\", \"World\").mkString(\"\", \", \", \"!\")";
-        editor.getDoc().setValue(codeSnippet);
-        editor.refresh();
-
-        $('.btn-run').click(function() {
-            // TODO: Code to connect to the scastie server would be here, what follows is just a simulation for the UI elements:
-            $('.btn-run').addClass("inactive");
-            $('.btn-run i').removeClass("fa fa-play").addClass("fa fa-spinner fa-spin");
-            setTimeout(function() {
-              var currentCodeSnippet = editor.getDoc().getValue();
-              console.log("Current code snippet: " + currentCodeSnippet);
-              $('.btn-run').removeClass("inactive");
-              $('.btn-run i').removeClass("fa-spinner fa-spin").addClass("fa fa-play");
-            }, 2000);
-        })
+  if ($("#scastie-textarea").length) {
+    var editor = 
+      CodeMirror.fromTextArea(
+        document.getElementById("scastie-textarea"),
+        {
+          // lineNumbers: false,
+          matchBrackets: true,
+          theme: "monokai",
+          mode: "text/x-scala",
+          autoRefresh: true,
+          fixedGutter: false,
+          extraKeys: {
+            'Ctrl-Enter': 'run',
+            'Cmd-Enter': 'run'
+          }
+        }
+      );
+
+    editor.setSize("100%", ($("#scastie-code-container").height()));
+
+    var codeSnippet = "List(\"Hello\", \"World\").mkString(\"\", \", \", \"!\")";
+    editor.getDoc().setValue(codeSnippet);
+    editor.refresh();
+
+    function run(){
+      console.log("run");
+      // var scastieBaseUrl = "https://scastie.scala-lang.org";
+      var scastieBaseUrl = "http://localhost:9000";
+
+      $.ajax(
+        {
+          type: "POST",
+          url: scastieBaseUrl + '/scala-lang',
+          data: editor.getDoc().getValue(),
+          success: function(url) {
+            window.open(scastieBaseUrl + "/" + url);
+          },
+          // otherwise it's considered a popup
+          async: false
+        }
+      )
     }
+
+    $('.btn-run').click(run);
+    CodeMirror.commands.run = run;
+  }
 });
 
 // OS detection