Skip to content

Commit

Permalink
Feature: Add Unique Toolbar Button IDs (#8995)
Browse files Browse the repository at this point in the history 
* add logic for editor/toolbar partial #8478

* add unique toolbar button IDs #8478

* remove trailing whitespaces
  • Loading branch information
@noi5e
noi5e authored Jan 12, 2021
1 parent 032680c commit e885e71
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 25 deletions.
14 changes: 14 additions & 0 deletions app/helpers/application_helper.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
115 changes: 90 additions & 25 deletions app/views/editor/_toolbar.html.erb
View file
Original file line number Diff line number Diff line change
@@ -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="#" >
Expand All @@ -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>
Expand All @@ -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>

0 comments on commit e885e71

Please sign in to comment.