pageflow 15.6.1 → 15.7.0

data/entry_types/scrolled/config/locales/new/consent.en.yml

@@ -0,0 +1,24 @@
+en:
+  pageflow_scrolled:
+    public:
+      third_party_consent:
+        opt_in_prompt:
+          video: DELETED
+          youtube: I agree with being shown YouTube videos.
+          vimeo: I agree with being shown Vimeo videos.
+          facebook: I agree with being shown Facebook videos.
+      consent_accept_all: Accept all and close
+      consent_configure: More Information
+      consent_deny_all: Deny
+      consent_expand_vendor: More information
+      consent_no_vendors: Currently not using any third party integrations.
+      consent_prompt_html: |-
+        This website uses third party technologies.
+        We are asking your permission to use these technologies.
+        You can always change or withdraw your consent later via our
+        <a href="%{privacyLinkUrl}" target="_blank">privacy policy</a> page.
+      consent_save: Save selection
+      consent_settings: Privacy Settings
+  pageflow:
+    datawrapper_chart_embed_opt_in:
+      feature_name: 'Opt-in for Datawrapper embeds'

data/entry_types/scrolled/config/locales/new/content_element_categories.de.yml

@@ -0,0 +1,39 @@
+de:
+  pageflow_scrolled:
+    editor:
+      content_element_categories:
+        basic:
+          name: "Basic"
+        links:
+          name: "Verweise"
+        data:
+          name: "Daten und Diagramme"
+        media:
+          name: "Media"
+        interactive:
+          name: "Interaktiv"
+      content_elements:
+        dataWrapperChart:
+          description: "Einbindung von Diagrammen, die mit Datawrapper erstellt wurden"
+        externalLinkList:
+          description: "Sammlung von Verweisen zu Webseiten außerhalb des Beitrags"
+        heading:
+          description: "Beitrags- oder Kapiteltitel"
+        inlineAudio:
+          description: "Wiedergabe einer Audiodatei mit Steuerelementen"
+        inlineBeforeAfter:
+          description: "Zwei übereinandergelegte Bilder mit Schieberegler getrennt"
+        inlineImage:
+          description: "Einbindung von Bildern"
+        inlineVideo:
+          description: "Wiedergabe einer Videodatei mit Steuerelementen"
+        soundDisclaimer:
+          description: "Lass den Leser den Ton aktiveren"
+        textBlock:
+          description: "Text mit Listen, Zitaten und Zwischenüberschriften"
+        videoEmbed:
+          description: "Bettet ein externes Video von YouTube, Vimeo oder Facebook ein"
+        vrImage:
+          description: "Interaktives Panorama aus Bild mit rektangularer Projektion"
+        iframeEmbed:
+          description: "Einbindung einer extern gehosteten Website"

data/entry_types/scrolled/config/locales/new/content_element_categories.en.yml

@@ -0,0 +1,39 @@
+en:
+  pageflow_scrolled:
+    editor:
+      content_element_categories:
+        basic:
+          name: "Basic"
+        links:
+          name: "Links"
+        data:
+          name: "Data and Diagrams"
+        media:
+          name: "Media"
+        interactive:
+          name: "Interactive"
+      content_elements:
+        dataWrapperChart:
+          description: "Embedded chart created with Datawrapper"
+        externalLinkList:
+          description: "A collection of links to external websites"
+        heading:
+          description: "Entry or chapter title"
+        inlineAudio:
+          description: "Player or waveform with controls"
+        inlineBeforeAfter:
+          description: "Compare to images using a slider"
+        inlineImage:
+          description: "Display an image"
+        inlineVideo:
+          description: "Player with controls"
+        soundDisclaimer:
+          description: "Make sure users unmute before continuing"
+        textBlock:
+          description: "Text with lists, block quotes and sub-headings"
+        videoEmbed:
+          description: "Embed a video from YouTube, Vimeo or Facebook"
+        vrImage:
+          description: "Interactive panorama using an image with rectangular projection"
+        iframeEmbed:
+          description: "Embed externally hosted websites"

