pageflow 13.0.0.beta6 → 13.0.0.beta7

data/app/models/concerns/pageflow/uploaded_file.rb

@@ -46,5 +46,14 @@ module Pageflow
     def file_type
       Pageflow.config.file_types.find_by_model!(self.class)
     end
+
+    def cache_key
+      # Ensure the cache key changes when the state changes. There are
+      # cases during processing where the state is updated multiple
+      # times in a single second. Since `cache_key` relies on
+      # `updated_at`, which only is acurate to the second, we need to
+      # prevent caching outdated information.
+      "#{super}-#{state}"
+    end
   end
 end

data/app/models/pageflow/draft_entry.rb

@@ -35,8 +35,8 @@ module Pageflow
       entry.title
     end
 
-    def create_file(model, attributes)
-      file = model.create(attributes.except(:configuration)) do |f|
+    def create_file!(model, attributes)
+      file = model.create!(attributes.except(:configuration)) do |f|
         f.entry = entry
       end
 

data/app/models/pageflow/image_file.rb

@@ -13,26 +13,16 @@ module Pageflow
                large: ['1920x1920>', :JPG],
                ultra: ['3840x3840>', :JPG],
                panorama_medium: ['1024x1024^', panorama_format],
-               panorama_large: ['1920x1080^', panorama_format],
-               panorama_mask: ['1920x1080^', panorama_format])
+               panorama_large: ['1920x1080^', panorama_format])
     end
 
-    SOURCE_FILE_OPTIONS = {
-      # Prevent anti aliasing. Otherwise, when processing color map
-      # images, borders between areas are blurred.
-      panorama_mask: '-filter point'
-    }.freeze
-
-    palette_path = File.expand_path('../../../../lib/pageflow/images/palette.png', __FILE__)
-
     CONVERT_OPTIONS = {
       print: '-quality 10 -interlace Plane',
       medium: '-quality 70 -interlace Plane',
       large: '-quality 70 -interlace Plane',
       ultra: '-quality 90 -interlace Plane',
-      panorama_medium: '-quality 70 -interlace Plane',
-      panorama_large: '-quality 70 -interlace Plane',
-      panorama_mask: "-quality 70 -interlace Plane -dither None -colors 64 -remap #{palette_path}"
+      panorama_medium: '-quality 90 -interlace Plane',
+      panorama_large: '-quality 90 -interlace Plane'
     }.freeze
 
     has_attached_file(:unprocessed_attachment,
@@ -42,9 +32,10 @@ module Pageflow
                       Pageflow.config.paperclip_s3_default_options
                         .merge(default_url: ':pageflow_placeholder',
                                styles: STYLES,
-                               source_file_options: SOURCE_FILE_OPTIONS,
                                convert_options: CONVERT_OPTIONS))
 
+    validates :attachment, presence: true
+
     do_not_validate_attachment_file_type(:unprocessed_attachment)
     do_not_validate_attachment_file_type(:processed_attachment)
 
@@ -84,12 +75,6 @@ module Pageflow
       end
     end
 
-    def panorama_mask_url
-      if processed_attachment.present?
-        attachment.url(:panorama_mask)
-      end
-    end
-
     private
 
     def save_image_dimensions

data/app/models/pageflow/image_file_css_background_image_urls.rb

@@ -0,0 +1,17 @@
+module Pageflow
+  # @api private
+  class ImageFileCssBackgroundImageUrls
+    def call(image_file)
+      {
+        default: {
+          desktop: image_file.attachment.url(:large),
+          mobile: image_file.attachment.url(:medium)
+        },
+        panorama: {
+          desktop: image_file.attachment.url(:panorama_large),
+          mobile: image_file.attachment.url(:panorama_medium)
+        }
+      }
+    end
+  end
+end

data/app/models/pageflow/video_file_css_background_image_urls.rb

