pageflow-linkmap-page 0.1.0

data/app/assets/stylesheets/pageflow/linkmap_page/themes/default/scroll_indicators.scss

@@ -0,0 +1,82 @@
+.linkmap_page {
+  $arrow-margin: 30px;
+  $arrow-margin-with-default-navigation: 95px;
+  $arrow-margin-mobile: 10px;
+
+  .arrow_left,
+  .arrow_right {
+    position: absolute;
+    top: 50%;
+    margin-top: -40px;
+    width: 80px;
+    height: 80px;
+    text-decoration: none;
+    pointer-events: none;
+    z-index: 10;
+    display: block;
+
+    &:before {
+      color: #fff;
+      width: 100%;
+      position: absolute;
+      height: 100%;
+      text-align: center;
+      font-size: 80px;
+      line-height: 80px;
+      opacity: 0;
+      text-shadow: 2px 2px 7px black, -1px -1px 7px black;
+      @include transition(opacity 0.3s);
+    }
+
+    &:hover {
+      &:before {
+        opacity: 1;
+      }
+    }
+
+    .invert & {
+      &:before {
+        color: black;
+        text-shadow: 2px 2px 7px black, -1px -1px 7px white;
+      }
+    }
+  }
+
+  .arrow_left {
+    @include fa-angle-left-icon;
+    left: 10px;
+
+    @include phone {
+      left: $arrow-margin-mobile;
+      @include transform(scale(0.5))
+    }
+  }
+
+  .arrow_right {
+    @include fa-angle-right-icon;
+    right: $arrow-margin;
+
+    @include phone {
+      right: $arrow-margin-mobile;
+      @include transform(scale(0.5))
+    }
+
+    .widget_default_navigation_present & {
+      @include desktop {
+        right: $arrow-margin-with-default-navigation;
+      }
+
+      @include pad_portrait {
+        right: $arrow-margin-mobile;
+      }
+    }
+  }
+
+  &.can_scroll_left .arrow_left:before {
+    opacity: 1;
+  }
+
+  &.can_scroll_right .arrow_right:before {
+    opacity: 1;
+  }
+}

data/app/controllers/pageflow/external_links/sites_controller.rb

@@ -0,0 +1,40 @@
+module Pageflow
+  module ExternalLinks
+    class SitesController < ActionController::Base
+      respond_to :json
+
+      def index
+        @entry = Entry.find(params[:entry_id])
+
+        respond_with(Site.all_for_revision(@entry.draft))
+      end
+
+      def create
+        @entry = Entry.find(params[:entry_id])
+        site = Site.all_for_revision(@entry.draft).create!(site_params)
+
+        respond_with(site)
+      end
+
+      def update
+        site = Site.find(params[:id])
+        site.update(site_params)
+
+        respond_with(site)
+      end
+
+      def destroy
+        site = Site.find(params[:id])
+        site.destroy
+
+        respond_with(site)
+      end
+
+      protected
+
+      def site_params
+        params.require(:site).permit(:url, :thumbnail, :title, :description, :open_in_new_tab)
+      end
+    end
+  end
+end

data/app/helpers/pageflow/linkmap_page/areas_helper.rb

