pageflow 15.2.2 → 15.3.0

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

@@ -1,17 +1,173 @@
 en:
   pageflow_scrolled:
+    help_entries:
+      overview:
+        menu_item: Overview
+        text: |
+          # Overview
+
+          TODO
+      meta_data:
+        menu_item: Title and Options
+        text: |
+          # Title and Options
+
+          General settings for the entry. Please select a sub item on the left.
+      outline:
+        menu_item: Chapter, Sections, Content Elements
+        text: |
+          # Chapter, Sections, Content Elements
+
+          TODO
+
+      sections:
+        menu_item: Section Options
+        text: |
+          # Section Options
+
+          ## Layout
+
+          TODO
+
+          ## Background
+
+          TODO
+
+          ## Atmo Audio
+
+          TODO
+
+          ## Transitions
+
+          TODO
+      content_elements:
+        menu_item: Content Elements
+        text: |
+          # Content Elements
+
+          TODO
+      motif_area:
+        menu_item: Motif areas
+        text: |
+          # Motif areas
+
+          By specifying a motif area of an image, you can tell
+          Pageflow which part of the image is most important. For
+          example, for a portrait this could be the face of the
+          depicted person.
+
+          When the image is then used as the background of a section,
+          Pageflow tries to make sure the reader has an undisturbed view  can actually see this
+          part of the image.
+
+          1. If the image cannot be displayed uncropped (e.g. because
+             it has landscape format while the entry is being viewed
+             on a phone in portrait orientation), the background is
+             positioned in a way to center the motif area in the
+             available space.
+
+          2. If the section contains text or other content elements,
+             empty space is inserted at the beginning of the section
+             to make sure the motif area is not covered by other
+             content when first reaching the section. The content
+             starts intersecting with the motif area only when the
+             reader continues scrolling.
+
+             Layout responds intelligently in such cases: If, for
+             example, the text of the section is positioned on the
+             left such that the motif area of the image can be
+             displayed completely on the right, no additional space
+             will be inserted at the beginning of the section.
+
+          You can edit the motif area of a background image via the
+          "Select motif area" menu item of the "Background image"
+          field in the section settings.
+
     public:
       navigation:
         chapter: Chapter
-      external_link:
-        open_in_new_tab: Open in new tab
-        open_in_new_tab_message: Opening in same tab is disabled inside the editor
       sound_disclaimer:
         help_text: >
           This article works best with the sound turned on. <br/>
           Click once in this field to activate the sound for the entire story.
+      player_controls:
+        play: Play
+        pause: Pause
+        progress: "Timeline. Current time: %{currentTime}. Duration: %{duration}"
+        quality: Quality
+        text_tracks: Subtitles
+      video_qualities:
+        annotations:
+          4k: 4K
+          fullhd: HD
+          medium: HD
+        labels:
+          4k: 2160p
+          auto: Auto
+          fullhd: 1080p
+          medium: 720p
+      text_track_modes:
+        auto: Auto (%{label})
+        auto_off: Auto (Off)
+        none: Off
+      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
     inline_editing:
-      insert_content_element: Insert new element
+      cancel: Cancel
+      url_placeholder: Type or paste URL
+      formats:
+        paragraph: Paragraph
+        heading: Heading
+        ordered_list: Ordered list
+        bullete: Bulleted list
+        block_quote: Block quote
+        bold: Bold
+        italic: Italic
+        underline: Underline
+        strikethrough: Strikethrough
+      type_text: Type some text
+      type_heading: Heading
+      insert_link: Insert link
+      remove_link: Remove link
+      select_section: Select section
+      select_content_element: Select element
+      add_content_element: Add new element
+      insert_content_element:
+        before: Insert new element above
+        after: Insert new element below
+      edit_section_settings: Edit section settings
+      edit_section_transition_before: Edit section transition
+      edit_section_transition_after: Edit section transition
+      external_link:
+        open_in_new_tab: Open in new tab
+        open_in_new_tab_message: Opening in same tab is disabled inside the editor
     editor:
       content_elements:
         externalLinkList:
@@ -38,6 +194,7 @@ en:
               label: Thumbnail
               inline_help: Link thumbnail image for display in entry.
           tabs:
+            general: External Links
             edit_link: Edit Link
         dataWrapperChart:
           name: DataWrapper Chart
@@ -85,6 +242,46 @@ en:
           name: Inline Video
           tabs:
             general: Inline Video
+          attributes:
+            id:
+              label: "Video"
+            posterId:
+              label: "Poster"
+            atmoDuringPlayback:
+              label: Atmo During Playback
+              inline_help: >
+                Choose which way the atmo shall behave during playback of this video element.
+              values:
+                mute: Mute
+                play: Keep playing
+                turnDown: Keep playing at lower volume
+        inlineAudio:
+          name: Inline Audio
+          tabs:
+            general: Inline Audio
+          attributes:
+            id:
+              label: "Audio"
+            posterId:
+              label: "Poster"
+            playerControlVariant:
+              label: Player Controls
+              inline_help: >
+                Choose the style of player controls.
+              values:
+                classic: Classic
+                waveform: Waveform
+            waveformColor:
+              inline_help: Color of the waveform's parts that represents the already played part of the audio.
+              label: Waveform Color
+            atmoDuringPlayback:
+              label: Atmo During Playback
+              inline_help: >
+                Choose which way the atmo shall behave during playback of this audio element.
+              values:
+                mute: Mute
+                play: Keep playing
+                turnDown: Keep playing at lower volume
         inlineBeforeAfter:
           name: Before/After
           tabs:
@@ -169,15 +366,18 @@ en:
           values:
             inline: Inline
             full: Full Width
+            left: Floated left
+            right: Floated right
             sticky: Sticky
       entry_outline:
         header: Outline
         add_chapter: New chapter
       chapter_item:
+        drag_hint: Drag to move chapter
         add_section: New section
         save_error: There was an error while saving this chapter.
       section_item:
-        edit: Edit section
+        drag_hint: Drag to move section
         save_error: There was an error while saving this section.
       edit_chapter:
         tabs:
@@ -200,6 +400,7 @@ en:
           This operation cannot be undone.
         save_error: There was an error while saving this chapter.
       edit_section:
+        edit_motif_area: Select motif area...
         tabs:
           section: Section
         attributes:
@@ -216,7 +417,16 @@ en:
               solid: Block
               transparent: Transparent
           backdropImage:
-            label: Background
+            label: Background-Image
+          backdropImageMobile:
+            label: Background-Image (Portrait)
+            inline_help: >
+              Displayed when the browser viewport is taller than wide, for example
+              on phones or tablets in portrait orientation. Can be used to supply an
+              alternative to a landscape background image that would otherwise have
+              important parts cropped off.
+          backdropVideo:
+            label: Background-Video
           backdropType:
             label: Background-Type
             inline_help: >
@@ -227,11 +437,18 @@ en:
           fullHeight:
             label: Use Full Viewport-Height
             inline_help: >
-              Activate this option if the section should span at least one viewport height.
-              Deactivate this option to create a short section which height is determined by its
-              foreground content.
+              Activate this option if the background of this section (e.g. image, color or video) is supposed
+              to be enlarged such that the whole browser window (the so called viewport) is covered.
+              Deactivate this option to create a short section. The height of the section and its background
+              is then determined only by the content of the section.  Multiple sections with different
+              backgrounds can then be visible at once on the user's screen. This option needs to be activated
+              for two adjacent sections to be able to use a fade transition between them.
+          atmoAudioFileId:
+            label: Atmo Audio
+            inline_help: >
+              Choose an audio file, that shall be played in the background. If you want this audio to continue playing on following sections, just choose the same file again there.
           invert:
