pageflow 17.0.5 → 17.1.0

data/entry_types/scrolled/config/routes.rb

@@ -1,25 +1,35 @@
 PageflowScrolled::Engine.routes.draw do
   scope module: 'editor' do
     shallow do
-      resources :chapters do
+      # Legacy path to support editor sessions that span the deploy that
+      # introduces the storylines resource above.
+      resources :chapters, only: [:create] do
         collection do
           put :order
         end
+      end
 
-        resources :sections do
+      resources :storylines, only: [] do
+        resources :chapters, only: [:create, :update, :destroy] do
           collection do
             put :order
           end
 
-          member do
-            post :duplicate
-          end
-
-          resources :content_elements do
+          resources :sections, only: [:create, :update, :destroy] do
             collection do
-              put :batch
               put :order
             end
+
+            member do
+              post :duplicate
+            end
+
+            resources :content_elements, only: [:create, :update, :destroy] do
+              collection do
+                put :batch
+                put :order
+              end
+            end
           end
         end
       end

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

@@ -11,10 +11,10 @@ module PageflowScrolled
       def initializer
         inject_into_file('config/initializers/pageflow.rb',
                          after: "Pageflow.configure do |config|\n") do
-          "  config.plugin(PageflowScrolled.plugin)\n\n" \
-          "  config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_config|\n" \
-          "    entry_type_config.plugin(ScrolledThemesPlugin.new)\n" \
-          "  end\n\n"
+          "  config.plugin(PageflowScrolled.plugin)\n\n  " \
+            "config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_config|\n    " \
+            "entry_type_config.plugin(ScrolledThemesPlugin.new)\n  " \
+            "end\n\n"
         end
       end
 
@@ -30,11 +30,11 @@ module PageflowScrolled
       end
 
       def install_packages
-        run 'yarn add css-loader style-loader' \
-            ' mini-css-extract-plugin css-minimizer-webpack-plugin' \
-            ' postcss postcss-preset-env postcss-loader' \
-            ' postcss-import postcss-url postcss-flexbugs-fixes' \
-            ' @fontsource/source-sans-pro'
+        run 'yarn add css-loader style-loader ' \
+            'mini-css-extract-plugin css-minimizer-webpack-plugin ' \
+            'postcss postcss-preset-env postcss-loader ' \
+            'postcss-import postcss-url postcss-flexbugs-fixes ' \
+            '@fontsource/source-sans-pro'
       end
 
       def webpack_config
