#212

static/css/playground.css

@@ -64,4 +64,6 @@
 #output {
     width: 40%;
     float: right;
+    border-width: 0;
+    border-left: 1px solid #919191;
 }

static/js/playground.js

@@ -17,11 +17,37 @@
 var playground = {
     editor: undefined,
     pid: undefined,
+    _resize: function () {
+        $("#editor, #output").height($(window).height() - 57 - $(".footer").height());
+        // playground.editor.setSize($("#editor").width(), $("#editor").height() + 4);
+    },
+    _initShare: function () {
+        $(".share-panel .font-ico").click(function () {
+            var key = $(this).attr('class').split('-')[2];
+            var url = "https://wide.b3log.org", pic = 'https://wide.b3log.org/static/images/wide-logo.png';
+            var urls = {};
+            urls.email = "mailto:?subject=" + $('title').text()
+                    + "&body=" + $('meta[name=description]').attr('content') + ' ' + url;
+
+            var twitterShare = encodeURIComponent($('meta[name=description]').attr('content') + " " + url + " #golang");
+            urls.twitter = "https://twitter.com/intent/tweet?status=" + twitterShare;
+
+            urls.facebook = "https://www.facebook.com/sharer/sharer.php?u=" + url;
+            urls.googleplus = "https://plus.google.com/share?url=" + url;
+
+            var title = encodeURIComponent($('title').text() + '. \n' + $('meta[name=description]').attr('content')
+                    + " #golang#");
+            urls.weibo = "http://v.t.sina.com.cn/share/share.php?title=" + title + "&url=" + url + "&pic=" + pic;
+            urls.tencent = "http://share.v.t.qq.com/index.php?c=share&a=index&title=" + title +
+                    "&url=" + url + "&pic=" + pic;
+
+            window.open(urls[key], "_blank", "top=100,left=200,width=648,height=618");
+            
+            $(".menu .share-panel").hide();
+        });
+    },
     init: function () {
-        $("#editorDiv").append("");
+        playground.editor = CodeMirror.fromTextArea($("#editor")[0], {
-        var textArea = document.getElementById("editor");
-        textArea.value = code;
-        playground.editor = CodeMirror.fromTextArea(textArea, {
             lineNumbers: true,
             autofocus: true,
             autoCloseBrackets: true,
@@ -33,7 +59,11 @@ var playground = {
             tabSize: 4,
             indentUnit: 4,
             foldGutter: true,
-            cursorHeight: 1,
+            cursorHeight: 1
+        });
+
+        $(window).resize(function () {
+            playground._resize();
         });
 
         var hovered = false;
@@ -66,6 +96,9 @@ var playground = {
         });
 
         this._initWS();
+        this._resize();
+        this._initShare();
+        menu._initAbout();
     },
     _initWS: function () {
         // Used for session retention, server will release all resources of the session if this channel closed

views/about.html

@@ -12,15 +12,16 @@
     <div class="space"></div>
 
     <div class="fn-clear">
-        <div class="fn-left">
+        <div class="fn-left">            
-            <label>{{.i18n.go_env}}{{.i18n.colon}}</label>
-            {{.gover}}, {{.goos}}_{{.goarch}}<br/> 
             <label>{{.i18n.project_address}}{{.i18n.colon}}</label>
             <a href="https://github.com/b3log/wide" target="_blank">github.com/b3log/wide</a><br/>
 
             <label>{{.i18n.dev_team}}{{.i18n.colon}}</label>
             <a href="https://github.com/b3log/b3log-solo/wiki/About_us" target="_blank">B3log</a><br/> 
 
+            <label>{{.i18n.go_env}}{{.i18n.colon}}</label>
+            {{.gover}}, {{.goos}}_{{.goarch}}<br/> 
+            
             <label>{{.i18n.donate}}{{.i18n.colon}}</label>
             <a href="http://b3log.org/donate.html" target="_blank">b3log.org/donate.html</a>
         </div>

views/index.html

@@ -578,38 +578,7 @@
                     "context": {{.conf.Context}},
                             "staticServer": '{{.conf.StaticServer}}',
                             "pathSeparator": '{{.pathSeparator}}',
-                            "label": {
+                            "label": {{.i18n}},
-                            "restore_editor": "{{.i18n.restore_editor}}",
-                                    "max_editor": "{{.i18n.max_editor}}",
-                                    "delete": "{{.i18n.delete}}",
-                                    "rename": "{{.i18n.rename}}",
-                                    "cancel": "{{.i18n.cancel}}",
-                                    "goto_line": "{{.i18n.goto_line}}",
-                                    "goto_file": "{{.i18n.goto_file}}",
-                                    "go": "{{.i18n.go}}",
-                                    "create": "{{.i18n.create}}",
-                                    "create_file": "{{.i18n.create_file}}",
-                                    "create_dir": "{{.i18n.create_dir}}",
-                                    "tip": "{{.i18n.tip}}",
-                                    "confirm": "{{.i18n.confirm}}",
-                                    "build_n_run": "{{.i18n.build_n_run}}",
-                                    "stop": "{{.i18n.stop}}",
-                                    "find_usages": "{{.i18n.find_usages}}",
-                                    "search_text": "{{.i18n.search_text}}",
-                                    "search": "{{.i18n.search}}",
-                                    "start_page": "{{.i18n.start_page}}",
-                                    "confirm_save": "{{.i18n.confirm_save}}",
-                                    "community": "{{.i18n.community}}",
-                                    "about": "{{.i18n.about}}",
-                                    "new_version_available": "{{.i18n.new_version_available}}",
-                                    "colon": "{{.i18n.colon}}",
-                                    "file": "{{.i18n.file}}",
-                                    "uptodate": "{{.i18n.uptodate}}",
-                                    "perference": "{{.i18n.perference}}",
-                                    "apply": "{{.i18n.apply}}",
-                                    "no_empty": "{{.i18n.no_empty}}",
-                                    "search_no_match": "{{.i18n.search_no_match}}"
-                            },
                             "channel": {{.conf.Channel}},
                             "wideSessionId": '{{.session.ID}}',
                             "editorTheme": '{{.user.Editor.Theme}}',

views/playground/index.html

@@ -9,6 +9,8 @@
         <meta name="author" content="B3log">
 
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/base.css?{{.conf.StaticResourceVersion}}">
+        <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/dialog.css?{{.conf.StaticResourceVersion}}">
+        <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/about.css?{{.conf.StaticResourceVersion}}">
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/sign.css?{{.conf.StaticResourceVersion}}">
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/playground.css?{{.conf.StaticResourceVersion}}">
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/themes/default.css?{{.conf.StaticResourceVersion}}">
@@ -41,7 +43,7 @@
                 </li>
             </ul>
             <div class="fn-right">
-                <span class="font-ico ico-about"></span> &nbsp;
+                <span class="font-ico ico-about" onclick='$("#dialogAbout").dialog("open");'></span> &nbsp;
                 <span class="font-ico ico-share"></span> &nbsp;
                 <span onclick="window.open('https://github.com/b3log/wide')"
                       class="font-ico ico-github"></span>&nbsp;
@@ -57,7 +59,7 @@
         </div>
         <div class="fn-clear">
             <div id="editorDiv">
-                <textarea id='editor'></textarea>
+                <textarea id='editor'>"{{.code}}"</textarea>
             </div>
             <textarea id="output" rows="20" readonly="readonly" ></textarea>
         </div>
@@ -66,21 +68,22 @@
                 Ver {{.ver}}, &copy; {{.year}} <a rel="copyright" href="http://b3log.org" target="_blank">B3LOG.ORG</a>
             </div>
         </div>
-        <script>
-            var config = {
-                "context": "{{.conf.Context}}",
-                "staticServer": "{{.conf.StaticServer}}",
-                "channel": "{{.conf.Channel}}",
-                "wideSessionId": "{{.session.ID}}"
-            };
-            var code = "{{.code}}";
 
-            function newWideRequest() {
+        <div id="dialogAbout" class="fn-none"></div>
-                var ret = {
+        <script>
+                    var config = {
+                    "context": "{{.conf.Context}}",
+                            "staticServer": "{{.conf.StaticServer}}",
+                            "channel": "{{.conf.Channel}}",
+                            "wideSessionId": "{{.session.ID}}",
+                            "label": {{.i18n}}
+                    };
+                    function newWideRequest() {
+                    var ret = {
                     sid: config.wideSessionId
-                };
+                    };
-                return ret;
+                            return ret;
-            }
+                    }
 
         </script>
 
@@ -108,6 +111,8 @@
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/codemirror-{{.codeMirrorVer}}/mode/meta.js"></script>
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/codemirror-{{.codeMirrorVer}}/mode/go/go.js"></script>
 
+        <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/dialog.js?{{.conf.StaticResourceVersion}}"></script>
+        <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/menu.js?{{.conf.StaticResourceVersion}}"></script>
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/playground.js?{{.conf.StaticResourceVersion}}"></script>
     </body>
 </html>