-            label: Invert Text
+            label: Invert Text Colors
           layout:
             label: Content alignment
             inline_help: >
@@ -242,16 +459,22 @@ en:
               left: Left
               right: Right
               center: Center
+      edit_section_transition:
+        tabs:
+          transition: Transition
+        attributes:
           transition:
-            label: Transition From Previous Section
+            label: Effect
             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.
+              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.
             values:
               beforeAfter: Scrolling with static Backgrounds
-              fade: Cross-Fade All
-              fadeBg: Cross-Fade Backgrounds
+              fade: Also fade section content
+              fadeBg: Cross Fade
               reveal: Reveal
               scroll: Scroll
               scrollOver: Scroll Over
@@ -262,3 +485,23 @@ en:
         save_error: There was an error while saving this section.
       insert_content_element:
         header: Insert element
+        cancel: Cancel
+      edit_motif_area:
+        header: Image Motif
+        hint: Drag to select the most important part of the image.
+        help_link: What is this used for?
+        save: Save
+        cancel: Cancel
+        blank_slate: No area selected.
+        reset: Reset
+      browser_not_supported:
+        heading: The browser or device you are using is not supported
+        text: While Pageflow stories work on all modern browsers and devices, the Pageflow editor requires a desktop computer running a recent version of Chrome, Firefox, Safari or Edge.
+      no_options: No options available
+      blank_entry:
+        create_chapter: Click <em>New chapter</em> to create your first chapter.
+        create_section: Click <em>New section</em> within the chapter to add a section.
+        create_content_element: Use the <em>Plus buttons</em> inside the preview to add text blocks and other elements.
+        header: This is an empty Pageflow.
+        intro: Pageflows consist of chapters and sections. The sidebar on the right shows the outline of your story.
+        outro: In this area, a live preview will be shown.

data/entry_types/scrolled/config/routes.rb

@@ -13,6 +13,7 @@ PageflowScrolled::Engine.routes.draw do
 
           resources :content_elements do
             collection do
+              put :batch
               put :order
             end
           end

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

@@ -4,6 +4,8 @@ module PageflowScrolled
     class InstallGenerator < Rails::Generators::Base
       desc 'Installs Pageflow Scrolled entry type.'
 
+      source_root File.expand_path('templates', __dir__)
+
       def install_webpacker
         require 'webpacker'
         gemfile = File.expand_path('../../../../../../Gemfile', __dir__)
@@ -18,6 +20,12 @@ module PageflowScrolled
         end
       end
 
+      def webpacker_yml
+        gsub_file('config/webpacker.yml',
+                  'extract_css: false',
+                  'extract_css: true')
+      end
+
       def editor_pack
         create_file 'app/javascript/packs/pageflow-scrolled-editor.js', <<-JS
           import 'pageflow-scrolled/editor';
@@ -30,8 +38,28 @@ module PageflowScrolled
         create_file 'app/javascript/packs/pageflow-scrolled-frontend.js', <<-JS
           import 'pageflow-scrolled/frontend';
           import 'pageflow-scrolled/contentElements-frontend';
+
+          require.context('../pageflow-scrolled/themes', true);
         JS
       end
+
+      def server_pack
+        create_file 'app/javascript/packs/pageflow-scrolled-server.js', <<-JS
+          import 'pageflow-scrolled/frontend-server';
+          import 'pageflow-scrolled/contentElements-frontend';
+        JS
+      end
+
+      def theme_pack
+        create_file 'app/javascript/packs/pageflow-scrolled-theme.css', <<-JS
+          @import "pageflow-scrolled/frontend/index.css";
+          @import "pageflow-scrolled/contentElements-frontend.css";
+        JS
+      end
+
+      def default_theme
+        directory 'theme', 'app/javascript/pageflow-scrolled/themes/default'
+      end
     end
   end
 end

data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoDesktop.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:#343434;}
+	.st1{fill:#343434;stroke:#343434;}
+</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>