Merge pull request codevise#2156 from tf/hotspots-8

Further improvements for hotspots element

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"
@@ -16,69 +12,91 @@ 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
  narrow: Schmal
  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
  veryNarrow: Sehr schmal
  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:
@@ -102,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.<br/><br/>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
@@ -115,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:

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"
@@ -23,62 +19,84 @@ 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
  veryNarrow: Very Narrow
  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
  veryNarrow: Very Narrow
  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:
@@ -89,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
@@ -102,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.<br/><br/>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:

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});
  },

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,

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'