issue content ajax preview

public/js/app.js

@@ -399,6 +399,7 @@ function initRepository() {
 
 function initInstall() {
     // database type change
+    (function () {
         $('#install-database').on("change", function () {
             var val = $(this).val();
             if (val != "sqlite") {
@@ -414,6 +415,8 @@ function initInstall() {
                 $('.sqlite-setting').removeClass("hide");
             }
         });
+    }());
+
 }
 
 function initIssue() {
@@ -445,6 +448,7 @@ function initIssue() {
     }());
 
     // issue ajax update
+    (function () {
         $('.issue-edit-save').on("click", function () {
             $(this).toggleAjax(function (json) {
                 if (json.ok) {
@@ -453,6 +457,23 @@ function initIssue() {
                 }
             });
         });
+    }());
+
+    // 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 class="active issue-write"><a href="#issue-textarea" data-toggle="tab">Write</a></li>
-                        <li><a href="#issue-preview" data-toggle="tab">Preview</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 class="active issue-write"><a href="#issue-textarea" data-toggle="tab">Write</a></li>
-                                    <li><a href="#issue-preview" data-toggle="tab">Preview</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)