First iteration of Hotspot content element

entry_types/scrolled/config/locales/new/hotspots.de.yml

@@ -0,0 +1,79 @@
+de:
+  pageflow:
+    hotspots_content_element:
+      feature_name: Hotspots Inhaltselement
+  pageflow_scrolled:
+    public:
+      more: Mehr
+    inline_editing:
+      select_link_destination: "Link-Ziel auswählen"
+      change_link_destination: "Link-Ziel ändern"
+    editor:
+      content_elements:
+        hotspots:
+          edit_area:
+            tabs:
+              area: Hotspot-Breiech
+              portrait: Hochkant
+            attributes:
+              tooltipPosition:
+                label: Tooltip-Position
+                values:
+                  below: Unterhalb
+                  above: Oberhalb
+              color:
+                label: Farbe
+              activeImage:
+                label: Aktives Bild
+              area:
+                label: Bereich
+              portraitTooltipPosition:
+                label: Tooltip-Position (Hochkant)
+                values:
+                  below: Below
+                  above: Above
+              portraitColor:
+                label: Farbe (Hochkant)
+              portraitActiveImage:
+                label: Aktives Bild (Hochkant)
+              portraitArea:
+                label: Bereich (Hochkant)
+          edit_area_dialog:
+            header: Bereichsumriss und Indikatorposition
+            tabs:
+              default: Standard-Bild
+              portrait: Hochkant-Bild
+            modes:
+              rect: Rechteck
+              polygon: Polygon
+            hotspots_image: Hotspotbild
+            double_click_to_delete: Doppelklick, um Punkt zu entfernen
+            indicator_title: Ziehen um Indikator zu positionieren
+            save: Speichern
+            cancel: Abbrechen
+          areas:
+            add: Hinzufügen
+            label: Bereiche
+            confirm_delete: Soll der Bereich wirklich gelöscht werden?
+          area_input:
+            edit: Umriss und Indikatorposition bearbeiten
+          attributes:
+            image:
+              label: Bild
+            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.
+              label: Bild (Hochkant)
+            enablePanZoom:
+              label: Pan & Zoom
+              values:
+                phonePlatform: Im Phone-Layout
+                always: Immer
+                never: Nie
+            panZoomInitially:
+              label: Pan & Zoom bei erstem Bereich starten
+            enableFullscreen:
+              label: Vollbildmodus erlauben
+          description: Bild mit anklickbaren Bereichen
+          name: Hotspots
+          tabs:
+            general: Hotspots

entry_types/scrolled/config/locales/new/hotspots.en.yml

@@ -0,0 +1,79 @@
+en:
+  pageflow:
+    hotspots_content_element:
+      feature_name: Hotspots content element
+  pageflow_scrolled:
+    public:
+      more: More
+    inline_editing:
+      select_link_destination: "Select link destination"
+      change_link_destination: "Change link destination"
+    editor:
+      content_elements:
+        hotspots:
+          edit_area:
+            tabs:
+              area: Hotspot Area
+              portrait: Portrait
+            attributes:
+              tooltipPosition:
+                label: Tooltip orientation
+                values:
+                  below: Below
+                  above: Above
+              color:
+                label: Color
+              activeImage:
+                label: Active image
+              area:
+                label: Area
+              portraitTooltipPosition:
+                label: Tooltip orientation  (Portrait)
+                values:
+                  below: Below
+                  above: Above
+              portraitColor:
+                label: Color (Portrait)
+              portraitActiveImage:
+                label: Active image (Portrait)
+              portraitArea:
+                label: Area (Portrait)
+          edit_area_dialog:
+            header: Area outline and indicator position
+            tabs:
+              default: Default image
+              portrait: Portrait image
+            modes:
+              rect: Rectangle
+              polygon: Polygon
+            hotspots_image: Hotspots image
+            double_click_to_delete: Double click to remove point
+            indicator_title: Drag to position indicator
+            save: Save
+            cancel: Cancel
+          areas:
+            add: Add
+            label: Areas
+            confirm_delete: Are you sure you want to delete this area?
+          area_input:
+            edit: Edit outline and indicator position
+          attributes:
+            image:
+              label: Image
+            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
+              values:
+                phonePlatform: In phone layout
+                always: Always
+                never: Never
+            panZoomInitially:
+              label: Pan to first area initially
+            enableFullscreen:
+              label: Enable fullscreen
+          description: Image with clickable areas
+          name: Hotspots
+          tabs:
+            general: Hotspots