@@ -76,7 +76,7 @@ module PageflowScrolled
               module: {
                 rules: [
                   {
-                    test: /\.(bmp|gif|jpe?g|png|tiff|ico|avif|webp|eot|otf|ttf|woff|woff2|svg|mp3)$/,
+                    test: /\\.(bmp|gif|jpe?g|png|tiff|ico|avif|webp|eot|otf|ttf|woff|woff2|svg|mp3)$/,
                     type: 'asset/resource'
                   }
                 ]
@@ -128,7 +128,7 @@ module PageflowScrolled
       def server_pack
         create_file 'app/javascript/packs/pageflow-scrolled-server.js', <<-JS
           import 'pageflow-scrolled/frontend-server';
-          import 'pageflow-scrolled/contentElements-frontend';
+          import 'pageflow-scrolled/contentElements-server';
           import 'pageflow-scrolled/widgets-server';
         JS
       end

data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoDarkVariantDesktop.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 -50 951.9 338.9" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#fff;}
+	.st1{fill:#fff;stroke:#fff;}
+</style>
+<title>Element 1</title>
+<g id="Ebene_2">
+	<g id="Ebene_1-2">
+		<path class="st0" d="M106.3,238.9l-86.7-86.7C-3.7,129-2,105.3,3.4,89.5c3.8-10.6,9.7-20.2,17.4-28.4l6.5,6.5
+			C20.5,74.8,15.3,83.4,12,92.8c-6.6,19.3-1.8,37.1,14,52.9l80.2,80.2l39.1-39.1l6.5,6.5L106.3,238.9z"/>
+		<path class="st0" d="M104.2,234.5c-23.2-23.2-21.8-46.8-16.5-62.4c3.6-10.5,9.4-20,17-28.1l42.3-42.3l6.5,6.5l-42.3,42.3
+			c-6.6,7.2-11.7,15.7-14.9,24.9c-6.3,19-1.5,36.8,14.3,52.6L104.2,234.5z"/>
+		<path class="st0" d="M61.3,193.9c-23.2-23.2-21.8-46.8-16.5-62.4c3.6-10.5,9.4-20,17-28.1l84-84l6.5,6.5l-84,84
+			c-6.6,7.2-11.7,15.7-14.9,24.9c-6.4,19.1-1.5,36.8,14.4,52.7L61.3,193.9z"/>
+		<path class="st0" d="M151.6,110.1l-6.5-6.5c6.7-7.2,11.8-15.7,15-25c6.4-19.1,1.6-36.9-14.3-52.7S112.1,5.4,92.6,12.2
+			C83.1,15.7,74.4,21,67,27.8L25.1,69.7l-6.5-6.5l41.9-41.9c8.3-7.8,18.1-13.8,28.8-17.7c16-5.6,39.9-7.5,63.1,15.8
+			s21.7,46.8,16.4,62.5C165.1,92.4,159.2,102,151.6,110.1z"/>
+		<path class="st0" d="M151.2,194l-6.5-6.5l3.2,3.2l-3.3-3.2c6.5-7.1,11.5-15.5,14.6-24.6c6.2-18.9,1.3-36.5-14.6-52.4l6.5-6.5
+			c23.2,23.2,21.9,46.6,16.8,62.1C164.5,176.5,158.7,186,151.2,194z"/>
+		<path class="st0" d="M102.2,69.6"/>
+		<path class="st0" d="M106.8,224.7"/>
+		<path class="st1" d="M239.2,70.9c0-1.8,0.9-2.8,2.7-2.8h24.5c14.1,0,24.3,9.2,24.3,23.7s-10.2,24.1-24.3,24.1H247V144
+			c0.2,1.4-0.8,2.6-2.2,2.8c-0.2,0-0.3,0-0.5,0H242c-1.8,0-2.7-1-2.7-2.8L239.2,70.9z M265.4,109c10.5,0,17.4-6.4,17.4-17.1
+			s-6.8-16.8-17.2-16.8H247V109H265.4z"/>
+		<path class="st1" d="M326.5,70.4c0.3-1.4,1.6-2.3,3-2.2h3.7c1.4-0.1,2.7,0.9,3,2.2l27.1,73.2c0.6,2-0.2,3.2-2.2,3.2h-2.5
+			c-1.5,0.1-2.8-0.8-3.1-2.2l-8.4-22.8h-31.5l-8.3,22.8c-0.3,1.4-1.7,2.4-3.1,2.2h-2.4c-2.1,0-2.9-1.2-2.4-3.2L326.5,70.4z
+			 M344.9,115l-10.4-28.5c-1.2-3.7-2.9-10.3-2.9-10.3h-0.2c0,0-1.8,6.6-3,10.3L317.8,115H344.9z"/>
+		<path class="st1" d="M449.2,130.2c-1.9,6.2-16.6,18-32.8,18c-21.6,0-38.6-17.4-38.6-40.6c0-22.9,17-40.7,39.7-40.7
+			c13.4,0,22.5,5.2,25.9,7.5c1.1,0.6,1.5,2.1,0.9,3.2c-0.1,0.2-0.3,0.4-0.4,0.6l-1,1.4c-0.6,1.2-2.1,1.6-3.3,1
+			c-0.2-0.1-0.3-0.2-0.5-0.3c-6.4-4-13.7-6.2-21.3-6.2c-19,0-31.9,14.7-31.9,33.2c0,19.2,13.3,33.6,31.2,33.6
+			c15.8,0,24.9-11.5,24.9-11.5v-13.2h-19.6c-1.5,0-2.8-1.3-2.8-2.8V112c0-1.5,1.3-2.8,2.8-2.8h24.1c1.5,0,2.7,1.2,2.7,2.7
+			c0,0,0,0,0,0L449.2,130.2"/>
+		<path class="st1" d="M474.2,70.9c0-1.8,0.9-2.8,2.7-2.8h38.8c1.4-0.2,2.6,0.9,2.8,2.3c0,0.2,0,0.4,0,0.5v1.3
+			c0.2,1.4-0.9,2.6-2.3,2.8c-0.2,0-0.4,0-0.5,0h-33.8v28.7H509c1.8,0,2.8,0.9,2.8,2.7v1.4c0.2,1.4-0.9,2.6-2.3,2.8
+			c-0.2,0-0.4,0-0.5,0h-27.1v29.2h35.8c1.4-0.2,2.6,0.9,2.8,2.3c0,0.2,0,0.4,0,0.5v1.3c0.2,1.4-0.9,2.6-2.3,2.8c-0.2,0-0.4,0-0.5,0
+			h-40.9c-1.8,0-2.7-1-2.7-2.8L474.2,70.9z"/>
+		<path class="st1" d="M543.5,70.9c0-1.8,0.9-2.8,2.7-2.8h35.9c1.4-0.2,2.6,0.9,2.8,2.3c0,0.2,0,0.4,0,0.5v1.3
+			c0.2,1.4-0.9,2.6-2.3,2.8c-0.2,0-0.4,0-0.5,0h-30.9v29.6h26.2c1.3-0.2,2.5,0.7,2.7,2c0,0.2,0,0.5,0,0.7v1.4c0,1.8-0.9,2.8-2.7,2.8
+			h-26.2V144c0.2,1.4-0.8,2.6-2.2,2.8c-0.2,0-0.3,0-0.5,0h-2.3c-1.8,0-2.7-1-2.7-2.8V70.9z"/>
+		<path class="st1" d="M606.6,70.9c0-1.8,0.9-2.8,2.7-2.8h2.3c1.4-0.1,2.6,0.9,2.7,2.3c0,0.2,0,0.3,0,0.5v68.9H648
+			c1.4-0.2,2.6,0.9,2.8,2.3c0,0.2,0,0.4,0,0.5v1.3c0.2,1.4-0.9,2.6-2.3,2.8c-0.2,0-0.4,0-0.5,0h-38.7c-1.8,0-2.7-1-2.7-2.8
+			L606.6,70.9z"/>
+		<path class="st1" d="M699.6,66.8c23.1,0,40.1,17.6,40.1,40.2c0,23.1-17,41.2-40.1,41.2S659.5,130,659.5,107
+			C659.5,84.4,676.6,66.8,699.6,66.8z M699.6,140.9c18.5,0,32-14.8,32-33.9c0-18.7-13.5-32.9-32-32.9s-32,14.2-32,32.9
+			C667.6,126.1,681.2,140.9,699.6,140.9z"/>
+		<path class="st1" d="M756.7,71.2c-0.5-1.9,0.5-3,2.5-3h2.5c1.5-0.1,2.8,1,3,2.5l14.7,58.7c1,4,1.8,8.4,1.8,8.4h0.2
+			c0,0,0.8-4.4,1.9-8.4l16.3-58.8c0.3-1.4,1.6-2.4,3-2.3h2.6c1.5-0.1,2.8,0.9,3,2.3l16.1,58.8c0.8,2.8,1.5,5.6,2,8.4h0.2
+			c0,0,0.7-4.4,1.7-8.4l15.3-58.7c0.2-1.5,1.5-2.5,3-2.5h2.5c1.9,0,2.9,1.1,2.3,3l-19.5,73.3c-0.3,1.5-1.6,2.5-3.1,2.4h-4.2
+			c-1.5,0.1-2.8-0.9-3.1-2.4l-14.5-53c-1.5-5-2.8-11.8-2.8-11.8h-0.3c0,0-1.3,6.7-2.8,11.8l-14.7,53c-0.3,1.4-1.6,2.4-3,2.4h-4.4
+			c-1.5,0.1-2.8-1-3-2.5L756.7,71.2z"/>
+	</g>
+</g>
+</svg>

data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoDarkVariantMobile.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-50 -50 272.07254 338.90793" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#fff;}
+</style>
+<title>Pageflow</title>
+<path class="st0" d="M106.3,238.9l-86.7-86.7C-3.7,129-2,105.3,3.4,89.5c3.8-10.6,9.7-20.2,17.4-28.4l6.5,6.5
+	C20.5,74.8,15.3,83.4,12,92.8c-6.6,19.3-1.8,37.1,14,52.9l80.2,80.2l39.1-39.1l6.5,6.5L106.3,238.9z"/>
+<path class="st0" d="M104.2,234.5c-23.2-23.2-21.8-46.8-16.5-62.4c3.6-10.5,9.4-20,17-28.1l42.3-42.3l6.5,6.5l-42.3,42.3
+	c-6.6,7.2-11.7,15.7-14.9,24.9c-6.3,19-1.5,36.8,14.3,52.6L104.2,234.5z"/>
+<path class="st0" d="M61.3,193.9c-23.2-23.2-21.8-46.8-16.5-62.4c3.6-10.5,9.4-20,17-28.1l84-84l6.5,6.5l-84,84
+	c-6.6,7.2-11.7,15.7-14.9,24.9c-6.4,19.1-1.5,36.8,14.4,52.7L61.3,193.9z"/>
+<path class="st0" d="M151.6,110.1l-6.5-6.5c6.7-7.2,11.8-15.7,15-25c6.4-19.1,1.6-36.9-14.3-52.7S112.1,5.4,92.6,12.2
+	C83.1,15.7,74.4,21,67,27.8L25.1,69.7l-6.5-6.5l41.9-41.9c8.3-7.8,18.1-13.8,28.8-17.7c16-5.6,39.9-7.5,63.1,15.8
+	s21.7,46.8,16.4,62.5C165.1,92.4,159.2,102,151.6,110.1z"/>
+<path class="st0" d="M151.2,194l-6.5-6.5l3.2,3.2l-3.3-3.2c6.5-7.1,11.5-15.5,14.6-24.6c6.2-18.9,1.3-36.5-14.6-52.4l6.5-6.5
+	c23.2,23.2,21.9,46.6,16.8,62.1C164.5,176.5,158.7,186,151.2,194z"/>
+<path class="st0" d="M102.2,69.6"/>
+<path class="st0" d="M106.8,224.7"/>
+</svg>

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

@@ -9,17 +9,32 @@ class ScrolledThemesPlugin
                              widget: '"Source Sans Pro", sans-serif'
                            },
                            custom_theme_icons: <%= @custom_theme_icons %>,
-                           colors: {
-                             accent: '#e10028',
-                             widget: {
-                               surface: '#fff',
-                               on_surface: '#000',
-                               primary: '#00375a',
-                               on_primary: '#fff',
-                               secondary: '#c2c2c2',
-                               on_seconday: '#000',
-                               background: 'rgba(255, 255, 255, 0.95)',
-                               on_background: '#000'
+                           properties: {
+                             root: {
+                               accent_color: '#e10028',
+                               widget_surface_color: '#fff',
+                               widget_on_surface_color: '#000',
+                               widget_primary_color: '#00375a',
+                               widget_on_primary_color: '#fff',
+                               widget_secondary_color: '#c2c2c2',
+                               widget_on_seconday_color: '#000',
+                               widget_background_color: 'rgb(255 255 255 / .95)',
+                               widget_on_background_color: '#000',
+                             },
+
+                             dark: {
+                               accent_color: '#ff8097',
+                               widget_surface_color: '#000',
+                               widget_surface_backdrop_blur: '5px',
+                               widget_surface_opacity: '70%',
+                               widget_on_surface_color: '#eee',
+                               widget_primary_color: '#fff',
+                               widget_on_primary_color: '#000',
+                               widget_background_color: 'rgb(0 0 0 / .65)',
+                               widget_background_backdrop_blur: '5px',
+                               widget_on_background_color: '#eee',
+                               default_navigation_separator_color: 'rgb(255 255 255 / .1)',
+                               default_navigation_progress_bar_background_color: 'rgb(0 0 0 / .5)',
                              }
                            },
                            logo_alt_text: 'Pageflow',

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

@@ -8,8 +8,14 @@ module PageflowScrolled
 
     # 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)
+    def register(path, content_element_type_names: [], stylesheet: false, if: nil, unless: nil)
+      @packs << AdditionalPack.new(
+        path,
+        content_element_type_names,
+        stylesheet,
+        binding.local_variable_get(:if),
+        binding.local_variable_get(:unless)
+      )
     end
 
     # @api private
@@ -20,19 +26,32 @@ module PageflowScrolled
     end
 
     # @api private
-    def paths
-      @packs.map(&:path)
+    def paths(entry)
+      packs_matching_conditions(entry).map(&:path)
     end
 
     # @api private
-    def paths_for_content_element_types(type_names)
-      @packs.reject { |pack|
+    def stylesheet_paths(entry)
+      packs_matching_conditions(entry).select(&:stylesheet).map(&:path)
+    end
+
+    # @api private
+    def paths_for_content_element_types(entry, type_names)
+      packs_matching_conditions(entry).reject { |pack|
         pack.content_element_type_names.present? &&
-          (pack.content_element_type_names & type_names).empty?
+          !pack.content_element_type_names.intersect?(type_names)
       }.map(&:path)
     end
 
     # @api private
-    AdditionalPack = Struct.new(:path, :content_element_type_names)
+    AdditionalPack = Struct.new(:path, :content_element_type_names, :stylesheet, :if, :unless)
+
+    private
+
+    def packs_matching_conditions(entry)
+      @packs
+        .select { |pack| !pack.if || pack.if.call(entry:) }
+        .select { |pack| !pack.unless || !pack.unless.call(entry:) }
+    end
   end
 end

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

@@ -20,7 +20,7 @@ module PageflowScrolled
     # @api private
     def for(entry, request, options = {})
       items_for_entry(entry, options).each_with_object({}) do |item, result|
-        result[item.name] = item.callable.call(entry: entry, request: request, foo: 1)
+        result[item.name] = item.callable.call(entry:, request:, foo: 1)
       end
     end
 

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

@@ -0,0 +1,27 @@
+module PageflowScrolled
+  # Register additional theme customization files that shall be
+  # included in theme assets seed data.
+  class AdditionalThemeAssets
+    # @api private
+    def initialize
+      @assets = []
+    end
+
+    # Register additional theme customization files and specify style
+    # that shall be used.
+    def register(theme_file_role:, theme_file_style: :resized)
+      @assets << AdditionalThemeAsset.new(
+        theme_file_role,
+        theme_file_style
+      )
+    end
+
+    # @api private
+    def each(&)
+      @assets.each(&)
+    end
+
+    # @api private
+    AdditionalThemeAsset = Struct.new(:theme_file_role, :theme_file_style)
+  end
+end

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

@@ -10,7 +10,7 @@ module PageflowScrolled
     # @example
     #
     #     config.additional_frontend_packs.register(
-    #       pageflow-scrolled/contentElements/some-pack',
+    #       'pageflow-scrolled/contentElements/some-pack',
     #       content_element_type_names: ['someType']
     #     )
     #
@@ -23,7 +23,7 @@ module PageflowScrolled
     # @example
     #
     #     config.additional_editor_packs.register(
-    #       pageflow-scrolled/contentElements/some-pack'
+    #       'pageflow-scrolled/contentElements/some-pack'
     #     )
     #
     # @return [AdditionalPacks]
@@ -36,14 +36,25 @@ module PageflowScrolled
     # @example
     #
     #     config.additional_frontend_seed_data.register(
-    #       pageflow-scrolled/contentElements/some-pack',
-    #       ->(entry, request) { {some: 'data'}}
+    #       'someData',
+    #       ->(entry:, request:, **) { {some: 'data'}}
     #     )
     #
     # @return [AdditionalSeedData]
     # @since 15.7
     attr_reader :additional_frontend_seed_data
 
+    # Include paths of additional theme customization files in theme
+    # assets seed data.
+    #
+    # @example
+    #
+    #     config.additional_theme_assets.register(theme_file_role: :footer_logo)
+    #
+    # @return [AdditionalThemeAssets]
+    # @since 17.1
+    attr_reader :additional_theme_assets
+
     # Determine which vendors a content element will require consent
     # for. Based on the vendor name returned here, the following
     # translations will be used in consent UI components.
@@ -142,6 +153,7 @@ module PageflowScrolled
       @additional_editor_packs = AdditionalPacks.new
 
       @additional_frontend_seed_data = AdditionalSeedData.new
+      @additional_theme_assets = AdditionalThemeAssets.new
       @content_element_consent_vendors = ContentElementConsentVendors.new
       @consent_vendor_host_matchers = {}
 

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

@@ -23,7 +23,7 @@ module PageflowScrolled
         next unless @callables[content_element.type_name]
 
         result[content_element.id] = @callables[content_element.type_name].call(
-          entry: entry,
+          entry:,
           configuration: content_element.configuration
         )
       }.compact

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

@@ -12,7 +12,14 @@ module PageflowScrolled
         c.file_types.register(Pageflow::BuiltInFileType.audio)
         c.file_types.register(Pageflow::BuiltInFileType.other)
 
-        c.revision_components.register(Storyline)
+        c.revision_components.register(Storyline, create_defaults: true)
+
+        ['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'),
@@ -27,12 +34,25 @@ module PageflowScrolled
         c.widget_types.register(ReactWidgetType.new(name: 'textInlineFileRights',
                                                     role: 'inlineFileRights'))
 
+        c.features.register('icon_scroll_indicator') do |feature_config|
+          feature_config.widget_types.register(
+            ReactWidgetType.new(name: 'iconScrollIndicator',
+                                role: 'scrollIndicator'),
+            default: true
+          )
+        end
+
         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('image_gallery_content_element')
         c.features.register('frontend_v2')
         c.features.register('scrolled_entry_fragment_caching')
+        c.features.register('backdrop_content_elements')
+        c.features.register('custom_palette_colors')
+        c.features.register('decoration_effects')
+        c.features.register('content_element_margins')
+        c.features.register('backdrop_size')
+        c.features.register('section_paddings')
 
         c.additional_frontend_seed_data.register(
           'frontendVersion',
@@ -52,9 +72,9 @@ module PageflowScrolled
       uri = URI.parse(configuration['source'])
       host_matchers = Pageflow.config_for(entry).consent_vendor_host_matchers
 
-      host_matchers.detect do |matcher, _|
+      host_matchers.detect { |matcher, _|
         uri.host =~ matcher
-      end&.last
+      }&.last
     rescue URI::InvalidURIError
       nil
     end

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

@@ -57,18 +57,18 @@ module PageflowScrolled
         video_files_by_name = create_files(draft_entry,
                                            :video,
                                            attributes.fetch(:video_files, {}),
-                                           options.fetch(:skip_encoding, false))
+                                           skip_encoding: options.fetch(:skip_encoding, false))
 
         audio_files_by_name = create_files(draft_entry,
                                            :audio,
                                            attributes.fetch(:audio_files, {}),
-                                           options.fetch(:skip_encoding, false))
+                                           skip_encoding: options.fetch(:skip_encoding, false))
 
         files_by_name = image_files_by_name.merge(video_files_by_name).merge(audio_files_by_name)
 
         # rewrite parent file references to actual ids
         text_tracks_by_name = attributes.fetch(:text_track_files, {})
-        text_tracks_by_name.each do |_name, text_track_config|
+        text_tracks_by_name.each_value do |text_track_config|
           parent_file = files_by_name.fetch(text_track_config['parent_file_id'])
           text_track_config['parent_file_id'] = parent_file.id
         end
@@ -92,14 +92,16 @@ module PageflowScrolled
       say("   sample scrolled entry '#{entry.title}'\n")
     end
 
-    def create_files(draft_entry, file_type, file_data_by_name, skip_encoding = false)
+    def create_files(draft_entry, file_type, file_data_by_name, skip_encoding: false)
       file_data_by_name.transform_values do |data|
         say("     creating #{file_type} file from #{data['url']}")
 
         file_state = %i[image text_track].include?(file_type) ? 'processed' : 'uploading'
+        uri = URI.parse(data['url'])
         file = draft_entry.create_file!(Pageflow::BuiltInFileType.send(file_type),
                                         state: file_state,
-                                        attachment: URI.parse(data['url']),
+                                        attachment: uri,
+                                        display_name: File.basename(uri.path, '*'),
                                         configuration: data['configuration'],
                                         parent_file_model_type: data['parent_file_model_type'],
                                         parent_file_id: data['parent_file_id'],
@@ -109,18 +111,18 @@ module PageflowScrolled
             file.update!(state: 'encoded')
             if file_type.eql?(:video)
               file.update!(output_presences: {
-                "dash-playlist" => true,
-                "hls-playlist" => true,
-                "dash-medium"=> true,
-                "hls-medium" => true,
-                "dash-high" => true,
-                "hls-high" => true,
-                "dash-low" => true,
-                "hls-low" => true,
-                "medium" => true,
-                "high" => true,
-                "low" => true
-              })
+                             'dash-playlist' => true,
+                             'hls-playlist' => true,
+                             'dash-medium' => true,
+                             'hls-medium' => true,
+                             'dash-high' => true,
+                             'hls-high' => true,
+                             'dash-low' => true,
+                             'hls-low' => true,
+                             'medium' => true,
+                             'high' => true,
+                             'low' => true
+                           })
             end
           else
             file.publish!
@@ -134,12 +136,12 @@ module PageflowScrolled
     def create_chapter(entry, chapter_config, position, files_by_name)
       section_configs = chapter_config.delete('sections') || []
       chapter = Chapter.create!(
-        revision: entry.draft,
+        storyline: Storyline.all_for_revision(entry.draft).first,
         configuration: {
           title: chapter_config['title'],
           summary: chapter_config['summary']
         },
-        position: position
+        position:
       )
 
       section_configs.each_with_index do |section_config, i|
@@ -154,9 +156,9 @@ module PageflowScrolled
                                %w[image imageMobile video],
                                files_by_name)
 
