pageflow 15.4.0 → 15.5.0

data/app/models/pageflow/storyline.rb

@@ -10,15 +10,8 @@ module Pageflow
 
     has_many :pages, through: :chapters
 
-    delegate :entry, to: :revision
-
-    def copy_to(revision)
-      storyline = dup
-      revision.storylines << storyline
+    nested_revision_components :chapters
 
-      chapters.each do |chapter|
-        chapter.copy_to(storyline)
-      end
-    end
+    delegate :entry, to: :revision
   end
 end

data/app/views/pageflow/admin/initial_passwords/edit.html.erb

@@ -1,7 +1,8 @@
 <div id="login">
   <h2><%= render_or_call_method_or_proc_on(self, active_admin_application.site_title) %> - <%= title t('pageflow.initial_password.title') %></h2>
 
-  <%= devise_error_messages! %>
+  <%= render "devise/shared/error_messages", resource: resource %>
+
   <%= active_admin_form_for(resource, as: resource_name, url: admin_initial_password_path, html: { method: :put }) do |f|
     f.inputs do
       f.input :password

data/app/views/pageflow/themes/_theme.json.jbuilder

@@ -1,4 +1,4 @@
-json.(theme, :name)
+json.(theme, :name, :options)
 
 json.preview_image_url(image_url(theme.preview_image_path))
 json.preview_thumbnail_url(image_url(theme.preview_thumbnail_path))

data/config/initializers/revision_components.rb

@@ -0,0 +1,5 @@
+Pageflow.configure do |config|
+  # Can be moved to PageflowPaged::Plugin once Pageflow::Storyline has
+  # been renamed to PageflowPaged::Storyline.
+  config.revision_components.register(Pageflow::Storyline)
+end

data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/editor.js

