diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/multiSelection.js b/entry_types/scrolled/package/src/frontend/inlineEditing/multiSelection.js
index 884d33b5ae..ec2a658df5 100644
--- a/entry_types/scrolled/package/src/frontend/inlineEditing/multiSelection.js
+++ b/entry_types/scrolled/package/src/frontend/inlineEditing/multiSelection.js
@@ -5,12 +5,54 @@
// itemType: 'contentElement',
// items: [{id: 5}, {id: 6}]
// }
+//
+// In selection mode, started from the editor, plain clicks extend the
+// selection as well and it stays a multi selection down to one item:
+//
+// {
+// type: 'multiSelection',
+// itemType: 'contentElement',
+// items: [{id: 5}],
+// selectionMode: true
+// }
+
+const sectionSelectionTypes = ['section', 'sectionSettings'];
export function hasSelectionModifier(event) {
return event.ctrlKey || event.metaKey;
}
+export function watchSelectionModifier(window) {
+ const root = window.document.documentElement;
+ const events = ['keydown', 'keyup', 'mousemove'];
+
+ function update(event) {
+ root.toggleAttribute('data-selection-modifier', hasSelectionModifier(event));
+ }
+
+ function reset() {
+ root.removeAttribute('data-selection-modifier');
+ }
+
+ events.forEach(name => window.addEventListener(name, update));
+ window.addEventListener('blur', reset);
+
+ return () => {
+ events.forEach(name => window.removeEventListener(name, update));
+ window.removeEventListener('blur', reset);
+ reset();
+ };
+}
+
export function extendMultiSelection(selection, {type, id}) {
+ // Do not dissolve a multi selection of content elements when a
+ // modifier click lands on the section next to the elements.
+ if (sectionSelectionTypes.includes(type) && isMultiSelectionOf(selection, 'contentElement')) {
+ return selection;
+ }
+
+ selection = withSectionSelectionType(selection, type);
+
if (isMultiSelectionOf(selection, type)) {
return isInMultiSelection(selection, {type, id}) ?
withoutItem(selection, id) :
@@ -30,11 +72,43 @@ export function extendMultiSelection(selection, {type, id}) {
return {type, id};
}
+export function isInSelectionMode(selection) {
+ return !!selection && !!selection.selectionMode;
+}
+
+export function withoutSelectionMode({selectionMode, ...selection}) {
+ if (selection.items.length > 1) {
+ return selection;
+ }
+
+ return {type: selection.itemType, id: selection.items[0].id};
+}
+
export function isInMultiSelection(selection, {type, id}) {
return isMultiSelectionOf(selection, type) &&
selection.items.some(item => item.id === id);
}
+// The outline selects sections with type `section`, the preview with
+// type `sectionSettings`. Without this, extending a selection started
+// in one place from the other would drop the sections selected so far.
+function withSectionSelectionType(selection, type) {
+ if (!selection || !sectionSelectionTypes.includes(type)) {
+ return selection;
+ }
+
+ if (selection.type === 'multiSelection' &&
+ sectionSelectionTypes.includes(selection.itemType)) {
+ return {...selection, itemType: type};
+ }
+
+ if (sectionSelectionTypes.includes(selection.type)) {
+ return {...selection, type};
+ }
+
+ return selection;
+}
+
function isMultiSelectionOf(selection, type) {
return !!selection &&
selection.type === 'multiSelection' &&
@@ -44,9 +118,13 @@ function isMultiSelectionOf(selection, type) {
function withoutItem(selection, id) {
const items = selection.items.filter(item => item.id !== id);
+ if (selection.selectionMode) {
+ return items.length ? {...selection, items} : selection;
+ }
+
if (items.length > 1) {
return {...selection, items};
}
- return {type: selection.itemType, id: items[0].id};
+ return items.length ? {type: selection.itemType, id: items[0].id} : null;
}
diff --git a/entry_types/scrolled/spec/controllers/pageflow_scrolled/editor/fragment_extractions_controller_spec.rb b/entry_types/scrolled/spec/controllers/pageflow_scrolled/editor/fragment_extractions_controller_spec.rb
deleted file mode 100644
index 0d8c73ee31..0000000000
--- a/entry_types/scrolled/spec/controllers/pageflow_scrolled/editor/fragment_extractions_controller_spec.rb
+++ /dev/null
@@ -1,298 +0,0 @@
-require 'spec_helper'
-require 'pageflow/editor_controller_test_helper'
-require 'pageflow/shared_contexts/fake_translations'
-
-module PageflowScrolled
- RSpec.describe Editor::FragmentExtractionsController, type: :controller do
- include Pageflow::EditorControllerTestHelper
-
- routes { PageflowScrolled::Engine.routes }
-
- describe '#create' do
- it 'requires authentication' do
- entry = create(:entry, type_name: 'scrolled')
- chapter = create(:scrolled_chapter, revision: entry.draft)
-
- post_extraction(entry:, chapter:)
-
- expect(response.status).to eq(401)
- end
-
- it 'creates fragment library for account of entry' do
- user = create(:user)
- account = create(:account, with_editor: user)
- entry = create(:entry, type_name: 'scrolled', account:, with_feature: 'fragments')
- chapter = create(:scrolled_chapter, revision: entry.draft)
-
- sign_in_and_lock(entry, user)
-
- expect { post_extraction(entry:, chapter:) }
- .to change { Pageflow::Entry.where(account:, fragment_library: 'shared').count }.by(1)
- expect(response.status).to eq(201)
- end
-
- it 'creates scrolled library entry' do
- user = create(:user)
- account = create(:account, with_editor: user)
- entry = create(:entry, type_name: 'scrolled', account:, with_feature: 'fragments')
- chapter = create(:scrolled_chapter, revision: entry.draft)
-
- sign_in_and_lock(entry, user)
- post_extraction(entry:, chapter:)
-
- expect(find_library(account).type_name).to eq('scrolled')
- end
-
- describe 'library title' do
- include_context 'fake translations'
-
- it 'includes account name in locale of entry' do
- translation(:de, 'pageflow_scrolled.fragment_library.title',
- 'Bausteine von %{account_name}')
- translation(:en, 'pageflow_scrolled.fragment_library.title',
- 'Shared fragments of %{account_name}')
- user = create(:user)
- account = create(:account, name: 'Acme', with_editor: user)
- entry = create(:entry,
- type_name: 'scrolled',
- account:,
- with_feature: 'fragments',
- draft_attributes: {locale: 'de'})
- chapter = create(:scrolled_chapter, revision: entry.draft)
-
- sign_in_and_lock(entry, user)
- post_extraction(entry:, chapter:)
-
- expect(find_library(account).title).to eq('Bausteine von Acme')
- end
-
- it 'falls back to English for other locales' do
- translation(:de, 'pageflow_scrolled.fragment_library.title',
- 'Bausteine von %{account_name}')
- translation(:en, 'pageflow_scrolled.fragment_library.title',
- 'Shared fragments of %{account_name}')
- user = create(:user)
- account = create(:account, name: 'Acme', with_editor: user)
- entry = create(:entry,
- type_name: 'scrolled',
- account:,
- with_feature: 'fragments',
- draft_attributes: {locale: 'fr'})
- chapter = create(:scrolled_chapter, revision: entry.draft)
-
- sign_in_and_lock(entry, user)
- post_extraction(entry:, chapter:)
-
- expect(find_library(account).title).to eq('Shared fragments of Acme')
- end
- end
-
- it 'copies chapter with its sections into library' do
- user = create(:user)
- account = create(:account, with_editor: user)
- entry = create(:entry, type_name: 'scrolled', account:, with_feature: 'fragments')
- chapter = create(:scrolled_chapter,
- revision: entry.draft,
- configuration: {'title' => 'Intro', 'kind' => 'intro'})
- create(:section, chapter:, position: 0)
- create(:section, chapter:, position: 1)
-
- sign_in_and_lock(entry, user)
- post_extraction(entry:, chapter:)
-
- fragment = Chapter.all_for_revision(find_library(account).draft).first
- expect(fragment.configuration).to include('title' => 'Intro', 'kind' => 'intro')
- expect(fragment.sections.count).to eq(2)
- end
-
- it 'uses given title for fragment' do
- user = create(:user)
- account = create(:account, with_editor: user)
- entry = create(:entry, type_name: 'scrolled', account:, with_feature: 'fragments')
- chapter = create(:scrolled_chapter,
- revision: entry.draft,
- configuration: {'title' => 'Intro', 'kind' => 'intro'})
-
- sign_in_and_lock(entry, user)
- post_extraction(entry:, chapter:, title: 'Opening with video')
-
- fragment = Chapter.all_for_revision(find_library(account).draft).first
- expect(fragment.configuration).to include('title' => 'Opening with video',
- 'kind' => 'intro')
- end
-
- it 'keeps chapter title if blank title is given' do
- user = create(:user)
- account = create(:account, with_editor: user)
- entry = create(:entry, type_name: 'scrolled', account:, with_feature: 'fragments')
- chapter = create(:scrolled_chapter,
- revision: entry.draft,
- configuration: {'title' => 'Intro'})
-
- sign_in_and_lock(entry, user)
- post_extraction(entry:, chapter:, title: ' ')
-
- fragment = Chapter.all_for_revision(find_library(account).draft).first
- expect(fragment.configuration).to include('title' => 'Intro')
- end
-
- it 'adds fragment to main storyline of library' do
- user = create(:user)
- account = create(:account, with_editor: user)
- entry = create(:entry, type_name: 'scrolled', account:, with_feature: 'fragments')
- chapter = create(:scrolled_chapter, revision: entry.draft)
-
- sign_in_and_lock(entry, user)
- post_extraction(entry:, chapter:)
-
- fragment = Chapter.all_for_revision(find_library(account).draft).first
- expect(fragment.storyline.role).to eq('main')
- end
-
- it 'keeps sections of chapter in entry' do
- user = create(:user)
- account = create(:account, with_editor: user)
- entry = create(:entry, type_name: 'scrolled', account:, with_feature: 'fragments')
- chapter = create(:scrolled_chapter, revision: entry.draft)
- create(:section, chapter:)
-
- sign_in_and_lock(entry, user)
- post_extraction(entry:, chapter:)
-
- expect(chapter.sections.count).to eq(1)
- end
-
- it 'appends fragment to existing library of account' do
- user = create(:user)
- account = create(:account, with_editor: user)
- entry = create(:entry, type_name: 'scrolled', account:, with_feature: 'fragments')
- chapter = create(:scrolled_chapter,
- revision: entry.draft,
- configuration: {'title' => 'Outro'})
- library = create(:entry, type_name: 'scrolled', account:, fragment_library: 'shared')
- create(:scrolled_chapter,
- revision: library.draft,
- position: 0,
- configuration: {'title' => 'Intro'})
-
- sign_in_and_lock(entry, user)
-
- expect { post_extraction(entry:, chapter:) }
- .not_to(change { Pageflow::Entry.where(fragment_library: 'shared').count })
- expect(Chapter.all_for_revision(library.draft).map { |c| c.configuration['title'] })
- .to eq(%w[Intro Outro])
- end
-
- it 'does not add fragment to library of other account' do
- user = create(:user)
- account = create(:account, with_editor: user)
- other_account = create(:account, with_editor: user)
- entry = create(:entry, type_name: 'scrolled', account:, with_feature: 'fragments')
- chapter = create(:scrolled_chapter, revision: entry.draft)
- other_library = create(:entry,
- type_name: 'scrolled',
- account: other_account,
- fragment_library: 'shared')
-
- sign_in_and_lock(entry, user)
- post_extraction(entry:, chapter:)
-
- expect(Chapter.all_for_revision(other_library.draft)).to be_empty
- expect(find_library(account)).to be_present
- end
-
- it 'does not let user without account editor role create library' do
- user = create(:user)
- account = create(:account, with_previewer: user)
- entry = create(:entry, type_name: 'scrolled', account:, with_editor: user,
- with_feature: 'fragments')
- chapter = create(:scrolled_chapter, revision: entry.draft)
-
- sign_in_and_lock(entry, user)
- post_extraction(entry:, chapter:)
-
- expect(response.status).to eq(403)
- expect(find_library(account)).to be_nil
- end
-
- it 'lets user with editor role on existing library add fragment' do
- user = create(:user)
- account = create(:account, with_previewer: user)
- entry = create(:entry, type_name: 'scrolled', account:, with_editor: user,
- with_feature: 'fragments')
- chapter = create(:scrolled_chapter, revision: entry.draft)
- library = create(:entry,
- type_name: 'scrolled',
- account:,
- fragment_library: 'shared',
- with_editor: user)
-
- sign_in_and_lock(entry, user)
- post_extraction(entry:, chapter:)
-
- expect(response.status).to eq(201)
- expect(Chapter.all_for_revision(library.draft).count).to eq(1)
- end
-
- it 'does not let user who may not edit existing library add fragment' do
- user = create(:user)
- account = create(:account, with_previewer: user)
- entry = create(:entry, type_name: 'scrolled', account:, with_editor: user,
- with_feature: 'fragments')
- chapter = create(:scrolled_chapter, revision: entry.draft)
- library = create(:entry, type_name: 'scrolled', account:, fragment_library: 'shared')
-
- sign_in_and_lock(entry, user)
- post_extraction(entry:, chapter:)
-
- expect(response.status).to eq(403)
- expect(Chapter.all_for_revision(library.draft)).to be_empty
- end
-
- it 'responds with not found for chapter of other entry' do
- user = create(:user)
- account = create(:account, with_editor: user)
- entry = create(:entry, type_name: 'scrolled', account:, with_feature: 'fragments')
- other_entry = create(:entry, type_name: 'scrolled', account:, with_feature: 'fragments')
- chapter = create(:scrolled_chapter, revision: other_entry.draft)
-
- sign_in_and_lock(entry, user)
- post_extraction(entry:, chapter:)
-
- expect(response.status).to eq(404)
- end
-
- it 'responds with not found if fragments feature is disabled' do
- user = create(:user)
- account = create(:account, with_editor: user)
- entry = create(:entry, type_name: 'scrolled', account:)
- chapter = create(:scrolled_chapter, revision: entry.draft)
-
- sign_in_and_lock(entry, user)
- post_extraction(entry:, chapter:)
-
- expect(response.status).to eq(404)
- expect(find_library(account)).to be_nil
- end
- end
-
- def find_library(account)
- Pageflow::Entry.find_by(account:, fragment_library: 'shared')
- end
-
- def post_extraction(entry:, chapter:, title: nil)
- post(:create,
- params: {
- entry_type: 'scrolled',
- entry_id: entry,
- chapter_id: chapter,
- title:
- }.compact, format: 'json')
- end
-
- def sign_in_and_lock(entry, user)
- sign_in(user, scope: :user)
- acquire_edit_lock(user, entry)
- end
- end
-end
diff --git a/entry_types/scrolled/spec/controllers/pageflow_scrolled/editor/section_fragment_extractions_controller_spec.rb b/entry_types/scrolled/spec/controllers/pageflow_scrolled/editor/section_fragment_extractions_controller_spec.rb
new file mode 100644
index 0000000000..42dff6f83b
--- /dev/null
+++ b/entry_types/scrolled/spec/controllers/pageflow_scrolled/editor/section_fragment_extractions_controller_spec.rb
@@ -0,0 +1,162 @@
+require 'spec_helper'
+require 'pageflow/editor_controller_test_helper'
+
+module PageflowScrolled
+ RSpec.describe Editor::SectionFragmentExtractionsController, type: :controller do
+ include Pageflow::EditorControllerTestHelper
+
+ routes { PageflowScrolled::Engine.routes }
+
+ describe '#create' do
+ it 'requires authentication' do
+ entry = create(:entry, type_name: 'scrolled')
+ section = create(:section, revision: entry.draft)
+
+ post_extraction(entry:, sections: [section])
+
+ expect(response.status).to eq(401)
+ end
+
+ it 'copies sections into fragment of library' do
+ user = create(:user)
+ account = create(:account, with_editor: user)
+ entry = create(:entry, type_name: 'scrolled', account:, with_feature: 'fragments')
+ section = create(:section, revision: entry.draft, configuration: {'layout' => 'left'})
+
+ sign_in_and_lock(entry, user)
+ post_extraction(entry:, sections: [section], title: 'Intro')
+
+ fragment = Chapter.all_for_revision(find_library(account).draft).first
+ expect(response.status).to eq(201)
+ expect(fragment.configuration).to eq('title' => 'Intro')
+ expect(fragment.sections.map(&:configuration)).to match([include('layout' => 'left')])
+ end
+
+ it 'copies sections in document order' do
+ user = create(:user)
+ account = create(:account, with_editor: user)
+ entry = create(:entry, type_name: 'scrolled', account:, with_feature: 'fragments')
+ first_chapter = create(:scrolled_chapter, revision: entry.draft, position: 0)
+ second_chapter = create(:scrolled_chapter, revision: entry.draft, position: 1)
+ second_section = create(:section, chapter: second_chapter,
+ configuration: {'layout' => 'right'})
+ first_section = create(:section, chapter: first_chapter,
+ configuration: {'layout' => 'left'})
+
+ sign_in_and_lock(entry, user)
+ post_extraction(entry:, sections: [second_section, first_section])
+
+ expect(Section.all_for_revision(find_library(account).draft)
+ .map { |section| section.configuration['layout'] })
+ .to eq(%w[left right])
+ end
+
+ it 'does not let user who may not edit library add fragment' do
+ user = create(:user)
+ account = create(:account, with_previewer: user)
+ entry = create(:entry, type_name: 'scrolled', account:, with_editor: user,
+ with_feature: 'fragments')
+ section = create(:section, revision: entry.draft)
+
+ sign_in_and_lock(entry, user)
+ post_extraction(entry:, sections: [section])
+
+ expect(response.status).to eq(403)
+ expect(find_library(account)).to be_nil
+ end
+
+ it 'lets user with editor role on existing library add fragment' do
+ user = create(:user)
+ account = create(:account, with_previewer: user)
+ entry = create(:entry, type_name: 'scrolled', account:, with_editor: user,
+ with_feature: 'fragments')
+ section = create(:section, revision: entry.draft)
+ library = create(:entry,
+ type_name: 'scrolled',
+ account:,
+ fragment_library: 'shared',
+ with_editor: user)
+
+ sign_in_and_lock(entry, user)
+ post_extraction(entry:, sections: [section])
+
+ expect(response.status).to eq(201)
+ expect(Chapter.all_for_revision(library.draft).count).to eq(1)
+ end
+
+ it 'does not let user who may not edit existing library add fragment' do
+ user = create(:user)
+ account = create(:account, with_previewer: user)
+ entry = create(:entry, type_name: 'scrolled', account:, with_editor: user,
+ with_feature: 'fragments')
+ section = create(:section, revision: entry.draft)
+ library = create(:entry, type_name: 'scrolled', account:, fragment_library: 'shared')
+
+ sign_in_and_lock(entry, user)
+ post_extraction(entry:, sections: [section])
+
+ expect(response.status).to eq(403)
+ expect(Chapter.all_for_revision(library.draft)).to be_empty
+ end
+
+ it 'responds with not found for section of other entry' do
+ user = create(:user)
+ account = create(:account, with_editor: user)
+ entry = create(:entry, type_name: 'scrolled', account:, with_feature: 'fragments')
+ other_entry = create(:entry, type_name: 'scrolled', account:)
+ section = create(:section, revision: entry.draft)
+ other_section = create(:section, revision: other_entry.draft)
+
+ sign_in_and_lock(entry, user)
+ post_extraction(entry:, sections: [section, other_section])
+
+ expect(response.status).to eq(404)
+ expect(find_library(account)).to be_nil
+ end
+
+ it 'responds with not found without sections' do
+ user = create(:user)
+ account = create(:account, with_editor: user)
+ entry = create(:entry, type_name: 'scrolled', account:, with_feature: 'fragments')
+
+ sign_in_and_lock(entry, user)
+ post_extraction(entry:, sections: [])
+
+ expect(response.status).to eq(404)
+ expect(find_library(account)).to be_nil
+ end
+
+ it 'responds with not found if fragments feature is disabled' do
+ user = create(:user)
+ account = create(:account, with_editor: user)
+ entry = create(:entry, type_name: 'scrolled', account:)
+ section = create(:section, revision: entry.draft)
+
+ sign_in_and_lock(entry, user)
+ post_extraction(entry:, sections: [section])
+
+ expect(response.status).to eq(404)
+ expect(find_library(account)).to be_nil
+ end
+ end
+
+ def find_library(account)
+ Pageflow::Entry.find_by(account:, fragment_library: 'shared')
+ end
+
+ def post_extraction(entry:, sections:, title: nil)
+ post(:create,
+ params: {
+ entry_type: 'scrolled',
+ entry_id: entry,
+ section_ids: sections.map(&:id),
+ title:
+ }.compact, format: 'json')
+ end
+
+ def sign_in_and_lock(entry, user)
+ sign_in(user, scope: :user)
+ acquire_edit_lock(user, entry)
+ end
+ end
+end
diff --git a/entry_types/scrolled/spec/controllers/pageflow_scrolled/editor/fragment_insertions_controller_spec.rb b/entry_types/scrolled/spec/controllers/pageflow_scrolled/editor/section_fragment_insertions_controller_spec.rb
similarity index 98%
rename from entry_types/scrolled/spec/controllers/pageflow_scrolled/editor/fragment_insertions_controller_spec.rb
rename to entry_types/scrolled/spec/controllers/pageflow_scrolled/editor/section_fragment_insertions_controller_spec.rb
index 41b179479c..2311054b16 100644
--- a/entry_types/scrolled/spec/controllers/pageflow_scrolled/editor/fragment_insertions_controller_spec.rb
+++ b/entry_types/scrolled/spec/controllers/pageflow_scrolled/editor/section_fragment_insertions_controller_spec.rb
@@ -2,7 +2,7 @@
require 'pageflow/editor_controller_test_helper'
module PageflowScrolled
- RSpec.describe Editor::FragmentInsertionsController, type: :controller do
+ RSpec.describe Editor::SectionFragmentInsertionsController, type: :controller do
render_views
include Pageflow::EditorControllerTestHelper
diff --git a/entry_types/scrolled/spec/models/pageflow_scrolled/fragment_library_spec.rb b/entry_types/scrolled/spec/models/pageflow_scrolled/fragment_library_spec.rb
index d9fd708486..cc572dc411 100644
--- a/entry_types/scrolled/spec/models/pageflow_scrolled/fragment_library_spec.rb
+++ b/entry_types/scrolled/spec/models/pageflow_scrolled/fragment_library_spec.rb
@@ -1,4 +1,5 @@
require 'spec_helper'
+require 'pageflow/shared_contexts/fake_translations'
module PageflowScrolled
RSpec.describe FragmentLibrary do
@@ -79,7 +80,7 @@ module PageflowScrolled
end
end
- describe '#copy_fragment_to' do
+ describe '#copy_sections_to' do
it 'copies sections of fragment chapter to end of chapter' do
library_entry = create(:entry, type_name: 'scrolled', fragment_library: 'shared')
fragment = create(:scrolled_chapter, revision: library_entry.draft)
@@ -89,7 +90,7 @@ module PageflowScrolled
create(:section, chapter:, position: 0)
library = FragmentLibrary.new(Pageflow::DraftEntry.new(library_entry))
- sections = library.copy_fragment_to(fragment_perma_id: fragment.perma_id,
+ sections = library.copy_sections_to(fragment_perma_id: fragment.perma_id,
entry: Pageflow::DraftEntry.new(entry),
chapter:)
@@ -105,7 +106,7 @@ module PageflowScrolled
library = FragmentLibrary.new(Pageflow::DraftEntry.new(library_entry))
expect {
- library.copy_fragment_to(fragment_perma_id: 404,
+ library.copy_sections_to(fragment_perma_id: 404,
entry: Pageflow::DraftEntry.new(entry),
chapter:)
}.to raise_error(ActiveRecord::RecordNotFound)
@@ -207,14 +208,14 @@ module PageflowScrolled
end
end
- describe '#extract_fragment_from' do
+ describe '#extract_sections_from' do
it 'creates library entry on first extraction' do
- account = create(:account, name: 'Acme')
+ account = create(:account)
entry = create(:entry, type_name: 'scrolled', account:)
- chapter = create(:scrolled_chapter, revision: entry.draft)
+ section = create(:section, revision: entry.draft)
library = FragmentLibrary.shared_for_account(account)
- library.extract_fragment_from(entry: Pageflow::DraftEntry.new(entry), chapter:)
+ library.extract_sections_from(entry: Pageflow::DraftEntry.new(entry), sections: [section])
expect(library).to be_persisted
expect(library.entry.to_model).to have_attributes(account:,
@@ -222,20 +223,71 @@ module PageflowScrolled
fragment_library: 'shared')
end
- it 'copies chapter with its sections into library' do
+ it 'copies sections into chapter with title' do
account = create(:account)
entry = create(:entry, type_name: 'scrolled', account:)
- chapter = create(:scrolled_chapter,
- revision: entry.draft,
- configuration: {'title' => 'Intro'})
- create(:section, chapter:)
+ chapter = create(:scrolled_chapter, revision: entry.draft)
+ first_section = create(:section, chapter:, position: 0,
+ configuration: {'layout' => 'left'})
+ second_section = create(:section, chapter:, position: 1,
+ configuration: {'layout' => 'right'})
+ create(:content_element, :heading, section: second_section)
library = FragmentLibrary.shared_for_account(account)
- library.extract_fragment_from(entry: Pageflow::DraftEntry.new(entry), chapter:)
+ library.extract_sections_from(entry: Pageflow::DraftEntry.new(entry),
+ sections: [first_section, second_section],
+ title: ' Intro ')
- expect(library.content.chapters.map(&:configuration))
- .to match([include('title' => 'Intro')])
- expect(library.content.sections.size).to eq(1)
+ expect(library.content.chapters.map(&:configuration)).to eq([{'title' => 'Intro'}])
+ expect(library.content.sections.map(&:configuration))
+ .to match([include('layout' => 'left'), include('layout' => 'right')])
+ expect(library.content.content_elements.map(&:type_name)).to eq(%w[heading])
+ end
+
+ it 'omits title if blank title is given' do
+ account = create(:account)
+ entry = create(:entry, type_name: 'scrolled', account:)
+ section = create(:section, revision: entry.draft)
+ library = FragmentLibrary.shared_for_account(account)
+
+ library.extract_sections_from(entry: Pageflow::DraftEntry.new(entry),
+ sections: [section],
+ title: ' ')
+
+ expect(library.content.chapters.first.configuration).to eq({})
+ end
+
+ describe 'library title' do
+ include_context 'fake translations'
+
+ before do
+ translation(:de, 'pageflow_scrolled.fragment_library.title',
+ 'Bausteine von %{account_name}')
+ translation(:en, 'pageflow_scrolled.fragment_library.title',
+ 'Shared fragments of %{account_name}')
+ end
+
+ it 'includes account name in locale of entry' do
+ account = create(:account, name: 'Acme')
+ entry = create(:entry, type_name: 'scrolled', account:, draft_attributes: {locale: 'de'})
+ section = create(:section, revision: entry.draft)
+ library = FragmentLibrary.shared_for_account(account)
+
+ library.extract_sections_from(entry: Pageflow::DraftEntry.new(entry), sections: [section])
+
+ expect(library.entry.to_model.title).to eq('Bausteine von Acme')
+ end
+
+ it 'falls back to English for other locales' do
+ account = create(:account, name: 'Acme')
+ entry = create(:entry, type_name: 'scrolled', account:, draft_attributes: {locale: 'fr'})
+ section = create(:section, revision: entry.draft)
+ library = FragmentLibrary.shared_for_account(account)
+
+ library.extract_sections_from(entry: Pageflow::DraftEntry.new(entry), sections: [section])
+
+ expect(library.entry.to_model.title).to eq('Shared fragments of Acme')
+ end
end
end
diff --git a/package/documentation.yml b/package/documentation.yml
index d859d55e2b..43dbc2d19e 100644
--- a/package/documentation.yml
+++ b/package/documentation.yml
@@ -60,6 +60,7 @@ toc:
- DropDownButtonView
- DestroyMenuItem
- ListView
+ - MarkButtonView
- ModelThumbnailView
- name: UI - Input Views
diff --git a/package/spec/editor/collections/ListSelection-spec.js b/package/spec/editor/collections/ListSelection-spec.js
index 0d3bd5f450..b7adb09546 100644
--- a/package/spec/editor/collections/ListSelection-spec.js
+++ b/package/spec/editor/collections/ListSelection-spec.js
@@ -47,6 +47,62 @@ describe('ListSelection', () => {
expect(selection.models).toEqual([file]);
});
+ describe('#isActive', () => {
+ it('is false by default', () => {
+ const selection = new ListSelection();
+
+ expect(selection.isActive()).toBe(false);
+ });
+
+ it('is true while items are selected', () => {
+ const selection = new ListSelection([f.file({id: 1})]);
+
+ expect(selection.isActive()).toBe(true);
+ });
+
+ it('is true after start while no items are selected', () => {
+ const selection = new ListSelection();
+
+ selection.start();
+
+ expect(selection.isActive()).toBe(true);
+ });
+
+ it('is false after stop', () => {
+ const selection = new ListSelection([f.file({id: 1})]);
+
+ selection.start();
+ selection.stop();
+
+ expect(selection.isActive()).toBe(false);
+ });
+ });
+
+ describe('#start', () => {
+ it('does not trigger event when already started', () => {
+ const selection = new ListSelection();
+ const listener = jest.fn();
+ selection.start();
+ selection.on('change:selecting', listener);
+
+ selection.start();
+
+ expect(listener).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('#stop', () => {
+ it('does not trigger events when not active', () => {
+ const selection = new ListSelection();
+ const listener = jest.fn();
+ selection.on('all', listener);
+
+ selection.stop();
+
+ expect(listener).not.toHaveBeenCalled();
+ });
+ });
+
describe('#destroyAll', () => {
it('destroys every selected item', () => {
const file = f.file({id: 1});
diff --git a/package/spec/editor/views/MarkButtonView-spec.js b/package/spec/editor/views/MarkButtonView-spec.js
new file mode 100644
index 0000000000..4a61bdffd4
--- /dev/null
+++ b/package/spec/editor/views/MarkButtonView-spec.js
@@ -0,0 +1,110 @@
+import {MarkButtonView, ListSelection} from 'pageflow/editor';
+import Backbone from 'backbone';
+import {renderBackboneView as render} from 'pageflow/testHelpers';
+import {within} from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('MarkButtonView', () => {
+ function setup({selection = new ListSelection(), ...options} = {}) {
+ const model = new Backbone.Model();
+ const view = new MarkButtonView({model, selection, label: 'Mark', ...options});
+
+ render(view);
+
+ return {view, model, selection, ...within(view.el.parentNode)};
+ }
+
+ it('renders unpressed button', () => {
+ const {getByRole} = setup();
+
+ expect(getByRole('button', {name: 'Mark'})).toHaveAttribute('aria-pressed', 'false');
+ });
+
+ it('marks model on click', async () => {
+ const user = userEvent.setup();
+ const {model, selection, getByRole} = setup();
+
+ await user.click(getByRole('button', {name: 'Mark'}));
+
+ expect(selection.models).toEqual([model]);
+ expect(getByRole('button', {name: 'Mark'})).toHaveAttribute('aria-pressed', 'true');
+ expect(getByRole('button', {name: 'Mark'})).toHaveClass('marked');
+ });
+
+ it('unmarks marked model on click', async () => {
+ const user = userEvent.setup();
+ const {model, selection, getByRole} = setup();
+ selection.add(model);
+
+ await user.click(getByRole('button', {name: 'Mark'}));
+
+ expect(selection.length).toBe(0);
+ expect(getByRole('button', {name: 'Mark'})).not.toHaveClass('marked');
+ });
+
+ it('triggers toggle event after selection changed', async () => {
+ const user = userEvent.setup();
+ const {view, model, selection, getByRole} = setup();
+ const listener = jest.fn(() => expect(selection.includes(model)).toBe(true));
+ view.on('toggle', listener);
+
+ await user.click(getByRole('button', {name: 'Mark'}));
+
+ expect(listener).toHaveBeenCalled();
+ });
+
+ it('does not let click reach parent elements', async () => {
+ const user = userEvent.setup();
+ const {view, getByRole} = setup();
+ const listener = jest.fn();
+ view.el.parentNode.addEventListener('click', listener);
+
+ await user.click(getByRole('button', {name: 'Mark'}));
+
+ expect(listener).not.toHaveBeenCalled();
+ });
+
+ it('indicates marking while other models are marked', () => {
+ const {getByRole} = setup({selection: new ListSelection([new Backbone.Model()])});
+
+ expect(getByRole('button', {name: 'Mark'})).toHaveClass('marking');
+ });
+
+ it('indicates marking while selection is active', () => {
+ const {selection, getByRole} = setup();
+
+ selection.start();
+
+ expect(getByRole('button', {name: 'Mark'})).toHaveClass('marking');
+ });
+
+ it('does not indicate marking by default', () => {
+ const {getByRole} = setup();
+
+ expect(getByRole('button', {name: 'Mark'})).not.toHaveClass('marking');
+ });
+
+ it('updates marked state when selection is reset', () => {
+ const {model, selection, getByRole} = setup();
+ selection.add(model);
+
+ selection.reset();
+
+ expect(getByRole('button', {name: 'Mark'})).not.toHaveClass('marked');
+ });
+
+ it('uses start marking label while selection is not active', () => {
+ const {getByRole} = setup({startMarkingLabel: 'Start'});
+
+ expect(getByRole('button', {name: 'Start'})).toHaveAttribute('title', 'Start');
+ });
+
+ it('uses label while selection is active', () => {
+ const {selection, getByRole} = setup({startMarkingLabel: 'Start'});
+
+ selection.start();
+
+ expect(getByRole('button', {name: 'Mark'})).toHaveAttribute('title', 'Mark');
+ });
+});
diff --git a/package/spec/ui/views/TabsView-spec.js b/package/spec/ui/views/TabsView-spec.js
index a4c89d35ee..19c23c78e0 100644
--- a/package/spec/ui/views/TabsView-spec.js
+++ b/package/spec/ui/views/TabsView-spec.js
@@ -117,6 +117,55 @@ describe('TabsView', () => {
});
});
+ describe('change event', () => {
+ useFakeTranslations({
+ 'tabs.one': 'Tab one',
+ 'tabs.two': 'Tab two'
+ });
+
+ function renderTabs() {
+ var tabsView = new TabsView({i18n: 'tabs'});
+
+ tabsView.tab('one', function() { return new Backbone.View(); });
+ tabsView.tab('two', function() { return new Backbone.View(); });
+
+ var listener = jest.fn();
+ tabsView.on('change', listener);
+
+ return {tabsView, listener, ...renderBackboneView(tabsView)};
+ }
+
+ it('is triggered with name of tab when other tab is selected', () => {
+ var {listener, getByRole} = renderTabs();
+
+ fireEvent.click(getByRole('tab', {name: 'Tab two'}));
+
+ expect(listener).toHaveBeenCalledWith('two');
+ });
+
+ it('is not triggered for default tab', () => {
+ var {listener} = renderTabs();
+
+ expect(listener).not.toHaveBeenCalled();
+ });
+
+ it('is not triggered when current tab is selected again', () => {
+ var {listener, getByRole} = renderTabs();
+
+ fireEvent.click(getByRole('tab', {name: 'Tab one'}));
+
+ expect(listener).not.toHaveBeenCalled();
+ });
+
+ it('is not triggered when tab is refreshed', () => {
+ var {tabsView, listener} = renderTabs();
+
+ tabsView.refresh();
+
+ expect(listener).not.toHaveBeenCalled();
+ });
+ });
+
describe('accessibility', () => {
useFakeTranslations({
'tabs.one': 'Tab one',
diff --git a/package/src/editor/collections/ListSelection.js b/package/src/editor/collections/ListSelection.js
index 6434e6cf09..854b0ec703 100644
--- a/package/src/editor/collections/ListSelection.js
+++ b/package/src/editor/collections/ListSelection.js
@@ -9,11 +9,19 @@ export const ListSelection = Backbone.Collection.extend({
// even while nothing is checked. Unchecking the last item would
// otherwise pull the check boxes away from under the pointer.
start: function() {
+ if (this.selecting) {
+ return;
+ }
+
this.selecting = true;
this.trigger('change:selecting');
},
stop: function() {
+ if (!this.isActive()) {
+ return;
+ }
+
this.selecting = false;
this.reset();
this.trigger('change:selecting');
@@ -23,6 +31,10 @@ export const ListSelection = Backbone.Collection.extend({
return !!this.selecting;
},
+ isActive: function() {
+ return this.isSelecting() || !!this.length;
+ },
+
toggle: function(item) {
if (this.includes(item)) {
this.remove(item);
diff --git a/package/src/editor/index.js b/package/src/editor/index.js
index 5c0f2b56c7..d6b8cf04cf 100644
--- a/package/src/editor/index.js
+++ b/package/src/editor/index.js
@@ -101,6 +101,7 @@ export * from './views/UploaderView';
export * from './views/BackgroundPositioningView';
export * from './views/BackgroundPositioningImageView';
export * from './views/ExplorerFileItemView';
+export * from './views/MarkButtonView';
export * from './views/ExplorerFileDetailsView';
export * from './views/ExplorerFilesView';
export * from './views/ExplorerFolderItemView';
diff --git a/package/src/editor/templates/explorerFileItem.jst b/package/src/editor/templates/explorerFileItem.jst
index 160b6f6ec3..fd5daa5d59 100644
--- a/package/src/editor/templates/explorerFileItem.jst
+++ b/package/src/editor/templates/explorerFileItem.jst
@@ -1,5 +1,3 @@
-
-
diff --git a/package/src/editor/views/ExplorerFileItemView.js b/package/src/editor/views/ExplorerFileItemView.js
index de2ab78c98..ec612405de 100644
--- a/package/src/editor/views/ExplorerFileItemView.js
+++ b/package/src/editor/views/ExplorerFileItemView.js
@@ -2,6 +2,7 @@ import I18n from 'i18n-js';
import Marionette from 'backbone.marionette';
import {FileThumbnailView} from './FileThumbnailView';
+import {MarkButtonView} from './MarkButtonView';
import {loadable} from './mixins/loadable';
import {selectableView} from './mixins/selectableView';
@@ -17,21 +18,10 @@ export const ExplorerFileItemView = Marionette.ItemView.extend({
ui: {
fileName: '.file_name',
- thumbnail: '.file_thumbnail',
- markButton: '.explorer_file_item-mark'
+ thumbnail: '.file_thumbnail'
},
events: {
- 'click .explorer_file_item-mark': function() {
- this.options.markedFiles.toggle(this.model);
-
- if (this.options.markedFiles.includes(this.model)) {
- this.select();
- }
-
- return false;
- },
-
'click': function() {
if (!this.isDisabled()) {
this.select();
@@ -53,14 +43,31 @@ export const ExplorerFileItemView = Marionette.ItemView.extend({
this.update();
this.updateMarked();
- if (this.isDisabled() || !this.options.markedFiles) {
- this.ui.markButton.remove();
- }
-
this.subview(new FileThumbnailView({
el: this.ui.thumbnail,
model: this.model
}));
+
+ if (!this.isDisabled() && this.options.markedFiles) {
+ this.appendMarkButton();
+ }
+ },
+
+ appendMarkButton: function() {
+ var markButton = new MarkButtonView({
+ model: this.model,
+ selection: this.options.markedFiles,
+ label: I18n.t('pageflow.editor.views.explorer_file_item_view.mark'),
+ startMarkingLabel: I18n.t('pageflow.editor.views.explorer_file_item_view.start_marking')
+ });
+
+ this.appendSubview(markButton);
+
+ this.listenTo(markButton, 'toggle', function() {
+ if (this.options.markedFiles.includes(this.model)) {
+ this.select();
+ }
+ });
},
update: function() {
@@ -77,19 +84,8 @@ export const ExplorerFileItemView = Marionette.ItemView.extend({
},
updateMarked: function() {
- var marked = !!this.options.markedFiles?.includes(this.model);
-
this.$el.toggleClass('marking', this.isMarking());
- this.$el.toggleClass('marked', marked);
- var label = I18n.t(this.isMarking() ?
- 'pageflow.editor.views.explorer_file_item_view.mark' :
- 'pageflow.editor.views.explorer_file_item_view.start_marking');
-
- this.ui.markButton.attr({
- 'aria-pressed': marked ? 'true' : 'false',
- 'aria-label': label,
- title: label
- });
+ this.$el.toggleClass('marked', !!this.options.markedFiles?.includes(this.model));
},
isDisabled: function() {
diff --git a/package/src/editor/views/MarkButtonView.js b/package/src/editor/views/MarkButtonView.js
new file mode 100644
index 0000000000..738307a195
--- /dev/null
+++ b/package/src/editor/views/MarkButtonView.js
@@ -0,0 +1,68 @@
+import Marionette from 'backbone.marionette';
+
+/**
+ * Round check button that adds a model to or removes it from a
+ * {@link ListSelection}.
+ *
+ * Has class `marking` while the selection is active and
+ * class `marked` while the model is included. Triggers a `toggle`
+ * event after the selection changed.
+ *
+ * @param {Object} options
+ *
+ * @param {Backbone.Model} options.model
+ *
+ * @param {ListSelection} options.selection
+ *
+ * @param {String} options.label
+ * Accessible label and title.
+ *
+ * @param {String} [options.startMarkingLabel]
+ * Label to use instead while the selection is not active.
+ *
+ * @class
+ */
+export const MarkButtonView = Marionette.ItemView.extend({
+ tagName: 'button',
+ className: 'mark_button',
+ template: () => '',
+
+ attributes: {
+ type: 'button'
+ },
+
+ events: {
+ 'click': function() {
+ this.options.selection.toggle(this.model);
+ this.trigger('toggle');
+
+ return false;
+ }
+ },
+
+ initialize: function() {
+ this.listenTo(this.options.selection, 'add remove reset change:selecting', this.update);
+ },
+
+ onRender: function() {
+ this.update();
+ },
+
+ update: function() {
+ var selection = this.options.selection;
+ var marking = selection.isActive();
+ var marked = selection.includes(this.model);
+ var label = marking ?
+ this.options.label :
+ this.options.startMarkingLabel || this.options.label;
+
+ this.$el.toggleClass('marking', marking);
+ this.$el.toggleClass('marked', marked);
+
+ this.$el.attr({
+ 'aria-pressed': marked ? 'true' : 'false',
+ 'aria-label': label,
+ title: label
+ });
+ }
+});
diff --git a/package/src/ui/views/TabsView.js b/package/src/ui/views/TabsView.js
index 62ea093c9f..bf77e5c0a0 100644
--- a/package/src/ui/views/TabsView.js
+++ b/package/src/ui/views/TabsView.js
@@ -27,6 +27,9 @@ import template from '../templates/tabsView.jst';
* @param {string} [options.i18n]
* Legacy alias for `fallbackTranslationKeyPrefix`.
*
+ * Triggers a `change` event with the name of the new tab when the
+ * user or a call to `changeTab` switches to a different tab.
+ *
* @class
*/
export const TabsView = Marionette.Layout.extend(/* @lends TabView.prototype */{
@@ -106,7 +109,9 @@ export const TabsView = Marionette.Layout.extend(/* @lends TabView.prototype */{
return;
}
- if (this.currentTabName !== name || options.refresh) {
+ var previousTabName = this.currentTabName;
+
+ if (previousTabName !== name || options.refresh) {
this.container.show(this.tabFactoryFns[name]());
}
@@ -114,6 +119,10 @@ export const TabsView = Marionette.Layout.extend(/* @lends TabView.prototype */{
this._updateActiveTab(name, options.focusTab);
this._updateActivePanel(name);
+
+ if (previousTabName && previousTabName !== name) {
+ this.trigger('change', name);
+ }
},
defaultTab: function() {