@@ -0,0 +1,93 @@
+module Pageflow
+  module LinkmapPage
+    module AreasHelper
+      include BackgroundImageHelper
+
+      def linkmap_areas_div(entry, configuration)
+        render('pageflow/linkmap_page/areas/div',
+               entry: entry,
+               configuration: configuration)
+      end
+
+      def linkmap_area(entry, attributes, index, &block)
+        Link.new(self, entry, attributes.symbolize_keys, index).render(&block)
+      end
+
+      class Link < Struct.new(:template, :entry, :attributes, :index)
+        delegate :content_tag, to: :template
+
+        def render(&block)
+          content_tag(:a,
+                      '',
+                      href: href,
+                      target: target,
+                      class: css_classes,
+                      style: inline_styles,
+                      data: data_attributes,
+                      &block)
+        end
+
+        private
+
+        def href
+          if attributes[:target_type] == 'external_site'
+            external_site ? external_site.url : '#'
+          elsif attributes[:target_type] == 'page'
+            "##{attributes[:target_id]}"
+          else
+            '#'
+          end
+        end
+
+        def target
+          return '' unless attributes[:target_type] == 'external_site'
+          (external_site && external_site.open_in_new_tab?) ? '_blank' : ''
+        end
+
+        def external_site
+          @external_site ||=
+            ExternalLinks::Site.find_by_revision_id_and_perma_id(entry.try(:revision),
+                                                                 attributes[:target_id])
+        end
+
+        def data_attributes
+          audio_file_id = attributes[:target_id]
+
+          {
+            target_type: attributes[:target_type],
+            target_id: attributes[:target_id],
+            audio_file: audio_file_id.present? ? "#{audio_file_id}.area_#{index}" : nil,
+            page_transition: attributes[:page_transition],
+            width: attributes[:width],
+            height: attributes[:height]
+          }.delete_if { |key, value| value.blank? }
+        end
+
+        def inline_styles
+          styles_string(top: in_percent(attributes[:top]),
+                        left: in_percent(attributes[:left]),
+                        width: in_percent(attributes[:width]),
+                        height: in_percent(attributes[:height]))
+        end
+
+        def css_classes
+          ['hover_area',
+            (external_site && !external_site.open_in_new_tab?) ? 'target_self' : nil,
+            attributes[:marker].to_s,
+            attributes[:inverted] ? 'inverted' : nil,
+            "#{attributes[:target_type]}_area"].compact.join(' ')
+        end
+
+        def styles_string(properties)
+          properties.map do |name, value|
+            "#{name}: #{value};"
+          end.join(' ')
+        end
+
+        def in_percent(value)
+          value ? "#{value}%" : ''
+        end
+      end
+    end
+  end
+end

data/app/models/pageflow/linkmap_page/site.rb

@@ -0,0 +1,11 @@
+module Pageflow
+  module ExternalLinks
+    class Site < ActiveRecord::Base
+      include RevisionComponent
+
+      def thumbnail_file
+        ImageFile.find_by_id(thumbnail)
+      end
+    end
+  end
+end

data/app/views/pageflow/linkmap_page/areas/_div.html.erb

@@ -0,0 +1,33 @@
+<%= content_tag(:div, class: "linkmap_areas") do %>
+  <% (configuration['linkmap_areas'].presence || []).each_with_index do |attributes, index| %>
+    <%= linkmap_area(entry, attributes, index) do %>
+      <%= background_image_div_with_size(configuration, 'visited_image', class: 'visited_image', style_group: :panorama) %>
+
+      <% if configuration['background_type'] == 'hover_video' &&
+            !Pageflow::ImageFile.find_by_id(configuration['hover_image_id']) %>
+
+        <%= background_image_div_with_size(configuration,
+                                           'panorama_video',
+                                           file_type: 'video_file',
+                                           class: 'hover_image') %>
+      <% else %>
+        <%= background_image_div_with_size(configuration,
+                                           'hover_image',
+                                           class: 'hover_image',
+                                           style_group: :panorama) %>
+      <% end %>
+
+      <div class="linkmap_marker <%= attributes['marker'] %>">
+        <div class="inline_loading_spinner">
+          <div class="circle_inner">
+            <div class="circle_innerst"></div>
+          </div>
+        </div>
+      </div>
+      <div class="linkmap_description">
+        <div class="link_title"><%= attributes['link_title'] %></div>
+        <div class="link_description"><%= raw(attributes['link_description']) %></div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/pageflow/linkmap_page/page.html

@@ -0,0 +1,51 @@
+<div class="blackLayer"></div>
+<div class="content_and_background linkmap_page">
+  <div class="backgroundArea">
+    <%= background_image_div(configuration, 'fixed_background_image', class: 'fixed_background') %>
+    <div class="scroller">
+      <div class="linkmap">
+        <div class="panorama_wrapper">
+          <% if configuration['background_type'] == 'video' &&
+                !Pageflow::ImageFile.find_by_id(configuration['panorama_image_id']) %>
+
+            <%= background_image_div_with_size(configuration,
+                                               'panorama_video',
+                                               file_type: 'video_file',
+                                               class: 'panorama panorama_image') %>
+          <% else %>
+            <%= background_image_div_with_size(configuration,
+                                               'panorama_image',
+                                               class: 'panorama panorama_image',
+                                               style_group: :panorama) %>
+          <% end %>
+
+          <div class="panorama panorama_video">
+            <%= lookup_video_tag(configuration['panorama_video_id'],
+                                 configuration['poster_image_id'],
+                                 loop: true,
+                                 unique_id: page.id,
+                                 preload: page.is_first) %>
+          </div>
+
+          <div class="hover_video">
+          </div>
+
+          <%= linkmap_areas_div(@entry, configuration) %>
+          <div class="description_overlay">
+            <div class="description_overlay_wrapper">
+              <div class="link_title"></div>
+              <div class="link_description"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="arrow_left">
+      <span class="hint"><%= t('.scroll_left') %></span>
+    </div>
+    <div class="arrow_right">
+      <span class="hint"><%= t('.scroll_right') %></span>
+    </div>
+  </div>
+</div>