-      section = Section.create!(chapter: chapter,
+      section = Section.create!(chapter:,
                                 configuration: section_config,
-                                position: position)
+                                position:)
 
       content_element_configs.each_with_index do |content_element_config, i|
         create_content_element(section, content_element_config, i, files_by_name)
@@ -176,7 +178,7 @@ module PageflowScrolled
       section.content_elements.create!(
         type_name: content_element_config['type'],
         configuration: content_element_config['props'],
-        position: position
+        position:
       )
     end
 

data/entry_types/scrolled/lib/pageflow_scrolled.rb

@@ -11,7 +11,7 @@ module PageflowScrolled
       Pageflow::EntryType.new(name: 'scrolled',
                               frontend_app: PageflowScrolled::EntriesController.action(:show),
                               configuration: PageflowScrolled::Configuration,
-                              editor_fragment_renderer: editor_fragment_renderer,
+                              editor_fragment_renderer:,
                               editor_app: PageflowScrolled::Engine,
                               web_app_manifest: PageflowScrolled::WebAppManifest,
                               theme_files: {

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

@@ -29,6 +29,7 @@ namespace :pageflow_scrolled do
         if ENV['PAGEFLOW_SCROLLED_DB_SEED_SKIP_FILES'] == 'true'
           puts 'Skipping file uploads to S3.'
           Paperclip::Storage::S3.class_eval { def flush_writes; end }
+          Pageflow::DraftEntry.class_eval { def generate_file_name(file_name) = file_name }
         end
 
         account = seeds.account(name: 'storybook-seed') do |account_in_progress|
@@ -39,7 +40,7 @@ namespace :pageflow_scrolled do
         seeds.sample_scrolled_entry(
           attributes: {
             title: 'Storybook seed',
-            account: account,
+            account:,
             chapters: [],
             image_files: {
               turtle: {
@@ -119,8 +120,8 @@ namespace :pageflow_scrolled do
         end
 
         if args[:output_dir].blank?
-          puts 'Missing argument: Pass output directory via '\
-            '`rake pageflow_scrolled:storybook:seed:setup[some/directory]`'
+          puts 'Missing argument: Pass output directory via ' \
+               '`rake pageflow_scrolled:storybook:seed:setup[some/directory]`'
           exit 1
         end
 
@@ -150,8 +151,8 @@ namespace :pageflow_scrolled do
         end
 
         if args[:output_dir].blank?
-          puts 'Missing argument: Pass output directory via '\
-            '`rake pageflow_scrolled:storybook:seed:setup[some/directory]`'
+          puts 'Missing argument: Pass output directory via ' \
+               '`rake pageflow_scrolled:storybook:seed:setup[some/directory]`'
           exit 1
         end
 

data/entry_types/scrolled/package/config/webpack.js

@@ -7,8 +7,24 @@ module.exports = {
       // supported by the browser.
       'video.js$': 'video.js/core.es.js'
     },
+    fallback: {
+      // Silently ignore minimatch trying to load Node built-in module.
+      'path': false
+    }
   },
   entry: {
+    'pageflow-scrolled/contentElements/tikTokEmbed-frontend': {
+      import: [
+        'pageflow-scrolled/contentElements/tikTokEmbed-frontend',
+        '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',
@@ -32,6 +48,12 @@ module.exports = {
         'pageflow-scrolled/widgets/textInlineFileRights',
         'pageflow-scrolled/widgets/textInlineFileRights.css'
       ]
+    },
+    'pageflow-scrolled/widgets/iconScrollIndicator': {
+      import: [
+        'pageflow-scrolled/widgets/iconScrollIndicator',
+        'pageflow-scrolled/widgets/iconScrollIndicator.css'
+      ]
     }
   }
 };

data/entry_types/scrolled/package/contentElements/hotspots-frontend.css

@@ -0,0 +1 @@
+.PagerButton-module_button__1WPOu{height:var(--hotspots-scroll-button-height);padding:1rem;background-color:transparent;border:0;color:#fff;transition:opacity .2s linear,visibility .2s;pointer-events:auto;width:100%;box-sizing:border-box}.PagerButton-module_icon__346kq{display:flex;justify-content:center}.PagerButton-module_disabled__1SbjV{opacity:0;visibility:hidden}.PagerButton-module_button__1WPOu svg{transition:transform .2s ease;display:block;width:var(--theme-hotspts-scroll-button-size);height:var(--theme-hotspots-scroll-button-size);filter:drop-shadow(0 1px 4px #000);flex-shrink:0}.PagerButton-module_button__1WPOu:not(.PagerButton-module_disabled__1SbjV):active svg,.PagerButton-module_button__1WPOu:not(.PagerButton-module_disabled__1SbjV):hover svg{transform:scale(1.2)}.PagerButton-module_visuallyHidden__1Hrir{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.Pager-module_outer__2CrMo{display:grid;grid-template-columns:[left-start center-start] 1fr [left-end] 84% [right-start] 1fr [right-end center-end];justify-content:center;height:100%}.Pager-module_customMargin__1qTs3{grid-template-columns:[left-start] var(--content-margin) [left-end center-start] minmax(0,var(--content-max-width)) [right-start center-end] var(--content-margin) [right-end];--hotspots-scroll-button-height:100%}.Pager-module_left__2UmsW,.Pager-module_right__2Qn5W{grid-row:1;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;pointer-events:none}.Pager-module_left__2UmsW{grid-column:left-start/left-end}.Pager-module_right__2Qn5W{grid-column:right-start/right-end}.Pager-module_center__1nzq4{grid-column:center-start/center-end;grid-row:1;display:flex;flex-direction:column;justify-content:center;height:100%}.Scroller-module_scroller__b_jkV{overflow:hidden;overflow-x:auto;display:grid;grid-auto-columns:100%;grid-auto-flow:column;grid-template-rows:0 100%;scroll-snap-type:x mandatory;scrollbar-width:none}.Scroller-module_scroller__b_jkV::-webkit-scrollbar{display:none}.Scroller-module_sticky__1nSEO{position:sticky;top:0;left:0;width:100%;grid-column:1;grid-row:1}.Scroller-module_inner__XTNms{height:var(--hotspots-container-height);position:relative}.Scroller-module_step__1ar7Q{scroll-snap-align:start;scroll-snap-stop:always;grid-row:2}.Area-module_area__2uQD0,.Area-module_clip__TgtiP,.Area-module_outline__bRQqm{position:absolute;top:0;left:0;width:100%;height:100%}.Area-module_area__2uQD0{pointer-events:none}.Area-module_clip__TgtiP{pointer-events:auto;border:none;background-color:transparent;cursor:pointer}.Area-module_noPointerEvents__kLM1Z .Area-module_clip__TgtiP{pointer-events:none}.Area-module_outline__bRQqm{transition:opacity .25s}.Area-module_hidden__2SAnU{opacity:0}.Area-module_outline__bRQqm polygon{vector-effect:non-scaling-stroke;stroke-width:1px;stroke-linejoin:round;stroke:#fff;fill:transparent;opacity:.5}.Area-module_area__2uQD0.Area-module_highlighted__2hdr1 .Area-module_outline__bRQqm polygon{opacity:1}.ImageArea-module_area__3rqgC img{opacity:0;transition:opacity .2s linear}.ImageArea-module_activeImageVisible__oYKOK img{opacity:1}.Indicator-module_wrapper__2b1Mj{position:absolute;top:0;left:0;height:var(--hotspots-container-height);aspect-ratio:var(--hotspots-image-aspect-ratio);pointer-events:none;transform-origin:0 0}.Indicator-module_indicator__2A3-l{--size:15px;margin:calc(var(--size)/-2) 0 0 calc(var(--size)/-2);animation:Indicator-module_inner__2BgbL 2s infinite;pointer-events:none;z-index:1;transition:opacity 1s ease}.Indicator-module_hidden__3j1Re{opacity:0}.Indicator-module_indicator__2A3-l,.Indicator-module_indicator__2A3-l:before{position:absolute;top:0;left:0;width:var(--size);height:var(--size);border-radius:100%;background-color:var(--color,#fff)}.Indicator-module_indicator__2A3-l:before{content:"";animation:Indicator-module_outer__36JWr 2s infinite}@keyframes Indicator-module_inner__2BgbL{0%{transform:scale(1.3)}20%{transform:scale(1)}80%{transform:scale(1.3)}to{transform:scale(1.3)}}@keyframes Indicator-module_outer__36JWr{20%{transform:scale(1)}to{transform:scale(3);opacity:0}}.colors-module_contentColorScope__1s_JK{--theme-light-content-surface-color:var(--root-light-content-surface-color);--theme-dark-content-surface-color:var(--root-dark-content-surface-color);--theme-light-content-text-color:var(--root-light-content-text-color);--theme-dark-content-text-color:var(--root-dark-content-text-color)}.Tooltip-module_compositeItem__3QnpM{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.Tooltip-module_wrapper__3J6qG{height:var(--hotspots-container-height);aspect-ratio:var(--hotspots-image-aspect-ratio);transform-origin:0 0;position:relative}.Tooltip-module_reference__1qjnL{position:absolute;border:0;width:0;height:0;background:transparent;outline:none!important}.Tooltip-module_box__2MGMl{font-family:var(--theme-entry-font-family);box-sizing:border-box;padding:.75rem;border-radius:5px;--max-width:400px;--floating-padding:8% - 5px;max-width:min(100% - 2 * var(--floating-padding),var(--max-width))}.Tooltip-module_paddingForScrollButtons__3wFKp{--floating-padding:40px}.Tooltip-module_light__3H6Ii{background-color:var(--theme-light-content-surface-color,#fff);color:var(--theme-dark-content-text-color,#222);--content-text-color:var(--theme-dark-content-text-color,#222);--content-link-color:var(--theme-dark-content-link-color,var(--theme-content-link-color,currentColor));box-shadow:0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);--theme-link-button-on-surface-color:var(--theme-widget-primary-color)}.Tooltip-module_dark__2nDMy{background-color:var(--theme-dark-content-surface-color,#101010);color:var(--theme-light-content-text-color,#fff);--content-text-color:var(--theme-light-content-text-color,#fff);--content-link-color:var(--theme-light-content-link-color,var(--theme-content-link-color,currentColor));border:1px solid hsla(0,0%,100%,.05)}.Tooltip-module_light__3H6Ii>svg{fill:var(--theme-light-content-surface-color,#fff)}.Tooltip-module_dark__2nDMy>svg{fill:var(--theme-dark-content-surface-color,#101010)}.Tooltip-module_dark__2nDMy>svg path:first-of-type{stroke:hsla(0,0%,100%,.05)}.Tooltip-module_maxWidth-wide__3Vik_{--max-width:600px}.Tooltip-module_maxWidth-narrow__foMG0{--max-width:300px}.Tooltip-module_maxWidth-veryNarrow__1yS6L{--max-width:200px}.Tooltip-module_align-center__jRtdN{text-align:center}.Tooltip-module_align-right__2ezWZ{text-align:right}.Tooltip-module_minWidth__2iAip{min-width:200px}.Tooltip-module_box__2MGMl .Tooltip-module_imageWrapper__1BCEJ{position:relative;margin-bottom:1rem}.Tooltip-module_imageWrapper__1BCEJ img{display:block;max-width:100%;height:auto}.Tooltip-module_box__2MGMl h3,.Tooltip-module_box__2MGMl p{margin:0}.Tooltip-module_box__2MGMl h3{margin-bottom:.5rem}.Tooltip-module_box__2MGMl h3:last-child{margin-bottom:0}.Tooltip-module_box__2MGMl>:first-child .Tooltip-module_link__1xE5O,.Tooltip-module_textWrapper__Hc0qY>:first-child .Tooltip-module_link__1xE5O{margin-top:0}.Hotspots-module_tooltipsWrapper__3EEZA{position:relative}.Hotspots-module_clip__2wfxm{overflow:hidden}.Hotspots-module_stack__3Vpw6{display:grid;grid-auto-columns:100%;grid-auto-rows:100%;height:100%}.Hotspots-module_stack__3Vpw6>div{grid-row:1;grid-column:1}.Hotspots-module_letterboxBackground__3GNSI{filter:blur(20px) brightness(.7)}.Hotspots-module_wrapper__1TvVX{transform-origin:0 0;position:absolute;top:0;left:0;height:100%;aspect-ratio:var(--hotspots-image-aspect-ratio)}.Hotspots-module_wrapper__1TvVX>img{height:100%}.Hotspots-module_compositeItem__BZtU-{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}