pageflow 15.4.0 → 15.5.0

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

@@ -6,17 +6,39 @@ module PageflowScrolled
 
       source_root File.expand_path('templates', __dir__)
 
-      def install_webpacker
-        require 'webpacker'
-        gemfile = File.expand_path('../../../../../../Gemfile', __dir__)
-        rake "webpacker:install BUNDLE_GEMFILE=#{gemfile}"
+      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"
+        end
+      end
+
+      def theme_plugin
+        # Ruby files in the lib directory are eager loaded in
+        # production. This includes template files in
+        # lib/generators. Template file extension (.tt) is removed by
+        # Thor automatically and ensures the file is not picked up by
+        # eager loading.
+        template 'themes_plugin.rb.tt', 'app/plugins/scrolled_themes_plugin.rb'
+      end
+
+      def install_packages
+        run 'yarn add postcss-url@^8.0.0 @fontsource/source-sans-pro'
       end
 
       def webpack_environment
         inject_into_file('config/webpack/environment.js',
                          before: "module.exports = environment\n") do
-          "const pageflowConfig = require('pageflow/config/webpack')\n" \
-          "environment.config.merge(pageflowConfig)\n\n"
+          "environment.config.merge(require('pageflow/config/webpack'))\n" \
+          "environment.config.merge(require('pageflow-scrolled/config/webpack'))\n\n" \
+          "// Opt into future default behavior of Webpacker [1] to work around\n" \
+          "// problems with Video.js DASH service worker.\n" \
+          "//\n" \
+          "// [1] https://github.com/rails/webpacker/pull/2624\n" \
+          "environment.loaders.delete('nodeModules')\n\n"
         end
       end
 
@@ -31,6 +53,14 @@ module PageflowScrolled
         end
       end
 
+      def postcss_config
+        inject_into_file('postcss.config.js',
+                         after: "require('postcss-import'),\n") do
+          "    // Make relative urls in fontsource packages work\n" \
+          "    require('postcss-url')({url: 'rebase'}),\n"
+        end
+      end
+
       def editor_pack
         create_file 'app/javascript/packs/pageflow-scrolled-editor.js', <<-JS
           import 'pageflow-scrolled/editor';
@@ -62,6 +92,13 @@ module PageflowScrolled
         JS
       end
 
+      def default_font_pack
+        create_file 'app/javascript/packs/fonts/sourceSansPro.css', <<-CSS
+          @import "@fontsource/source-sans-pro/400.css";
+          @import "@fontsource/source-sans-pro/700.css";
+        CSS
+      end
+
       def default_theme
         directory 'theme', 'app/javascript/pageflow-scrolled/themes/default'
       end

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

@@ -0,0 +1,26 @@
+# Extracted from initializer to allow auto loading changes in
+# development
+class ScrolledThemesPlugin
+  def configure(config) # rubocop:disable Metrics/MethodLength
+    config.themes.register(:default,
+                           stylesheet_packs: ['fonts/sourceSansPro'],
+                           font_family: {
+                             entry: '"Source Sans Pro", sans-serif',
+                             navigation: '"Source Sans Pro", sans-serif'
+                           },
+                           colors: {
+                             accent: '#e10028',
+                             navigation: {
+                               surface: '#fff',
+                               on_surface: '#000',
+                               primary_on_surface: '#00375a',
+                               secondary_on_surface: '#c2c2c2',
+                               background: 'rgba(255, 255, 255, 0.95)',
+                               on_background: '#000',
+                               primary_on_background: '#00375a'
+                             }
+                           },
+                           logo_alt_text: 'Pageflow',
+                           theme_color: '#ffffff')
+  end
+end

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

@@ -0,0 +1,32 @@
+namespace :pageflow_scrolled do
+  desc <<-DESC
+    Make Yarn use packages embedded in gems.
+
+    For each package.json dependency of the form
+
+       .bundle/for-yarn/gem-name/package/path
+
+    create a symlink in the Git ignored directory .bundle/for-yarn which
+    points to the location of the gem as reported by `bundle show`.
+
+    This script is executed as preinstall script when running `yarn
+    install`.
+  DESC
+  task :create_bundle_symlinks_for_yarn do
+    referenced_gems =
+      File.read('package.json').scan(%r{.bundle/for-yarn/([a-z_-]+)}).flatten.uniq
+
+    FileUtils.rm_rf '.bundle/for-yarn'
+    FileUtils.mkdir_p '.bundle/for-yarn'
+
+    puts 'Creating symlinks for .bundle entries in package.json:'
+
+    referenced_gems.each do |gem|
+      symlink = ".bundle/for-yarn/#{gem}"
+      gem_location = `bundle show #{gem}`.strip
+
+      puts "#{symlink} -> #{gem_location}"
+      FileUtils.ln_s gem_location, symlink
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+namespace :pageflow_scrolled do
+  desc 'Generate dummy app for current Rails version.'
+  task :dummy do
+    require 'pageflow/support'
+    ENV['PAGEFLOW_INSTALL_WEBPACKER'] = 'true'
+    Pageflow::Dummy.setup
+  end
+end

