issue content ajax preview

public/js/app.js

@@ -399,21 +399,24 @@ function initRepository() {
 
 function initInstall() {
     // database type change
-    $('#install-database').on("change", function () {
-        var val = $(this).val();
-        if (val != "sqlite") {
-            $('.server-sql').show();
-            $('.sqlite-setting').addClass("hide");
-            if (val == "pgsql") {
-                $('.pgsql-setting').removeClass("hide");
+    (function () {
+        $('#install-database').on("change", function () {
+            var val = $(this).val();
+            if (val != "sqlite") {
+                $('.server-sql').show();
+                $('.sqlite-setting').addClass("hide");
+                if (val == "pgsql") {
+                    $('.pgsql-setting').removeClass("hide");
+                } else {
+                    $('.pgsql-setting').addClass("hide");
+                }
             } else {
-                $('.pgsql-setting').addClass("hide");
+                $('.server-sql').hide();
+                $('.sqlite-setting').removeClass("hide");
             }
-        } else {
-            $('.server-sql').hide();
-            $('.sqlite-setting').removeClass("hide");
-        }
-    });
+        });
+    }());
+
 }
 
 function initIssue() {
@@ -445,14 +448,32 @@ function initIssue() {
     }());
 
     // issue ajax update
-    $('.issue-edit-save').on("click", function () {
-        $(this).toggleAjax(function(json){
-            if(json.ok){
-                $('.issue-head h1.title').text(json.title);
-                $('.issue-main > .issue-content .content').html(json.content);
-            }
+    (function () {
+        $('.issue-edit-save').on("click", function () {
+            $(this).toggleAjax(function (json) {
+                if (json.ok) {
+                    $('.issue-head h1.title').text(json.title);
+                    $('.issue-main > .issue-content .content').html(json.content);
+                }
+            });
         });
-    });
+    }());
+
+    // issue ajax preview
+    (function () {
+        $('[data-ajax-name=issue-preview]').on("click", function () {
+            var $this = $(this);
+            $this.toggleAjax(function (json) {
+                if (json.ok) {
+                    $($this.data("preview")).html(json.content);
+                }
+            })
+        });
+        $('.issue-write a[data-toggle]').on("click", function () {
+            $('.issue-preview-content').html("loading...");
+        });
+    }())
+
 }
 
 (function ($) {

routers/preview.go

@@ -0,0 +1,17 @@
+// Copyright 2014 The Gogs Authors. All rights reserved.
+// Use of this source code is governed by a MIT-style
+// license that can be found in the LICENSE file.
+
+package routers
+
+import "github.com/gogits/gogs/modules/middleware"
+
+func Preview(ctx *middleware.Context) {
+	content := ctx.Query("content")
+	// todo : gfm render content
+	// content = Markdown(content)
+	ctx.Render.JSON(200, map[string]interface{}{
+		"ok":      true,
+		"content": "preview : " + content,
+	})
+}

templates/issue/create.tmpl

@@ -18,16 +18,16 @@
                         Content with <a href="#">Markdown</a>
                     </div>
                     <ul class="nav nav-tabs" data-init="tabs">
-                        <li class="active"><a href="#issue-textarea" data-toggle="tab">Write</a></li>
-                        <li><a href="#issue-preview" data-toggle="tab">Preview</a></li>
+                        <li class="active issue-write"><a href="#issue-textarea" data-toggle="tab">Write</a></li>
+                        <li class="issue-preview"><a href="#issue-preview" data-toggle="tab" data-ajax="/preview?repo=repo_id&issue=new" data-ajax-name="issue-preview" data-ajax-method="post" data-preview="#issue-preview">Preview</a></li>
                     </ul>
                     <div class="tab-content">
                         <div class="tab-pane" id="issue-textarea">
                             <div class="form-group">
-                                <textarea class="form-control" name="content" id="issue-content" rows="10" placeholder="Write some content">{{.content}}</textarea>
+                                <textarea class="form-control" name="content" id="issue-content" rows="10" placeholder="Write some content" data-ajax-rel="issue-preview" data-ajax-val="val" data-ajax-field="content">{{.content}}</textarea>
                             </div>
                         </div>
-                        <div class="tab-pane" id="issue-preview">preview</div>
+                        <div class="tab-pane issue-preview-content" id="issue-preview">loading...</div>
                     </div>
                 </div>
                 <div class="text-right panel-body">

templates/issue/view.tmpl

@@ -72,17 +72,17 @@
                                     Content with <a href="#">Markdown</a>
                                 </div>
                                 <ul class="nav nav-tabs" data-init="tabs">
-                                    <li class="active"><a href="#issue-textarea" data-toggle="tab">Write</a></li>
-                                    <li><a href="#issue-preview" data-toggle="tab">Preview</a></li>
+                                    <li class="active issue-write"><a href="#issue-textarea" data-toggle="tab">Write</a></li>
+                                    <li class="issue-preview"><a href="#issue-preview" data-toggle="tab" data-ajax="/preview?repo=repo_id&issue=issue_id&comment=new" data-ajax-name="issue-preview" data-ajax-method="post" data-preview="#issue-preview">Preview</a></li>
                                 </ul>
                                 <div class="tab-content">
                                     <div class="tab-pane" id="issue-textarea">
                                         <div class="form-group">
                                             <input type="hidden" value="{{.Issue.Index}}" name="issueIndex"/>
-                                            <textarea class="form-control" name="content" id="issue-reply-content" rows="10" placeholder="Write some content">{{.content}}</textarea>
+                                            <textarea class="form-control" name="content" id="issue-content" rows="10" placeholder="Write some content" data-ajax-rel="issue-preview" data-ajax-val="val" data-ajax-field="content">{{.content}}</textarea>
                                         </div>
                                     </div>
-                                    <div class="tab-pane" id="issue-preview">preview</div>
+                                    <div class="tab-pane issue-preview-content" id="issue-preview">loading...</div>
                                 </div>
                             </div>
                             <div class="text-right">

web.go

@@ -95,6 +95,7 @@ func runWeb(*cli.Context) {
 	m.Get("/pulls", reqSignIn, user.Pulls)
 	m.Get("/stars", reqSignIn, user.Stars)
 	m.Get("/help", routers.Help)
+	m.Post("/preview", routers.Preview)
 
 	avt := avatar.CacheServer("public/img/avatar/", "public/img/avatar_default.jpg")
 	m.Get("/avatar/:hash", avt.ServeHTTP)