GitBlixt
teagles/steam

pass the type of the section in the section div element

Didier Lafforgue committed Jun 07, 2018
commit 3c38243ef61c78c785ec056c19f44b846f78b668
Showing 6 changed files with 48 additions and 26 deletions
locomotive/steam/liquid/drops/section.rb b/lib/locomotive/steam/liquid/drops/section.rb +14 -0
@@ @@ -18,6 +18,10 @@ module Locomotive
@content['id'] || @section.type
end
+ def type
+ @section.type
+ end
+
def settings
@content['settings']
end
@@ @@ -59,6 +63,11 @@ module Locomotive
@block['settings']
end
+ def locomotive_attributes
+ value = "section-#{@context['section'].id}-block-#{id}";
+ %(data-locomotive-block="#{value}")
+ end
+
end
# Required to allow the sync between the Locomotive editor
@@ @@ -92,6 +101,11 @@ module Locomotive
def is_text?(id, block)
settings = block ? block_settings(block['type']) : section_settings
+
+ # can happen if the developer forgets to assign a type to
+ # the default blocks
+ return false if settings.blank?
+
text_inputs(settings).include?(id)
end
locomotive/steam/liquid/tags/concerns/section.rb b/lib/locomotive/steam/liquid/tags/concerns/section.rb +6 -4
@@ @@ -27,12 +27,14 @@ module Locomotive::Steam::Liquid::Tags::Concerns
end
context.stack do
- html = template.render(context)
+ html = template.render(context)
+ section = context['section']
- tag_id = "locomotive-section-#{context['section'].id}"
- tag_class = ['locomotive-section', context['section'].css_class].compact.join(' ')
+ tag_id = %(id="locomotive-section-#{section.id}")
+ tag_class = %(class="#{['locomotive-section', section.css_class].compact.join(' ')}")
+ tag_data = %(data-locomotive-section-type="#{section.type}")
- %(<div id="#{tag_id}" class="#{tag_class}">#{html}</div>)
+ %(<div #{tag_id} #{tag_class} #{tag_data}>#{html}</div>)
end
end
locomotive/steam/liquid/tags/sections_dropzone.rb b/lib/locomotive/steam/liquid/tags/sections_dropzone.rb +4 -2
@@ @@ -15,7 +15,7 @@ module Locomotive
def render(context)
section_contents = context['page']&.sections_content || []
- section_contents.each_with_index.map do |content, index|
+ html = section_contents.each_with_index.map do |content, index|
# find the liquid source of the section
section = find_section(context, content['type'])
@@ @@ -28,7 +28,9 @@ module Locomotive
template = build_template(section)
render_section(context, template, section, content)
- end
+ end.join
+
+ %(<div class="locomotive-sections">#{html}</div>)
end
private
spec/unit/liquid/tags/section_spec.rb +5 -5
@@ @@ -46,13 +46,13 @@ describe Locomotive::Steam::Liquid::Tags::Section do
let(:liquid_source) { %(built by <a>\n\t<strong>{{ section.settings.brand }}</strong></a>) }
- it { is_expected.to eq %(Locomotive <div id="locomotive-section-header" class="locomotive-section my-awesome-header">built by <a>\n\t<strong data-locomotive-editor-setting="section-header.brand">NoCoffee</strong></a></div>) }
+ it { is_expected.to eq %(Locomotive <div id="locomotive-section-header" class="locomotive-section my-awesome-header" data-locomotive-section-type="header">built by <a>\n\t<strong data-locomotive-editor-setting="section-header.brand">NoCoffee</strong></a></div>) }
context 'with a non string type input' do
let(:liquid_source) { 'built by <strong>{{ section.settings.image }}</strong>' }
- it { is_expected.to eq 'Locomotive <div id="locomotive-section-header" class="locomotive-section my-awesome-header">built by <strong>foo.png</strong></div>' }
+ it { is_expected.to eq 'Locomotive <div id="locomotive-section-header" class="locomotive-section my-awesome-header" data-locomotive-section-type="header">built by <strong>foo.png</strong></div>' }
end
@@ @@ -60,7 +60,7 @@ describe Locomotive::Steam::Liquid::Tags::Section do
let(:live_editing) { false }
- it { is_expected.to eq %(Locomotive <div id="locomotive-section-header" class="locomotive-section my-awesome-header">built by <a>\n\t<strong>NoCoffee</strong></a></div>) }
+ it { is_expected.to eq %(Locomotive <div id="locomotive-section-header" class="locomotive-section my-awesome-header" data-locomotive-section-type="header">built by <a>\n\t<strong>NoCoffee</strong></a></div>) }
end
@@ @@ -70,13 +70,13 @@ describe Locomotive::Steam::Liquid::Tags::Section do
let(:liquid_source) { '{% for foo in section.blocks %}<a href="/">{{ foo.settings.title }}</a>{% endfor %}' }
- it { is_expected.to eq 'Locomotive <div id="locomotive-section-header" class="locomotive-section my-awesome-header"><a href="/" data-locomotive-editor-setting="section-header-block.42.title">Home</a></div>' }
+ it { is_expected.to eq 'Locomotive <div id="locomotive-section-header" class="locomotive-section my-awesome-header" data-locomotive-section-type="header"><a href="/" data-locomotive-editor-setting="section-header-block.42.title">Home</a></div>' }
context 'with a non text type input' do
let(:liquid_source) { '{% for foo in section.blocks %}<a>{{ foo.settings.image }}</a>{% endfor %}' }
- it { is_expected.to eq 'Locomotive <div id="locomotive-section-header" class="locomotive-section my-awesome-header"><a>foo.png</a></div>' }
+ it { is_expected.to eq 'Locomotive <div id="locomotive-section-header" class="locomotive-section my-awesome-header" data-locomotive-section-type="header"><a>foo.png</a></div>' }
end
spec/unit/liquid/tags/sections_dropzone_spec.rb +17 -13
@@ @@ -20,7 +20,7 @@ describe Locomotive::Steam::Liquid::Tags::SectionsDropzone do
let(:content) { [] }
it 'renders an empty string' do
- is_expected.to eq ''
+ is_expected.to eq '<div class="locomotive-sections"></div>'
end
end
@@ @@ -67,12 +67,14 @@ describe Locomotive::Steam::Liquid::Tags::SectionsDropzone do
it 'renders the list of sections' do
is_expected.to eq <<-HTML
- <div id="locomotive-section-0" class="locomotive-section">
- <h1 data-locomotive-editor-setting="section-0.title">Hello world</h1>
- </div>
- <div id="locomotive-section-1" class="locomotive-section">
- <p data-locomotive-editor-setting="section-1-block.0.title">Slide 1</p>
- <p data-locomotive-editor-setting="section-1-block.1.title">Slide 2</p>
+ <div class="locomotive-sections">
+ <div id="locomotive-section-0" class="locomotive-section" data-locomotive-section-type="hero">
+ <h1 data-locomotive-editor-setting="section-0.title">Hello world</h1>
+ </div>
+ <div id="locomotive-section-1" class="locomotive-section" data-locomotive-section-type="slideshow">
+ <p data-locomotive-editor-setting="section-1-block.0.title">Slide 1</p>
+ <p data-locomotive-editor-setting="section-1-block.1.title">Slide 2</p>
+ </div>
</div>
HTML
.strip.gsub(/\n\s+/, '')
@@ @@ -84,12 +86,14 @@ describe Locomotive::Steam::Liquid::Tags::SectionsDropzone do
it 'renders the list of sections' do
is_expected.to eq <<-HTML
- <div id="locomotive-section-0" class="locomotive-section">
- <h1>Hello world</h1>
- </div>
- <div id="locomotive-section-1" class="locomotive-section">
- <p>Slide 1</p>
- <p>Slide 2</p>
+ <div class="locomotive-sections">
+ <div id="locomotive-section-0" class="locomotive-section" data-locomotive-section-type="hero">
+ <h1>Hello world</h1>
+ </div>
+ <div id="locomotive-section-1" class="locomotive-section" data-locomotive-section-type="slideshow">
+ <p>Slide 1</p>
+ <p>Slide 2</p>
+ </div>
</div>
HTML
.strip.gsub(/\n\s+/, '')
spec/unit/middlewares/section_spec.rb +2 -2
@@ @@ -43,7 +43,7 @@ describe Locomotive::Steam::Middlewares::Section do
is_expected.to eq [
200,
{ "Content-Type" => "text/html" },
- [%(<div id="locomotive-section-fancy_section" class="locomotive-section">Here some HTML</div>)]
+ [%(<div id="locomotive-section-fancy_section" class="locomotive-section" data-locomotive-section-type="fancy_section">Here some HTML</div>)]
]
end
@@ @@ -59,7 +59,7 @@ describe Locomotive::Steam::Middlewares::Section do
is_expected.to eq [
200,
{ "Content-Type" => "text/html" },
- [%(<div id="locomotive-section-fancy_section" class="locomotive-section">Here some modified HTML</div>)]
+ [%(<div id="locomotive-section-fancy_section" class="locomotive-section" data-locomotive-section-type="fancy_section">Here some modified HTML</div>)]
]
end