@@ -0,0 +1,13 @@
+module Pageflow
+  # @api private
+  class VideoFileCssBackgroundImageUrls
+    def call(video_file)
+      {
+        default: {
+          desktop: video_file.poster.url(:large),
+          mobile: video_file.poster.url(:medium)
+        }
+      }
+    end
+  end
+end

data/app/views/pageflow/editor/asset_urls/_asset_urls.json.jbuilder

@@ -0,0 +1,4 @@
+json.help do
+  json.phone_horizontal_slideshow_mode \
+    image_path('pageflow/editor/help/phone_horizontal_slideshow_mode.gif')
+end

data/app/views/pageflow/editor/entries/seed.json.erb

@@ -16,5 +16,7 @@
   "page_types": <%= page_type_json_seeds(@entry_config) %>,
   "themes": <%= theme_json_seeds(@entry_config) %>,
 
-  "common": <%= common_entry_seed(@entry).to_json.html_safe %>
+  "common": <%= common_entry_seed(@entry).to_json.html_safe %>,
+
+  "asset_urls": <%= editor_asset_urls %>
 }

data/app/views/pageflow/editor/image_files/_image_file.json.jbuilder

@@ -1,3 +1,3 @@
-json.(image_file, :width, :height, :panorama_url, :panorama_mask_url)
+json.(image_file, :width, :height, :panorama_url)
 
 json.dimensions(file_dimensions(image_file))

data/app/views/pageflow/entries/_indicators.html.erb

@@ -1,11 +1,16 @@
 <% if theme.has_scroll_back_indicator? %>
-  <div class="scroll_back_indicator scroll_indicator indicator" data-direction="up">
+  <div class="scroll_back_indicator scroll_indicator indicator" data-direction="back">
     <%= t('pageflow.public.scroll_back_indicator') %>
   </div>
 <% end %>
 
-<div class="scroll_next_indicator scroll_indicator indicator" data-direction="down">
-  <%= t('pageflow.public.scroll_indicator') %>
+<div class="scroll_next_indicator scroll_indicator indicator" data-direction="next">
+  <span class="scroll_indicator-scroll">
+    <%= t('pageflow.public.scroll_indicator') %>
+  </span>
+  <span class="scroll_indicator-swipe">
+    <%= t('pageflow.public.swipe_to_continue') %>
+  </span>
 </div>
 
 <div class="hidden_text_indicator indicator">

data/app/views/pageflow/entries/edit.html.erb

@@ -19,7 +19,7 @@
     <div class="notifications_container"></div>
     <div class="container"></div>
   </div>
-  <div class="help_button_container"></div>
+  <div class="sidebar_footer_container"></div>
 </sidebar>
 
 <div class="dialog_container">

data/app/views/pageflow/entries/show.css.erb

@@ -1,24 +1,10 @@
 <%= cache @entry do %>
-
-    <% page_media_breakpoints.each do |style, condition| %>
-      <%= media_query(condition) do %>
-        <% @entry.image_files.each do |image_file| %>
-          <%= background_image_lazy_loading_css_class('image', image_file) %> {
-            background-image: url('<%= image_file.attachment.url(style) %>');
-          }
-          <%= background_image_lazy_loading_css_class('image_panorama', image_file) %> {
-            background-image: url('<%= image_file.attachment.url("panorama_#{style}") %>');
-          }
-        <% end %>
-
-        <% @entry.video_files.each do |video_file| %>
-          <%= background_image_lazy_loading_css_class('video_poster', video_file) %> {
-            background-image: url('<%= video_file.poster.url(style) %>');
-          }
-        <% end %>
-      <% end %>
+  <% page_media_breakpoints.each do |breakpoint_name, condition| %>
+    <%= media_query(condition) do %>
+      <%= file_background_images_css(@entry, breakpoint_name) %>
     <% end %>
+  <% end %>
 
-    <%= file_thumbnails_css(@entry) %>
-    <%= render 'pageflow/entries/theming' %>
+  <%= file_thumbnails_css(@entry) %>
+  <%= render 'pageflow/entries/theming' %>
 <% end %>