entry_types/scrolled/lib/pageflow_scrolled/plugin.rb

@@ -14,10 +14,12 @@ def configure(config)
 
         c.revision_components.register(Storyline)
 
-        c.additional_frontend_packs.register(
-          'pageflow-scrolled/contentElements/tikTokEmbed-frontend',
-          content_element_type_names: ['tikTokEmbed']
-        )
+        ['tikTokEmbed', 'hotspots'].each do |name|
+          c.additional_frontend_packs.register(
+            "pageflow-scrolled/contentElements/#{name}-frontend",
+            content_element_type_names: [name]
+          )
+        end
 
         c.widget_types.register(ReactWidgetType.new(name: 'defaultNavigation',
                                                     role: 'header'),
@@ -35,6 +37,7 @@ def configure(config)
         c.features.register('datawrapper_chart_embed_opt_in')
         c.features.enable_by_default('datawrapper_chart_embed_opt_in')
         c.features.register('iframe_embed_content_element')
+        c.features.register('hotspots_content_element')
         c.features.register('image_gallery_content_element')
         c.features.register('frontend_v2')
         c.features.register('scrolled_entry_fragment_caching')

entry_types/scrolled/package/config/webpack.js

@@ -19,6 +19,12 @@ module.exports = {
         'pageflow-scrolled/contentElements/tikTokEmbed-frontend.css'
       ]
     },
+    'pageflow-scrolled/contentElements/hotspots-frontend': {
+      import: [
+        'pageflow-scrolled/contentElements/hotspots-frontend',
+        'pageflow-scrolled/contentElements/hotspots-frontend.css'
+      ]
+    },
     'pageflow-scrolled/widgets/defaultNavigation': {
       import: [
         'pageflow-scrolled/widgets/defaultNavigation',

entry_types/scrolled/package/contentElements-server.js

@@ -1,2 +1,3 @@
 import 'pageflow-scrolled/contentElements-frontend';
+import 'pageflow-scrolled/contentElements/hotspots-frontend';
 import 'pageflow-scrolled/contentElements/tikTokEmbed-frontend';

entry_types/scrolled/package/documentation.yml

@@ -16,6 +16,7 @@ toc:
     children:
       - AudioPlayer
       - ContentElementBox
+      - ContentElementFigure
       - Figure
       - FitViewport
       - Image
@@ -57,6 +58,7 @@ toc:
     children:
       - normalizeSeed
       - renderInEntry
+      - renderInContentElement
       - renderHookInEntry
   - name: Storybook Support
     description: |

entry_types/scrolled/package/jest.config.js

@@ -11,8 +11,10 @@ module.exports = {
   globals: {
     ...globals
   },
-  setupFiles: ['<rootDir>/spec/support/matchMediaStub.js'],
-  setupFilesAfterEnv: ['<rootDir>/spec/support/fakeBrowserFeatures.js'],
+  setupFilesAfterEnv: [
+    '<rootDir>/spec/support/matchMediaStub.js',
+    '<rootDir>/spec/support/fakeBrowserFeatures.js'
+  ],
   modulePaths: ['<rootDir>/src', '<rootDir>/spec'],
 
   testURL: 'https://story.example.com',
@@ -27,6 +29,8 @@ module.exports = {
   },
   transform: {
     ...transform,
+    '^.+/editor/.+/images/.+\\.svg$': '<rootDir>/spec/support/jest/image-transform',
+    '^.+/pictogram\\.svg$': '<rootDir>/spec/support/jest/image-transform',
     '^.+\\.svg$': '<rootDir>/spec/support/jest/svg-transform'
   }
 };