#212

playground/playgrounds.go

@@ -77,7 +77,7 @@ func IndexHandler(w http.ResponseWriter, r *http.Request) {
 
 	model := map[string]interface{}{"conf": conf.Wide, "i18n": i18n.GetAll(locale), "locale": locale,
 		"session": wideSession, "pathSeparator": conf.PathSeparator, "codeMirrorVer": conf.CodeMirrorVer,
-		"code": template.HTML(code)}
+		"code": template.HTML(code), "ver": conf.WideVersion, "year": time.Now().Year()}
 
 	wideSessions := session.WideSessions.GetByUsername(username)
 

static/js/playground.js

@@ -35,7 +35,32 @@ var playground = {
             foldGutter: true,
             cursorHeight: 1,
         });
-        
+
+        var hovered = false;
+        $(".menu .ico-share").hover(function () {
+            $(".menu .share-panel").show();
+            hovered = true;
+        }, function () {
+            if (!hovered) {
+                $(".menu .share-panel").hide();
+            }
+
+            hovered = false;
+            setTimeout(function () {
+                if (!hovered) {
+                    $(".menu .share-panel").hide();
+                }
+            }, 500);
+        });
+
+        $(".menu .share-panel").hover(function () {
+            $(".menu .share-panel").show();
+            hovered = true;
+        }, function () {
+            $(".menu .share-panel").hide();
+            hovered = false;
+        });
+
         playground.editor.on('changes', function (cm) {
             $("#url").html("");
         });
@@ -70,7 +95,7 @@ var playground = {
             console.log('[playground onmessage]' + e.data);
 
             var data = JSON.parse(e.data);
-            
+
             if ("init-playground" === data.cmd) {
                 return;
             }
@@ -111,7 +136,7 @@ var playground = {
                 if (!data.succ) {
                     return;
                 }
-                
+
                 var url = window.location.protocol + "//" + window.location.host + '/playground/' + data.fileName;
                 var html = '<a href="' + url + '" target="_blank">'
                         + url + "</a>";
@@ -195,6 +220,26 @@ var playground = {
                 });
             }
         });
+    },
+    format: function () {
+        if (!playground.editor) {
+            return;
+        }
+
+        var code = playground.editor.getValue();
+
+        var request = newWideRequest();
+        request.code = code;
+
+        $.ajax({
+            type: 'POST',
+            url: config.context + '/playground/save',
+            data: JSON.stringify(request),
+            dataType: "json",
+            success: function (data) {
+                playground.editor.setValue(data.code);
+            }
+        });
     }
 };
 

views/playground/index.html

@@ -22,13 +22,16 @@
         <div class="header menu fn-clear">
             <ul class="fn-left">
                 <li>
-                    <a href="/login" rel="login">
+                    <a href="/" target="_blank">
                         <img title="Wide, a Web-based IDE for Teams using Golang." src="{{.conf.StaticServer}}/static/images/wide-logo.png" 
                              class="logo"/></a>
                 </li>
                 <li>
                     <button class="btn" id="run" onclick="playground.run();">Run</button>
                 </li>
+                <li>
+                    <button class="btn btn-red" id="Format" onclick="playground.format();">Format</button>
+                </li>
                 <li>
                     <button class="btn btn-red" id="stop" onclick="playground.stop();">Stop</button>
                 </li>
@@ -42,7 +45,7 @@
                 <span class="font-ico ico-share"></span> &nbsp;
                 <span onclick="window.open('https://github.com/b3log/wide')"
                       class="font-ico ico-github"></span>&nbsp;
-                <div class="share-panel frame">
+                <div class="share-panel frame" style="display: none;">
                     <span title="Email" class="font-ico ico-email"></span>
                     <span title="Twitter" class="font-ico ico-twitter"></span>
                     <span title="Facebook" class="font-ico ico-facebook"></span>