data/entry_types/scrolled/config/locales/new/default_transition.de.yml

@@ -0,0 +1,14 @@
+de:
+  pageflow_scrolled:
+    editor:
+      edit_section_transition:
+        attributes:
+          transition:
+            values:
+              fade: "Überblenden"
+              fadeBg: "DELETE"
+            variants:
+              fade: "Inhalte der Abschnitte ebenfalls überblenden"
+              fadeBg: "Nur Hintergründe der Abschnitte überblenden"
+            mark_as_default_transition: "Als Standard für neue Abschnitte verwenden"
+            default_transition: "Wird als Standard für neue Abschnitte verwendet"

data/entry_types/scrolled/config/locales/new/default_transition.en.yml

@@ -0,0 +1,14 @@
+en:
+  pageflow_scrolled:
+    editor:
+      edit_section_transition:
+        attributes:
+          transition:
+            values:
+              fade: "Cross Fade"
+              fadeBg: "DELETE"
+            variants:
+              fade: "Also fade content of sections"
+              fadeBg: "Fade only section backgrounds"
+            mark_as_default_transition: "Use as default for new sections"
+            default_transition: "Used as default for new sections"

data/entry_types/scrolled/config/locales/new/header_line_breaks.de.yml

@@ -0,0 +1,28 @@
+de:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        heading:
+          help_texts:
+            shortcuts: |
+              <dl class="shortcuts">
+                <dt><kbd>Shift</kbd> + <kbd>Enter</kbd></dt>
+                <dd>
+                  Bedingten Trennstrich einfügen.
+                </dd>
+              </dl>
+          attributes:
+            hyphens:
+              label: 'Silbentrennung'
+              inline_help: |
+                Bei manueller Silbentrennung werden Worte nur an
+                Stellen getrennt, die durch einen bedingten
+                Trennstrich ausgezeichnet wurden. Du kannst so
+                Trennung an unerwünschten Stellen verhindern.  Ohne
+                bedingte Trennstriche werden lange Worte in der
+                nächsten Zeile ohne Bindestrich fortgesetzt.  Prüfe
+                daher insbesondere die mobile Darstellung, wenn du
+                manuelle Silbentrennung verwendest.
+              values:
+                auto: 'Automatisch'
+                manual: 'Manuell'

data/entry_types/scrolled/config/locales/new/header_line_breaks.en.yml

@@ -0,0 +1,27 @@
+en:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        heading:
+          help_texts:
+            shortcuts: |
+              <dl class="shortcuts">
+                <dt><kbd>Shift</kbd> + <kbd>Enter</kbd></dt>
+                <dd>
+                  Insert soft hyphen.
+                </dd>
+              </dl>
+          attributes:
+            hyphens:
+              label: 'Hyphenation'
+              inline_help: |
+                With manual hyphenation, words are only ever separated
+                at positions that have been marked with a soft
+                hyphen. This helps prevent separating words at
+                unwanted positions. Without soft hyphens, long words
+                will be continued to the next line without a hyphen.
+                Therefore, always double check mobile display when
+                using manual hyphenation.
+              values:
+                auto: 'Automatic'
+                manual: 'Manual'

data/entry_types/scrolled/config/locales/new/header_size.de.yml

@@ -0,0 +1,17 @@
+de:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        heading:
+          attributes:
+            textSize:
+              label: "Schriftgröße"
+              values:
+                auto: "(Automatisch)"
+                large: "Groß"
+                medium: "Mittel"
+                small: "Klein"
+              inline_help: |
+                Standardmäßig haben Überschriften im ersten Abschnitt
+                des Beitrags große Schrift. Überschriften in späteren
+                Abschnitten verwenden Schriftgröße "Klein".

data/entry_types/scrolled/config/locales/new/header_size.en.yml

