pageflow 15.7.1 → 15.8.0

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

@@ -1,6 +1,48 @@
 en:
+  pageflow:
+    datawrapper_chart_embed_opt_in:
+      feature_name: Opt-in for Datawrapper embeds
+    defaultNavigation:
+      widget_type_name: Default navigation
+    editor:
+      widgets:
+        attributes:
+          defaultNavigation:
+            fixedOnDesktop:
+              inline_help: |
+                By default, the navigation are hidden when the page is
+                scrolled. Use this option to prevent hiding the
+                navigation bar in desktop layout. To safe space, the
+                navigation is still always hidden when the page is
+                scrolled in phone layout.
+              label: Keep expanded in desktop layout
+            hideSharingButton:
+              label: Hide share button
+            hideToggleMuteButton:
+              label: Hide unmute button
+    frontend_v2:
+      feature_name: Frontend v2
+    iframe_embed_content_element:
+      feature_name: iframe embed content element
+    ui:
+      configuration_editor:
+        tabs:
+          defaultNavigation: Default navigation
   pageflow_scrolled:
     editor:
+      backdrop_effects:
+        blur:
+          label: Blur
+        brightness:
+          label: Brightness
+        contrast:
+          label: Contast
+        grayscale:
+          label: Grayscale
+        saturate:
+          label: Saturate
+        sepia:
+          label: Sepia
       blank_entry:
         create_chapter: Click <em>New chapter</em> to create your first chapter.
         create_content_element: Use the <em>Plus buttons</em> inside the preview to add text blocks and other elements.
@@ -29,6 +71,23 @@ en:
             right: Floated right
             sticky: Sticky
             wide: Wide
+        typographyVariant:
+          blank: "(Default)"
+          label: Variant
+        variant:
+          blank: "(Default)"
+          label: Variant
+      content_element_categories:
+        basic:
+          name: Basic
+        data:
+          name: Data and Diagrams
+        interactive:
+          name: Interactive
+        links:
+          name: Links
+        media:
+          name: Media
       content_elements:
         dataWrapperChart:
           attributes:
@@ -43,6 +102,7 @@ en:
             url:
               inline_help: URL of a chart published via Datawrapper. Datawrapper offers a special 'Pageflow' layout selectable on the 'Design' tab for optimal display inside Pageflow.
               label: Chart URL
+          description: Embedded chart created with Datawrapper
           name: DataWrapper Chart
           tabs:
             general: Chart
@@ -66,6 +126,7 @@ en:
           back: Back
           confirm_delete: Are you sure you want to delete this element?
           confirm_delete_link: Are you sure you want to delete this link?
+          description: A collection of links to external websites
           destroy: Delete
           name: External links
           outline: Outline
@@ -76,9 +137,83 @@ en:
           attributes:
             children:
               label: Text
+            hyphens:
+              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.
+              label: Hyphenation
+              values:
+                auto: Automatic
+                manual: Manual
+            textSize:
+              inline_help: |
+                By default, a heading in the first section of the
+                entry is large. Headings in later sections have small
+                text size.
+              label: Text size
+              values:
+                auto: "(Auto)"
+                large: Large
+                medium: Medium
+                small: Small
+          description: Entry or chapter title
+          help_texts:
+            shortcuts: |
+              <dl class="shortcuts">
+                <dt>
+                  <span class="shortcut">
+                    <kbd>Alt</kbd> + <kbd>Enter</kbd>
+                  </span>
+                  <span class="inline_help">
+                    Specify potential line break points within long words
+                    to control hyphenation.
+                  </span>
+                </dt>
+                <dd>
+                  Insert soft hyphen
+                </dd>
+              </dl>
           name: Heading
           tabs:
             general: Heading
+        iframeEmbed:
+          attributes:
+            aspectRatio:
+              label: Aspect Ratio
+              values:
+                narrow: Landscape (4:3)
+                portrait: Portrait (9:16)
+                square: Square (1:1)
+                wide: Landscape (16:9)
+            portraitAspectRatio:
+              blank: "(Default)"
+              label: Aspect Ratio (Portrait)
+              values:
+                narrow: Landscape (4:3)
+                portrait: Portrait (9:16)
+                square: Square (1:1)
+                wide: Landscape (16:9)
+            scale:
+              label: Scale
+              values:
+                p100: 100%
+                p33: 33%
+                p50: 50%
+                p75: 75%
+            source:
+              label: URL
+            title:
+              inline_help: Used by screen readers to describe the chart as a whole.
+              label: Title
+          description: Embed externally hosted websites
+          name: iframe Embed
+          tabs:
+            general: iframe Embed
         inlineAudio:
           attributes:
             atmoDuringPlayback:
@@ -92,14 +227,18 @@ en:
               label: Audio
             playerControlVariant:
               inline_help: Choose the style of player controls.
