Feature: Add Unique Toolbar Button IDs (publiclab#8995)

* add logic for editor/toolbar partial publiclab#8478 * add unique toolbar button IDs publiclab#8478 * remove trailing whitespaces
manchere · Feb 13, 2021 · 3eecc48 · 3eecc48
1 parent 832d092
commit 3eecc48
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 25 deletions.
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -77,6 +77,20 @@ def get_large_dropzone_id(location, reply_to)
     end
   end
 
+  # used in views/editor/_toolbar.html.erb
+  def get_toolbar_element_id(location, reply_to, comment_id)
+    case location
+    when :main
+      'main'
+    when :reply
+      'reply-' + reply_to.to_s
+    when :edit
+      'edit-' + comment_id
+    when :responses
+      'responses'
+    end
+  end
+
   # used in views/comments/_form.html.erb
   def get_textarea_id(location, reply_to)
     case location

diff --git a/app/views/editor/_toolbar.html.erb b/app/views/editor/_toolbar.html.erb
@@ -1,5 +1,4 @@
 <div class="btn-toolbar" style="margin-bottom:8px;">
-
   <div class="dropdown mr-2">
     <div class="d-md-none d-lg-inline">
       <a class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" href="#" >
@@ -13,28 +12,66 @@
       </div>
     </div>
   </div>
-
+  <!-- defined in application_helper.rb -->
+  <% toolbar_element_id = get_toolbar_element_id(location, local_assigns[:reply_to], local_assigns[:comment_id]) %>
   <div class="btn-group mr-2 ">
-    <a data-toggle="tooltip" title="Bold" data-placement="bottom" class="btn btn-outline-secondary btn-sm " onClick="$E.bold()"><i class="fa fa-bold" ></i></a>
-    <a data-toggle="tooltip" title="Italic" data-placement="bottom" class="btn btn-outline-secondary btn-sm " onClick="$E.italic()"><i class="fa fa-italic" ></i></a>
-    <a data-toggle="tooltip" title="Header" data-placement="bottom" class="btn btn-outline-secondary btn-sm " onClick="$E.h2()"><b><span class="d-md-none d-lg-inline"><i class="fa fa-header"></i></span></b></a>
-    <a aria-label="Make a link" data-toggle="tooltip" title="Make a link" data-placement="bottom" class="btn btn-outline-secondary btn-sm" href="javascript:void(0)" onClick="$E.link()"><i class="fa fa-link"></i></a>
-    <a aria-label="Upload an image" data-toggle="tooltip" title="Upload an image" data-placement="bottom" class="btn btn-outline-secondary btn-sm">
-      <% dropzone_small_id = '' %>
-      <% case location
-        when :main %>
-        <% dropzone_small_id = 'main' %>
-      <% when :reply %>
-        <% dropzone_small_id = 'reply-' + local_assigns[:reply_to].to_s %>
-      <% when :edit %>
-        <% dropzone_small_id = 'edit-' + comment_id %>
-      <% when :responses %>
-        <% dropzone_small_id = 'responses' %>
-      <%  end %>
-      <div id="dropzone-small-<%= dropzone_small_id %>" class="dropzone">
+    <a
+      id="bold-button-<%= toolbar_element_id %>"
+      data-toggle="tooltip" 
+      title="Bold" 
+      data-placement="bottom" 
+      class="bold-button btn btn-outline-secondary btn-sm" 
+      onClick="$E.bold()"
+    >
+      <i class="fa fa-bold" ></i>
+    </a>
+    <a
+      id="italic-button-<%= toolbar_element_id %>"
+      data-toggle="tooltip" 
+      title="Italic" 
+      data-placement="bottom" 
+      class="italic-button btn btn-outline-secondary btn-sm" 
+      onClick="$E.italic()"
+    >
+      <i class="fa fa-italic" ></i>
+    </a>
+    <a
+      id="header-button-<%= toolbar_element_id %>"
+      data-toggle="tooltip" 
+      title="Header" 
+      data-placement="bottom" 
+      class="header-button btn btn-outline-secondary btn-sm" 
+      onClick="$E.h2()"
+    >
+      <b>
+        <span class="d-md-none d-lg-inline">
+          <i class="fa fa-header"></i>
+        </span>
+      </b>
+    </a>
+    <a
+      id="link-button-<%= toolbar_element_id %>"
+      aria-label="Make a link" 
+      data-toggle="tooltip" 
+      title="Make a link" 
+      data-placement="bottom" 
+      class="link-button btn btn-outline-secondary btn-sm" href="javascript:void(0)" 
+      onClick="$E.link()"
+    >
+      <i class="fa fa-link"></i>
+    </a>
+    <a
+      id="image-upload-button-<%= toolbar_element_id %>"
+      aria-label="Upload an image" 
+      data-toggle="tooltip" 
+      title="Upload an image" 
+      data-placement="bottom" 
+      class="upload-button btn btn-outline-secondary btn-sm"
+    >
+      <div id="dropzone-small-<%= toolbar_element_id %>" class="dropzone">
         <span id="create_prompt" class="prompt">
-          <label class="" for="fileinput-button-<%= dropzone_small_id %>" style="margin-bottom: 0;">
-            <input id="fileinput-button-<%= dropzone_small_id %>" class="fileinput" type="file" name="image[photo]" accept="image/*" style="display:none;" />
+          <label class="" for="fileinput-button-<%= toolbar_element_id %>" style="margin-bottom: 0;">
+            <input id="fileinput-button-<%= toolbar_element_id %>" class="fileinput" type="file" name="image[photo]" accept="image/*" style="display:none;" />
             <i class="fa fa-image"></i>
             <span class="d-md-none">
               <i class="fa fa-upload"></i>
@@ -46,12 +83,40 @@
   </div>
 
   <div class="btn-group mr-2 ">
-    <a data-toggle="tooltip" title="Save" data-placement="bottom" onClick="$E.save()" class="btn btn-outline-secondary btn-sm"><i class="fa fa-save"></i></a>
-    <a data-toggle="tooltip" title="Recover" data-placement="bottom" onClick="$E.recover()" class="btn btn-outline-secondary btn-sm">Recover</a>
+    <a
+      id="save-button-<%= toolbar_element_id %>"
+      data-toggle="tooltip" 
+      title="Save" 
+      data-placement="bottom" 
+      onClick="$E.save()" 
+      class="save-button btn btn-outline-secondary btn-sm"
+    >
+      <i class="fa fa-save"></i>
+    </a>
+    <a 
+      id="recover-button-<%= toolbar_element_id %>"
+      data-toggle="tooltip" 
+      title="Recover" 
+      data-placement="bottom" 
+      onClick="$E.recover()" 
+      class="recover-button btn btn-outline-secondary btn-sm"
+    >
+      Recover
+    </a>
   </div>
 
   <div class="btn-group">
-    <a aria-label="Help" data-toggle="tooltip" title="Help" data-placement="bottom" class="btn btn-outline-secondary btn-sm" target="_blank" href="/wiki/authoring-help"><i class="fa fa-question-circle" ></i></a>
+    <a 
+      id="help-button-<%= toolbar_element_id %>"
+      aria-label="Help" 
+      data-toggle="tooltip" 
+      title="Help" 
+      data-placement="bottom" 
+      class="help-button btn btn-outline-secondary btn-sm" 
+      target="_blank" 
+      href="/wiki/authoring-help"
+    >
+      <i class="fa fa-question-circle"></i>
+    </a>
   </div>
-
 </div>