finish issue edit content preview

public/css/gogs.css

@@ -1244,7 +1244,7 @@ html, body {
     margin-bottom: 0;
 }
 
-#issue-create-form .nav-tabs, #issue .issue-reply .nav-tabs {
+#issue-create-form .nav-tabs, #issue .issue-reply .nav-tabs,#issue .issue-edit-content .nav-tabs {
     margin-bottom: 10px;
 }
 

public/js/app.js

@@ -87,6 +87,7 @@ var Gogits = {};
                 }
                 return true;
             });
+            console.log("toggleAjax:", method, url, data);
             $.ajax({
                 url: url,
                 method: method.toUpperCase(),
@@ -501,17 +502,19 @@ function initIssue() {
     (function () {
         $("#issue-edit-btn").on("click", function () {
             $('#issue h1.title,#issue .issue-main > .issue-content .content,#issue-edit-btn').toggleHide();
-            $('#issue-edit-title,#issue-edit-content,.issue-edit-cancel,.issue-edit-save').toggleShow();
+            $('#issue-edit-title,.issue-edit-content,.issue-edit-cancel,.issue-edit-save').toggleShow();
         });
         $('.issue-edit-cancel').on("click", function () {
             $('#issue h1.title,#issue .issue-main > .issue-content .content,#issue-edit-btn').toggleShow();
-            $('#issue-edit-title,#issue-edit-content,.issue-edit-cancel,.issue-edit-save').toggleHide();
+            $('#issue-edit-title,.issue-edit-content,.issue-edit-cancel,.issue-edit-save').toggleHide();
         })
     }());
 
     // issue ajax update
     (function () {
+        var $cnt = $('#issue-edit-content');
         $('.issue-edit-save').on("click", function () {
+            $cnt.attr('data-ajax-rel', 'issue-edit-save');
             $(this).toggleAjax(function (json) {
                 if (json.ok) {
                     $('.issue-head h1.title').text(json.title);
@@ -519,12 +522,15 @@ function initIssue() {
                     $('.issue-edit-cancel').trigger("click");
                 }
             });
+            setTimeout(function () {
+                $cnt.attr('data-ajax-rel', 'issue-edit-preview');
+            }, 200)
         });
     }());
 
     // issue ajax preview
     (function () {
-        $('[data-ajax-name=issue-preview]').on("click", function () {
+        $('[data-ajax-name=issue-preview],[data-ajax-name=issue-edit-preview]').on("click", function () {
             var $this = $(this);
             $this.toggleAjax(function (resp) {
                 $($this.data("preview")).html(resp);
@@ -533,7 +539,8 @@ function initIssue() {
             })
         });
         $('.issue-write a[data-toggle]').on("click", function () {
-            $('.issue-preview-content').html("loading...");
+            var selector = $(this).parent().next(".issue-preview").find('a').data('preview');
+            $(selector).html("loading...");
         });
     }());
 
@@ -580,7 +587,6 @@ function initIssue() {
     var $m = $('.milestone');
     if ($m.data("milestone") > 0) {
         $('.clear-milestone').toggleShow();
-        console.log("show");
     }
     $('.milestone', '#issue').on('click', 'li.milestone-item', function () {
         var id = $(this).data("id");

routers/repo/issue.go

@@ -390,6 +390,10 @@ func UpdateIssue(ctx *middleware.Context, params martini.Params, form auth.Creat
 	issue.AssigneeId = form.AssigneeId
 	issue.Labels = form.Labels
 	issue.Content = form.Content
+	// try get content from text, ignore conflict with preview ajax
+	if form.Content == "" {
+		issue.Content = ctx.Query("text")
+	}
 	if err = models.UpdateIssue(issue); err != nil {
 		ctx.Handle(500, "issue.UpdateIssue(UpdateIssue)", err)
 		return

templates/issue/view.tmpl

@@ -23,11 +23,29 @@
                 </div>
                 <div class="issue-main">
                     <div class="panel panel-default issue-content">
-                        <div class="panel-body markdown">
-                            <div class="content">
+                        <div class="panel-body">
+                            <div class="content markdown">
                                 {{str2html .Issue.RenderedContent}}
                             </div>
-                            <textarea class="form-control hidden" name="content" id="issue-edit-content" rows="10" data-ajax-rel="issue-edit-save" data-ajax-val="val" data-ajax-field="content">{{.Issue.Content}}</textarea>
+                            <div class="issue-edit-content hidden">
+                                <div class="form-group">
+                                    <div class="md-help pull-right">Content with <a href="https://help.github.com/articles/markdown-basics">Markdown</a>
+                                    </div>
+                                    <ul class="nav nav-tabs" data-init="tabs">
+                                        <li class="issue-write active"><a href="#issue-edit-textarea" data-toggle="tab">Write</a></li>
+                                        <li class="issue-preview"><a href="#issue-edit-preview" data-toggle="tab" data-ajax="/api/v1/markdown" data-ajax-name="issue-edit-preview" data-ajax-context="{{.RepoLink}}" data-ajax-method="post" data-preview="#issue-edit-preview">Preview</a></li>
+                                    </ul>
+                                    <div class="tab-content">
+                                        <div class="tab-pane active" id="issue-edit-textarea">
+                                            <div class="form-group">
+                                                <input type="hidden" value="1" name="issueIndex">
+                                                <textarea class="form-control" name="content" id="issue-edit-content" rows="10" placeholder="Write some content" data-ajax-rel="issue-edit-preview" data-ajax-val="val" data-ajax-field="text">{{.Issue.Content}}</textarea>
+                                            </div>
+                                        </div>
+                                        <div class="tab-pane issue-preview-content" id="issue-edit-preview">Loading...</div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                     {{range .Comments}}