-              label: Player Controls
+              label: Waveform Style
               values:
                 classic: Classic
+                waveform: Waveform (Fein)
+                waveformBars: Waveform (Bars)
+                waveformLines: Waveform (Lines)
             posterId:
               label: Poster
             waveformColor:
               inline_help: Color of the waveform's parts that represents the already played part of the audio.
               label: Waveform Color
+          description: Player or waveform with controls
           name: Inline Audio
           tabs:
             general: Inline Audio
@@ -123,6 +262,7 @@ en:
             slider_color:
               inline_help: You can configure slider color (incl. slider handle) freely. Make sure that the slider can be seen clearly on every position over the entire Before/After area.
               label: Slider Color
+          description: Compare to images using a slider
           name: Before/After
           tabs:
             general: Before/After
@@ -130,6 +270,10 @@ en:
           attributes:
             id:
               label: Image
+            portraitId:
+              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)
+          description: Display an image
           name: Inline Image
           tabs:
             general: Inline Image
@@ -142,21 +286,92 @@ en:
                 mute: Mute
                 play: Keep playing
                 turnDown: Keep playing at lower volume
+            hideControlBar:
+              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".
+              label: Hide controls
             id:
               label: Video
+            playbackMode:
+              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>
+              label: Playback Mode
+              values:
+                autoplay: Autoplay
+                loop: Loop
+                manual: Manual
             posterId:
               label: Poster
+            rewindOnUnmute:
+              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.
+              label: "...and play from the beginning"
+            unmute:
+              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.
+              label: "...when user clicks video"
+            unmuteLabel:
+              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.
+              label: Unmute entry
+          description: Player with controls
           name: Inline Video
           tabs:
             general: Inline Video
+        question:
+          attributes:
+            expandByDefault:
+              inline_help: Display answer initially.
+              label: Expand by default
+          description: Expand to reveal an answer
+          name: Question/Answer
+          tabs:
+            general: Question/Answer
         soundDisclaimer:
+          description: Make sure users unmute before continuing
           name: Audio Notice
           tabs:
             general: Audio Notice
         textBlock:
+          description: Text with lists, block quotes and sub-headings
+          help_texts:
+            shortcuts: |
+              <dl class="shortcuts">
+                <dt>
+                  <span class="shortcut">
+                    <kbd>Shift</kbd> + <kbd>Enter</kbd>
+                  </span>
+                  <span class="inline_help">
+                    Insert a new line without beginning a new paragraph.
+                  </span>
+                </dt>
+                <dd>
+                  Insert soft break/new line
+                </dd>
+                <dt>
+                  <span class="shortcut">
+                    <kbd>Alt</kbd> + <kbd>Enter</kbd>
+                  </span>
+                  <span class="inline_help">
+                    Specify potential line break points within long words
+                    to control hyphenation.
+                  </span>
+                </dt>
+                <dd>
+                  Insert soft hyphen
+                </dd>
+              </dl>
           name: Text Block
           tabs:
             general: Text Block
+        twitterEmbed:
+          attributes:
+            hideConversation:
+              label: Hide Conversation
+            hideMedia:
+              label: Hide Media
+            url:
+              label: Tweet URL
+          description: Embed content from Twitter
+          name: Tweet
+          tabs:
+            general: Twitter Embed
         videoEmbed:
           attributes:
             aspectRatio:
@@ -166,14 +381,24 @@ en:
                 portrait: Portrait (9:16)
                 square: Square
                 wide: Landscape 16:9
+            atmoDuringPlayback:
+              inline_help: Choose which way the atmo shall behave during playback of the video embed.
+              label: Atmo During Playback
+              values:
+                mute: Mute
+                play: Keep playing
+                turnDown: Keep playing at lower volume
             hideControls:
               inline_help: Hides the player controls if possible (depends on the videos provider and configuration). The video can be played and paused via click.
               label: Hide controls
             hideInfo:
               inline_help: Hides the video title and author info inside the embed if possible (depends on the videos provider and configuration).
               label: Hide title in embed
+            posterId:
+              label: Poster
             videoSource:
               label: Video-URL
+          description: Embed a video from YouTube, Vimeo or Facebook
           name: Video Embed
           tabs:
             general: Video-Embed
@@ -185,6 +410,7 @@ en:
               label: Initial Pitch
             initialYaw:
               label: Initial Yaw
+          description: Interactive panorama using an image with rectangular projection
           name: 360° Image
       edit_chapter:
         attributes:
@@ -254,26 +480,37 @@ en:
             inline_help: This setting controls the position of the scrolling foreground layer of the section on desktop devices. On mobile devices the foreground layer will automatically become centered.
             label: Content alignment
             values:
+              center: Centered
+              centerRagged: Centered (Ragged)
               left: Left
               right: Right
           staticShadowOpacity:
             inline_help: Intensity of the shadow displayed behind text when section content and motif area fit side by side or no motif area has been specified. For left or right aligned content, the shadow has the form of a horizontal gradient. When "Content alignment" is set to "Center", the shadow is displayed as a translucent layer behind the text.
             label: Static shadow
+          width:
+            label: Width
+            values:
+              narrow: Narrow
+              wide: Wide
         edit_motif_area: Select motif area...
         tabs:
           section: Section
       edit_section_transition:
         attributes:
           transition:
+            default_transition: Used as default for new sections
             inline_help: This setting defines the transition when scrolling from the previous section to the current. The different settings have specific effects concerning the behaviors of background and foreground. The effects "Cross-Fade All" and "Cross-Fade Backgrounds" are only available if the "Use Full Viewport-Height" option has been enabled in the settings of both adjacent sections.
             label: Effect
+            mark_as_default_transition: Use as default for new sections
             values:
               beforeAfter: Scrolling with static Backgrounds
-              fade: Also fade section content
-              fadeBg: Cross Fade
+              fade: Cross Fade
               reveal: Reveal
               scroll: Scroll
               scrollOver: Scroll Over
+            variants:
+              fade: Also fade content of sections
+              fadeBg: Fade only section backgrounds
         confirm_destroy: |-
           Really delete this section including ALL its elements?
 
@@ -281,6 +518,9 @@ en:
         save_error: There was an error while saving this section.
         tabs:
           transition: Transition
+      effect_list_input:
+        add: Add effect...
+        remove: Remove
       entry_outline:
         add_chapter: New chapter
         header: Outline
@@ -291,6 +531,18 @@ en:
       section_item:
         drag_hint: Drag to move section
         save_error: There was an error while saving this section.
+      select_link_destination:
+        cancel: Cancel
+        create: Create
+        enter_url: Use external URL as destination
+        header: Create link
+        open_in_new_tab: Open in new tab
+        or: or
+        select_chapter_or_section: Select chapter or section as destination
+      selectable_chapter_item:
+        title: Select chapter
+      selectable_section_item:
+        title: Select section
     help_entries:
       content_elements:
         menu_item: Content Elements
@@ -394,87 +646,24 @@ en:
         after: Insert new element below
         before: Insert new element above
       insert_link: Insert link
+      link_tooltip:
+        chapter_number: Chapter %{number}
+        opens_in_new_tab: Opens in new tab
+        opens_in_same_tab: Outside editor, will open in same tab
+        visit_chapter: Go to chapter
+        visit_section: Go to section
       remove_link: Remove link
       select_content_element: Select element
       select_section: Select section
+      type_answer: Type answer text
       type_heading: Heading
+      type_question: Type question text
       type_text: Type some text
       type_title: Title
       url_placeholder: Type or paste URL
     public:
-      chart:
-        default_title: Interactive chart
-      enter_fullscreen: Fullscreen
-      exit_fullscreen: Exit fullscreen
-      image_rights: Image rights
-      js_required: Please activate JavaScript to make this website display correctly.
-      languages:
-        ar: Arabic
-        cs: Czech
-        de: German
-        dk: Danish
-        el: Greek
-        en: English
-        es: Spanish
-        fi: Finnish
-        fr: French
-        fy: Frisian
-        hi: Hindi
-        it: Italian
-        ja: Japanese
-        lb: Letzeburgesch
-        nb: Norsk Bokmål
-        nl: Dutch
-        nn: Norsk Nynorsk
-        'no': Norsk
-        pl: Polish
-        pt: Portuguese
-        rm: Romansh
-        ru: Russian
-        se: Northern Sami
-        sr: Serbian
-        sv: Swedish
-        tr: Turkish
-        unknown: "(Unknown)"
-        zh: Chinese
-      navigation:
-        chapter: Chapter %{number}
-        close_mobile_menu: close chapter overview
-        legal_info: Imprint
-        mute: Mute sound
-        open_mobile_menu: Open chapter overview
-        share: Share
-        unmute: Unmute sound
-      navigation_skip_links:
-        content: To the content
-      player_controls:
-        pause: Pause
-        play: Play
-        progress: 'Timeline. Current time: %{currentTime}. Duration: %{duration}'
-        quality: Quality
-        text_tracks: Subtitles
-      sound_disclaimer:
-        help_muted: This site works best with sound turned on. Click here to activate sound.
-        help_unmuted: Sound can be muted again using the speaker icon in the navigation.
-      text_track_modes:
-        auto: Auto (%{label})
-        auto_off: Auto (Off)
-        none: false
       third_party_consent:
-        confirm: Okay
         opt_in_prompt:
-          datawrapper: I agree with being shown Datawrapper graphs.
-        opt_out:
-          prompt: To opt out of displaying external embeds, change your settings %{link}.
-          prompt_link: here
-      unsupported_browser: This website uses features that your browser doesn't support. Please upgrade to a recent version of your browser.
-      video_qualities:
-        annotations:
-          4k: 4K
-          fullhd: HD
-          medium: HD
-        labels:
-          4k: 2160p
-          auto: Auto
-          fullhd: 1080p
-          medium: 720p
+          twitter: I agree with being shown content from Twitter.
+      twitter:
+        default_title: Tweet

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

@@ -15,7 +15,7 @@ module PageflowScrolled
     #     )
     #
     # @return [AdditionalPacks]
-    # @since edge
+    # @since 15.7
     attr_reader :additional_frontend_packs
 
     # Load additional Webpacker packs in editor.
@@ -27,7 +27,7 @@ module PageflowScrolled
     #     )
     #
     # @return [AdditionalPacks]
-    # @since edge
+    # @since 15.7
     attr_reader :additional_editor_packs
 
     # Provide additional seed data for custom widgets and content
@@ -41,7 +41,7 @@ module PageflowScrolled
     #     )
     #
     # @return [AdditionalSeedData]
-    # @since edge
+    # @since 15.7
     attr_reader :additional_frontend_seed_data
 
     def initialize(*)

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

@@ -20,6 +20,20 @@ module PageflowScrolled
         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('frontend_v2')
+
+        c.additional_frontend_seed_data.register(
+          'frontendVersion',
+          FRONTEND_VERSION_SEED_DATA
+        )
+      end
+    end
+
+    FRONTEND_VERSION_SEED_DATA = lambda do |request:, entry:, **|
+      if request.params[:frontend] == 'v2' || entry.feature_state('frontend_v2')
+        2
+      else
+        1
       end
     end
   end

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

@@ -6,7 +6,7 @@ module PageflowScrolled
   # `pageflow-scrolled/widgets/<name>Theme.css` to define cutom
   # styles.
   #
-  # @since edge
+  # @since 15.7
   class ReactWidgetType < Pageflow::WidgetType
     def initialize(role:, name:)
       @role = role

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

@@ -0,0 +1,11 @@
+module PageflowScrolled
+  WebAppManifest = lambda do |entry|
+    EntriesController.renderer.render(
+      partial: 'manifest',
+      formats: 'json',
+      locals: {
+        theme: entry.theme
+      }
+    )
+  end
+end

data/entry_types/scrolled/lib/pageflow_scrolled.rb

@@ -13,9 +13,11 @@ module PageflowScrolled
                               configuration: PageflowScrolled::Configuration,
                               editor_fragment_renderer: editor_fragment_renderer,
                               editor_app: PageflowScrolled::Engine,
+                              web_app_manifest: PageflowScrolled::WebAppManifest,
                               theme_files: {
                                 logo_mobile: LOGO_OPTIONS,
-                                logo_desktop: LOGO_OPTIONS
+                                logo_desktop: LOGO_OPTIONS,
+                                **FAVICONS
                               })
     end
 
@@ -37,4 +39,40 @@ module PageflowScrolled
       end
     end
   }.freeze
+
+  FAVICONS = {
+    favicon: {
+      content_type: %r{\Aimage/svg\+xml\z},
+      styles: {original: {}}
+    },
+    favicon_png: {
+      content_type: %r{\Aimage/},
+      styles: {
+        w16: {
+          geometry: '16x16#',
+          format: 'png'
+        },
+        w32: {
+          geometry: '32x32#',
+          format: 'png'
+        },
+        w180: {
+          geometry: '180x180#',
+          format: 'png'
+        },
+        w192: {
+          geometry: '192x192#',
+          format: 'png'
+        },
+        w512: {
+          geometry: '512x512#',
+          format: 'png'
+        }
+      }
+    },
+    favicon_ico: {
+      content_type: %r{\Aimage/vnd.microsoft.icon\z},
+      styles: {original: {}}
+    }
+  }.freeze
 end

data/entry_types/scrolled/lib/tasks/pageflow_scrolled/storybook.rake

@@ -31,9 +31,10 @@ namespace :pageflow_scrolled do
           Paperclip::Storage::S3.class_eval { def flush_writes; end }
         end
 
-        account = seeds.account(name: 'Storybook seed') do |account_in_progress|
+        account = seeds.account(name: 'storybook-seed') do |account_in_progress|
           account_in_progress.features_configuration =
-            account_in_progress.features_configuration.merge('scrolled_entry_type' => true)
+            account_in_progress.features_configuration.merge('scrolled_entry_type' => true,
+                                                             'frontend_v2' => true)
         end
 
         seeds.sample_scrolled_entry(