@@ -0,0 +1,17 @@
+en:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        heading:
+          attributes:
+            textSize:
+              label: "Text size"
+              values:
+                auto: "(Auto)"
+                large: "Large"
+                medium: "Medium"
+                small: "Small"
+              inline_help: |
+                By default, a heading in the first section of the
+                entry is large. Headings in later sections have small
+                text size.

data/entry_types/scrolled/config/locales/new/iframe_embed.de.yml

@@ -0,0 +1,39 @@
+de:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        iframeEmbed:
+          attributes:
+            aspectRatio:
+              label: Seitenverhältnis
+              values:
+                narrow: Landscape (4:3)
+                portrait: Portrait (9:16)
+                square: Quadratisch (1:1)
+                wide: Landscape (16:9)
+            portraitAspectRatio:
+              label: Seitenverhältnis (Hochkant)
+              values:
+                narrow: Landscape (4:3)
+                portrait: Portrait (9:16)
+                square: Quadratisch (1:1)
+                wide: Landscape (16:9)
+              blank: '(Standard)'
+            scale:
+              label: Skalieren
+              values:
+                p100: "100%"
+                p75: "75%"
+                p50: "50%"
+                p33: "33%"
+            source:
+              label: URL
+            title:
+              inline_help: Dieser Titel wird von Screenreadern verwendet, um das iframe als Ganzes zu beschreiben.
+              label: Titel
+          name: iframe-Embed
+          tabs:
+            general: iframe-Embed
+  pageflow:
+    iframe_embed_content_element:
+      feature_name: "iframe-Embed Inhaltselement"

data/entry_types/scrolled/config/locales/new/iframe_embed.en.yml

@@ -0,0 +1,39 @@
+en:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        iframeEmbed:
+          attributes:
+            aspectRatio:
+              label: Aspect Ratio
+              values:
+                narrow: Landscape (4:3)
+                portrait: Portrait (9:16)
+                square: Square (1:1)
+                wide: Landscape (16:9)
+            portraitAspectRatio:
+              label: Aspect Ratio (Portrait)
+              values:
+                narrow: Landscape (4:3)
+                portrait: Portrait (9:16)
+                square: Square (1:1)
+                wide: Landscape (16:9)
+              blank: '(Default)'
+            scale:
+              label: Scale
+              values:
+                p100: "100%"
+                p75: "75%"
+                p50: "50%"
+                p33: "33%"
+            source:
+              label: URL
+            title:
+              inline_help: Used by screen readers to describe the chart as a whole.
+              label: Title
+          name: iframe Embed
+          tabs:
+            general: iframe Embed
+  pageflow:
+    iframe_embed_content_element:
+      feature_name: "iframe embed content element"

data/entry_types/scrolled/config/locales/new/inline_loops.de.yml

@@ -0,0 +1,26 @@
+de:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        inlineVideo:
+          attributes:
+            playbackMode:
+              label: "Wiedergabe-Modus"
+              values:
+                manual: "Manuell"
+                autoplay: "Automatisch"
+                loop: "Loop"
+              inline_help_html: "Bestimme, wie das Video gestartet wird:<ul><li><strong>Manuell:</strong> Durch einen Klick des Benutzers.</li><li><strong>Automatisch:</strong> Wenn es die Mitte des Browser-Viewports erreicht.</li><li><strong>Loop:</strong> In Endlosschleife sobald es sichtbar wird.</li></ul>"
+            hideControlBar:
+              label: "Controls ausblenden"
+              inline_help: "Für kurze Videos, bei denen der Benutzer nicht an bestimmte Stellen springen will."
+              inline_help_disabled: 'Für Videos mit Wiedergabe-Modus "Loop" sind die Controls immer ausgeblendet.'
+            unmuteLabel:
+              label: "Stummschaltung des Beitrags"
+              inline_help_html: 'Browser erlauben standardmäßig das Abspielen von Videos mit Ton nur nach einer Benutzer-Interaktion. Um Videos dennoch automatisch abspielen zu können, sind Beiträge zu Beginn stummgeschaltet.<br /><br />Die Stummschaltung kann z.B. über das Lautsprecher-Icon in der Navigationsleiste oder ein im Beitrag platziertes "Audio-Hinweis"-Element aufgehoben werden.'
+            unmute:
+              label: "...bei Klick auf Video aufheben"
+              inline_help_html: "Der Klick auf das Video wird verwendet, um den Ton für den gesamten Beitrag zu aktivieren.<br /><br />Nach dem Klick können Atmo-Audios sowie der Ton nachfolgender Videos dann unmittelbar wiedergegeben werden.<br /><br />Wenn diese Option aktiviert ist, wird bei automatisch ohne Ton gestarteten Videos ein animierter Indikator angezeigt, der auf die Stummschaltung hinweist."
+            rewindOnUnmute:
+              label: "...und Video von vorne abspielen"
+              inline_help_html: "Verhindere, dass der Benutzer bei einem automatisch ohne Ton gestarteten Video wichtige Inhalte verpasst.<br /><br />Alternativ kann dem Video eine Ton-Ersatz-Textspur hinzugefügt werden. Diese wird automatisch gezeigt solange der Beitrag stummgeschaltet ist."

