From 519e3f6b2c4358d58b245ebed769bf1883cb939a Mon Sep 17 00:00:00 2001
From: rahul Bajaj <you@example.com>
Date: Jan 24 2017 06:59:03 +0000
Subject: Add preview feature while editing comment.


Fixes : https://pagure.io/pagure/issue/1674
        https://pagure.io/pagure/issue/1732

---

diff --git a/pagure/templates/comment_update.html b/pagure/templates/comment_update.html
index a015cb1..e28342a 100644
--- a/pagure/templates/comment_update.html
+++ b/pagure/templates/comment_update.html
@@ -9,16 +9,23 @@
     onsubmit="return try_async_comment(this, null)" >
 
 
-    <div class="tabs ui-widget ui-widget-content ui-corner-all"
-        id="comment_block">
-
+    <fieldset class="form-group">
+      <label for="comment"><strong>Edit comment</strong></label>
+      <small class="text-muted pull-xs-right">
+        <span class="btn btn-sm btn-secondary inactive"
+          aria-pressed="false" id="edit_previewinmarkdown">Preview
+        </span>
+      </small>
+    
       <div id="edit">
         <textarea class="form-control" id="update_comment" name="update_comment" style="width:100%;">
           {{- comment.comment -}}
         </textarea>
       </div>
+      <div id="preview">
+      </div>
+    </fieldset>
 
-    <div>
 
   {{ form.csrf_token }}
     <div>
@@ -32,6 +39,45 @@
 
 </section>
 <script>
+  $("#preview").hide();
+    $("#edit_previewinmarkdown").click(
+      function(event, ui) {
+        if ($("#edit_previewinmarkdown").hasClass("inactive")){
+          var _text = $("#update_comment").val();
+          var _url = "{{ url_for('markdown_preview',
+                        repo=repo.name,
+                        user=repo.user.user if repo.is_fork,
+                        namespace=repo.namespace) | safe}}";
+          $.ajax({
+            url: _url ,
+            type: 'POST',
+            data: {
+              content: _text,
+              csrf_token: "{{ form.csrf_token.current_token }}",
+            },
+            dataType: 'html',
+            success: function(res) {
+                var preview = emojione.toImage(res);
+                $("#preview").html(preview);
+                $("#edit_previewinmarkdown").removeClass("inactive");
+                $("#edit_previewinmarkdown").addClass("active");
+                $("#update_comment").hide();
+                $("#preview" ).show();
+            },
+            error: function() {
+                alert('Unable to generate preview!');
+            }
+          });
+          return false;
+        } else if ($("#edit_previewinmarkdown").hasClass("active")){
+            $("#edit_previewinmarkdown").addClass("inactive");
+            $("#edit_previewinmarkdown").removeClass("active");
+            $("#update_comment").show();
+            $("#preview").hide();
+        }
+    }
+  );
+
   $.get("{{ url_for('api_ns.api_users') }}", {
     pattern: '*'
   }).done(function(resp) {