data/config/locales/de.yml

@@ -0,0 +1,119 @@
+de:
+  activerecord:
+    attributes:
+      pageflow/linkmap_page/area:
+        link_description: ! 'Linkbeschreibung: Text'
+        link_title: ! 'Linkbeschreibung: Titel'
+        marker: Linkmarkierung
+        name: Bezeichnung
+        page_transition: Seitenwechsel-Animation
+        target_id: Ziel
+        target_type: Bereichstyp
+    values:
+      pageflow/linkmap_page/area:
+        marker:
+          dynamic_marker: Flexible Markierung
+          no_marker: Keine Markierung
+        target_type:
+          audio_file: Audio Datei
+          external_site: Externer Verweis
+          page: Seitenverweis
+  pageflow:
+    linkmap_page:
+      default_page_transition: (Standard)
+      editor:
+        area_types:
+          audio_file: Audio Datei
+          external_site: Externer Verweis
+          page: Seitenverweis
+        templates:
+          edit_area:
+            back: Zurück
+            destroy: Löschen
+          embedded:
+            area_item:
+              edit: Bearbeiten
+              toggle_marker: Linkmarkierung aktivieren
+          file_area_item:
+            edit: Bearbeiten
+            remove: Entfernen
+            toggle_marker: Linkmarkierung aktivieren
+          file_areas:
+            add: Hinzufügen
+            label: Audios
+        views:
+          areas_list:
+            add: Hinzufügen
+            label: Bereiche
+          edit_area_view:
+            confirm_destroy: Bereich wirklich löschen?
+      help_entries:
+        page_type:
+          menu_item: Hotspots
+          text: ! "# Hotspots\n\n*Verweise mit konfigurierbaren Klickbereichen*\n    \nHotspots können Audio-Dateien abspielen, interne Verweise auf andere Seiten im Pageflow sein oder auf externe Seiten verlinken. Es können so viele Hotspots angelegt werden wie gewünscht. \n\nDer Panorama Typ entscheidet darüber, ob die Seite ein Hintergrund-Bild oder Hintergrund-Video zeigt. (Beachte, dass Hintergrund-Videos auf mobilen Geräten nicht abgespielt werden, deshalb wähle ein zusätzliches Panorama-Bild für die mobile Version) \n\nDie Hotspot-Seite ermöglicht auch die Nutzung von Panorama-Bildern, die größer sind, als der sichtbare Bildschirmbereich. So können Nutzer diese Seiten auch horizontal oder vertikal durch scrollen erkunden.\n\nUm einen Hotspot zu erstellen, klicke auf „Bereiche“ und wähle zwischen „Audio“, „Seitenverweis“ oder „Externer Verweis“.\n\nDiese „Bereiche\" können auf zwei unterschiedliche Arten dargestellt werden:\n\n##  Hotspots als Kreise\n\nEin weißer Kreis, dessen Position und Größe frei gewählt werden kann, markiert den Hotspot. Hierzu klicke beim entsprechenden Hotspot auf den Button mit dem Auge-Symbol und ziehe den Kreis dann an die gewünschte Position. Bei Auswahl einer Audio-Datei erscheint innerhalb des Kreises ein Kopfhörer-Symbol mit einem Inline-Audio-Player. Dessen Größe hängt von der Größe des Kreises ab. Je näher der Mauszeiger Richtung Kreis bewegt wird, desto heller/sichtbarer wird dieser. Mit Klick auf den Kopfhörer wird der Audio-Player gestartet und gestoppt. \n\n## Individuell gestaltete Hotspots\n\nAlternativ kann ein zweites Panorama-Bild verwendet werden, um das Aussehen der Hotspots zu bestimmen, über denen sich der Cursor befindet. Es müssen zwei Panorama-Bilder vorbereitet werden:\n\n1. Ein Bild mit allen Hotspots im inaktiven Modus (z.B. eine Karte, auf der Städte mit schwarzen Punkten markiert sind)\n2. Ein Bild mit allen Hotspots im aktiven Zustand (z.B. die selbe Karte, aber mit roten Punkten als Markierung)\n\nDie rechteckigen Bereiche der Hotspots werden nun so positioniert, dass sie die graphischen Darstellungen der Hotspots im Bild überdecken. Befindet sich der Cursor über einem der Bereiche, wird genau in diesem Ausschnitt der entsprechende Teil des Hover-Bildes gezeigt. Der Hotspot erscheint daher aktiv, während alle anderen Hotspots weiterhin inaktiv dargestellt werden.\n\nAn Stelle von Bildern können auch Videos verwendet werden. Folgende Kombinationen sind möglich:\n\n1. Hintergrund-Bild mit Hover-Bild\n2. Hintergrund-Video mit Hover-Bild\n3. Hintergrund-Bild mit Hover-Video\n\nFalls die vom User bereits besuchten Bereiche anschliessend anders dargestellt werden sollen, kann ein „Visited-Bild“ festgelegt werden, das dann zum Beispiel einen bestimmten Hotspot nach dem Klick in einer abgeschwächten Farbe zeigt.\n\n## Textoptionen\n\nDie Hotspots können mit einem Titel benannt und mit weiteren Text versehen werden. Der Text kann in fett, kursiv und unterstrichen formatiert werden.\n\n## Atmo Optionen\n\nWie bei den anderen Seitentypen auch, kann im Hintergrund ein zusätzliches Audiofile abgespielt werden. Für die Kombination mit Audio-Hotspots ist es neben “Ausblenden” und “Weiterspielen” zudem möglich, die Option “Leiser weiterspielen” auszuwählen. Das kann sinnvoll sein, wenn zum Beispiel ein im Hintergrund laufender Titel von einem kurzen Interview überlagert wird.\n\n## Weitere Optionen\n\nUnter „Optionen\" können folgende Regeln definiert werden:\n\nScrollbereich auf aktive Bereiche beschränken: Hierbei wird verhindert, dass die User sich in Bildbereiche ausserhalb der Hotspots bewegen können.\n\nScrollumgebung erzwingen: Hierbei wird der sichtbare Bereich so verkleinert, dass User sich durch die Seite scrollen müssen, um alle Hotspots zu sehen.\n\nAm Bildrand scrollen deaktivieren: Hierbei wird das sonst automatische Scrollen unterdrückt, sobald User die Maus zum Bildrand bewegen.\n\nTypische Anwendungsbeispiele: Menüseite, Multiple Choice, Entdeckungstour"
+      manage_sites: Verweise verwalten
+      page:
+        scroll_left: Nach links scrollen
+        scroll_right: Nach rechts scrollen
+      page_attributes:
+        add_environment:
+          inline_help: Panorama etwas vergrößern, um Scrollen in beide Richtungen zu erlauben.
+          label: Scrollumgebung erzwingen
+        audio_areas:
+          label: Bereiche mit Audio
+        background_type:
+          label: Panorama-Typ
+          values:
+            hover_video: Hintergrund-Bild/Hover-Video
+            image: Hintergrund-Bild/Hover-Bild
+            video: Hintergrund-Video/Hover-Bild
+        hover_image_id:
+          inline_help: Ein Ausschnitt dieses Bildes wird im Bereich eines Hotspots angezeigt, wenn sich der Cursor über dem Hotspot befindet.
+          label: Hover-Bild
+        hover_video_type:
+          hover_image_id:
+            inline_help: Bild, das auf mobilen Plattformen anstelle des Hover-Videos gezeigt werden soll.
+            label: Hover-Bild (mobil)
+          panorama_video_id:
+            inline_help: Ein Ausschnitt dieses Videos wird im Bereich eines Hotspots angezeigt, wenn sich der Cursor über dem Hotspot befindet.
+            label: Hover-Video
+        limit_scrolling:
+          inline_help: Scrollen nur erlauben, falls Hotspot Bereiche außerhalb des sichtbaren Bereichs liegen.
+          label: Scrollbereich auf aktive Bereiche beschränken
+        linked_linkmap_page_perma_ids:
+          label: Verlinkte Seiten
+        linkmap_areas:
+          label: Verweisbereiche
+        margin_scrolling_disabled:
+          inline_help: Panorama nicht automatisch scrollen, wenn der Cursor bewegt wird.
+          label: Am Bildrand scrollen deaktivieren
+        panorama_image_id:
+          inline_help: Bild auf dem Hotspots gesetzt werden sollen.
+          label: Panorama-Bild
+        panorama_video_id:
+          inline_help: Video auf dem Hotspots gesetzt werden sollen.
+          label: Panorama-Video
+        video_type:
+          panorama_image_id:
+            inline_help: Bild, das auf mobilen Plattformen anstelle des Panorama-Videos gezeigt werden soll.
+            label: Panorama-Bild (mobil)
+        visited_image_id:
+          inline_help: Ein Ausschnitt dieses Bildes wird in den Bereichen der Hotspots angezeigt, deren Zielseite bereits besucht wurde.
+          label: Visited-Bild
+      page_type_category_name: Verweise
+      page_type_description: Verweise mit konfigurierbaren Klickbereichen
+      page_type_feature_name: Hotspot-Seitentyp
+      page_type_name: Hotspots
+    ui:
+      configuration_editor:
+        tabs:
+          appearance: Erscheinungsbild
+          areas: Bereiche
+      inline_help:
+        pageflow/linkmap_page/area:
+          link_title: Die Beschreibung wird in einem Overlay angezeigt, wenn sich der Cursor über dem Hotspot befindet.
+          marker: Wähle die visuelle Darstellung des Hotspots.
+          name: Gib hier eine Bezeichnung ein, um später bei in der Verweis-Übersicht direkt zu erkennen, um welchen Verweis es sich handelt. Die Bezeichnung ist für die Leser nicht sichtbar.
+          page_transition: Wähle hier den Effekt, der beim Übergang zur Zielseite des Verweises benutzt werden soll.
+          target_id: Objekt auf das der Hotspot verlinkt.
+          target_type: Wähle den Typ von Objekt auf den Hotspot verlinken soll.