data/entry_types/scrolled/config/locales/new/inline_loops.en.yml

@@ -0,0 +1,26 @@
+en:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        inlineVideo:
+          attributes:
+            playbackMode:
+              label: "Playback Mode"
+              values:
+                manual: "Manual"
+                autoplay: "Autoplay"
+                loop: "Loop"
+              inline_help_html: "Determines how the video starts:<ul><li><strong>Manual:</strong> When the user clicks the video.</li><li><strong>Autoplay:</strong> When the video is scrolled to the center of the browser viewport.</li><li><strong>Loop:</strong> In an endless loop soon as it becomes visible.</li></ul>"
+            hideControlBar:
+              label: "Hide controls"
+              inline_help: "For short videos where there is no need to seek."
+              inline_help_disabled: 'Controls are always hidden for videos with playback mode "Loop".'
+            unmuteLabel:
+              label: "Unmute entry"
+              inline_help_html: 'By default browsers only allow autoplaying videos with sound after a user interaction. To still be able to autoplay videos, entries therefore start muted.<br /><br />Sound can be activated using the speaker icon in the navigation bar or via an "Audio notice" element that has been placed in the entry.'
+            unmute:
+              label: "...when user clicks video"
+              inline_help_html: "The click is used to activate sound for the whole entry.<br /><br />After the click, atmo audios and audio of following video elements can then immediately be played.<br /><br />If this option is active, the video element displays an animated indicator icon when autoplaying without sound."
+            rewindOnUnmute:
+              label: "...and play from the beginning"
+              inline_help_html: "Prevent users from missing important content when videos are autoplayed without sound.<br /><br />Alternatively, you can add an audio replacement text track to the video. It will be displayed automatically as long as the entry is muted."

data/entry_types/scrolled/config/locales/new/portrait_inline_image.de.yml

@@ -0,0 +1,9 @@
+de:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        inlineImage:
+          attributes:
+            portraitId:
+              label: Bild (Hochkant)
+              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.

data/entry_types/scrolled/config/locales/new/portrait_inline_image.en.yml

@@ -0,0 +1,9 @@
+en:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        inlineImage:
+          attributes:
+            portraitId:
+              label: Image (Portrait)
+              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.

data/entry_types/scrolled/config/locales/new/section_width.de.yml

@@ -0,0 +1,10 @@
+de:
+  pageflow_scrolled:
+    editor:
+      edit_section:
+        attributes:
+          width:
+            label: "Laufweite"
+            values:
+              wide: "Breit"
+              narrow: "Schmal"

data/entry_types/scrolled/config/locales/new/section_width.en.yml

@@ -0,0 +1,10 @@
+en:
+  pageflow_scrolled:
+    editor:
+      edit_section:
+        attributes:
+          width:
+            label: "Width"
+            values:
+              wide: "Wide"
+              narrow: "Narrow"

