#1734 Add preview feature while editing comment.
Merged 6 years ago by pingou. Opened 7 years ago by rahulbajaj.
rahulbajaj/pagure Preview  into  master

@@ -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) {

This PR is not up for review yet :smile:

rebased

7 years ago

rebased

7 years ago

Are you still working on this one?

@pingou yes, apparently everything is going correct, i guess. Getting a little messy with the preview button - http://img.susepaste.org/47279975

Nitpicking here, but could we use no spaces between parantheses and arguments? Eg. $("#preview") instead of $( "#preview" )?

If we aren't linting JS, I suppose this is just personal preference. So this is just a suggestion :)

We seem to be using the same id for new comment previews. We should use a different one here.

rebased

7 years ago

This pr is open for review and testing now :smile:

rebased

7 years ago

This looks fine to me but either we need to adjust #1803 to also take into account this preview panel or we need to adjust this to behave as in #1803.

And it needs to be rebased anyway :)

@pingou I guess we shall adjust this with respect to #1803 :)

Commit c2137d2 fixes this pull-request

Pull-Request has been merged by pingou

6 years ago