data/config/locales/en.yml

@@ -0,0 +1,119 @@
+en:
+  activerecord:
+    attributes:
+      pageflow/linkmap_page/area:
+        link_description: Link decription text
+        link_title: Link description title
+        marker: Link display
+        name: Label
+        page_transition: Page transition
+        target_id: Target
+        target_type: Area type
+    values:
+      pageflow/linkmap_page/area:
+        marker:
+          dynamic_marker: Circle
+          no_marker: None
+        target_type:
+          audio_file: Audio file
+          external_site: External link
+          page: Page link
+  pageflow:
+    linkmap_page:
+      default_page_transition: (Default)
+      editor:
+        area_types:
+          audio_file: Audio file
+          external_site: External link
+          page: Page link
+        templates:
+          edit_area:
+            back: Back
+            destroy: Delete
+          embedded:
+            area_item:
+              edit: Edit
+              toggle_marker: Toggle display
+          file_area_item:
+            edit: Edit
+            remove: Remove
+            toggle_marker: Toggle marker
+          file_areas:
+            add: Add
+            label: Label
+        views:
+          areas_list:
+            add: Add
+            label: Areas
+          edit_area_view:
+            confirm_destroy: Really delete this area?
+      help_entries:
+        page_type:
+          menu_item: Hotspots
+          text: ! "# Hotspots\n\nLinks with configurable click areas.\n\nHotspots can play audio files, link to other pages in a Pageflow or to external websites. You can define as many hotspots as you want.\n\nDecide if you want to show a background image or a background video. (Keep in mind, that background videos will not be played on mobile devices, therefore use an additional fallback image for the mobile version)\n\nThe hotspot page type allows to use panoramic images that are wider and taller than the screen-size. It enables users to explore these images by horizontal or vertical scrolling.\n\nTo add a Hotspot just click on „Areas“ and choose between „Audio“, „Internal link“, or „External link“. \n\nThere are two ways to display hotspot areas:\n\n##  Hotspots as circles\n\nDisplay a white circle whose position and size can be defined by dragging. Click on the eye-symbol button of the corresponding hotspot and move this circle onto the desired position. If you use an audio file, a headphone-symbol will appear within the circle. The size of the symbol depends on the circle´s size. The circle becomes more visible when the cursor moves closer to it.\n\n## Individually designed hotspots\n\nAlternatively, an additional panorama image can be used to determine the look of hotspots when the cursor hovers above them. Two images have to be prepared:\n\n1. An image with all hotspots in an inactive state (e.g. a map with cities represented by black dots)\n2. An image with all hotspots in an active state (e.g. the same map with red dots representing cities)\n\nNow the rectangular hotspot areas are positioned to cover the graphic representations of the hotspots. When the cursor hovers above one of the hotspots, the corresponding part of the hover-image will be displayed inside the hotspot's area. That way the hotspot is displayed in its active state while all others remain inactive.\n\nIt is also possible to use videos instead of images. The following combinations are possible:\n\n1. Background image with hover image\n2. Background video with hover image\n3. Background image with hover video\n\nIf you wish to mark hotspots as \"already visited\" you can also upload a „Visited-Image“ which then shows a certain spot in a different color after visiting the linked page.\n\n## Text options\n\nBoth of these hotspot types can be entitled and have additional text/description.\nThe description editor contains basic formatting options like bold, italic & underline.\n\n## Atmo options\n\nEvery Hotspot page, can play an additional backround sound that can optionally stop or continue playing (at the same or a lower volume) while an audio-Hotspot is playing.\n\n## Further options\n\nRestrict scrolling to hotspot areas: Only scroll between hotspots.\n\nForce scrolling: Ensure there is a margin which ensures the panorama can be scrolled both vertically and horizontally.\n\nDeactivate scrolling at image border: Do not scroll in panorama view when user moves the cursor.\n\nExamples of application: Menu site, multiple choice, exploration tour"
+      manage_sites: Manage links
+      page:
+        scroll_left: Scroll left
+        scroll_right: Scroll right
+      page_attributes:
+        add_environment:
+          inline_help: Zoom panorama to allow scrolling in both directions.
+          label: Ensure scroll margin
+        audio_areas:
+          label: Audio areas
+        background_type:
+          label: Panorama type
+          values:
+            hover_video: Backgrund image/hover video
+            image: Background image/hover image
+            video: Background video/hover image
+        hover_image_id:
+          inline_help: A part of this image is displayed inside the area of a hotspot when the cursor hovers it.
+          label: Hover image
+        hover_video_type:
+          hover_image_id:
+            inline_help: Image to display instead of hover video on mobile platforms
+            label: Hover image (mobile)
+          panorama_video_id:
+            inline_help: A part of this video will be displayed in the area of a hotspot when the cursor hovers it.
+            label: Hover video
+        limit_scrolling:
+          inline_help: Enable scrolling only if there hotspot areas outside the view port.
+          label: Restict to hotspot areas
+        linked_linkmap_page_perma_ids:
+          label: Page links
+        linkmap_areas:
+          label: Link areas
+        margin_scrolling_disabled:
+          inline_help: Do not scroll panorama when the cursor moves.
+          label: Disable autoscroll in page margin
+        panorama_image_id:
+          inline_help: Image to place hotspots on
+          label: Panorama image
+        panorama_video_id:
+          inline_help: Video to place hotspots on
+          label: Panorama video
+        video_type:
+          panorama_image_id:
+            inline_help: Image displayed instead of panorama video on mobile platforms.
+            label: Panorama image (mobile)
+        visited_image_id:
+          inline_help: A part of this image is displayed inside the areas of hotspots whose target pages have already been visited.
+          label: Visited image
+      page_type_category_name: Links
+      page_type_description: Links with configurable click areas
+      page_type_feature_name: Hotspot page type
+      page_type_name: Hotspots
+    ui:
+      configuration_editor:
+        tabs:
+          appearance: Appearance
+          areas: Areas
+      inline_help:
+        pageflow/linkmap_page/area:
+          link_title: The description is displayed inside an overlay when the cursor hovers the hotspot.
+          marker: ! 'Choose the hotspot''s visual appearance. '
+          name: Choose a label to recognize the link within the overview. This label is for your orientation only and will not be displayed to the reader.
+          page_transition: Choose the animation, that will be used to transition to the link's target page.
+          target_id: Object the hotspot links to.
+          target_type: Choose the type of object the hotspot is supposed to link to.