data/entry_types/scrolled/config/locales/new/typography_variants.de.yml

@@ -0,0 +1,7 @@
+de:
+  pageflow_scrolled:
+    editor:
+      common_content_element_attributes:
+        typographyVariant:
+          label: Variante
+          blank: (Standard)

data/entry_types/scrolled/config/locales/new/typography_variants.en.yml

@@ -0,0 +1,7 @@
+en:
+  pageflow_scrolled:
+    editor:
+      common_content_element_attributes:
+        typographyVariant:
+          label: Variant
+          blank: (Default)

data/entry_types/scrolled/config/locales/new/video_embed_poster.de.yml

@@ -0,0 +1,8 @@
+de:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        videoEmbed:
+          attributes:
+            posterId:
+              label: Poster

data/entry_types/scrolled/config/locales/new/video_embed_poster.en.yml

@@ -0,0 +1,8 @@
+en:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        videoEmbed:
+          attributes:
+            posterId:
+              label: Poster

data/entry_types/scrolled/config/locales/new/waveform_styles.de.yml

@@ -0,0 +1,11 @@
+de:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        inlineAudio:
+          attributes:
+            playerControlVariant:
+              values:
+                waveform: "Waveform (Fein)"
+                waveformBars: "Waveform (Balken)"
+                waveformLines: "Waveform (Linien)"

data/entry_types/scrolled/config/locales/new/waveform_styles.en.yml

@@ -0,0 +1,12 @@
+en:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        inlineAudio:
+          attributes:
+            playerControlVariant:
+              label: "Waveform Style"
+              values:
+                waveform: "Waveform (Fein)"
+                waveformBars: "Waveform (Bars)"
+                waveformLines: "Waveform (Lines)"

data/entry_types/scrolled/config/locales/new/widgets.de.yml

@@ -0,0 +1,6 @@
+de:
+  pageflow:
+    widgets:
+      roles:
+        footer: "Footer"
+        header: "Header"

data/entry_types/scrolled/config/locales/new/widgets.en.yml

@@ -0,0 +1,6 @@
+en:
+  pageflow:
+    widgets:
+      roles:
+        footer: "Footer"
+        header: "Header"

data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb

@@ -2,6 +2,8 @@ module PageflowScrolled
   module Generators
     # @api private
     class InstallGenerator < Rails::Generators::Base
+      CUSTOM_THEME_ICONS = [:information, :muted, :share, :unmuted].freeze
+
       desc 'Installs Pageflow Scrolled entry type.'
 
       source_root File.expand_path('templates', __dir__)
@@ -17,6 +19,8 @@ module PageflowScrolled
       end
 
       def theme_plugin
+        @custom_theme_icons = CUSTOM_THEME_ICONS.inspect
+
         # Ruby files in the lib directory are eager loaded in
         # production. This includes template files in
         # lib/generators. Template file extension (.tt) is removed by
@@ -34,6 +38,12 @@ module PageflowScrolled
                          before: "module.exports = environment\n") do
           "environment.config.merge(require('pageflow/config/webpack'))\n" \
           "environment.config.merge(require('pageflow-scrolled/config/webpack'))\n\n" \
+          "// Allow loading only chunks of used widgets. runtimeChunk 'single'\n" \
+          "// ensures that modules are only evaluated once which is important\n" \
+          "// for modules with side effects.\n" \
+          "environment.splitChunks((config) =>\n" \
+          "  Object.assign({}, config, { optimization: { runtimeChunk: 'single' }})\n" \
+          ")\n\n" \
           "// Opt into future default behavior of Webpacker [1] to work around\n" \
           "// problems with Video.js DASH service worker.\n" \
           "//\n" \
@@ -71,6 +81,9 @@ module PageflowScrolled
 
       def frontend_pack
         create_file 'app/javascript/packs/pageflow-scrolled-frontend.js', <<-JS