data/app/views/pageflow/file_background_images/_rule.css.erb

@@ -0,0 +1,3 @@
+<%= background_image_lazy_loading_css_class(rule[:prefix], rule[:file]) %> {
+  background-image: url('<%= rule[:url] %>');
+}

data/config/initializers/features.rb

@@ -6,4 +6,5 @@ Pageflow.configure do |config|
     feature_config.help_entries.register('pageflow.help_entries.storylines', priority: 7)
   end
   config.features.register('selectable_themes')
+  config.features.register('editor_emulation_mode')
 end

data/config/locales/de.yml

@@ -757,7 +757,6 @@ de:
         no_entries: Keine Beiträge
         no_members: Keine Benutzer
         theming_defaults_inline_help: Die folgenden Einstellungen werden als Standard für neue Beiträge des Kontos verwendet. Änderungen wirken sich nicht auf existierende Beiträge aus.
-        widgets_inline_help: DELETED
       entries:
         add_folder: Ordner hinzufügen
         confirm_depublish: Soll der Beitrag wirklich depubliziert werden?
@@ -1116,6 +1115,9 @@ de:
             column_header: Sprache
             inline_help_html: "<ul><li>Die Sprache einer Textspur wird als Zwei-Buchstaben-Code nach ISO 639.1 angegeben.</li> <li><strong>Beispiele:</strong> 'de' für Deutsch oder 'en' für Englisch.</li> <li>Den Sprachcode findet man meist auf der Wikipedia-Seite zur jeweiligen Sprache.</li></ul>"
             label: Sprache
+      phone_horizontal_slideshow_mode:
+        page_transitions_inline_help: "<br /><br />Unter 'Titel und Optionen > Erscheinungsbild' sind horizontale Steuerungsgesten für Smartphones aktiviert. Vertikale Seitenübergänge (z.B. von unten nach oben) ändern sich im Phone-Layout automatisch in horizontale Übergangseffekte (z.B. von rechts nach links) und umgekehrt."
+        widget_type_info_box_text: "<p>Auf Smartphones mit horizontalen Wisch-Gesten zwischen Seiten wechseln.</p><p>Vertikale Seitenübergänge (z.B. von unten nach oben) ändern sich in horizontale Übergangseffekte (z.B. von rechts nach links) und umgekehrt.</p><p>Im Desktop-Layout und auf Tablets hat die Einstellung keine Auswirkung.</p>"
       quotas:
         loading: Quotas überprüfen...
       templates:
@@ -1190,6 +1192,13 @@ de:
         embedded:
           page_link:
             reset: Zurücksetzen
+        emulation_mode_button:
+          desktop: Desktop
+          disabled_hint: Von diesem Seitentyp nicht unterstützt
+          header: 'Vorschau Modus:'
+          phone: Phone
+        entry_preview:
+          navigation_disabled_hint: Seitenwechsel sind innerhalb der Phone Vorschau nicht möglich.
         file_item:
           cancel: Abbrechen
           confirm: Überprüfen und bestätigen
@@ -1221,10 +1230,6 @@ de:
           title: Hilfe
         help_button:
           open_help: Hilfe anzeigen
-        inputs:
-          reference:
-            edit: DELETED
-            reset: DELETED
         list_blank_slate:
           text: "(Keine Einträge)"
         list_item:
@@ -1310,14 +1315,11 @@ de:
             Dieser Schritt kann nicht rückgängig gemacht werden.
         edit_entry_view:
           cannot_publish: Sie sind nicht berechtigt diesen Beitrag zu veröffentlichen.
-        edit_page_link_view:
-          default_page_transition: "(Standard)"
         edit_page_view:
           confirm_destroy: Seite wirklich löschen?
         edit_storyline_view:
           cannot_destroy: Nur leere Erzählstränge können gelöscht werden.
           confirm_destroy: Erzählstrang wirklich löschen?
