From 6767f2d8cb132dfbac541304e13b7e063afef0e3 Mon Sep 17 00:00:00 2001
From: rahul Bajaj <you@example.com>
Date: Mar 15 2017 16:05:35 +0000
Subject: [PATCH 1/2] [RFE] Change name of Preview Button when showing Preview


Fixes : https://pagure.io/pagure/issue/1781

---

diff --git a/pagure/static/pagure.js b/pagure/static/pagure.js
new file mode 100644
index 0000000..1a37eda
--- /dev/null
+++ b/pagure/static/pagure.js
@@ -0,0 +1,11 @@
+function gotoEdit(){
+  var change = $("#previewinmarkdown")[0];
+  if (change.innerHTML == "Edit"){
+    change.innerHTML = "Preview";
+    $(".Preview_label").hide();
+  }
+  else {
+    change.innerHTML = "Edit";
+    $(".Preview_label").show();
+  }
+}
diff --git a/pagure/templates/issue.html b/pagure/templates/issue.html
index 36232ad..a8b6305 100644
--- a/pagure/templates/issue.html
+++ b/pagure/templates/issue.html
@@ -84,8 +84,9 @@
 
             <label for="comment"><strong>Add new comment</strong></label>
             <small class="text-muted pull-xs-right">
+              <span class="Preview_label" style="display: none;">Previewing Comment</span>
               <span class="btn btn-sm btn-secondary inactive"
-                aria-pressed="false" id="previewinmarkdown">Preview
+                aria-pressed="false" id="previewinmarkdown" onclick="gotoEdit()">Preview
               </span>
             </small>
             {% if repo.quick_replies %}
@@ -447,6 +448,7 @@
 <script type="text/javascript" src="{{ url_for('static', filename='selectize.min.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='atwho/jquery.caret.min.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='atwho/jquery.atwho.min.js') }}"></script>
+<script type="text/javascript" src="{{ url_for('static', filename='pagure.js') }}"></script>
 
 <script type="text/javascript">
 
diff --git a/pagure/templates/new_issue.html b/pagure/templates/new_issue.html
index e808883..2afb0b6 100644
--- a/pagure/templates/new_issue.html
+++ b/pagure/templates/new_issue.html
@@ -61,8 +61,10 @@
           <fieldset class="form-group">
             <label for="issue_content"><strong>Description</strong></label>
             <small class="text-muted pull-xs-right">
+              <span class="Preview_label" style="display: none;">Previewing Comment</span>
               <span class="btn btn-sm btn-secondary inactive"
-                aria-pressed="false" id="previewinmarkdown">Preview</span>
+                aria-pressed="false" id="previewinmarkdown" onclick="gotoEdit()">Preview
+              </span>
             </small>
             <textarea class="form-control" rows="8" id="issue_content" name="issue_content"
                 placeholder="Describe your issue">
@@ -137,6 +139,7 @@
 <script type="text/javascript"
     src="{{ url_for('static', filename='emoji/emojicomplete.js') }}">
 </script>