@@ -2218,6 +2218,21 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
   function template$9(data) {
     var __p = '';
     __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<input type="text" />\n<div class="validation"></div>\n';
@@ -2260,24 +2275,32 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
       this.validate();
     },
     onChange: function onChange() {
-      var view = this;
-      this.saveDisplayProperty();
-      this.validate().done(function () {
-        view.save();
+      var _this = this;
+
+      this.validate().then(function () {
+        return _this.save();
+      }, function () {
+        return _this.saveDisplayProperty();
       });
     },
     saveDisplayProperty: function saveDisplayProperty() {
+      this.model.unset(this.options.propertyName, {
+        silent: true
+      });
       this.model.set(this.options.displayPropertyName, this.ui.input.val());
-      this.model.unset(this.options.propertyName);
     },
     save: function save() {
-      var view = this;
-      $.when(this.transformPropertyValue(this.ui.input.val())).then(function (value) {
-        view.model.set(view.options.propertyName, value);
+      var _this2 = this;
+
+      var value = this.ui.input.val();
+      $.when(this.transformPropertyValue(value)).then(function (transformedValue) {
+        var _this2$model$set;
+
+        _this2.model.set((_this2$model$set = {}, _defineProperty(_this2$model$set, _this2.options.displayPropertyName, value), _defineProperty(_this2$model$set, _this2.options.propertyName, transformedValue), _this2$model$set));
       });
     },
     load: function load() {
-      this.ui.input.val(this.model.get(this.options.displayPropertyName));
+      this.ui.input.val(this.model.has(this.options.displayPropertyName) ? this.model.get(this.options.displayPropertyName) : this.model.get(this.options.propertyName));
       this.onLoad();
     },
 
@@ -2912,7 +2935,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     };
   })();
 
-  function _defineProperty(obj, key, value) {
+  function _defineProperty$1(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value: value,
@@ -2947,7 +2970,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
 
       if (i % 2) {
         ownKeys(Object(source), true).forEach(function (key) {
-          _defineProperty(target, key, source[key]);
+          _defineProperty$1(target, key, source[key]);
         });
       } else if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
@@ -6409,7 +6432,8 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
 
         model.set(options.foreignKeyAttribute, parentModel.id);
       });
-      this.listenTo(parentModel, 'destroy', function () {
+      this.listenTo(parentModel, 'destroy dependentDestroy', function () {
+        this.invoke('trigger', 'dependentDestroy');
         this.clear();
       });
 
@@ -6825,7 +6849,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   function modelLifecycleTrackingView(_ref) {
     var classNames = _ref.classNames;
     return {
-      events: _defineProperty({}, "click .".concat(classNames.retryButton), function click() {
+      events: _defineProperty$1({}, "click .".concat(classNames.retryButton), function click() {
         editor.failures.retry();
         return false;
       }),

data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/frontend.js

@@ -4724,7 +4724,11 @@ this.pageflow_paged.frontend = (function (exports, jqueryUi, $, Backbone, _, Vid
       loop: options.loop,
       controls: options.controls,
       html5: {
-        nativeCaptions: !isAudio && browser.has('iphone platform')
+        nativeCaptions: !isAudio && browser.has('iphone platform'),
+        // Only used by pageflow-scrolled
+        vhs: {
+          useBandwidthFromLocalStorage: true
+        }
       },
       bufferUnderrunWaiting: true,
       fallbackToMutedAutoplay: !isAudio,
@@ -4830,7 +4834,8 @@ this.pageflow_paged.frontend = (function (exports, jqueryUi, $, Backbone, _, Vid
             loop = _ref$loop === void 0 ? false : _ref$loop,
             _ref$controls = _ref.controls,
             controls = _ref$controls === void 0 ? false : _ref$controls,
-            altText = _ref.altText;
+            altText = _ref.altText,
+            onRelease = _ref.onRelease;
         var player = undefined;
 
         if (!this.unAllocatedPlayers[playerType]) {
@@ -4858,6 +4863,7 @@ this.pageflow_paged.frontend = (function (exports, jqueryUi, $, Backbone, _, Vid
           player.updateMediaEventsContext(mediaEventsContextData);
           this.allocatedPlayers[playerType].push(player);
           player.playerId = playerId || this.allocatedPlayers[playerType].length;
+          player.releaseCallback = onRelease;
           return player;
         } else {
           console.log('no player found for allocation');
@@ -4883,6 +4889,11 @@ this.pageflow_paged.frontend = (function (exports, jqueryUi, $, Backbone, _, Vid
           player.poster('');
           clearTextTracks(player);
           this.unAllocatedPlayers[type].push(player);
+
+          if (player.releaseCallback) {
+            player.releaseCallback();
+            player.releaseCallback = null;
+          }
         }
       }
     }, {
@@ -5499,9 +5510,14 @@ this.pageflow_paged.frontend = (function (exports, jqueryUi, $, Backbone, _, Vid
     return new ChapterFilter(state$1.entryData);
   };
 
+  var readyDeferred = new $.Deferred();
+  var ready = readyDeferred.promise();
+
   var cookieNotice = {
     request: function request() {
-      events.trigger('cookie_notice:request');
+      ready.then(function () {
+        events.trigger('cookie_notice:request');
+      });
     }
   };
 
@@ -7026,9 +7042,6 @@ this.pageflow_paged.frontend = (function (exports, jqueryUi, $, Backbone, _, Vid
     });
   })($);
 
-  var readyDeferred = new $.Deferred();
-  var ready = readyDeferred.promise();
-
   (function ($) {
     var boundaries = {
       back: 'top',

data/entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb

@@ -4,5 +4,33 @@ module PageflowScrolled
     def scrolled_theme_asset_path(theme, path)
       asset_pack_path("media/pageflow-scrolled/themes/#{theme.name}/#{path}")
     end
+
+    def scrolled_theme_stylesheet_pack_tags(theme)
+      safe_join(theme.options.fetch(:stylesheet_packs, []).map do |pack|
+        stylesheet_pack_tag(pack, media: 'all')
+      end)
+    end
+
+    def scrolled_theme_properties_style_tag(theme)
+      declarations = [
+        scrolled_theme_deep_declarations(theme.options.fetch(:font_family, {}), 'font_family'),
+        scrolled_theme_deep_declarations(theme.options.fetch(:colors, {}), 'color')
+      ].flatten
+
+      content_tag('style', raw(":root {\n#{declarations.join("\n")}\n}\n"))
+    end
+
+    private
+
+    def scrolled_theme_deep_declarations(hash, suffix, prefix = [])
+      hash.flat_map do |key, value|
+        if value.is_a?(Hash)
+          scrolled_theme_deep_declarations(value, suffix, [*prefix, key])
+        else
+          name = [*prefix, key, suffix].join('_')
+          "--theme-#{name.dasherize}: #{value};"
+        end
+      end
+    end
   end
 end

data/entry_types/scrolled/app/models/pageflow_scrolled/chapter.rb

@@ -2,6 +2,7 @@ module PageflowScrolled
   class Chapter < Pageflow::ApplicationRecord
     include Pageflow::SerializedConfiguration
     include Pageflow::AutoGeneratedPermaId
+    include Pageflow::NestedRevisionComponent
 
     belongs_to :storyline, touch: true
     has_many :sections,
@@ -10,6 +11,8 @@ module PageflowScrolled
              inverse_of: :chapter
     has_many :content_elements, through: :sections
 
+    nested_revision_components :sections
+
     attr_accessor :revision # used on :create to lazily create storyline
     before_validation :ensure_storyline, on: :create
 
@@ -18,15 +21,6 @@ module PageflowScrolled
         .where(pageflow_scrolled_storylines: {revision_id: revision})
     end
 
-    def copy_to(storyline)
-      chapter = dup
-      storyline.chapters << chapter
-
-      sections.each do |section|
-        section.copy_to(chapter)
-      end
-    end
-
     private
 
     def ensure_storyline

data/entry_types/scrolled/app/models/pageflow_scrolled/content_element.rb

@@ -3,6 +3,7 @@ module PageflowScrolled
   class ContentElement < Pageflow::ApplicationRecord
     include Pageflow::SerializedConfiguration
     include Pageflow::AutoGeneratedPermaId
+    include Pageflow::NestedRevisionComponent
 
     belongs_to :section
 
@@ -11,10 +12,6 @@ module PageflowScrolled
         .where(pageflow_scrolled_storylines: {revision_id: revision})
     end
 
-    def copy_to(section)
-      section.content_elements << dup
-    end
-
     # @api private
     class Batch
       def initialize(section, items)

data/entry_types/scrolled/app/models/pageflow_scrolled/section.rb

@@ -2,6 +2,7 @@ module PageflowScrolled
   class Section < Pageflow::ApplicationRecord
     include Pageflow::SerializedConfiguration
     include Pageflow::AutoGeneratedPermaId
+    include Pageflow::NestedRevisionComponent
 
     belongs_to :chapter
     has_many :content_elements,
@@ -9,18 +10,11 @@ module PageflowScrolled
              dependent: :destroy,
              inverse_of: :section
 
+    nested_revision_components :content_elements
+
     def self.all_for_revision(revision)
       joins(chapter: {storyline: :revision})
         .where(pageflow_scrolled_storylines: {revision_id: revision})
     end
-
-    def copy_to(chapter)
-      section = dup
-      chapter.sections << section
-
-      content_elements.each do |content_element|
-        content_element.copy_to(section)
-      end
-    end
   end
 end

data/entry_types/scrolled/app/models/pageflow_scrolled/storyline.rb

@@ -26,14 +26,6 @@ module PageflowScrolled
              -> { reorder(CONTENT_ELEMENTS_ORDER) },
              through: :sections
 
-    def copy_to(revision)
-      storyline = dup
-      storyline.revision = revision
-      storyline.save!
-
-      chapters.each do |chapter|
-        chapter.copy_to(storyline)
-      end
-    end
+    nested_revision_components :chapters
   end
 end

data/entry_types/scrolled/app/views/pageflow_scrolled/entries/_global_notices.html.erb

@@ -0,0 +1,10 @@
+<div class="globalNotices">
+  <div class="unsupported">
+    <%= t('pageflow_scrolled.public.unsupported_browser') %>
+  </div>
+  <noscript>
+    <div>
+      <%= t('pageflow_scrolled.public.js_required') %>
+    </div>
+  </noscript>
+</div>

data/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb

@@ -6,7 +6,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700&display=swap" rel="stylesheet">
+    <%= scrolled_theme_stylesheet_pack_tags(@entry.theme) %>
+    <%= scrolled_theme_properties_style_tag(@entry.theme) %>
 
     <%= social_share_meta_tags_for(@entry) %>
     <%= meta_tags_for_entry(@entry) %>
@@ -15,7 +16,7 @@
 
     <%= javascript_include_tag 'pageflow_scrolled/legacy' %>
 
-    <%= stylesheet_pack_tag 'pageflow-scrolled-theme' %>
+    <%= stylesheet_pack_tag 'pageflow-scrolled-theme', media: 'all' %>
 
     <%= render_widget_head_fragments(@entry, scope: @widget_scope) %>
 
@@ -34,7 +35,9 @@
   <body>
     <%= structured_data_for_entry(@entry) unless @skip_structured_data %>
 
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <%= render 'pageflow_scrolled/entries/global_notices' %>
+
+    <div id="fullscreenRoot"></div>
     <div id="root"><%= render_scrolled_entry(@entry) unless @skip_ssr %></div>
 
     <div id='template-widget-container'>

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

@@ -28,6 +28,7 @@ de:
             left: Links eingerückt
             right: Rechts eingerückt
             sticky: Sticky
+            wide: Breit
       content_elements:
         dataWrapperChart:
           attributes:
@@ -183,6 +184,14 @@ de:
           name: Video Embed
           tabs:
             general: Video-Embed
+        vrImage:
+          attributes:
+            image:
+              label: 360°-Bild
+            initialPitch:
+              label: Initialer Gierungswinkel
+            initialYaw:
+              label: Initialer Neigungswinkel
       edit_chapter:
         attributes:
           summary:
@@ -583,6 +592,10 @@ de:
     public:
       chart:
         default_title: Interaktives Diagramm
+      enter_fullscreen: Vollbild
+      exit_fullscreen: Vollbild verlassen
+      image_rights: Bildrechte
+      js_required: Bitte aktivieren Sie JavaScript, um diese Website korrekt anzuzeigen.
       languages:
         ar: Arabisch
         cs: Tschechisch
@@ -643,6 +656,7 @@ de:
         opt_out:
           prompt: Um externe Dienste auszuschalten, %{link} klicken.
           prompt_link: hier
+      unsupported_browser: Diese Website verwendet Funktionen, die Ihr Browser nicht unterstützt. Bitte aktualisieren Sie Ihren Browser auf eine aktuelle Version.
       video_qualities:
         annotations:
           4k: 4K

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

@@ -28,6 +28,7 @@ en:
             left: Floated left
             right: Floated right
             sticky: Sticky
+            wide: Wide
       content_elements:
         dataWrapperChart:
           attributes:
@@ -183,6 +184,14 @@ en:
           name: Video Embed
           tabs:
             general: Video-Embed
+        vrImage:
+          attributes:
+            image:
+              label: 360° Image
+            initialPitch:
+              label: Initial Pitch
+            initialYaw:
+              label: Initial Yaw
       edit_chapter:
         attributes:
           summary:
@@ -368,55 +377,7 @@ en:
           The switch at the bottom of the sidebar next to the help button can be used to switch to the phone preview. This allows you to test how your entry looks and works in portrait format.
       sections:
         menu_item: Section Options
-        text: |-
-          # Section Options
-
-          A click in an empty area of a section will display a selection rectangle around the section. On the right side of the selection rectangle you will find a button with a pencil icon that allows you to edit the options of the section in the sidebar.
-
-          ## Layout
-
-          The **Foreground Positioning** option allows you to select how the contents of the section should be arranged horizontally. For example, if the background of the section is on the right side, text and content elements can be positioned on the left side and vice versa. For backgrounds in the total or a centred motif, the content elements can be positioned in the middle.
-
-          By selecting a **gradient function**, a sufficient contrast between text and background can be ensured. With the **shadow**, the background is darkened or lightened with a colour gradient. With the **Card** setting, the content elements are displayed on a surface with rounded corners.
-
-          ## Background
-
-          Either an **image**, a **colour** or a **video loop** can be displayed in the background of the section. For background images and video, the important (to be emphasised, essential) part of the image can be marked. This motif area is then initially not covered by the scrolling foreground in both desktop and mobile device displays. Further information about the "motif areas" here.
-
-          The **Background image (portrait)** option can be used to optionally specify an alternative image to be used if the screen aspect ratio of a terminal device is higher than wide, for example on smartphones and tablets in portrait mode. The image can be configured as an alternative to the background image in landscape mode, from which otherwise important parts might be cut off.
-
-          ## Atmo Audio
-
-          With the **"Atmo"**, each section can play sound in the background, regardless of the content element. It can be determined whether a sound can only be heard in one section or continues over several sections without interruption. Simply select the same audio file for the following sections under **Options** as Atmo. In this way chapters can be acoustically separated from each other and coherent pages can be interwoven more strongly.
-
-          When playing audio and video, you can also select whether the background sound should continue to play normally or more quietly during media playback, or whether it should fade out completely. The setting of the ambience sounds can be accessed on each page via the **Options** tab. If the atmosphere disturbs you while editing your entry in the editor, you can temporarily mute it with the key combination **Alt + a**. To reactivate the Atmo, simply press **Alt + a** again.
-
-
-          ## Transitions
-
-          For each section a transition effect to the next section can be selected.  The transition has a different effect on the background and the foreground.  To set the transition from the currently selected section to the next, **click in the background of the section** and then on the **arrow button** in the upper right corner. The following **transitions** are available
-
-          ## Crossfade
-
-          Soft fade from section A to section B.
-
-          ## Scroll in/out
-
-          Both sections are scrolled in and out.
-
-          ## Overlay
-
-          Section B overlays section A from below.
-
-          ## Expose
-
-          Section A moves up as you scroll and exposes the section B below.
-
-          ## Scrolling with static backgrounds
-
-          Section B scrolls over the static section A.
-
-          The selected setting always defines the transition from the previous to the currently selected section. The transition affects the background and foreground differently.  The **Cross-Fade All** and **Cross-Fade Background Only** effects are only available when the **Use Full Viewport-Height** option is enabled.
+        text: "# Section Options\n\nA click in an empty area of a section will display a selection rectangle around the section. On the right side of the selection rectangle you will find a button with a pencil icon that allows you to edit the options of the section in the sidebar.\n\n## Layout\n\nThe **Foreground Positioning** option allows you to select how the contents of the section should be arranged horizontally. For example, if the background of the section is on the right side, text and content elements can be positioned on the left side and vice versa. For backgrounds in the total or a centred motif, the content elements can be positioned in the middle.\n\nBy selecting a **gradient function**, a sufficient contrast between text and background can be ensured. With the **shadow**, the background is darkened or lightened with a colour gradient. With the **Card** setting, the content elements are displayed on a surface with rounded corners.\n\n## Background\n\nEither an **image**, a **colour** or a **video loop** can be displayed in the background of the section. For background images and video, the important (to be emphasised, essential) part of the image can be marked. This motif area is then initially not covered by the scrolling foreground in both desktop and mobile device displays. Further information about the \"motif areas\" here.\n\nThe **Background image (portrait)** option can be used to optionally specify an alternative image to be used if the screen aspect ratio of a terminal device is higher than wide, for example on smartphones and tablets in portrait mode. The image can be configured as an alternative to the background image in landscape mode, from which otherwise important parts might be cut off.\n\n## Atmo Audio\n\nWith the **\"Atmo\"**, each section can play sound in the background, regardless of the content element. It can be determined whether a sound can only be heard in one section or continues over several sections without interruption. Simply select the same audio file for the following sections under **Options** as Atmo. In this way chapters can be acoustically separated from each other and coherent pages can be interwoven more strongly.\n\nWhen playing audio and video, you can also select whether the background sound should continue to play normally or more quietly during media playback, or whether it should fade out completely. The setting of the ambience sounds can be accessed on each page via the **Options** tab. If the atmosphere disturbs you while editing your entry in the editor, you can temporarily mute it with the key combination **Alt + a**. To reactivate the Atmo, simply press **Alt + a** again.\n\n\n## Transitions\n\nA **transition effect** can be selected between every two sections. \nClick in the background of a section to select it. On the right side \nof the selection rectangle, buttons with two interlocking arrows as \nsymbols appear at the borders of the neighbouring sections. \n\nClick on one of the buttons to select the transition effect for the section \nborder in the sidebar.\n\nThe **Fade** effect is only available between sections for which the \n**Full Viewport Height** option has been activated.\n"
     inline_editing:
       add_content_element: Add new element
       cancel: Cancel
@@ -450,6 +411,10 @@ en:
     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
@@ -510,6 +475,7 @@ en:
         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