Add Unique IDs to Comment Forms (publiclab#9062)

* delete get_textarea_id method publiclab#9004 * change #c23edit selector to #comment-form-edit-23 publiclab#9004 * assign unique IDs to comment forms publiclab#9004 * change selectors from #c1edit to #comment-form-edit-1 publiclab#9004 * change preview IDs from #preview1 to #comment-preview-1 publiclab#9004 * change main preview selector to #comment-preview-main from #preview-main publiclab#9004 * change main preview selector to #comment-preview-main from #preview-main publiclab#9004
reginaalyssa · Oct 16, 2021 · b45e7df · b45e7df
1 parent c205fc3
commit b45e7df
Show file tree

Hide file tree

Showing 9 changed files with 243 additions and 258 deletions.
diff --git a/app/assets/javascripts/editor.js b/app/assets/javascripts/editor.js
@@ -24,7 +24,7 @@ $E = {
       }
     });
   },
-  setState: function(textarea = 'text-input', preview = 'preview-main', title = 'title') {
+  setState: function(textarea = 'text-input', preview = 'comment-preview-main', title = 'title') {
     $E.title = $('#' + title + 'title'); // not sure why this exists? seems like $E.title is always #title
     $E.textarea = $('#' + textarea);
     $E.textarea.bind('input propertychange', $E.save);

diff --git a/app/assets/javascripts/editorToolbar.js b/app/assets/javascripts/editorToolbar.js
@@ -20,7 +20,7 @@ const getEditorParams = (targetDiv) => {
     // #text-input ID should be unique, and the only comment form on /wiki/new & /wiki/edit
     params['textarea'] = 'text-input';
     // #preview-main should be unique as well
-    params['preview'] = 'preview-main';
+    params['preview'] = 'comment-preview-main';
   }
   return params;
 };

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -69,11 +69,11 @@ def feature_node(title)
   def get_comment_form_id(location, reply_to)
     case location
     when :main
-      '-main'
+      'main'
     when :reply
-      '-reply-' + reply_to.to_s
+      'reply-' + reply_to.to_s
     when :responses
-      '-responses'
+      'responses'
     end
   end
 
@@ -91,18 +91,6 @@ def get_toolbar_element_id(location, reply_to, comment_id)
     end
   end
 
-  # used in views/comments/_form.html.erb
-  def get_textarea_id(location, reply_to)
-    case location
-    when :main
-      'text-input'
-    when :reply
-      'text-input-reply-' + reply_to.to_s
-    when :responses
-      'text-input-responses'
-    end
-  end
-
   def locale_name_pairs
     I18n.available_locales.map do |locale|
       [I18n.t('language', locale: locale), locale]

diff --git a/app/views/comments/_edit.html.erb b/app/views/comments/_edit.html.erb
@@ -1,18 +1,17 @@
-<div class="comment-form-wrapper">
-  <div class="card card-body bg-light">
-    <form method="post" id="c<%= comment.id %>edit" style="display:none;" class="well" <% if comment.is_a?Answer %> action= "/answers/update/<%= comment.id %>" <% else %> action="/comment/update/<%= comment.id %>" <% end %>>
+<div class="card card-body bg-light comment-form-wrapper">
+  <form method="post" id="comment-form-edit-<%= comment.id %>" style="display:none;" class="well" <% if comment.is_a?Answer %> action= "/answers/update/<%= comment.id %>" <% else %> action="/comment/update/<%= comment.id %>" <% end %>>
 
-      <h4 style="margin-top:0;"><%= title %></h4>
-      <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
+    <h4 style="margin-top:0;"><%= title %></h4>
+    <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
 
-      <style>
-        #imagebar {width:100%;}
-      </style>
+    <style>
+      #imagebar {width:100%;}
+    </style>
 
-    <!-- toolbar needs location & comment_id to make unique element IDs -->
-    <%= render :partial => "editor/toolbar", :locals => { :comment_id => comment.id.to_s, :location => :edit } %>
-    
-    <div id="c<%= comment.id%>div" class="form-group">
+  <!-- toolbar needs location & comment_id to make unique element IDs -->
+  <%= render :partial => "editor/toolbar", :locals => { :comment_id => comment.id.to_s, :location => :edit } %>
+
+  <div id="c<%= comment.id%>div" class="form-group">
     <textarea aria-label="Edit Comment" onFocus="editing=true" name="body" class="form-control" id="c<%= comment.id%>text" rows="6" cols="40" placeholder="<%= placeholder %>"><%= !(comment.is_a?Answer) ? comment.comment : comment.content %></textarea>
     <div class="imagebar">
       <div id="c<%= comment.id%>progress" style="display:none;" class="progress progress-bar-container active pull-right">
@@ -36,111 +35,110 @@
           </label>
         </span>
       </p>
-      </div>
     </div>
-      <script type="application/javascript">
-        function setInit(id) {
-          const textArea = 'c'+id+'text';
-          const preview = 'c'+id+'preview';
-          $E.setState(textArea, preview);
-        }
+  </div>
+    <script type="application/javascript">
+      function setInit(id) {
+        const textArea = 'c'+id+'text';
+        const preview = 'c'+id+'preview';
+        $E.setState(textArea, preview);
+      }
 
-        $('#c<%= comment.id%>div').on('dragover',function(e) {
-          e.preventDefault();
-          $('#c<%= comment.id%>div').addClass('hover');
-        });
+      $('#c<%= comment.id%>div').on('dragover',function(e) {
+        e.preventDefault();
+        $('#c<%= comment.id%>div').addClass('hover');
+      });
 
-        $('#c<%= comment.id%>div').on('dragout',function(e) {
-          $('#c<%= comment.id%>div').removeClass('hover');
-        });
+      $('#c<%= comment.id%>div').on('dragout',function(e) {
+        $('#c<%= comment.id%>div').removeClass('hover');
+      });
 
-        $('#c<%= comment.id%>div').on('drop',function(e) {
-          e.preventDefault();
-          $D.selected = $(e.target).closest('div.comment-form-wrapper').eq(0);
-          setInit(<%= comment.id %>);
-        });
+      $('#c<%= comment.id%>div').on('drop',function(e) {
+        e.preventDefault();
+        $D.selected = $(e.target).closest('div.comment-form-wrapper').eq(0);
+        setInit(<%= comment.id %>);
+      });
 
-        $('#c<%= comment.id%>div').fileupload({
-          url: "/images",
-          paramName: "image[photo]",
-          dropZone: $('#c<%= comment.id%>div'),
-          dataType: 'json',
-          formData: {
-            'uid':<%= current_user.uid %>,
-            'nid':<%= comment.uid %>
-          },
-          start: function(e) {
-            $('#c<%= comment.id%>progress').show()
-            $('#c<%= comment.id%>uploading').show()
-            $('#c<%= comment.id%>prompt').hide()
-            $('#c<%= comment.id%>div').removeClass('hover');
-          },
-          done: function (e, data) {
-            $('#c<%= comment.id%>progress').hide()
-            $('#c<%= comment.id%>progress #c<%= comment.id%>progress-bar').css('width', 0);
-            $('#c<%= comment.id%>uploading').hide()
-            $('#c<%= comment.id%>prompt').show()
-            var is_image = false
-            if (data.result['filename'].substr(-3,3) == "jpg") is_image = true
-            if (data.result['filename'].substr(-4,4) == "jpeg") is_image = true
-            if (data.result['filename'].substr(-3,3) == "png") is_image = true
-            if (data.result['filename'].substr(-3,3) == "gif") is_image = true
-            if (data.result['filename'].substr(-3,3) == "JPG") is_image = true
-            if (data.result['filename'].substr(-4,4) == "JPEG") is_image = true
-            if (data.result['filename'].substr(-3,3) == "PNG") is_image = true
-            if (data.result['filename'].substr(-3,3) == "GIF") is_image = true
+      $('#c<%= comment.id%>div').fileupload({
+        url: "/images",
+        paramName: "image[photo]",
+        dropZone: $('#c<%= comment.id%>div'),
+        dataType: 'json',
+        formData: {
+          'uid':<%= current_user.uid %>,
+          'nid':<%= comment.uid %>
+        },
+        start: function(e) {
+          $('#c<%= comment.id%>progress').show()
+          $('#c<%= comment.id%>uploading').show()
+          $('#c<%= comment.id%>prompt').hide()
+          $('#c<%= comment.id%>div').removeClass('hover');
+        },
+        done: function (e, data) {
+          $('#c<%= comment.id%>progress').hide()
+          $('#c<%= comment.id%>progress #c<%= comment.id%>progress-bar').css('width', 0);
+          $('#c<%= comment.id%>uploading').hide()
+          $('#c<%= comment.id%>prompt').show()
+          var is_image = false
+          if (data.result['filename'].substr(-3,3) == "jpg") is_image = true
+          if (data.result['filename'].substr(-4,4) == "jpeg") is_image = true
+          if (data.result['filename'].substr(-3,3) == "png") is_image = true
+          if (data.result['filename'].substr(-3,3) == "gif") is_image = true
+          if (data.result['filename'].substr(-3,3) == "JPG") is_image = true
+          if (data.result['filename'].substr(-4,4) == "JPEG") is_image = true
+          if (data.result['filename'].substr(-3,3) == "PNG") is_image = true
+          if (data.result['filename'].substr(-3,3) == "GIF") is_image = true
 
-            if (is_image) {
-              image_url = data.result.url.split('?')[0];
-              orig_image_url = image_url.replace('medium','original');
-              $E.wrap('[![',']('+image_url+')]('+orig_image_url+')', {'newline': true, 'fallback': data.result['filename']});
-            } else {
-              $E.wrap('<a href="'+data.result.url.split('?')[0]+'"><i class="fa fa-file"></i> ','</a>', {'newline': true, 'fallback': data.result['filename']});
-            }
+          if (is_image) {
+            image_url = data.result.url.split('?')[0];
+            orig_image_url = image_url.replace('medium','original');
+            $E.wrap('[![',']('+image_url+')]('+orig_image_url+')', {'newline': true, 'fallback': data.result['filename']});
+          } else {
+            $E.wrap('<a href="'+data.result.url.split('?')[0]+'"><i class="fa fa-file"></i> ','</a>', {'newline': true, 'fallback': data.result['filename']});
+          }
 
-            if ($('#node_images').val() && $('#node_images').val().split(',').length > 1) $('#node_images').val([$('#node_images').val(),data.result.id].join(','));
-            else $('#node_images').val(data.result.id)
-          },
+          if ($('#node_images').val() && $('#node_images').val().split(',').length > 1) $('#node_images').val([$('#node_images').val(),data.result.id].join(','));
+          else $('#node_images').val(data.result.id)
+        },
 
-          // fileuploadfail: function(e,data) {},
-          progressall: function (e, data) {
-            var progress = parseInt(data.loaded / data.total * 100, 10);
-            $('#c<%= comment.id%>progress #c<%= comment.id%>progress-bar').css(
-                'width',
-                progress + '%'
-            );
-          }
-        });
-      </script>
+        // fileuploadfail: function(e,data) {},
+        progressall: function (e, data) {
+          var progress = parseInt(data.loaded / data.total * 100, 10);
+          $('#c<%= comment.id%>progress #c<%= comment.id%>progress-bar').css(
+              'width',
+              progress + '%'
+          );
+        }
+      });
+    </script>
 
-      <div class="comment-preview well col-md-11" id="c<%= comment.id %>preview" style="background:white;display: none">
-      </div>
+    <div class="comment-preview well col-md-11" id="c<%= comment.id %>preview" style="background:white;display: none">
+    </div>
 
-      <div class="control-group">
-        <button type="submit" class="btn btn-primary"><%= translation('comments._edit.publish') %></button>
-          <a class="btn btn-default preview-btn"  data-previewing-text="Hide Preview"
-              onClick="$('#c<%= comment.id %>preview').toggle();
-              $('#c<%= comment.id %>text').toggle();
-              $('#c<%= comment.id %>text').next('#imagebar').toggle();
-              this.previewing = !this.previewing;
-              $('#c<%= comment.id %>edit .preview-btn').button(this.previewing ? 'previewing' : 'reset');
-              $E.generate_preview('c<%= comment.id %>preview',$('#c<%= comment.id %>text').val())">
-            Preview
-          </a>
-          <a class="btn btn-default" onClick="$('#c<%= comment.id %>show').toggle();$('#c<%= comment.id %>edit').toggle()">
-            Cancel
-          </a>
+    <div class="control-group">
+      <button type="submit" class="btn btn-primary"><%= translation('comments._edit.publish') %></button>
+        <a class="btn btn-default preview-btn"  data-previewing-text="Hide Preview"
+            onClick="$('#c<%= comment.id %>preview').toggle();
+            $('#c<%= comment.id %>text').toggle();
+            $('#c<%= comment.id %>text').next('#imagebar').toggle();
+            this.previewing = !this.previewing;
+            $('#comment-form-edit-<%= comment.id %> .preview-btn').button(this.previewing ? 'previewing' : 'reset');
+            $E.generate_preview('c<%= comment.id %>preview',$('#c<%= comment.id %>text').val())">
+          Preview
+        </a>
+        <a class="btn btn-default" onClick="$('#c<%= comment.id %>show').toggle();$('#comment-form-edit-<%= comment.id %>').toggle()">
+          Cancel
+        </a>
 
-        <span class="form-grey"> &nbsp;
-          <br class="visible-xs" /><%= raw translation('comments._edit.logged_in', :username => current_user.username) %> |
-          <a target="_blank" href="/wiki/authoring-help#Formatting"><%= translation('comments._edit.formatting') %></a> |
-          <a onClick="$('#who-is-notified').toggle()"><%= translation('comments._edit.notifications') %></a>
-        </span>
-      </div>
+      <span class="form-grey"> &nbsp;
+        <br class="visible-xs" /><%= raw translation('comments._edit.logged_in', :username => current_user.username) %> |
+        <a target="_blank" href="/wiki/authoring-help#Formatting"><%= translation('comments._edit.formatting') %></a> |
+        <a onClick="$('#who-is-notified').toggle()"><%= translation('comments._edit.notifications') %></a>
+      </span>
+    </div>
 
-      <p id="who-is-notified" style="display:none;color:#888;">
-        <%= translation('comments._edit.email_notifications') %>
-      </p>
-    </form>
-  </div>
+    <p id="who-is-notified" style="display:none;color:#888;">
+      <%= translation('comments._edit.email_notifications') %>
+    </p>
+  </form>
 </div>