Skip to content

Commit

Permalink
Add content editor css class and data attributes helpers (#1761)
Browse files Browse the repository at this point in the history
Added data_content_name, data_content_id for all
  • Loading branch information
mickenorlen authored Apr 3, 2020
1 parent 8531f6c commit a43a746
Showing 15 changed files with 105 additions and 26 deletions.
2 changes: 1 addition & 1 deletion app/assets/stylesheets/alchemy/elements.scss
Original file line number Diff line number Diff line change
@@ -718,7 +718,7 @@ textarea.has_tinymce {
visibility: hidden;
}

.essence_html_editor textarea {
.essence_html textarea {
font-family: $mono-font-family;
resize: vertical;
font-size: $form-field-font-size;
14 changes: 14 additions & 0 deletions app/decorators/alchemy/content_editor.rb
Original file line number Diff line number Diff line change
@@ -8,6 +8,20 @@ def to_partial_path
"alchemy/essences/#{essence_partial_name}_editor"
end

def css_classes
[
'content_editor',
essence_partial_name
].compact
end

def data_attributes
{
content_id: id,
content_name: name
}
end

# Returns a string to be passed to Rails form field tags to ensure we have same params layout everywhere.
#
# === Example:
7 changes: 5 additions & 2 deletions app/views/alchemy/essences/_essence_boolean_editor.html.erb
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
<div class="content_editor essence_boolean" id="<%= essence_boolean_editor.dom_id %>" data-content-id="<%= essence_boolean_editor.id %>">
<%= content_tag :div,
id: essence_boolean_editor.dom_id,
class: essence_boolean_editor.css_classes,
data: essence_boolean_editor.data_attributes do %>
<input type="hidden" value="0" name="<%= essence_boolean_editor.form_field_name %>">
<%= check_box_tag essence_boolean_editor.form_field_name, 1, essence_boolean_editor.ingredient %>
<label for="<%= essence_boolean_editor.form_field_id %>" style="display: inline">
<%= render_content_name(essence_boolean_editor) %>
</label>
<%= render_hint_for(essence_boolean_editor) %>
</div>
<% end %>
7 changes: 5 additions & 2 deletions app/views/alchemy/essences/_essence_date_editor.html.erb
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<div class="content_editor essence_date" id="<%= essence_date_editor.dom_id %>" data-content-id="<%= essence_date_editor.id %>">
<%= content_tag :div,
id: essence_date_editor.dom_id,
class: essence_date_editor.css_classes,
data: essence_date_editor.data_attributes do %>
<%= content_label(essence_date_editor) %>
<%= alchemy_datepicker(
essence_date_editor.essence, :date, {
@@ -10,4 +13,4 @@
<label for="<%= essence_date_editor.form_field_id %>" class="essence_date--label">
<i class="icon far fa-calendar-alt fa-fw fa-lg"></i>
</label>
</div>
<% end %>
7 changes: 5 additions & 2 deletions app/views/alchemy/essences/_essence_file_editor.html.erb
Original file line number Diff line number Diff line change
@@ -12,7 +12,10 @@
class: 'file_icon',
title: Alchemy.t(:assign_file) %>

<div class="content_editor essence_file" id="<%= essence_file_editor.dom_id %>" data-content-id="<%= essence_file_editor.id %>">
<%= content_tag :div,
id: essence_file_editor.dom_id,
class: essence_file_editor.css_classes,
data: essence_file_editor.data_attributes do %>
<%= content_label(essence_file_editor) %>
<div class="file" id="file_<%= essence_file_editor.id %>">
<% if essence_file_editor.ingredient %>
@@ -39,4 +42,4 @@
<%= hidden_field_tag essence_file_editor.form_field_name(:attachment_id),
essence_file_editor.ingredient && essence_file_editor.ingredient.id %>
</div>
</div>
<% end %>
7 changes: 5 additions & 2 deletions app/views/alchemy/essences/_essence_html_editor.html.erb
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<div class="content_editor essence_html_editor" data-content-id="<%= essence_html_editor.id %>">
<%= content_tag :div,
id: essence_html_editor.dom_id,
class: essence_html_editor.css_classes,
data: essence_html_editor.data_attributes do %>
<%= content_label(essence_html_editor) %>
<%= text_area_tag(
essence_html_editor.form_field_name,
essence_html_editor.ingredient
) %>
</div>
<% end %>
7 changes: 5 additions & 2 deletions app/views/alchemy/essences/_essence_link_editor.html.erb
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<div class="content_editor essence_link" id="<%= essence_link_editor.dom_id %>" data-content-id="<%= essence_link_editor.id %>">
<%= content_tag :div,
id: essence_link_editor.dom_id,
class: essence_link_editor.css_classes,
data: essence_link_editor.data_attributes do %>
<%= content_label(essence_link_editor) %>
<%= text_field_tag '', essence_link_editor.ingredient,
class: "thin_border text_with_icon disabled",
@@ -15,7 +18,7 @@
<%= hidden_field_tag essence_link_editor.form_field_name(:link_target),
essence_link_editor.essence.link_target %>
<%= render 'alchemy/essences/shared/linkable_essence_tools', content: essence_link_editor.content %>
</div>
<% end %>
<script type="text/javascript" charset="utf-8">
$('#<%= essence_link_editor.form_field_id(:link) %>').on('change', function() {
$('#<%= essence_link_editor.dom_id %> input.text_with_icon').val($(this).val());
7 changes: 5 additions & 2 deletions app/views/alchemy/essences/_essence_page_editor.html.erb
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
<div class="content_editor essence_page" id="<%= essence_page_editor.dom_id %>" data-content-id="<%= essence_page_editor.id %>">
<%= content_tag :div,
id: essence_page_editor.dom_id,
class: essence_page_editor.css_classes,
data: essence_page_editor.data_attributes do %>
<%= content_label(essence_page_editor) %>
<%= text_field_tag(
essence_page_editor.form_field_name,
essence_page_editor.essence.page_id,
id: essence_page_editor.form_field_id,
class: 'alchemy_selectbox full_width'
) %>
</div>
<% end %>

<script>
$('#<%= essence_page_editor.form_field_id %>').alchemyPageSelect({
5 changes: 4 additions & 1 deletion app/views/alchemy/essences/_essence_picture_editor.html.erb
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<% options = local_assigns.fetch(:options, {}) %>

<%= content_tag :div, id: essence_picture_editor.dom_id, data: {"content-id" => essence_picture_editor.id}, class: "content_editor essence_picture" do %>
<%= content_tag :div,
id: essence_picture_editor.dom_id,
class: essence_picture_editor.css_classes,
data: essence_picture_editor.data_attributes do %>
<%= content_label(essence_picture_editor) %>
<div class="picture_thumbnail">
<span class="picture_tool delete">
7 changes: 5 additions & 2 deletions app/views/alchemy/essences/_essence_richtext_editor.html.erb
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<div class="content_editor essence_richtext" id="<%= essence_richtext_editor.dom_id %>">
<%= content_tag :div,
id: essence_richtext_editor.dom_id,
class: essence_richtext_editor.css_classes,
data: essence_richtext_editor.data_attributes do %>
<%= content_label(essence_richtext_editor) %>
<div class="tinymce_container">
<%= text_area_tag(
@@ -8,4 +11,4 @@
id: "tinymce_#{essence_richtext_editor.id}"
) %>
</div>
</div>
<% end %>
7 changes: 3 additions & 4 deletions app/views/alchemy/essences/_essence_select_editor.html.erb
Original file line number Diff line number Diff line change
@@ -3,10 +3,9 @@
<%= content_tag :div,
id: essence_select_editor.dom_id,
class: [
"content_editor",
"essence_select",
essence_select_editor.settings[:display_inline] ? 'display_inline' : nil
].compact, data: {content_id: essence_select_editor.id} do %>
essence_select_editor.css_classes,
essence_select_editor.settings[:display_inline] ? 'display_inline' : ''
], data: essence_select_editor.data_attributes do %>
<%= content_label(essence_select_editor) %>

<% if select_values.nil? %>
9 changes: 7 additions & 2 deletions app/views/alchemy/essences/_essence_text_editor.html.erb
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
<div class="essence_text content_editor<%= essence_text_editor.settings[:display_inline] ? ' display_inline' : '' %>" id="<%= essence_text_editor.dom_id %>">
<%= content_tag :div,
id: essence_text_editor.dom_id,
class: [
essence_text_editor.css_classes,
essence_text_editor.settings[:display_inline] ? 'display_inline' : ''
], data: essence_text_editor.data_attributes do %>
<%= content_label(essence_text_editor) %>
<%= text_field_tag(
essence_text_editor.form_field_name,
@@ -13,4 +18,4 @@
<%= hidden_field_tag essence_text_editor.form_field_name(:link_target), essence_text_editor.essence.link_target %>
<%= render 'alchemy/essences/shared/linkable_essence_tools', content: essence_text_editor.content %>
<% end %>
</div>
<% end %>
Original file line number Diff line number Diff line change
@@ -4,11 +4,14 @@

Please consult Alchemy::Content.rb docs for further methods on the content object
%>
<div class="content_editor <%= @essence_name.classify.demodulize.underscore %>" id="<%%= <%= @essence_editor_local %>.dom_id %>" data-content-id="<%%= <%= @essence_editor_local %>.id %>">
<%%= content_tag :div,
id: <%= @essence_editor_local %>.dom_id,
class: <%= @essence_editor_local %>.css_classes,
data: <%= @essence_editor_local %>.data_attributes do %>
<%%= content_label(<%= @essence_editor_local %>) %>
<%%= text_field_tag(
<%= @essence_editor_local %>.form_field_name,
<%= @essence_editor_local %>.ingredient,
id: <%= @essence_editor_local %>.form_field_id
) %>
</div>
<%% end %>
20 changes: 20 additions & 0 deletions spec/decorators/alchemy/content_editor_spec.rb
Original file line number Diff line number Diff line change
@@ -13,6 +13,26 @@
end
end

describe "#css_classes" do
it "includes content_editor class" do
expect(content_editor.css_classes).to include('content_editor')
end

it "includes essence partial class" do
expect(content_editor.css_classes).to include(content_editor.essence_partial_name)
end
end

describe "#data_attributes" do
it "includes content_id" do
expect(content_editor.data_attributes[:content_id]).to eq(content_editor.id)
end

it "includes content_name" do
expect(content_editor.data_attributes[:content_name]).to eq(content_editor.name)
end
end

describe '#to_partial_path' do
subject { content_editor.to_partial_path }

18 changes: 16 additions & 2 deletions spec/features/admin/page_editing_feature_spec.rb
Original file line number Diff line number Diff line change
@@ -127,19 +127,33 @@
create(:alchemy_page, page_layout: 'everything', autogenerate_elements: true)
end

it "renders essence editors for all elements" do
it "renders essence editors for all element contents" do
visit alchemy.admin_elements_path(page_id: everything_page.id)

expect(page).to have_selector('div.content_editor.essence_boolean')
expect(page).to have_selector('div.content_editor.essence_date')
expect(page).to have_selector('div.content_editor.essence_file')
expect(page).to have_selector('div.content_editor.essence_html_editor')
expect(page).to have_selector('div.content_editor.essence_html')
expect(page).to have_selector('div.content_editor.essence_link')
expect(page).to have_selector('div.content_editor.essence_picture')
expect(page).to have_selector('div.content_editor.essence_richtext')
expect(page).to have_selector('div.content_editor.essence_select')
expect(page).to have_selector('div.content_editor.essence_text')
end

it "renders data attribute based on content name" do
visit alchemy.admin_elements_path(page_id: everything_page.id)

expect(page).to have_selector('div[data-content-name=essence_boolean]')
expect(page).to have_selector('div[data-content-name=essence_date]')
expect(page).to have_selector('div[data-content-name=essence_file]')
expect(page).to have_selector('div[data-content-name=essence_html]')
expect(page).to have_selector('div[data-content-name=essence_link]')
expect(page).to have_selector('div[data-content-name=essence_picture]')
expect(page).to have_selector('div[data-content-name=essence_richtext]')
expect(page).to have_selector('div[data-content-name=essence_select]')
expect(page).to have_selector('div[data-content-name=essence_text]')
end
end
end

0 comments on commit a43a746

Please sign in to comment.