-          default_parent_page_transition: "(Standard)"
         editor_views:
           files_pending_warning: Es werden noch Dateien hochgeladen. Wenn Sie die Seite verlassen werden die Uploads abgebrochen.
           hide_editor: Editorleiste ausblenden
@@ -1354,6 +1356,8 @@ de:
         storylines_picker_view:
           label: Erzählstrang
           without_parent_page: Ohne übergeordnete Seite
+    editor_emulation_mode:
+      feature_name: Editor Phone Emulationsmodus
     entry:
       duplicated_title: Kopie von %{title}
     help_entries:
@@ -1686,6 +1690,7 @@ de:
     page_transitions:
       crossfade: Überblenden
       cut: Harter Schnitt
+      default: "(Standard)"
       fade: Hintergrund Blenden/Vordergrund Scrollen
       fade_to_black: Schwarzblende
       scroll: Scrollen
@@ -1731,6 +1736,7 @@ de:
           general: Allgemein
           links: Verweise
           options: Optionen
+          phone_horizontal_slideshow_mode: Horizontales Wischen auf Phones
           social: Social
           widgets: Erscheinungsbild
       inline_help:
@@ -1812,6 +1818,8 @@ de:
             url_hint: URL muss mit http:// beginnen.
             url_hint_https: URL muss mit http:// oder https:// beginnen.
     unauthorized: Sie sind nicht berechtigt diese Seite anzuzeigen.
+    unmute_button:
+      widget_type_name: "'Ton ein'-Button"
     user_mailer:
       invitation:
         ending: Dankeschön und viel Spaß,
@@ -1834,14 +1842,18 @@ de:
       none: "(Kein)"
       roles:
         analytics: Zählpixel
+        background_media_control: Hintergrund-Media-Control
         cookie_notice: Cookie Hinweis
         mobile_navigation: Mobile Navigation
         navigation: Navigationsleiste
         player_controls: Player Controls
+        slideshow_mode: Steuerungsgesten
       type_names:
         classic_player_controls: Klassisch
         default_mobile_navigation: Navigationsmenü mit Thumbnails
         default_navigation: Navigationsleiste mit Thumbnails
+        default_slideshow_mode: Vertikales Scrollen/Wischen
+        phone_horizontal_slideshow_mode: Horizontales Wischen auf Phones
         slim_player_controls: Minimalistisch
   support:
     array:

data/config/locales/en.yml

@@ -757,13 +757,12 @@ en:
         no_entries: No Stories
         no_members: No members
         theming_defaults_inline_help: The following settings will be used as defaults for new entries in this account. Changes do not affect existing entries.
-        widgets_inline_help: DELETED
       entries:
         add_folder: Add folder
-        confirm_depublish: Unpublish this story?
+        confirm_depublish: Depublish this story?
         confirm_duplicate: Duplicate this story?
         confirm_restore: Restore story to the selected version? A snapshot will be created, so that you can roll back later.
-        depublish: Unpublish story
+        depublish: Depublish story
         duplicate: Copy Story
         edit: Edit
         edit_config: Edit configuration
@@ -1116,6 +1115,9 @@ en:
             column_header: Language
             inline_help_html: "<ul><li>The language used in a text track is specified as a two letter code according to ISO 639.1.</li> <li><strong>Examples:</strong> 'en' for English or 'fr' for French.</li> <li>Language codes are often given on the Wikipedia page of a language.</li></ul>"
             label: Language
+      phone_horizontal_slideshow_mode:
+        page_transitions_inline_help: "<br /><br />Horizontal control gestures on phone have been enabled under 'Title and options > Appearance'. On phones, vertical page transitions (i.e. from bottom to top) are automatically turned into horizontal transitions (i.e. from right to left) and vice versa."
+        widget_type_info_box_text: "<p>Change current page using horizontal swipe gestures on phones.</p><p>Vertical page transitions (i.e. from bottom to top) are automatically turned into horizontal transitions (i.e. from right to left) and vice versa.</p><p>In desktop layout and on tablets the setting does not take any effect.</p>"
       quotas:
         loading: Checking quotas...
       templates:
