is utils improvement

public/ng/js/gogs.js

@@ -1,6 +1,7 @@
 // @codekit-prepend "lib/jquery-1.11.1.min.js"
 // @codekit-prepend "lib/lib.js"
-// @codekit-prepend "lib/tabs.js"
+// @codekit-prepend "utils/tabs.js"
+// @codekit-prepend "utils/preview.js"
 // @codekit-prepend "lib/jquery.tipsy.js"
 
 var Gogs = {};
@@ -290,6 +291,7 @@ function initCore() {
             $(this).addClass('js-tab-nav-show');
             $($(this).data('tab-target')).show();
         }
+        e.preventDefault();
     });
 }
 
@@ -643,7 +645,8 @@ $(document).ready(function () {
         initInstall();
     }
 
-    Tabs('#dashboard-sidebar-menu');
+    $('#dashboard-sidebar-menu').tabs();
+    $('#pull-issue-preview').markdown_preview(".issue-add-comment");
 
     homepage();
 

public/ng/js/utils/preview.js

@@ -0,0 +1,53 @@
+/**
+ * preview plugin
+ * @param selector
+ * @param target_selector
+ */
+function Preview(selector, target_selector) {
+
+    // get input element
+    function get_input($e) {
+        return $e.find(".js-preview-input").eq(0);
+    }
+
+    // get result html container element
+    function get_container($t) {
+        if ($t.hasClass("js-preview-container")) {
+            return $t
+        }
+        return $t.find(".js-preview-container").eq(0);
+    }
+
+    var $e = $(selector);
+    var $t = $(target_selector);
+
+    var $ipt = get_input($t);
+    if (!$ipt.length) {
+        console.log("[preview]: no preview input");
+        return
+    }
+    var $cnt = get_container($t);
+    if (!$cnt.length) {
+        console.log("[preview]: no preview container");
+        return
+    }
+
+
+    // call api via ajax
+    $e.on("click", function () {
+        $.post("/api/v1/markdown", {
+            text: $ipt.val()
+        }, function (html) {
+            $cnt.html(html);
+        })
+    });
+
+    console.log("[preview]: init preview @", selector, "&", target_selector);
+}
+
+
+$.fn.extend({
+    markdown_preview: function (target) {
+        Preview(this, target);
+    }
+});

public/ng/js/utils/tabs.js

@@ -1,7 +1,6 @@
-/**
+/*
- * Created by fuxiaohei on 14-6-26.
+ js tabs and tabbed content plugin
  */
-
 function Tabs(selector) {
 
     function hide($nav) {
@@ -24,7 +23,8 @@ function Tabs(selector) {
             $($current.data("tab-target")).addClass("js-tab-show");
         }
         // bind nav click
-        $e.on("click", ".js-tab-nav", function () {
+        $e.on("click", ".js-tab-nav", function (e) {
+            e.preventDefault();
             var $this = $(this);
             // is showing, not change.
             if ($this.hasClass("js-tab-nav-show")) {
@@ -37,3 +37,9 @@ function Tabs(selector) {
         console.log("init tabs @", selector)
     }
 }
+
+$.fn.extend({
+    tabs: function () {
+        Tabs(this);
+    }
+});

templates/ng/base/head.tmpl

@@ -28,9 +28,10 @@
 		<link rel="stylesheet" href="{{AppSubUrl}}/css/github.min.css">
 
 		<!-- JavaScript -->
-		<script src="{{AppSubUrl}}/ng/js/lib/tabs.js"></script>
     	<script src="{{AppSubUrl}}/ng/js/lib/lib.js"></script>
     	<script src="{{AppSubUrl}}/ng/js/lib/jquery.tipsy.js"></script>
+        <script src="{{AppSubUrl}}/ng/js/utils/tabs.js"></script>
+        <script src="{{AppSubUrl}}/ng/js/utils/preview.js"></script>
 		<script src="{{AppSubUrl}}/ng/js/gogs.js"></script>
 
 		<title>{{if .Title}}{{.Title}} - {{end}}{{AppName}}</title>

templates/repo/pulls.tmpl

@@ -87,18 +87,18 @@
                             <div class="panel-header">
                                 <ul class="menu menu-line add-nav">
                                     <li class="js-tab-nav js-tab-nav-show" data-tab-target="#issue-add-comment-form"><a href="#">Write</a></li>
-                                    <li class="js-tab-nav" data-tab-target="#issue-add-comment-preview"><a href="#">Preview</a></li>
+                                    <li class="js-tab-nav" data-tab-target="#issue-add-comment-preview"><a href="#" id="pull-issue-preview">Preview</a></li>
                                 </ul>
                             </div>
                             <div class="panel-content content">
                                 <form id="issue-add-comment-form" action="#" method="post">
-                                    <textarea class="ipt ipt-radius" name="content" id="issue-add-content"></textarea>
+                                    <textarea class="ipt ipt-radius js-preview-input" name="content" id="issue-add-content"></textarea>
                                     <p class="submit text-right">
                                         <button class="btn btn-gray btn-radius text-bold" name="submit" value="close">Close pull request</button>&nbsp;&nbsp;
                                         <button class="btn btn-green btn-radius text-bold" name="submit" value="comment">Comment</button>
                                     </p>
                                 </form>
-                                <div id="issue-add-comment-preview">
+                                <div id="issue-add-comment-preview" class="js-preview-container">
                                     preview
                                 </div>
                             </div>