data/entry_types/scrolled/lib/tasks/{pageflow_scrolled_tasks.rake → pageflow_scrolled/storybook.rake}

@@ -1,14 +1,9 @@
 namespace :pageflow_scrolled do
-  desc 'Generate dummy app for current Rails version.'
-  task :dummy do
-    require 'pageflow/support'
-    Pageflow::Dummy.setup
-  end
-
   namespace :storybook do
     namespace :seed do
-      desc 'Recreate storybook entry and set up storybook JSON seed from it'
-      task :setup, [:output] => [:destroy_entry, :create_entry, :generate_json]
+      desc 'Recreate storybook entry and set up storybook JSON seed/preview-head.html from it'
+      task :setup, [:output_dir] => [:destroy_entry, :create_entry,
+                                     :generate_json, :generate_head_html]
 
       desc 'Destroy entry to generate Storybook entry JSON seed from'
       task destroy_entry: :environment do
@@ -66,6 +61,20 @@ namespace :pageflow_scrolled do
                 configuration: {
                   testReferenceName: 'churchBefore'
                 }
+              }.stringify_keys,
+              equirectangularMono: {
+                url: 'https://s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/seed-assets/images/equirectangular_mono.jpg',
+                configuration: {
+                  testReferenceName: 'equirectangularMono',
+                  projection: 'equirectangular_mono'
+                }
+              }.stringify_keys,
+              equirectangularStereo: {
+                url: 'https://s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/seed-assets/images/equirectangular_stereo.png',
+                configuration: {
+                  testReferenceName: 'equirectangularStereo',
+                  projection: 'equirectangular_stereo'
+                }
               }.stringify_keys
             },
             video_files: {
@@ -101,7 +110,7 @@ namespace :pageflow_scrolled do
       end
 
       desc 'Generate Storybook entry JSON seed'
-      task :generate_json, [:output] => :environment do |_t, args|
+      task :generate_json, [:output_dir] => :environment do |_t, args|
         entry = Pageflow::Entry.find_by_title('Storybook seed')
 
         unless entry
@@ -109,6 +118,12 @@ namespace :pageflow_scrolled do
           exit 1
         end
 
+        if args[:output_dir].blank?
+          puts 'Missing argument: Pass output directory via '\
+            '`rake pageflow_scrolled:storybook:seed:setup[some/directory]`'
+          exit 1
+        end
+
         draft_entry = Pageflow::DraftEntry.new(entry)
 
         seed =
@@ -120,14 +135,38 @@ namespace :pageflow_scrolled do
                       locals: {entry: draft_entry})
           end
 
-        if args[:output].blank?
-          puts 'Missing argument: Pass output path via '\
-            '`rake pageflow_scrolled:storybook:seed:setup[some/path/seed.json]`'
+        output = File.join(args[:output_dir], 'seed.json')
+        File.write(output, seed)
+        puts "Wrote #{output}"
+      end
+
+      desc 'Generate Storybook preview-head.html'
+      task :generate_head_html, [:output_dir] => :environment do |_t, args|
+        entry = Pageflow::Entry.find_by_title('Storybook seed')
+
+        unless entry
+          puts 'Seed entry does not exist. Run pageflow_scrolled:storybook:seed:create_entry first.'
           exit 1
         end
 
-        File.write(args[:output], seed)
-        puts "Wrote #{args[:output]}"
+        if args[:output_dir].blank?
+          puts 'Missing argument: Pass output directory via '\
+            '`rake pageflow_scrolled:storybook:seed:setup[some/directory]`'
+          exit 1
+        end
+
+        draft_entry = Pageflow::DraftEntry.new(entry)
+
+        html =
+          File.read(File.join(__dir__, '..', '..', '..', 'package', '.storybook',
+                              'preview-head.html.template')) +
+          PageflowScrolled::EntriesController.render(inline: <<-ERB, locals: {entry: draft_entry})
+            <%= scrolled_theme_properties_style_tag(entry.theme) %>
+          ERB
+
+        output = File.join(args[:output_dir], 'preview-head.html')
+        File.write(output, html)
+        puts "Wrote #{output}"
       end
     end
   end

data/entry_types/scrolled/package/contentElements-editor.js

@@ -1,5 +1,5 @@
 import { editor, NoOptionsHintView, buttonStyles } from 'pageflow-scrolled/editor';
-import { FileInputView, CheckBoxInputView, ColorInputView as ColorInputView$1, editor as editor$1, transientReferences, ListView } from 'pageflow/editor';
+import { FileInputView, CheckBoxInputView, ColorInputView as ColorInputView$1, editor as editor$1, transientReferences, ListView, SliderInputView as SliderInputView$1, SelectInputView as SelectInputView$1, EnumTableCellView } from 'pageflow/editor';
 import { SelectInputView, ColorInputView, TextInputView, SliderInputView, CheckBoxInputView as CheckBoxInputView$1, UrlInputView, ConfigurationEditorView, cssModulesUtils } from 'pageflow/ui';
 import Marionette from 'backbone.marionette';
 import I18n from 'i18n-js';
@@ -7,10 +7,13 @@ import Backbone from 'backbone';
 import _ from 'underscore';
 
 editor.contentElementTypes.register('heading', {
-  supportedPositions: ['inline'],
+  supportedPositions: ['inline', 'wide'],
+  defaultConfig: {
+    position: 'wide'
+  },
   configurationEditor: function configurationEditor() {
     this.tab('general', function () {
-      this.view(NoOptionsHintView);
+      this.group('ContentElementPosition');
     });
   }
 });
@@ -101,6 +104,7 @@ editor.contentElementTypes.register('textBlock', {
 });
 
 editor.contentElementTypes.register('inlineImage', {
+  supportedPositions: ['inline', 'sticky', 'left', 'right', 'wide', 'full'],
   configurationEditor: function configurationEditor() {
     this.tab('general', function () {
       this.input('id', FileInputView, {
@@ -115,6 +119,7 @@ editor.contentElementTypes.register('inlineImage', {
 });
 
 editor.contentElementTypes.register('inlineVideo', {
+  supportedPositions: ['inline', 'sticky', 'left', 'right', 'full'],
   configurationEditor: function configurationEditor() {
     this.tab('general', function () {
       this.input('id', FileInputView, {
@@ -139,7 +144,9 @@ editor.contentElementTypes.register('inlineVideo', {
 });
 
 editor.contentElementTypes.register('inlineAudio', {
-  configurationEditor: function configurationEditor() {
+  supportedPositions: ['inline', 'sticky', 'left', 'right', 'full'],
+  configurationEditor: function configurationEditor(_ref) {
+    var entry = _ref.entry;
     this.tab('general', function () {
       this.input('id', FileInputView, {
         collection: 'audio_files',
@@ -160,7 +167,7 @@ editor.contentElementTypes.register('inlineAudio', {
       this.input('waveformColor', ColorInputView, {
         visibleBinding: 'playerControlVariant',
         visibleBindingValue: 'waveform',
-        defaultValue: '#e10028'
+        defaultValue: entry.getTheme().get('options').colors.accent
       });
       this.input('atmoDuringPlayback', SelectInputView, {
         values: ['play', 'mute', 'turnDown']
@@ -172,6 +179,7 @@ editor.contentElementTypes.register('inlineAudio', {
 });
 
 editor.contentElementTypes.register('inlineBeforeAfter', {
+  supportedPositions: ['inline'],
   configurationEditor: function configurationEditor() {
     this.tab('general', function () {
       this.input('before_id', FileInputView, {
@@ -214,11 +222,12 @@ editor.contentElementTypes.register('soundDisclaimer', {
 });
 
 editor.contentElementTypes.register('videoEmbed', {
+  supportedPositions: ['inline', 'sticky', 'left', 'right', 'full'],
   configurationEditor: function configurationEditor() {
     this.tab('general', function () {
       this.input('videoSource', UrlInputView, {
         supportedHosts: ['http://youtu.be', 'https://youtu.be', 'http://www.youtube.com', 'https://www.youtube.com', 'http://vimeo.com', 'https://vimeo.com', 'http://www.facebook.com', 'https://www.facebook.com'],
-        displayPropertyName: 'videoSource',
+        displayPropertyName: 'displayVideoSource',
         required: true,
         permitHttps: true
       });
@@ -427,6 +436,7 @@ editor.registerSideBarRouting({
 }); // register external link list content element configuration editor for sidebar
 
 editor.contentElementTypes.register('externalLinkList', {
+  supportedPositions: ['inline'],
   configurationEditor: function configurationEditor(_ref) {
     var entry = _ref.entry;
     this.tab('general', function () {
@@ -460,11 +470,12 @@ var DatawrapperAdView = Marionette.ItemView.extend({
 });
 
 editor.contentElementTypes.register('dataWrapperChart', {
+  supportedPositions: ['inline', 'sticky', 'left', 'right', 'full'],
   configurationEditor: function configurationEditor() {
     this.tab('general', function () {
       this.input('url', UrlInputView, {
         supportedHosts: ['http://cf.datawrapper.de', 'https://cf.datawrapper.de', 'http://datawrapper.dwcdn.de', 'https://datawrapper.dwcdn.de', 'http://datawrapper.dwcdn.net', 'https://datawrapper.dwcdn.net', 'http://charts.datawrapper.de', 'https://charts.datawrapper.de'],
-        displayPropertyName: 'url',
+        displayPropertyName: 'displayUrl',
         required: true,
         permitHttps: true
       });
@@ -480,3 +491,51 @@ editor.contentElementTypes.register('dataWrapperChart', {
     });
   }
 });
+
+editor.contentElementTypes.register('vrImage', {
+  configurationEditor: function configurationEditor() {
+    this.tab('general', function () {
+      this.input('image', FileInputView, {
+        collection: 'image_files',
+        fileSelectionHandler: 'contentElementConfiguration',
+        filter: 'with_projection',
+        positioning: false
+      });
+      this.input('initialYaw', SliderInputView$1, {
+        unit: '°',
+        minValue: -180,
+        maxValue: 180
+      });
+      this.input('initialPitch', SliderInputView$1, {
+        unit: '°',
+        minValue: -60,
+        maxValue: 60
+      });
+      this.group('ContentElementCaption');
+      this.group('ContentElementPosition');
+    });
+  }
+});
+editor.fileTypes.modify('image_files', {
+  configurationEditorInputs: function configurationEditorInputs(model) {
+    var values = ['equirectangular_mono', 'equirectangular_stereo'];
+    return [{
+      name: 'projection',
+      inputView: SelectInputView$1,
+      inputViewOptions: {
+        includeBlank: true,
+        values: values
+      }
+    }];
+  },
+  confirmUploadTableColumns: [{
+    name: 'projection',
+    cellView: EnumTableCellView
+  }],
+  filters: [{
+    name: 'with_projection',
+    matches: function matches(file) {
+      return !!file.configuration.get('projection');
+    }
+  }]
+});

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

@@ -1 +1 @@
-.Heading-module_root__33TFw{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;margin-top:.2em;margin-bottom:0;padding-top:.3em}@media (orientation:landscape){.Heading-module_first__1PMJX{padding-top:25%}}.BeforeAfter-module_sliderStart__2C5cN{background-color:#fff;position:absolute;z-index:1}.BeforeAfter-module_container__2Lm06{height:100%;--frame1pos:-8;--frame2pos:16;--frame3pos:-32;--frame4pos:32;--frame1px:calc(var(--frame1pos)*1px);--frame2px:calc(var(--frame2pos)*1px);--frame3px:calc(var(--frame3pos)*1px);--frame4px:calc(var(--frame4pos)*1px)}.BeforeAfter-module_container__2Lm06>div{height:100%!important}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div div:nth-child(3){-webkit-animation:BeforeAfter-module_SliderLeftRightShake__2mcn5 1.5s cubic-bezier(.36,.07,.19,.97) both;animation:BeforeAfter-module_SliderLeftRightShake__2mcn5 1.5s cubic-bezier(.36,.07,.19,.97) both}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:nth-child(2){-webkit-animation:BeforeAfter-module_BeforeImageLeftRightShake__38m9V 1.5s cubic-bezier(.36,.07,.19,.97) both;animation:BeforeAfter-module_BeforeImageLeftRightShake__38m9V 1.5s cubic-bezier(.36,.07,.19,.97) both}.BeforeAfter-module_container__2Lm06 div div:nth-child(4) div{transition:opacity .1s ease-out .3s!important}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:first-child{-webkit-animation:BeforeAfter-module_AfterImageLeftRightShake__3WMf1 1.5s cubic-bezier(.36,.07,.19,.97) both;animation:BeforeAfter-module_AfterImageLeftRightShake__3WMf1 1.5s cubic-bezier(.36,.07,.19,.97) both}.BeforeAfter-module_container__2Lm06 div div:nth-child(5) div{transition:opacity .1s ease-out .3s!important}@-webkit-keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V{10%,to{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame1px)),auto,auto)}20%,80%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame2px)),auto,auto)}30%,50%,70%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame3px)),auto,auto)}40%,60%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame4px)),auto,auto)}}@keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V{10%,to{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame1px)),auto,auto)}20%,80%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame2px)),auto,auto)}30%,50%,70%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame3px)),auto,auto)}40%,60%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame4px)),auto,auto)}}@-webkit-keyframes BeforeAfter-module_AfterImageLeftRightShake__3WMf1{10%,to{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame1px)))}20%,80%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame2px)))}30%,50%,70%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame3px)))}40%,60%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame4px)))}}@keyframes BeforeAfter-module_AfterImageLeftRightShake__3WMf1{10%,to{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame1px)))}20%,80%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame2px)))}30%,50%,70%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame3px)))}40%,60%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame4px)))}}@-webkit-keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5{10%,to{transform:translate3d(-20%,0,0)}20%,80%{transform:translate3d(40%,0,0)}30%,50%,70%{transform:translate3d(-80%,0,0)}40%,60%{transform:translate3d(80%,0,0)}}@keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5{10%,to{transform:translate3d(-20%,0,0)}20%,80%{transform:translate3d(40%,0,0)}30%,50%,70%{transform:translate3d(-80%,0,0)}40%,60%{transform:translate3d(80%,0,0)}}.SoundDisclaimer-module_soundDisclaimer__31hWh{display:grid;border:1px solid;border-radius:4px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SoundDisclaimer-module_unmute__1V4Ab,.SoundDisclaimer-module_unmuted__22CJ5{grid-column:1;grid-row:1;display:flex;align-items:center;transition-property:opacity,visibility;transition-duration:.09s;transition-timing-function:ease-out;opacity:0;visibility:hidden;padding:0 15px}.SoundDisclaimer-module_unmute__1V4Ab{position:relative;border:0;background-color:transparent;font:inherit;color:currentColor;text-align:initial;width:100%;z-index:1;cursor:pointer}.SoundDisclaimer-module_active__11_kc{opacity:1;visibility:visible;transition-delay:.09s;transition-duration:.21s;transition-timing-function:ease-in}.SoundDisclaimer-module_soundDisclaimer__31hWh svg{flex:0 0 25px;fill:currentColor;margin-right:15px}.TextBlock-module_text__21Hk4 h2,.TextBlock-module_text__21Hk4 li,.TextBlock-module_text__21Hk4 p{margin:1em 0 0}.TextBlock-module_text__21Hk4 a{color:currentColor;word-wrap:break-word}.TextBlock-module_text__21Hk4 ol,.TextBlock-module_text__21Hk4 ul{margin:0;padding-left:20px;clear:both}.TextBlock-module_text__21Hk4 blockquote{padding:.5em 1em .5em 2em;margin:1em 0 0 .5em;position:relative;overflow:hidden}.TextBlock-module_text__21Hk4 blockquote:before{content:"\201C";font-size:3em;font-weight:700;color:#aaa;position:absolute;top:0;left:0;line-height:1em}.VideoEmbed-module_VideoEmbed__3BUjc{background-color:#000}.VideoEmbed-module_embedPlayer__54NKG{position:absolute;top:0;left:0;bottom:0;right:0}.ExternalLink-module_hidden__3jer0{display:none}.ExternalLink-module_link_item__Blypv{width:45%;vertical-align:top;margin:2% auto;background-color:#fff;color:#000;text-decoration:none;transition:transform .3s}.ExternalLink-module_link_item__Blypv.ExternalLink-module_invert__1zrgN{background-color:#222;color:#fff}.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:29%}.ExternalLink-module_link_item__Blypv:hover{transform:scale(1.05)}.ExternalLink-module_link_item__Blypv:hover .ExternalLink-module_link_title__FZJ-0{text-decoration:underline}.ExternalLink-module_link_thumbnail__2_BHq{width:auto;background-repeat:no-repeat;background-size:cover;padding-top:56.25%;position:relative}.ExternalLink-module_link_details__lRhKU{margin:20px}.ExternalLink-module_link_details__lRhKU>.ExternalLink-module_link_title__FZJ-0{font-size:1.2em;font-weight:700;margin-bottom:20px}.ExternalLink-module_link_details__lRhKU>p{width:100%;white-space:normal;line-height:1.3em}.ExternalLink-module_tooltip__18MpC{position:absolute;left:50%;top:80px;width:180px;padding:5px;margin-left:-95px;background-color:#444;color:#fff;border:1px solid #fff;opacity:.9;font-size:13px;text-align:center;white-space:normal}.ExternalLink-module_tooltip__18MpC>span{display:block;color:#fff;text-decoration:underline}@media only screen and (max-width:600px){.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:45%}}@media only screen and (max-width:350px){.ExternalLink-module_link_item__Blypv,.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:85%}}.ExternalLinkList-module_ext_links_container__16IIo{display:flex;flex-wrap:wrap;border-collapse:separate;border-spacing:10px;min-height:240px;width:auto;height:auto;pointer-events:auto;position:relative;transition:opacity .5s;transition-timing-function:cubic-bezier(.1,.57,.1,1);transition-duration:0ms}.DataWrapperChart-module_container__2eZ15{min-height:200px;padding:20px 5%}.DataWrapperChart-module_container__2eZ15>iframe{width:100%;height:100%;position:relative;top:0;border:0}
+.Heading-module_root__33TFw{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;margin-top:.2em;margin-bottom:0;padding-top:.3em}@media (min-width:951px){.Heading-module_right__1TJKF{text-align:right}}.Heading-module_center__38lDY{text-align:center}@media (orientation:landscape){.Heading-module_first__1PMJX{padding-top:25%}}.BeforeAfter-module_sliderStart__2C5cN{background-color:#fff;position:absolute;z-index:1}.BeforeAfter-module_container__2Lm06{height:100%;--frame1pos:-8;--frame2pos:16;--frame3pos:-32;--frame4pos:32;--frame1px:calc(var(--frame1pos)*1px);--frame2px:calc(var(--frame2pos)*1px);--frame3px:calc(var(--frame3pos)*1px);--frame4px:calc(var(--frame4pos)*1px)}.BeforeAfter-module_container__2Lm06>div{height:100%!important}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe>div>div:nth-child(3){-webkit-animation:BeforeAfter-module_SliderLeftRightShake__2mcn5 1.5s cubic-bezier(.36,.07,.19,.97);animation:BeforeAfter-module_SliderLeftRightShake__2mcn5 1.5s cubic-bezier(.36,.07,.19,.97)}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:nth-child(2){-webkit-animation:BeforeAfter-module_BeforeImageLeftRightShake__38m9V 1.5s cubic-bezier(.36,.07,.19,.97);animation:BeforeAfter-module_BeforeImageLeftRightShake__38m9V 1.5s cubic-bezier(.36,.07,.19,.97)}.BeforeAfter-module_container__2Lm06 div div:nth-child(4) div{transition:opacity .1s ease-out .3s!important}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:first-child{-webkit-animation:BeforeAfter-module_AfterImageLeftRightShake__3WMf1 1.5s cubic-bezier(.36,.07,.19,.97);animation:BeforeAfter-module_AfterImageLeftRightShake__3WMf1 1.5s cubic-bezier(.36,.07,.19,.97)}.BeforeAfter-module_container__2Lm06 div div:nth-child(5) div{transition:opacity .1s ease-out .3s!important}@-webkit-keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V{0%,to{clip:rect(auto,var(--initial-rect-width),auto,auto)}10%,90%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame1px)),auto,auto)}20%,80%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame2px)),auto,auto)}30%,50%,70%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame3px)),auto,auto)}40%,60%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame4px)),auto,auto)}}@keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V{0%,to{clip:rect(auto,var(--initial-rect-width),auto,auto)}10%,90%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame1px)),auto,auto)}20%,80%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame2px)),auto,auto)}30%,50%,70%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame3px)),auto,auto)}40%,60%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame4px)),auto,auto)}}@-webkit-keyframes BeforeAfter-module_AfterImageLeftRightShake__3WMf1{0%,to{clip:rect(auto,auto,auto,var(--initial-rect-width))}10%,90%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame1px)))}20%,80%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame2px)))}30%,50%,70%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame3px)))}40%,60%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame4px)))}}@keyframes BeforeAfter-module_AfterImageLeftRightShake__3WMf1{0%,to{clip:rect(auto,auto,auto,var(--initial-rect-width))}10%,90%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame1px)))}20%,80%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame2px)))}30%,50%,70%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame3px)))}40%,60%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame4px)))}}@-webkit-keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5{0%,to{margin-left:0}10%,90%{margin-left:var(--frame1px)}20%,80%{margin-left:var(--frame2px)}30%,50%,70%{margin-left:var(--frame3px)}40%,60%{margin-left:var(--frame4px)}}@keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5{0%,to{margin-left:0}10%,90%{margin-left:var(--frame1px)}20%,80%{margin-left:var(--frame2px)}30%,50%,70%{margin-left:var(--frame3px)}40%,60%{margin-left:var(--frame4px)}}.SoundDisclaimer-module_soundDisclaimer__31hWh{display:grid;border:1px solid;border-radius:4px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SoundDisclaimer-module_unmute__1V4Ab,.SoundDisclaimer-module_unmuted__22CJ5{grid-column:1;grid-row:1;display:flex;align-items:center;transition-property:opacity,visibility;transition-duration:.09s;transition-timing-function:ease-out;opacity:0;visibility:hidden;padding:0 15px}.SoundDisclaimer-module_unmute__1V4Ab{position:relative;border:0;background-color:transparent;font:inherit;color:currentColor;text-align:initial;width:100%;z-index:1;cursor:pointer}.SoundDisclaimer-module_active__11_kc{opacity:1;visibility:visible;transition-delay:.09s;transition-duration:.21s;transition-timing-function:ease-in}.SoundDisclaimer-module_soundDisclaimer__31hWh svg{flex:0 0 25px;fill:currentColor;margin-right:15px}.TextBlock-module_text__21Hk4 h2,.TextBlock-module_text__21Hk4 li,.TextBlock-module_text__21Hk4 p{margin:1em 0 0}.TextBlock-module_text__21Hk4 h2{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word}.TextBlock-module_text__21Hk4 a{color:currentColor;word-wrap:break-word}.TextBlock-module_text__21Hk4 ol,.TextBlock-module_text__21Hk4 ul{margin:0;padding-left:20px;clear:both}.TextBlock-module_text__21Hk4 blockquote{padding:.5em 1em .5em 2em;margin:1em 0 0 .5em;position:relative;overflow:hidden}.TextBlock-module_text__21Hk4 blockquote:before{content:"\201C";font-size:3em;font-weight:700;color:#aaa;position:absolute;top:0;left:0;line-height:1em}.VideoEmbed-module_VideoEmbed__3BUjc{background-color:#000;color:#fff}.VideoEmbed-module_embedPlayer__54NKG{position:absolute;top:0;left:0;bottom:0;right:0}.ExternalLink-module_hidden__3jer0{display:none}.ExternalLink-module_link_item__Blypv{width:45%;vertical-align:top;margin:2% auto;background-color:#fff;color:#000;text-decoration:none;transition:transform .3s}.ExternalLink-module_link_item__Blypv.ExternalLink-module_invert__1zrgN{background-color:#222;color:#fff}.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:29%}.ExternalLink-module_link_item__Blypv:hover{transform:scale(1.05)}.ExternalLink-module_link_item__Blypv:hover .ExternalLink-module_link_title__FZJ-0{text-decoration:underline}.ExternalLink-module_link_thumbnail__2_BHq{width:auto;background-repeat:no-repeat;background-size:cover;padding-top:56.25%;position:relative}.ExternalLink-module_link_details__lRhKU{margin:20px}.ExternalLink-module_link_details__lRhKU>.ExternalLink-module_link_title__FZJ-0{font-size:1.2em;font-weight:700;margin-bottom:20px}.ExternalLink-module_link_details__lRhKU>p{width:100%;white-space:normal;line-height:1.3em}.ExternalLink-module_tooltip__18MpC{position:absolute;left:50%;top:80px;width:180px;padding:5px;margin-left:-95px;background-color:#444;color:#fff;border:1px solid #fff;opacity:.9;font-size:13px;text-align:center;white-space:normal}.ExternalLink-module_tooltip__18MpC>span{display:block;color:#fff;text-decoration:underline}@media only screen and (max-width:600px){.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:45%}}@media only screen and (max-width:350px){.ExternalLink-module_link_item__Blypv,.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:85%}}.ExternalLinkList-module_ext_links_container__16IIo{display:flex;flex-wrap:wrap;border-collapse:separate;border-spacing:10px;min-height:240px;width:auto;height:auto;pointer-events:auto;position:relative;transition:opacity .5s;transition-timing-function:cubic-bezier(.1,.57,.1,1);transition-duration:0ms}.DataWrapperChart-module_container__2eZ15{min-height:200px;padding:20px 5%}.DataWrapperChart-module_container__2eZ15>iframe{width:100%;height:100%;position:relative;top:0;border:0}

data/entry_types/scrolled/package/contentElements-frontend.js

@@ -1,7 +1,8 @@
-import { useContentElementConfigurationUpdate, useI18n, withShadowClassName, Text, EditableInlineText, frontend, useFile, useContentElementEditorState, ViewportDependentPillarBoxes, useContentElementLifecycle, Figure, Image, usePlayerState, useAudioFocus, MediaInteractionTracking, VideoPlayerControls, VideoPlayer, AudioPlayerControls, AudioPlayer, useMediaMuted, EditableText, ThirdPartyOptOutInfo, ThirdPartyOptIn, useDarkBackground, textColorForBackgroundColor } from 'pageflow-scrolled/frontend';
-import React, { useRef, useState, useEffect } from 'react';
+import { useContentElementConfigurationUpdate, useI18n, withShadowClassName, Text, EditableInlineText, frontend, useFile, useContentElementEditorState, ViewportDependentPillarBoxes, useContentElementLifecycle, Figure, Image, usePlayerState, useAudioFocus, MediaInteractionTracking, VideoPlayerControls, VideoPlayer, AudioPlayerControls, AudioPlayer, useMediaMuted, EditableText, ThirdPartyOptOutInfo, ThirdPartyOptIn, useDarkBackground, textColorForBackgroundColor, Panorama } from 'pageflow-scrolled/frontend';
+import React, { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import ReactCompareImage from 'react-compare-image';
+import Measure from 'react-measure';
 import { media } from 'pageflow/frontend';
 import ReactPlayer from 'react-player';
 
@@ -20,7 +21,7 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var styles = {"root":"Heading-module_root__33TFw","first":"Heading-module_first__1PMJX"};
+var styles = {"root":"Heading-module_root__33TFw","right":"Heading-module_right__1TJKF","center":"Heading-module_center__38lDY","first":"Heading-module_first__1PMJX"};
 
 function Heading(_ref) {
   var configuration = _ref.configuration,
@@ -38,7 +39,7 @@ function Heading(_ref) {
   return (
     /*#__PURE__*/
     React.createElement("h1", {
-      className: classNames(styles.root, _defineProperty({}, styles.first, firstSectionInEntry), _defineProperty({}, withShadowClassName, !sectionProps.invert))
+      className: classNames(styles.root, _defineProperty({}, styles.first, firstSectionInEntry), _defineProperty({}, styles[sectionProps.layout], configuration.position === 'wide'), _defineProperty({}, withShadowClassName, !sectionProps.invert))
     },
     /*#__PURE__*/
     React.createElement(Text, {
@@ -164,8 +165,6 @@ var placeholderFile = {
   height: 403
 };
 function BeforeAfter(_ref) {
-  var _cx;
-
   var isActive = _ref.isActive,
       load = _ref.load,
       position = _ref.position,
@@ -177,32 +176,24 @@ function BeforeAfter(_ref) {
       slider = _ref.slider,
       slider_color = _ref.slider_color,
       slider_handle = _ref.slider_handle;
-  var beforeAfterRef = useRef();
-  var current = beforeAfterRef.current;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      wiggled = _useState2[0],
-      setWiggled = _useState2[1];
+      wiggle = _useState2[0],
+      setWiggle = _useState2[1];
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      wiggle = _useState4[0],
-      setWiggle = _useState4[1];
+      moved = _useState4[0],
+      setMoved = _useState4[1];
 
   useEffect(function () {
-    var node = current;
-
-    if (node) {
-      // Only wiggle once per element, when it is active for the first
-      // time
-      var shouldWiggle = !wiggled && isActive;
-      setWiggle(shouldWiggle); // If wiggle was just set, mark this element as one that already
-      // wiggled
-
-      !wiggled && setWiggled(shouldWiggle);
-    }
-  }, [isActive, current]);
+    // Only wiggle once per element, when it is active for the first
+    // time
+    setWiggle(function (wiggle) {
+      return wiggle || isActive;
+    });
+  }, [isActive]);
   var beforeImage = useFile({
     collectionName: 'imageFiles',
     permaId: before_id
@@ -246,19 +237,8 @@ function BeforeAfter(_ref) {
         sliderLineColor: slider_color
       });
     }
-  } //Since the slider wiggle only the first time, set the variable once for performance purpose.
-
+  }
 
-  useEffect(function () {
-    if (beforeAfterRef.current) {
-      // Compute initial slider coordinate and pass it as a CSS
-      // variable, so that before/after images can wiggle together with
-      // the slider
-      var containerWidth = beforeAfterRef.current.getBoundingClientRect().width;
-      var initialRectWidth = initialSliderPos * containerWidth;
-      beforeAfterRef.current.style.setProperty('--initial-rect-width', initialRectWidth + 'px');
-    }
-  }, [wiggled, initialSliderPos]);
   return (
     /*#__PURE__*/
     React.createElement(ViewportDependentPillarBoxes, {
@@ -266,15 +246,29 @@ function BeforeAfter(_ref) {
       position: position
     },
     /*#__PURE__*/
-    React.createElement("div", {
-      ref: beforeAfterRef,
-      className: classNames((_cx = {}, _defineProperty(_cx, styles$1.selected, isSelected), _defineProperty(_cx, styles$1.wiggle, wiggle), _cx), styles$1.container)
-    },
-    /*#__PURE__*/
-    React.createElement(InitialSliderPositionIndicator, {
-      parentSelected: isSelected,
-      position: initial_slider_position
-    }), renderCompareImage()))
+    React.createElement(Measure, {
+      bounds: true
+    }, function (_ref2) {
+      var _cx;
+
+      var measureRef = _ref2.measureRef,
+          contentRect = _ref2.contentRect;
+      return (
+        /*#__PURE__*/
+        React.createElement("div", {
+          ref: measureRef,
+          style: {
+            '--initial-rect-width': contentRect.bounds.width * initialSliderPos + 'px'
+          },
+          className: classNames((_cx = {}, _defineProperty(_cx, styles$1.selected, isSelected), _defineProperty(_cx, styles$1.wiggle, wiggle && !moved), _cx), styles$1.container)
+        },
+        /*#__PURE__*/
+        React.createElement(InitialSliderPositionIndicator, {
+          parentSelected: isSelected,
+          position: initial_slider_position
+        }), renderCompareImage())
+      );
+    }))
   );
 
   function renderCompareImage() {
@@ -293,16 +287,16 @@ function BeforeAfter(_ref) {
         rightImageAlt: afterImageAlt,
         sliderPositionPercentage: initialSliderPos,
         onSliderPositionChange: function onSliderPositionChange() {
-          return setWiggle(false);
+          return setMoved(true);
         }
       }, opts))
     );
   }
 }
 
-function InitialSliderPositionIndicator(_ref2) {
-  var parentSelected = _ref2.parentSelected,
-      position = _ref2.position;
+function InitialSliderPositionIndicator(_ref3) {
+  var parentSelected = _ref3.parentSelected,
+      position = _ref3.position;
   var indicatorWidth = '2px';
   var indicatorStyles = {
     left: "calc(".concat(position, "% - ").concat(indicatorWidth, "/2)"),
@@ -826,11 +820,12 @@ function PreparedPlayer(_ref2) {
     onLost: function onLost() {
       setPlayerState('paused');
     }
-  }); // base64-encoded configuration
-  // => make component re-render on configuration changes
+  }); // React player does not re-create player when controls or config
+  // prop changes. Ensure key changes to force React to re-mount
+  // component.
 
   function keyFromConfiguration(config) {
-    return btoa(JSON.stringify(config));
+    return [config.hideControls, config.hideInfo].join('');
   }
 
   return (
@@ -1110,3 +1105,65 @@ frontend.contentElementTypes.register('dataWrapperChart', {
   component: DataWrapperChart,
   lifecycle: true
 });
+
+function VrImage(_ref) {
+  var configuration = _ref.configuration;
+
+  var _useContentElementLif = useContentElementLifecycle({
+    onActivate: function onActivate() {
+      if (viewerRef.current) {
+        viewerRef.current.lookAt({
+          yaw: viewerRef.current.getYaw() + 20
+        }, 1000);
+      }
+    }
+  }),
+      shouldLoad = _useContentElementLif.shouldLoad;
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
+
+  var viewerRef = useRef();
+  var imageFile = useFile({
+    collectionName: 'imageFiles',
+    permaId: configuration.image
+  });
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        pointerEvents: isEditable && !isSelected ? 'none' : undefined
+      }
+    },
+    /*#__PURE__*/
+    React.createElement(Figure, {
+      caption: configuration.caption
+    },
+    /*#__PURE__*/
+    React.createElement(ViewportDependentPillarBoxes, {
+      aspectRatio: configuration.position === 'full' ? 0.5 : 0.75,
+      position: configuration.position,
+      opaque: !!configuration.caption
+    }, renderLazyPanorama(configuration, imageFile, shouldLoad, viewerRef))))
+  );
+}
+
+function renderLazyPanorama(configuration, imageFile, shouldLoad, viewerRef) {
+  if (shouldLoad && imageFile && imageFile.isReady) {
+    return (
+      /*#__PURE__*/
+      React.createElement(Panorama, {
+        imageFile: imageFile,
+        initialYaw: configuration.initialYaw,
+        initialPitch: configuration.initialPitch,
+        viewerRef: viewerRef
+      })
+    );
+  }
+}
+
+frontend.contentElementTypes.register('vrImage', {
+  component: VrImage,
+  lifecycle: true
+});