@@ -1190,6 +1192,13 @@ en:
         embedded:
           page_link:
             reset: Reset
+        emulation_mode_button:
+          desktop: Desktop
+          disabled_hint: Not supported by this page type
+          header: 'Preview mode:'
+          phone: Phone
+        entry_preview:
+          navigation_disabled_hint: Page changes not possible in phone preview.
         file_item:
           cancel: Cancel
           confirm: Confirm
@@ -1221,10 +1230,6 @@ en:
           title: Help
         help_button:
           open_help: Open help
-        inputs:
-          reference:
-            edit: DELETED
-            reset: DELETED
         list_blank_slate:
           text: "(No items)"
         list_item:
@@ -1310,14 +1315,11 @@ en:
             This operation cannot be undone.
         edit_entry_view:
           cannot_publish: You do not have sufficient rights to publish this entry.
-        edit_page_link_view:
-          default_page_transition: "(Default)"
         edit_page_view:
           confirm_destroy: Really delete this page?
         edit_storyline_view:
           cannot_destroy: Only empty storylines can be deleted.
           confirm_destroy: Really delete storyline
-          default_parent_page_transition: "(Default)"
         editor_views:
           files_pending_warning: You are currently uploading files. All uploads will be canceled if you leave this page.
           hide_editor: Hide editor panel
@@ -1354,6 +1356,8 @@ en:
         storylines_picker_view:
           label: Storyline
           without_parent_page: Without parent page
+    editor_emulation_mode:
+      feature_name: Editor phone emulation mode
     entry:
       duplicated_title: Copy of %{title}
     help_entries:
@@ -1564,7 +1568,7 @@ en:
           click on a page type on the left column.
       publishing:
         menu_item: Publishing