+          import 'pageflow-scrolled/frontend/index.css';
+          import 'pageflow-scrolled/contentElements-frontend.css';
+
           import 'pageflow-scrolled/frontend';
           import 'pageflow-scrolled/contentElements-frontend';
 
@@ -82,13 +95,16 @@ module PageflowScrolled
         create_file 'app/javascript/packs/pageflow-scrolled-server.js', <<-JS
           import 'pageflow-scrolled/frontend-server';
           import 'pageflow-scrolled/contentElements-frontend';
+          import 'pageflow-scrolled/widgets/defaultNavigation';
         JS
       end
 
-      def theme_pack
-        create_file 'app/javascript/packs/pageflow-scrolled-theme.css', <<-JS
-          @import "pageflow-scrolled/frontend/index.css";
-          @import "pageflow-scrolled/contentElements-frontend.css";
+      def default_navigation_widget_packs
+        widget_dir = 'app/javascript/packs/pageflow-scrolled/widgets'
+
+        create_file File.join(widget_dir, 'defaultNavigation.js'), <<-JS
+          import 'pageflow-scrolled/widgets/defaultNavigation';
+          import 'pageflow-scrolled/widgets/defaultNavigation.css';
         JS
       end
 
@@ -100,7 +116,15 @@ module PageflowScrolled
       end
 
       def default_theme
-        directory 'theme', 'app/javascript/pageflow-scrolled/themes/default'
+        theme_dir = 'app/javascript/pageflow-scrolled/themes/default'
+        icons_src_dir = PageflowScrolled::Engine.root.join('package/src/frontend/icons')
+
+        directory 'theme', theme_dir
+
+        CUSTOM_THEME_ICONS.each do |icon|
+          copy_file icons_src_dir.join("#{icon}.svg"),
+                    File.join(theme_dir, "icons/#{icon}.svg")
+        end
       end
     end
   end

data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/themes_plugin.rb.tt

@@ -6,18 +6,20 @@ class ScrolledThemesPlugin
                            stylesheet_packs: ['fonts/sourceSansPro'],
                            font_family: {
                              entry: '"Source Sans Pro", sans-serif',
-                             navigation: '"Source Sans Pro", sans-serif'
+                             widget: '"Source Sans Pro", sans-serif'
                            },
+                           custom_theme_icons: <%= @custom_theme_icons %>,
                            colors: {
                              accent: '#e10028',
-                             navigation: {
+                             widget: {
                                surface: '#fff',
                                on_surface: '#000',
-                               primary_on_surface: '#00375a',
-                               secondary_on_surface: '#c2c2c2',
+                               primary: '#00375a',
+                               on_primary: '#fff',
+                               secondary: '#c2c2c2',
+                               on_seconday: '#000',
                                background: 'rgba(255, 255, 255, 0.95)',
-                               on_background: '#000',
-                               primary_on_background: '#00375a'
+                               on_background: '#000'
                              }
                            },
                            logo_alt_text: 'Pageflow',

data/entry_types/scrolled/lib/pageflow_scrolled/additional_packs.rb

@@ -0,0 +1,37 @@
+module PageflowScrolled
+  # Register additonal Webpacker packs to be loaded in entries.
+  class AdditionalPacks
+    # @api private
+    def initialize
+      @packs = []
+    end
+
+    # content_element_type_names option only takes effect for frontend
+    # packs.
+    def register(path, content_element_type_names: [])
+      @packs << AdditionalPack.new(path, content_element_type_names)
+    end
+
+    # @api private
+    def content_element_type_names
+      @packs
+        .flat_map(&:content_element_type_names)
+        .uniq
+    end
+
+    # @api private
+    def paths
+      @packs.map(&:path)
+    end
+
+    # @api private
+    def paths_for_content_element_types(type_names)
+      @packs.reject { |pack|
+        (pack.content_element_type_names & type_names).empty?
+      }.map(&:path)
+    end
+
+    # @api private
+    AdditionalPack = Struct.new(:path, :content_element_type_names)
+  end
+end