+<script type="text/javascript" src="{{ url_for('static', filename='pagure.js') }}"></script>
 <script type="text/javascript">
 {% if authenticated and form %}
 $(document).ready(function() {
diff --git a/pagure/templates/pull_request.html b/pagure/templates/pull_request.html
index 3071a28..0c841e6 100644
--- a/pagure/templates/pull_request.html
+++ b/pagure/templates/pull_request.html
@@ -188,8 +188,10 @@
     <fieldset class="form-group">
       <label for="initial_comment"><strong>Initial Comment</strong></label>
       <small class="text-muted pull-xs-right">
+        <span class="Preview_label" style="display: none;">Previewing Comment</span>
         <span class="btn btn-sm btn-secondary inactive"
-          aria-pressed="false" id="previewinmarkdown">Preview</span>
+          aria-pressed="false" id="previewinmarkdown" onclick="gotoEdit()">Preview
+        </span>
       </small>
       {{ form.initial_comment(class_="form-control")|safe }}
       <div>
@@ -582,8 +584,9 @@
               <fieldset class="form-group">
                 <label for="comment"><strong>Add new comment</strong></label>
                 <small class="text-muted pull-xs-right">
+                  <span class="Preview_label" style="display: none;">Previewing Comment</span>
                   <span class="btn btn-sm btn-secondary inactive"
-                    aria-pressed="false" id="previewinmarkdown">Preview
+                    aria-pressed="false" id="previewinmarkdown" onclick="gotoEdit()">Preview
                   </span>
                 </small>
                 {% if repo.quick_replies %}
@@ -845,6 +848,7 @@
 <script src="{{ url_for('static', filename='selectize.min.js') }}" type="text/javascript"> </script>
 <script type="text/javascript" src="{{ url_for('static', filename='atwho/jquery.caret.min.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='atwho/jquery.atwho.min.js') }}"></script>
+<script type="text/javascript" src="{{ url_for('static', filename='pagure.js') }}"></script>
 
 <script type="text/javascript">
 function cancel_edit_btn() {

From 6ea247f70a612eb0f99ceb0ccdbe27b0ea3ccafe Mon Sep 17 00:00:00 2001
From: rahul Bajaj <you@example.com>
Date: Mar 15 2017 16:05:35 +0000
Subject: [PATCH 2/2] Use of <class> to avoid multiple use of same identifiers on the same page


---

diff --git a/pagure/static/pagure.js b/pagure/static/pagure.js
index 1a37eda..3f94e3e 100644
--- a/pagure/static/pagure.js
+++ b/pagure/static/pagure.js
@@ -1,5 +1,5 @@
 function gotoEdit(){
-  var change = $("#previewinmarkdown")[0];
+  var change = $(".previewinmarkdown")[0];
   if (change.innerHTML == "Edit"){
     change.innerHTML = "Preview";
     $(".Preview_label").hide();
diff --git a/pagure/templates/issue.html b/pagure/templates/issue.html
index a8b6305..a3f1151 100644
--- a/pagure/templates/issue.html
+++ b/pagure/templates/issue.html
@@ -85,8 +85,8 @@
             <label for="comment"><strong>Add new comment</strong></label>
             <small class="text-muted pull-xs-right">
               <span class="Preview_label" style="display: none;">Previewing Comment</span>
-              <span class="btn btn-sm btn-secondary inactive"
-                aria-pressed="false" id="previewinmarkdown" onclick="gotoEdit()">Preview
+              <span class="btn btn-sm btn-secondary inactive previewinmarkdown"
+                aria-pressed="false" onclick="gotoEdit()">Preview
               </span>
             </small>
             {% if repo.quick_replies %}
@@ -689,8 +689,8 @@ function try_async_comment(form) {
         {# The event-source server will automatically refresh the UI #}
         $('#comment').val('');
         $('#preview').html('');
-        $('#previewinmarkdown').addClass('inactive');
-        $('#previewinmarkdown').removeClass('active');
+        $('.previewinmarkdown').addClass('inactive');
+        $('.previewinmarkdown').removeClass('active');
         $('#preview').hide();
         $('#comment').show();
         $('#comments').find('.comment_body').show();
@@ -913,9 +913,9 @@ $( document ).ready(function() {
   });
 
   $( "#preview" ).hide();
-  $( "#previewinmarkdown" ).click(
+  $( ".previewinmarkdown" ).click(
     function(event, ui) {
-      if ($( "#previewinmarkdown" ).hasClass("inactive")){
+      if ($( ".previewinmarkdown" ).hasClass("inactive")){
         var _text = $( "#comment" ).val();
         var _url = "{{ url_for('markdown_preview',
                         repo=repo.name,
@@ -932,8 +932,8 @@ $( document ).ready(function() {
           success: function(res) {
             var preview = emojione.toImage(res)
             $( "#preview" ).html(preview);
-            $( "#previewinmarkdown" ).removeClass("inactive");
-            $( "#previewinmarkdown" ).addClass("active");
+            $( ".previewinmarkdown" ).removeClass("inactive");
+            $( ".previewinmarkdown" ).addClass("active");
             $( "#comment" ).hide();
             $( "#preview" ).show();
           },
@@ -942,9 +942,9 @@ $( document ).ready(function() {
           }
         });
         return false;
-      } else if ($( "#previewinmarkdown" ).hasClass("active")){
-        $( "#previewinmarkdown" ).addClass("inactive");
-        $( "#previewinmarkdown" ).removeClass("active");
+      } else if ($( ".previewinmarkdown" ).hasClass("active")){
+        $( ".previewinmarkdown" ).addClass("inactive");
+        $( ".previewinmarkdown" ).removeClass("active");
         $( "#comment" ).show();
         $( "#preview" ).hide();
       }
diff --git a/pagure/templates/new_issue.html b/pagure/templates/new_issue.html
index 2afb0b6..276676c 100644
--- a/pagure/templates/new_issue.html
+++ b/pagure/templates/new_issue.html
@@ -62,8 +62,8 @@
             <label for="issue_content"><strong>Description</strong></label>
             <small class="text-muted pull-xs-right">
               <span class="Preview_label" style="display: none;">Previewing Comment</span>
-              <span class="btn btn-sm btn-secondary inactive"
-                aria-pressed="false" id="previewinmarkdown" onclick="gotoEdit()">Preview
+              <span class="btn btn-sm btn-secondary inactive previewinmarkdown"
+                aria-pressed="false" onclick="gotoEdit()">Preview
               </span>
             </small>
             <textarea class="form-control" rows="8" id="issue_content" name="issue_content"
@@ -205,9 +205,9 @@ $(document).ready(function() {
 
 $(function() {
   $( "#preview" ).hide();
-  $( "#previewinmarkdown" ).click(
+  $( ".previewinmarkdown" ).click(
     function(event, ui) {
-      if ($( "#previewinmarkdown" ).hasClass("inactive")){
+      if ($( ".previewinmarkdown" ).hasClass("inactive")){
         var _text = $( "#issue_content" ).val();
         var _url = "{{ url_for('markdown_preview',
                         repo=repo.name,
@@ -224,8 +224,8 @@ $(function() {
           success: function(res) {
             var preview = emojione.toImage(res);
             $( "#preview" ).html(preview);
-            $( "#previewinmarkdown" ).removeClass("inactive");
-            $( "#previewinmarkdown" ).addClass("active");
+            $( ".previewinmarkdown" ).removeClass("inactive");
+            $( ".previewinmarkdown" ).addClass("active");
             $( "#issue_content" ).hide();
             $( "#preview" ).show();
           },
@@ -234,9 +234,9 @@ $(function() {
           }
         });
         return false;
-      } else if ($( "#previewinmarkdown" ).hasClass("active")){
-        $( "#previewinmarkdown" ).addClass("inactive");
-        $( "#previewinmarkdown" ).removeClass("active");
+      } else if ($( ".previewinmarkdown" ).hasClass("active")){
+        $( ".previewinmarkdown" ).addClass("inactive");
+        $( ".previewinmarkdown" ).removeClass("active");
         $( "#issue_content" ).show();
         $( "#preview" ).hide();
       }
diff --git a/pagure/templates/pull_request.html b/pagure/templates/pull_request.html
index 0c841e6..78ede60 100644
--- a/pagure/templates/pull_request.html
+++ b/pagure/templates/pull_request.html
@@ -189,8 +189,8 @@
       <label for="initial_comment"><strong>Initial Comment</strong></label>
       <small class="text-muted pull-xs-right">
         <span class="Preview_label" style="display: none;">Previewing Comment</span>
-        <span class="btn btn-sm btn-secondary inactive"
-          aria-pressed="false" id="previewinmarkdown" onclick="gotoEdit()">Preview
+        <span class="btn btn-sm btn-secondary inactive previewinmarkdown"
+          aria-pressed="false" onclick="gotoEdit()">Preview
         </span>
       </small>
       {{ form.initial_comment(class_="form-control")|safe }}
@@ -585,8 +585,8 @@
                 <label for="comment"><strong>Add new comment</strong></label>
                 <small class="text-muted pull-xs-right">
                   <span class="Preview_label" style="display: none;">Previewing Comment</span>
-                  <span class="btn btn-sm btn-secondary inactive"
-                    aria-pressed="false" id="previewinmarkdown" onclick="gotoEdit()">Preview
+                  <span class="btn btn-sm btn-secondary inactive previewinmarkdown"
+                    aria-pressed="false" onclick="gotoEdit()">Preview
                   </span>
                 </small>
                 {% if repo.quick_replies %}
@@ -1073,9 +1073,9 @@ $(document).ready(function() {
   );
 
   $( "#preview" ).hide();
-  $( "#previewinmarkdown" ).click(
+  $( ".previewinmarkdown" ).click(
     function(event, ui) {
-        if ($( "#previewinmarkdown" ).hasClass("inactive")){
+        if ($( ".previewinmarkdown" ).hasClass("inactive")){
           var _text = $( "#comment" ).val();
           var _url = "{{ url_for('markdown_preview',
                         repo=repo.name,
@@ -1092,8 +1092,8 @@ $(document).ready(function() {
             success: function(res) {
                 var preview = emojione.toImage(res)
                 $( "#preview" ).html(preview);
-                $( "#previewinmarkdown" ).removeClass("inactive");
-                $( "#previewinmarkdown" ).addClass("active");
+                $( ".previewinmarkdown" ).removeClass("inactive");
+                $( ".previewinmarkdown" ).addClass("active");
                 $( "#comment" ).hide();
                 $( "#preview" ).show();
             },
@@ -1102,9 +1102,9 @@ $(document).ready(function() {
             }
           });
           return false;
-        } else if ($( "#previewinmarkdown" ).hasClass("active")){
-            $( "#previewinmarkdown" ).addClass("inactive");
-            $( "#previewinmarkdown" ).removeClass("active");
+        } else if ($( ".previewinmarkdown" ).hasClass("active")){
+            $( ".previewinmarkdown" ).addClass("inactive");
+            $( ".previewinmarkdown" ).removeClass("active");
             $( "#comment" ).show();
             $( "#preview" ).hide();
         }
@@ -1196,8 +1196,8 @@ function try_async_comment(form, inline) {
       if(data == 'ok') {
         $('#comment').val('');
         $('#preview').html('');
-        $('#previewinmarkdown').addClass('inactive');
-        $('#previewinmarkdown').removeClass('active');
+        $('.previewinmarkdown').addClass('inactive');
+        $('.previewinmarkdown').removeClass('active');
         $('#preview').hide();
         $('#comment').show();
         /* We have submitted the comment correctly */
@@ -1285,9 +1285,9 @@ function updateHighlight(onload) {
 $(document).ready(function () {
   updateHighlight(true)
  {% if form %}
-  $( "#previewinmarkdown" ).click(
+  $( ".previewinmarkdown" ).click(
     function(event, ui) {
-      if ($( "#previewinmarkdown" ).hasClass("inactive")){
+      if ($( ".previewinmarkdown" ).hasClass("inactive")){
         var _text = $( "#initial_comment" ).val();
         var _url = "{{ url_for('markdown_preview') }}";
         $.ajax({
@@ -1301,8 +1301,8 @@ $(document).ready(function () {
           success: function(res) {
             var preview = emojione.toImage(res);
             $( "#preview" ).html(preview);
-            $( "#previewinmarkdown" ).removeClass("inactive");
-            $( "#previewinmarkdown" ).addClass("active");
+            $( ".previewinmarkdown" ).removeClass("inactive");
+            $( ".previewinmarkdown" ).addClass("active");
             $( "#initial_comment" ).hide();
             $( "#preview" ).show();
           },
@@ -1311,9 +1311,9 @@ $(document).ready(function () {
           }
         });
         return false;
-      } else if ($( "#previewinmarkdown" ).hasClass("active")){
-        $( "#previewinmarkdown" ).addClass("inactive");
-        $( "#previewinmarkdown" ).removeClass("active");
+      } else if ($( ".previewinmarkdown" ).hasClass("active")){
+        $( ".previewinmarkdown" ).addClass("inactive");
+        $( ".previewinmarkdown" ).removeClass("active");
         $( "#initial_comment" ).show();
         $( "#preview" ).hide();
       }