-        text: "# Publishing\n\nClick on the „Publish“ button to publish your Pageflow. A\nPageflow can be published at any point in time. \n\nBesides this, there is the possibility to publish Pageflows with \na password protection. Just activate „Protect with password“. \nPageflow uses the name of the account as user name and \nautomatically generates a password, which can be changed afterwords. \n\nAlready published stories can also be protected with a password by \npublishing another version - the other way round works as well. \nFor this please just click on the „Publishing“ button. The following \nsteps will then be shown and explained within the dialog window.\n\nPublished\nPageflows can also be unpublished manually at any time. If a\nPageflow has already been published, changes will not be\nshown until you publish your report again.  A Pageflow can\nonly be edited by one author at one time.\n\nThumbnail for embedding the Pageflow on external websites\nAfter publishing your Pageflow, the system generates a\nthumbnail, which can be embedded as an iframe to the\nhyperlink of another website. By means of the code, the size\nof the iframe can be adjusted. The minimum size is a height\n150px and a width of 220px."
+        text: "# Publishing\n\nClick on the „Publish“ button to publish your Pageflow. A\nPageflow can be published at any point in time. \n\nBesides this, there is the possibility to publish Pageflows with \na password protection. Just activate „Protect with password“. \nPageflow uses the name of the account as user name and \nautomatically generates a password, which can be changed afterwords. \n\nAlready published stories can also be protected with a password by \npublishing another version - the other way round works as well. \nFor this please just click on the „Publishing“ button. The following \nsteps will then be shown and explained within the dialog window.\n\nPublished\nPageflows can also be depublished manually at any time. If a\nPageflow has already been published, changes will not be\nshown until you publish your report again.  A Pageflow can\nonly be edited by one author at one time.\n\nThumbnail for embedding the Pageflow on external websites\nAfter publishing your Pageflow, the system generates a\nthumbnail, which can be embedded as an iframe to the\nhyperlink of another website. By means of the code, the size\nof the iframe can be adjusted. The minimum size is a height\n150px and a width of 220px."
       storylines:
         menu_item: Storylines
         text: "# Storylines\n\nIn addition to linear narrations from top to bottom, further storylines can be used as non linear excursions to enlarge upon parts of a story. A „Storyline“ consists of chapters and pages, which users scroll through. Distinguishable is the so called main storyline from further subordinate ones. The user starts off in the main storyline and can then navigate to different excursions.\n\nTo create such an excursion from the main storyline use one of the „Link“ pages (Mosaic, Collage, Hotspot) and create the desired connections via „Links“.\n\nBy choosing a „Parent page“ you can determine to which page users return after scrolling the storyline´s last page.\n\nTransitions to subordinate storylines are visually supported by a horizontal animation as the default setting for entering and leaving. \n\nStorylines are created by clicking onto the plus button next to the storyline menu. Thereby a new chapter opens automatically in which further pages can be added. \n\n\n### Parent pages\n\nIn every subordinate  storyline a „Parent page“ must be determined to define where users land when scrolling back.\n\nThis target page can be chosen by clicking on the pen symbol next to the storyline menu. When a „Parent page“ is defined, a back button will be shown automatically in the subordinate storyline that will always lead users back to the „Parent page“.\n\n\n### Chapter hierarchy\n\nThe use of more than one „subordinary“ storylines and the definition of „Parent pages“ leads to a chapter hierarchy as known from books:\n\n1. (Main storyline), 1.1. (Superior sub storyline), 1.1.1. (Subordinate sub storyline) and so on.\n\nThis hierarchy can be edited afterwards by clicking on the pen symbol next to the storyline menu. A subordinate storyline can be turned into the main storyline as well.\n\n\n### Scroll successors\n\nIf you want to lead users from a last page of a subordinate chapter (1.1.1) to another position than\nthe „Parent page“ (e.g. to 2.1) you can define a „Scroll successor“. Therefore click on the blue pen symbol within the storyline settings. As an example the following sequence might be imaginable: 1 -> 1.1 -> 1.1.1 -> 2.1\n\nAttention: While editing only the selected chapter will be shown in the sidebar. To switch to the other chapters click onto the storyline menu."
@@ -1658,6 +1662,7 @@ en:
     page_transitions:
       crossfade: Crossfade
       cut: Cut
+      default: "(Default)"
       fade: Fade
       fade_to_black: Fade to black
       scroll: Scroll
@@ -1703,6 +1708,7 @@ en:
           general: General
           links: Links
           options: Options
+          phone_horizontal_slideshow_mode: Horizontal swipe on phone
           social: Social
           widgets: Appearance
       inline_help:
@@ -1787,6 +1793,8 @@ en:
             url_hint: 'URL must start with http:// '
             url_hint_https: URL must start with http:// or https://
     unauthorized: You are not authorized to view this page.
+    unmute_button:
+      widget_type_name: Unmute button
     user_mailer:
       invitation:
         ending: Thank you and have fun,
@@ -1809,14 +1817,18 @@ en:
       none: "(none)"
       roles:
         analytics: Tracking
+        background_media_control: Background media control
         cookie_notice: Cookie Notice
         mobile_navigation: Mobile navigation
         navigation: Navigation bar
         player_controls: Player Controls
+        slideshow_mode: Control gestures
       type_names:
         classic_player_controls: Classic
         default_mobile_navigation: Navigation bar with thumbnails
         default_navigation: Navigation bar with thumbnails
+        default_slideshow_mode: Vertical scoll/swipe
+        phone_horizontal_slideshow_mode: Horizontal swipe on phone
         slim_player_controls: Minimal
   support:
     array:

data/config/routes.rb

@@ -55,6 +55,7 @@ Pageflow::Engine.routes.draw do
         resources :files,
                   path: 'files/:collection_name',
                   only: [:index, :create, :update, :destroy] do
+          post :empty, on: :collection, to: 'files#create'
           post :reuse, on: :collection
           post :retry, on: :member
         end