From 4c54f3afee6457bd9e35864e559b5d8bf5d4ed86 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Mon, 7 Oct 2024 17:07:41 +0200 Subject: [PATCH 1/4] Improve hotspot area phone preview toggling Do not toggle back to previous emulation mode when leaving edit area view. Keep preview stable when returning to area list or selecting sibling content element. Restore selected area to help Firefox that loses track of scroller position when preview dimensions change. REDMINE-20673 --- .../hotspots/editor/SidebarEditAreaView.js | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/editor/SidebarEditAreaView.js b/entry_types/scrolled/package/src/contentElements/hotspots/editor/SidebarEditAreaView.js index aa1e316bf..25ed9611b 100644 --- a/entry_types/scrolled/package/src/contentElements/hotspots/editor/SidebarEditAreaView.js +++ b/entry_types/scrolled/package/src/contentElements/hotspots/editor/SidebarEditAreaView.js @@ -40,13 +40,22 @@ export const SidebarEditAreaView = Marionette.Layout.extend({ const portraitFile = options.contentElement.configuration.getImageFile('portraitImage'); const panZoomEnabled = options.contentElement.configuration.get('enablePanZoom') !== 'never'; + const preserveActiveArea = () => setTimeout( + () => options.contentElement.postCommand({ + type: 'SET_ACTIVE_AREA', + index: options.collection.indexOf(this.model) + }), + 200 + ); + if (file && portraitFile) { this.previousEmulationMode = options.entry.get('emulation_mode') || 'desktop'; } configurationEditor.tab('area', function() { - if (file && portraitFile) { + if (file && portraitFile && options.entry.has('emulation_mode')) { options.entry.unset('emulation_mode'); + preserveActiveArea(); } this.input('area', AreaInputView, { @@ -98,8 +107,9 @@ export const SidebarEditAreaView = Marionette.Layout.extend({ if (portraitFile) { configurationEditor.tab('portrait', function() { - if (file && portraitFile) { + if (file && portraitFile && !options.entry.has('emulation_mode')) { options.entry.set('emulation_mode', 'phone'); + preserveActiveArea(); } this.input('portraitArea', AreaInputView, { @@ -141,15 +151,6 @@ export const SidebarEditAreaView = Marionette.Layout.extend({ this.formContainer.show(configurationEditor); }, - onClose() { - if (this.previousEmulationMode === 'phone') { - this.options.entry.set('emulation_mode', 'phone'); - } - else if (this.previousEmulationMode === 'desktop') { - this.options.entry.unset('emulation_mode'); - } - }, - goBack: function() { editor.navigate(`/scrolled/content_elements/${this.options.contentElement.get('id')}`, {trigger: true}); }, From 5bd1289ced31d80f17af4a78510c365a1468f830 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Mon, 7 Oct 2024 17:11:29 +0200 Subject: [PATCH 2/4] Prevent reflow when selecting section Selecting the section after a pan-zoom hotspot had been selected, caused the pan-zoom animation to stay stuck in Firefox instead of reverting to the initial step. The `mousedown` on the section triggers both the selection change and the `onDismiss` callback of the floating tooltip that is supposed to scroll the hotspots scroller back to the first position. When the section is selected, we toggle a `selected` CSS class on the section to display a selection rect made of pseudo elements. Toggling these pseudo elements causes a reflow that makes Firefox drop the `scroll` event that would have been triggered by scrolling the hotspots scroller. The scroll timeline polyfill then has no opportunity to refresh the position of the hotspots image causing it to stay stuck. REDMINE-20673 --- .../inlineEditing/SectionDecorator.module.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/SectionDecorator.module.css b/entry_types/scrolled/package/src/frontend/inlineEditing/SectionDecorator.module.css index b0cf389e2..afd4a2a65 100644 --- a/entry_types/scrolled/package/src/frontend/inlineEditing/SectionDecorator.module.css +++ b/entry_types/scrolled/package/src/frontend/inlineEditing/SectionDecorator.module.css @@ -2,10 +2,7 @@ position: relative; } -.highlighted > section::before, -.lineAbove > section::before, -.lineBelow > section::before, -.selected > section::before { +section::before { content: ""; display: block; position: absolute; @@ -15,6 +12,14 @@ bottom: 6px; z-index: 9; pointer-events: none; + visibility: hidden; +} + +.highlighted > section::before, +.lineAbove > section::before, +.lineBelow > section::before, +.selected > section::before { + visibility: visible; } .highlighted > section::before, From fa12890abe75181a1d1fa747b94e4f13c8d3b329 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Mon, 7 Oct 2024 17:33:54 +0200 Subject: [PATCH 3/4] Extract public translations REDMINE-20673 --- entry_types/scrolled/config/locales/new/hotspots.de.yml | 4 ---- entry_types/scrolled/config/locales/new/hotspots.en.yml | 4 ---- pageflow.gemspec | 2 +- 3 files changed, 1 insertion(+), 9 deletions(-) diff --git a/entry_types/scrolled/config/locales/new/hotspots.de.yml b/entry_types/scrolled/config/locales/new/hotspots.de.yml index 7375759f1..711f1dfe7 100644 --- a/entry_types/scrolled/config/locales/new/hotspots.de.yml +++ b/entry_types/scrolled/config/locales/new/hotspots.de.yml @@ -3,10 +3,6 @@ de: hotspots_content_element: feature_name: Hotspots Inhaltselement pageflow_scrolled: - public: - more: Mehr - next: Nächster - previous: Vorheriger inline_editing: select_link_destination: "Link-Ziel auswählen" change_link_destination: "Link-Ziel ändern" diff --git a/entry_types/scrolled/config/locales/new/hotspots.en.yml b/entry_types/scrolled/config/locales/new/hotspots.en.yml index 6870a3373..16cce3503 100644 --- a/entry_types/scrolled/config/locales/new/hotspots.en.yml +++ b/entry_types/scrolled/config/locales/new/hotspots.en.yml @@ -3,10 +3,6 @@ en: hotspots_content_element: feature_name: Hotspots content element pageflow_scrolled: - public: - more: More - next: Next - previous: Previous inline_editing: select_link_destination: "Select link destination" change_link_destination: "Change link destination" diff --git a/pageflow.gemspec b/pageflow.gemspec index 70bc5f5b4..12d9df1c7 100644 --- a/pageflow.gemspec +++ b/pageflow.gemspec @@ -131,7 +131,7 @@ Gem::Specification.new do |s| s.add_dependency 'http_accept_language', '~> 2.0' # Shared translations - s.add_dependency 'pageflow-public-i18n', '~> 1.26' + s.add_dependency 'pageflow-public-i18n', '~> 1.27' # Password encryption s.add_dependency 'bcrypt', '~> 3.1.7' From 4282e57d94d507d16c4d3722b699bba68da74930 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Tue, 8 Oct 2024 10:28:08 +0200 Subject: [PATCH 4/4] Add inline help texts for hotspots inputs REDMINE-20673 --- .../config/locales/new/hotspots.de.yml | 44 ++++++++++++++++--- .../config/locales/new/hotspots.en.yml | 36 ++++++++++++++- 2 files changed, 72 insertions(+), 8 deletions(-) diff --git a/entry_types/scrolled/config/locales/new/hotspots.de.yml b/entry_types/scrolled/config/locales/new/hotspots.de.yml index 711f1dfe7..1c7f534ba 100644 --- a/entry_types/scrolled/config/locales/new/hotspots.de.yml +++ b/entry_types/scrolled/config/locales/new/hotspots.de.yml @@ -12,23 +12,26 @@ de: edit_area: back: Zurück destroy: Löschen - confirm_delete_link: Soll der Bereich wirklich gelöscht werden? + confirm_delete_link: Soll der Hotspot-Bereich wirklich gelöscht werden? tabs: area: Hotspot-Bereich portrait: Hochkant attributes: tooltipPosition: label: Tooltip-Ausrichtung + inline_help: Verhindere, dass der Tooltip genau die Teile des Bildes überdeckt, die er beschriften soll. values: below: Unterhalb above: Oberhalb tooltipReference: label: Tooltip-Position + inline_help: Tooltip am Indikator-Punkt oder außerhalb des Hotspot-Bereichs zeigen. values: indicator: Am Indikator - area: Am Bereich + area: Am Hotspot-Bereich tooltipMaxWidth: label: Tooltip-Maximalbreite + inline_help: Bestimme, wie breit der Tooltip dargestellt wird. values: medium: "Mittel" veryNarrow: Sehr schmal @@ -36,32 +39,44 @@ de: wide: Breit tooltipTextAlign: label: Textausrichtung in Tooltip + inline_help: Ausrichtung des Texts innerhalb des Tooltips. values: left: Links center: Zentriert right: Rechts color: + inline_help: Wird für den Indikator-Punkt verwendet. label: Farbe activeImage: label: Aktives Bild + inline_help: |- + Alternatives Bild zeigen, sobald der Hotspot-Bereich + aktiv ist. Verwende ein Bild, in dem der + Hotspot-Bereich optisch hervorgehoben ist. tooltipImage: label: Bild in Tooltip + inline_help: Zeige im Bild innerhalb des Tooltips an. area: label: Bereich + inline_help: Ändere Größe und Position des Hotspot-Bereichs. zoom: label: Zoom + inline_help: Bestimme, wie sehr das Bild herangezoomt werden soll, wenn der Bereich aktiv ist. portraitTooltipPosition: label: Tooltip-Position (Hochkant) + inline_help: Verhindere, dass der Tooltip genau die Teile des Bildes überdeckt, die er beschriften soll. values: - below: Below - above: Above + below: Unterhalb + above: Oberhalb portraitTooltipReference: label: Tooltip-Position (Hochkant) + inline_help: Tooltip am Indikator-Punkt oder außerhalb des Hotspot-Bereichs zeigen. values: indicator: Am Indikator - area: Am Bereich + area: Am Hotspot-Bereich portraitTooltipMaxWidth: label: Tooltip-Maximalbreite (Hochkant) + inline_help: Bestimme, wie breit der Tooltip dargestellt wird. values: medium: "Mittel" narrow: Schmal @@ -69,12 +84,19 @@ de: wide: Breit portraitColor: label: Farbe (Hochkant) + inline_help: Wird für den Indikator-Punkt verwendet. portraitActiveImage: label: Aktives Bild (Hochkant) + inline_help: |- + Alternatives Bild zeigen, sobald der Hotspot-Bereich + aktiv ist. Verwende ein Bild, in dem der Hotspot-Bereich + optisch hervorgehoben ist. portraitArea: label: Bereich (Hochkant) + inline_help: Verändere Größe und Position des Hotspot-Bereichs. portraitZoom: label: Zoom (Hochkant) + inline_help: Bestimme, wie sehr das Hochkant-Bild herangezoomt werden soll, wenn der Bereich ausgewählt ist. edit_area_dialog: header: Bereichsumriss und Indikatorposition tabs: @@ -98,11 +120,19 @@ de: attributes: image: label: Bild + inline_help: Bild, auf dem Hotspot-Bereiche platziert werden sollen. portraitImage: - inline_help: Wird gezeigt, wenn der Browser-Viewport höher als breit ist - zum Beispiel auf Smartphones oder Tablets in Portrait-Ausrichtung. Kann als Alternative zu einem querformatigen Bild konfiguriert werden, das ansonsten zu klein dargestellt würde. + inline_help: Wird verwendet, wenn der Browser-Viewport höher als breit ist - zum Beispiel auf Smartphones oder Tablets in Portrait-Ausrichtung. Kann als Alternative zu einem querformatigen Bild konfiguriert werden, das ansonsten zu klein dargestellt würde. label: Bild (Hochkant) enablePanZoom: label: Pan & Zoom + inline_help_html: |- + Passt den Bildausschnitt animiert an, um beim + Auswählen eines Hotspots näher heranzuzoomen und + Details besser sichtbar zu machen.

Falls auf + dem Desktop alle Details auch ohne Zoom gut zu + erkennen sind, kann der Effekt optional nur für den + Hochkant-Modus aktiviert werden. values: phonePlatform: Im Phone-Layout always: Immer @@ -111,8 +141,10 @@ de: label: Pan & Zoom bei erstem Bereich starten enableFullscreen: label: Vollbildmodus erlauben + inline_help: Button anzeigen, um das Element bildschirmfüllend zu öffnen. invertTooltips: label: Tooltip-Farben invertieren + inline_help: Dunkle Tooltips mit hellem Text verwenden. description: Bild mit anklickbaren Bereichen name: Hotspots tabs: diff --git a/entry_types/scrolled/config/locales/new/hotspots.en.yml b/entry_types/scrolled/config/locales/new/hotspots.en.yml index 16cce3503..56cafed89 100644 --- a/entry_types/scrolled/config/locales/new/hotspots.en.yml +++ b/entry_types/scrolled/config/locales/new/hotspots.en.yml @@ -19,16 +19,19 @@ en: attributes: tooltipPosition: label: Tooltip orientation + inline_help: Prevent the tooltip from covering the parts of the image it is meant to label. values: below: Below above: Above tooltipReference: label: Tooltip position + inline_help: Show the tooltip at the indicator point or outside the hotspot area. values: indicator: At indicator area: At area tooltipMaxWidth: label: Tooltip maximum width + inline_help: Set how wide the tooltip should be displayed. values: medium: Medium narrow: Narrow @@ -36,32 +39,44 @@ en: wide: Wide tooltipTextAlign: label: Text alignment in tooltip + inline_help: Align the text inside the tooltip. values: left: Left center: Center right: Right color: + inline_help: Used for the indicator point. label: Color activeImage: label: Active image + inline_help: |- + Display an alternative image when the hotspot area + is active. Use an image where the area is visually + highlighted. tooltipImage: label: Image in tooltip + inline_help: Display an image inside the tooltip. area: label: Area + inline_help: Adjust the size and position of the hotspot area. zoom: label: Zoom + inline_help: Set how much the image should be zoomed in when the area is active. portraitTooltipPosition: label: Tooltip orientation (Portrait) + inline_help: Prevent the tooltip from covering the parts of the image it is meant to label. values: below: Below above: Above portraitTooltipReference: label: Tooltip position (Portrait) + inline_help: Show the tooltip at the indicator point or outside the hotspot area. values: indicator: At indicator area: At area portraitTooltipMaxWidth: label: Tooltip maximum width (Portrait) + inline_help: Set how wide the tooltip should be displayed. values: medium: Medium narrow: Narrow @@ -69,12 +84,19 @@ en: wide: Wide portraitColor: label: Color (Portrait) + inline_help: Used for the indicator point. portraitActiveImage: label: Active image (Portrait) + inline_help: |- + Display an alternative image when the hotspot area + is active. Use an image where the area is visually + highlighted. portraitArea: label: Area (Portrait) + inline_help: Adjust the size and position of the hotspot area. portraitZoom: label: Zoom (Portrait) + inline_help: Set how much the portrait image should be zoomed in when the area is selected. edit_area_dialog: header: Area outline and indicator position tabs: @@ -85,7 +107,7 @@ en: polygon: Polygon centerIndicator: Center indicator hotspots_image: Hotspots image - double_click_to_delete: Double click to remove point + double_click_to_delete: Double-click to remove point indicator_title: Drag to position indicator save: Save cancel: Cancel @@ -98,21 +120,31 @@ en: attributes: image: label: Image + inline_help: Image on which the hotspot areas should be placed. portraitImage: inline_help: Displayed when the browser viewport is taller than wide, for example on phones or tablets in portrait orientation. Can be used to provide an alternative to a landscape image that would otherwise be displayed too small. label: Image (Portrait) enablePanZoom: - label: Pan zoom + label: Pan & Zoom + inline_help_html: |- + Animates the image to zoom in on a hotspot when it + is selected, making details easier to see.

If + all details are clearly visible without zooming on + desktop, this effect can optionally be enabled only + for portrait mode. values: phonePlatform: In phone layout always: Always never: Never panZoomInitially: label: Pan to first area initially + inline_help: Starts the Pan & Zoom effect on the first hotspot area when it becomes active. enableFullscreen: label: Enable fullscreen + inline_help: Display a button to open the element in fullscreen mode. invertTooltips: label: Invert tooltip colors + inline_help: Use dark tooltips with light text. description: Image with clickable areas name: Hotspots tabs: