diff --git a/entry_types/scrolled/app/controllers/pageflow_scrolled/entries_controller.rb b/entry_types/scrolled/app/controllers/pageflow_scrolled/entries_controller.rb index 7dbbb58272..435b433c1f 100644 --- a/entry_types/scrolled/app/controllers/pageflow_scrolled/entries_controller.rb +++ b/entry_types/scrolled/app/controllers/pageflow_scrolled/entries_controller.rb @@ -15,19 +15,30 @@ class EntriesController < ActionController::Base def show entry = get_published_entry_from_env + mode = get_entry_mode_from_env I18n.locale = entry.locale render( locals: { entry:, - entry_mode: get_entry_mode_from_env, - seed_options: { - embed: get_embed_from_env, - origin_url: request.original_url - } + entry_mode: mode, + seed_options: seed_options(entry, mode) } ) end + + private + + def seed_options(entry, mode) + options = { + embed: get_embed_from_env, + origin_url: request.original_url + } + + options[:load_commenting] = true if mode == :preview && entry.feature_state('commenting') + + options + end end end diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/seed_html_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/seed_html_helper.rb index 6ae0553242..862de2d1b1 100644 --- a/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/seed_html_helper.rb +++ b/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/seed_html_helper.rb @@ -25,7 +25,7 @@ def scrolled_editor_iframe_seed_html_script_tag(entry) skip_collections: true, include_unused_additional_seed_data: true, include_theme_translations: true, - translations: {include_inline_editing: true} + load_inline_editing: true } }) diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/i18n_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/i18n_helper.rb index a3a69de8cb..cee9e91965 100644 --- a/entry_types/scrolled/app/helpers/pageflow_scrolled/i18n_helper.rb +++ b/entry_types/scrolled/app/helpers/pageflow_scrolled/i18n_helper.rb @@ -1,16 +1,28 @@ module PageflowScrolled # @api private module I18nHelper - def scrolled_i18n_translations(entry, include_inline_editing: false) + def scrolled_i18n_translations(entry, + include_inline_editing: false, + include_review: false) result = scrolled_i18n_public_translations(entry) - return result unless include_inline_editing + if include_inline_editing + result = result.deep_merge(I18n.locale.to_s => { + pageflow_scrolled: { + inline_editing: I18n.t('pageflow_scrolled.inline_editing') + } + }) + end - result.deep_merge(I18n.locale.to_s => { - pageflow_scrolled: { - inline_editing: I18n.t('pageflow_scrolled.inline_editing') - } - }) + if include_review + result = result.deep_merge(I18n.locale.to_s => { + pageflow_scrolled: { + review: I18n.t('pageflow_scrolled.review') + } + }) + end + + result end private diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb index be0cdc6ebe..f16f3d6a58 100644 --- a/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb +++ b/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb @@ -8,16 +8,17 @@ def scrolled_frontend_javascript_packs_tag(entry, options) ) end - def scrolled_frontend_stylesheet_packs_tag(entry, options) + def scrolled_frontend_stylesheet_packs_tag(entry, **) stylesheet_pack_tag( - *scrolled_frontend_stylesheet_packs(entry, **options), + *scrolled_frontend_stylesheet_packs(entry, **), media: 'all' ) end - def scrolled_frontend_stylesheet_packs(entry, entry_mode:) + def scrolled_frontend_stylesheet_packs(entry, entry_mode:, seed_options: {}) packs = scrolled_frontend_packs(entry, entry_mode: entry_mode) - packs += ['pageflow-scrolled-frontend-inlineEditing'] if entry_mode == :editor + packs += ['pageflow-scrolled-frontend-inlineEditing'] if seed_options[:load_inline_editing] + packs += ['pageflow-scrolled-frontend-commenting'] if seed_options[:load_commenting] packs end diff --git a/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb b/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb index c00a751438..b6d3d443d3 100644 --- a/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb +++ b/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb @@ -16,7 +16,7 @@ <%= scrolled_favicons_for_entry(entry, entry_mode: entry_mode) %> <%= javascript_include_tag 'pageflow_scrolled/legacy' %> - <%= scrolled_frontend_stylesheet_packs_tag(entry, entry_mode: entry_mode) %> + <%= scrolled_frontend_stylesheet_packs_tag(entry, entry_mode: entry_mode, seed_options: seed_options) %> <%= scrolled_theme_properties_style_tag(entry.theme) %> <%= scrolled_theme_stylesheet_pack_tags(entry.theme) %> @@ -35,7 +35,7 @@ <% end %> - <% ssr_html = local_assigns[:skip_ssr] ? '' : render_scrolled_entry(entry, local_assigns[:seed_options] || {}) %> + <% ssr_html = local_assigns[:skip_ssr] ? '' : render_scrolled_entry(entry, seed_options) %> @@ -53,7 +53,7 @@ <%= scrolled_webpack_public_path_script_tag %> <%= scrolled_frontend_javascript_packs_tag(entry, entry_mode: entry_mode) %> - <%= scrolled_entry_json_seed_script_tag(entry, local_assigns[:seed_options] || {}) %> + <%= scrolled_entry_json_seed_script_tag(entry, seed_options) %> <% end %> <% end %> diff --git a/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder b/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder index 8e3b4a9191..eda2b618df 100644 --- a/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder +++ b/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder @@ -53,14 +53,19 @@ json.config do json.cut_off entry.cutoff_mode_enabled_for?(request) json.embed options.fetch(:embed, false) json.origin_url options[:origin_url] if options[:origin_url] + json.load_inline_editing true if options[:load_inline_editing] + json.load_commenting true if options[:load_commenting] end unless options[:skip_i18n] json.i18n do json.default_locale I18n.default_locale json.locale I18n.locale - json.translations scrolled_i18n_translations(entry, - **options.fetch(:translations, {})) + json.translations scrolled_i18n_translations( + entry, + include_inline_editing: !!options[:load_inline_editing], + include_review: !!options[:load_commenting] + ) end end diff --git a/entry_types/scrolled/config/locales/de.yml b/entry_types/scrolled/config/locales/de.yml index 10ad075a44..a26803be37 100644 --- a/entry_types/scrolled/config/locales/de.yml +++ b/entry_types/scrolled/config/locales/de.yml @@ -1,5 +1,7 @@ de: pageflow: + commenting: + feature_name: Kommentare datawrapper_chart_embed_opt_in: feature_name: Opt-in für Datawrapper Embeds image_srcset: @@ -1909,3 +1911,5 @@ de: content_element_margin_top: Oberer Außenabstand content_element_margin_bottom: Unterer Außenabstand expose_motif_area: Motiv freilegen + review: + toolbar_label: Kommentare diff --git a/entry_types/scrolled/config/locales/en.yml b/entry_types/scrolled/config/locales/en.yml index 8bbc8d3281..af89606a43 100644 --- a/entry_types/scrolled/config/locales/en.yml +++ b/entry_types/scrolled/config/locales/en.yml @@ -1,5 +1,7 @@ en: pageflow: + commenting: + feature_name: Comments datawrapper_chart_embed_opt_in: feature_name: Opt-in for Datawrapper embeds image_srcset: @@ -1738,3 +1740,5 @@ en: content_element_margin_top: Top margin content_element_margin_bottom: Bottom margin expose_motif_area: Expose motif + review: + toolbar_label: Comments diff --git a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb index a63ec1e719..c617e58935 100644 --- a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb +++ b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb @@ -213,6 +213,7 @@ def configure(config) c.features.register('custom_palette_colors') c.features.register('decoration_effects') c.features.register('backdrop_size') + c.features.register('commenting') c.features.register('image_srcset') c.features.enable_by_default('image_srcset') diff --git a/entry_types/scrolled/package/config/webpack.js b/entry_types/scrolled/package/config/webpack.js index 644afcab7b..48686995a9 100644 --- a/entry_types/scrolled/package/config/webpack.js +++ b/entry_types/scrolled/package/config/webpack.js @@ -81,6 +81,9 @@ module.exports = { }, 'pageflow-scrolled-frontend-inlineEditing': { import: ['pageflow-scrolled/frontend/inlineEditing.css'] + }, + 'pageflow-scrolled-frontend-commenting': { + import: ['pageflow-scrolled/frontend/commenting.css'] } } }; diff --git a/entry_types/scrolled/package/src/frontend/commenting/EntryDecorator.js b/entry_types/scrolled/package/src/frontend/commenting/EntryDecorator.js new file mode 100644 index 0000000000..11151542d5 --- /dev/null +++ b/entry_types/scrolled/package/src/frontend/commenting/EntryDecorator.js @@ -0,0 +1,12 @@ +import React from 'react'; + +import {FloatingToolbar} from './FloatingToolbar'; + +export function EntryDecorator(props) { + return ( + <> + {props.children} + + + ); +} diff --git a/entry_types/scrolled/package/src/frontend/commenting/FloatingToolbar.js b/entry_types/scrolled/package/src/frontend/commenting/FloatingToolbar.js new file mode 100644 index 0000000000..759e7cce40 --- /dev/null +++ b/entry_types/scrolled/package/src/frontend/commenting/FloatingToolbar.js @@ -0,0 +1,14 @@ +import React from 'react'; + +import {useI18n} from '../i18n'; +import styles from './FloatingToolbar.module.css'; + +export function FloatingToolbar() { + const {t} = useI18n({locale: 'ui'}); + + return ( +
+ {t('pageflow_scrolled.review.toolbar_label')} +
+ ); +} diff --git a/entry_types/scrolled/package/src/frontend/commenting/FloatingToolbar.module.css b/entry_types/scrolled/package/src/frontend/commenting/FloatingToolbar.module.css new file mode 100644 index 0000000000..acb82270e5 --- /dev/null +++ b/entry_types/scrolled/package/src/frontend/commenting/FloatingToolbar.module.css @@ -0,0 +1,14 @@ +.toolbar { + position: fixed; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + z-index: 100; + padding: 8px 16px; + background: #ffd24d; + color: #795f0f; + border-radius: 20px; + font-family: sans-serif; + font-size: 14px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} diff --git a/entry_types/scrolled/package/src/frontend/commenting/index.js b/entry_types/scrolled/package/src/frontend/commenting/index.js new file mode 100644 index 0000000000..c10d62008b --- /dev/null +++ b/entry_types/scrolled/package/src/frontend/commenting/index.js @@ -0,0 +1,10 @@ +import {provideExtensions} from '../extensions'; +import {EntryDecorator} from './EntryDecorator'; + +export function loadCommentingComponents() { + provideExtensions({ + decorators: { + Entry: EntryDecorator + } + }); +} diff --git a/entry_types/scrolled/package/src/frontend/index.js b/entry_types/scrolled/package/src/frontend/index.js index 74c7c1a4b6..889b80489a 100644 --- a/entry_types/scrolled/package/src/frontend/index.js +++ b/entry_types/scrolled/package/src/frontend/index.js @@ -157,7 +157,7 @@ global.pageflowScrolledRender = async function(seed) { await browser.detectFeatures(); await loadDashUnlessHlsSupported(seed); - if (editMode) { + if (seed.config.loadInlineEditing) { await loadInlineEditingComponents(); } else { @@ -169,6 +169,12 @@ global.pageflowScrolledRender = async function(seed) { } render(seed); + + if (seed.config.loadCommenting) { + import(/* webpackPreload: true */ './commenting').then( + ({loadCommentingComponents}) => loadCommentingComponents() + ); + } } global.pageflowScrolledRegisterUpdateSeedHandler = function() { diff --git a/entry_types/scrolled/spec/controllers/pageflow_scrolled/entries_controller_spec.rb b/entry_types/scrolled/spec/controllers/pageflow_scrolled/entries_controller_spec.rb index 0174d34408..24c401a925 100644 --- a/entry_types/scrolled/spec/controllers/pageflow_scrolled/entries_controller_spec.rb +++ b/entry_types/scrolled/spec/controllers/pageflow_scrolled/entries_controller_spec.rb @@ -188,6 +188,66 @@ module PageflowScrolled expect(response.body).to include('"originUrl":"http://test.host/test/entry"') end + + it 'includes loadCommenting flag in preview mode when feature is enabled' do + entry = create(:entry, :published, type_name: 'scrolled', + with_feature: 'commenting') + + get_with_entry_env(:show, entry:, mode: :preview) + + expect(response.body).to include('"loadCommenting":true') + end + + it 'does not include loadCommenting flag in preview mode when feature is disabled' do + entry = create(:entry, :published, type_name: 'scrolled') + + get_with_entry_env(:show, entry:, mode: :preview) + + expect(response.body).not_to include('"loadCommenting"') + end + + it 'does not include loadCommenting flag in published mode' do + entry = create(:entry, :published, type_name: 'scrolled', + with_feature: 'commenting') + + get_with_entry_env(:show, entry:) + + expect(response.body).not_to include('"loadCommenting"') + end + + it 'does not include inline editing stylesheet pack' do + entry = create(:entry, :published, type_name: 'scrolled') + + get_with_entry_env(:show, entry:) + + expect(response.body).not_to have_selector( + 'link[href*="pageflow-scrolled-frontend-inlineEditing"]', + visible: false + ) + end + + it 'includes commenting stylesheet pack in preview mode when feature is enabled' do + entry = create(:entry, :published, type_name: 'scrolled', + with_feature: 'commenting') + + get_with_entry_env(:show, entry:, mode: :preview) + + expect(response.body).to have_selector( + 'link[href*="pageflow-scrolled-frontend-commenting"]', + visible: false + ) + end + + it 'does not include commenting stylesheet pack when feature is disabled' do + entry = create(:entry, :published, type_name: 'scrolled') + + get_with_entry_env(:show, entry:, mode: :preview) + + expect(response.body).not_to have_selector( + 'link[href*="pageflow-scrolled-frontend-commenting"]', + visible: false + ) + end end end end diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/editor/seed_html_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/editor/seed_html_helper_spec.rb index 3fd827a1fc..a9316d05d2 100644 --- a/entry_types/scrolled/spec/helpers/pageflow_scrolled/editor/seed_html_helper_spec.rb +++ b/entry_types/scrolled/spec/helpers/pageflow_scrolled/editor/seed_html_helper_spec.rb @@ -155,6 +155,18 @@ module Editor visible: false) end + it 'includes inline editing stylesheet pack' do + entry = create(:published_entry, type_name: 'scrolled') + + result = helper.scrolled_editor_iframe_seed_html_script_tag(entry) + + expect(result).to have_selector( + 'script', + text: 'pageflow-scrolled-frontend-inlineEditing', + visible: false + ) + end + it 'renders additional seed data of unused content elements' do pageflow_configure do |config| config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_conig| diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb index 99b645a2aa..b51fb1e345 100644 --- a/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb +++ b/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb @@ -1130,11 +1130,11 @@ def render(helper, entry, options = {}) }) end - it 'supports including scrolled inline editing translations' do + it 'includes inline editing translations when load_inline_editing is set' do translation(I18n.locale, 'pageflow_scrolled.inline_editing.some', 'text') entry = create(:published_entry, type_name: 'scrolled') - result = render(helper, entry, translations: {include_inline_editing: true}) + result = render(helper, entry, load_inline_editing: true) expect(result).to include_json(i18n: { translations: { @@ -1149,6 +1149,23 @@ def render(helper, entry, options = {}) }) end + it 'includes review translations when load_commenting is set' do + translation(I18n.locale, 'pageflow_scrolled.review.some', 'text') + entry = create(:published_entry, type_name: 'scrolled') + + result = render(helper, entry, load_commenting: true) + + expect(result).to include_json(i18n: { + translations: { + I18n.locale => { + pageflow_scrolled: { + review: {some: 'text'} + } + } + } + }) + end + it 'includes locale and default locale' do entry = create(:published_entry, type_name: 'scrolled') @@ -1169,6 +1186,32 @@ def render(helper, entry, options = {}) end end + context 'feature loading flags' do + it 'includes loadInlineEditing in config when load_inline_editing option is set' do + entry = create(:published_entry, type_name: 'scrolled') + + result = render(helper, entry, load_inline_editing: true) + + expect(result).to include_json(config: {loadInlineEditing: true}) + end + + it 'includes loadCommenting in config when load_commenting option is set' do + entry = create(:published_entry, type_name: 'scrolled') + + result = render(helper, entry, load_commenting: true) + + expect(result).to include_json(config: {loadCommenting: true}) + end + + it 'does not include loadCommenting in config by default' do + entry = create(:published_entry, type_name: 'scrolled') + + result = render(helper, entry) + + expect(JSON.parse(result)['config']).not_to have_key('loadCommenting') + end + end + it 'renders additional frontend seed data' do pageflow_configure do |config| config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_config| diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/i18n_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/i18n_helper_spec.rb index 0e955be9a9..09eb13e77e 100644 --- a/entry_types/scrolled/spec/helpers/pageflow_scrolled/i18n_helper_spec.rb +++ b/entry_types/scrolled/spec/helpers/pageflow_scrolled/i18n_helper_spec.rb @@ -111,6 +111,32 @@ module PageflowScrolled } }) end + + it 'supports including review translations in current locale' do + translation(I18n.locale, 'pageflow_scrolled.review.some', 'text') + entry = create(:published_entry, revision_attributes: {locale: 'fr'}) + + result = helper.scrolled_i18n_translations(entry, include_review: true) + + expect(result).to include_json(I18n.locale => { + pageflow_scrolled: { + review: {some: 'text'} + } + }) + end + + it 'does not include review translations by default' do + translation(I18n.locale, 'pageflow_scrolled.review.some', 'text') + entry = create(:published_entry, revision_attributes: {locale: I18n.locale}) + + result = helper.scrolled_i18n_translations(entry) + + expect(result).not_to include_json(I18n.locale => { + pageflow_scrolled: { + review: {some: 'text'} + } + }) + end end end end diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/packs_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/packs_helper_spec.rb index 0f52cfb723..c6d36da6bb 100644 --- a/entry_types/scrolled/spec/helpers/pageflow_scrolled/packs_helper_spec.rb +++ b/entry_types/scrolled/spec/helpers/pageflow_scrolled/packs_helper_spec.rb @@ -248,25 +248,42 @@ module PageflowScrolled entry = create(:published_entry, type_name: 'scrolled') result = helper.scrolled_frontend_stylesheet_packs(entry, - entry_mode: :published) + entry_mode: :published, + seed_options: {}) expect(result).to include('pageflow-scrolled-frontend') end - it 'includes inline editing stylesheet pack only in editor mode' do + it 'includes inline editing stylesheet pack when load_inline_editing seed option is set' do entry = create(:published_entry, type_name: 'scrolled') expect( - helper.scrolled_frontend_stylesheet_packs(entry, entry_mode: :editor) + helper.scrolled_frontend_stylesheet_packs(entry, + entry_mode: :editor, + seed_options: {load_inline_editing: true}) ).to include('pageflow-scrolled-frontend-inlineEditing') expect( - helper.scrolled_frontend_stylesheet_packs(entry, entry_mode: :preview) + helper.scrolled_frontend_stylesheet_packs(entry, + entry_mode: :editor, + seed_options: {}) ).not_to include('pageflow-scrolled-frontend-inlineEditing') + end + + it 'includes commenting stylesheet pack when load_commenting seed option is set' do + entry = create(:published_entry, type_name: 'scrolled') expect( - helper.scrolled_frontend_stylesheet_packs(entry, entry_mode: :published) - ).not_to include('pageflow-scrolled-frontend-inlineEditing') + helper.scrolled_frontend_stylesheet_packs(entry, + entry_mode: :preview, + seed_options: {load_commenting: true}) + ).to include('pageflow-scrolled-frontend-commenting') + + expect( + helper.scrolled_frontend_stylesheet_packs(entry, + entry_mode: :preview, + seed_options: {}) + ).not_to include('pageflow-scrolled-frontend-commenting') end end diff --git a/rollup.config.js b/rollup.config.js index 8ffc0ef5f7..228a24b736 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -276,7 +276,8 @@ const pageflowScrolled = [ plugins: plugins({ extractCss: true, splitCss: { - '**/inlineEditing/**': pageflowScrolledPackageRoot + '/frontend/inlineEditing.css' + '**/inlineEditing/**': pageflowScrolledPackageRoot + '/frontend/inlineEditing.css', + '**/commenting/**': pageflowScrolledPackageRoot + '/frontend/commenting.css' } }), ...ignoreJSXWarning