pageflow 15.2.2 → 15.6.1

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

@@ -0,0 +1,33 @@
+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, [:package_path] do |_t, args|
+    package_json_path = File.join(args.fetch(:package_path, '.'), 'package.json')
+    referenced_gems =
+      File.read(package_json_path).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/storybook.rake

@@ -0,0 +1,173 @@
+namespace :pageflow_scrolled do
+  namespace :storybook do
+    namespace :seed do
+      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
+        entry = Pageflow::Entry.find_by_title('Storybook seed')
+
+        if entry
+          puts "Destroying entry 'Storybook seed'"
+          entry.destroy
+        end
+      end
+
+      desc 'Create entry to generate Storybook entry JSON seed from'
+      task create_entry: :environment do
+        seeds = Module.new do
+          extend Pageflow::Seeds
+          extend PageflowScrolled::Seeds
+        end
+
+        if ENV['PAGEFLOW_PAPERCLIP_S3_ROOT']
+          Pageflow.config.paperclip_s3_root = ENV['PAGEFLOW_PAPERCLIP_S3_ROOT']
+        end
+
+        if ENV['PAGEFLOW_SCROLLED_DB_SEED_SKIP_FILES'] == 'true'
+          puts 'Skipping file uploads to S3.'
+          Paperclip::Storage::S3.class_eval { def flush_writes; end }
+        end
+
+        account = seeds.account(name: 'Storybook seed') do |account_in_progress|
+          account_in_progress.features_configuration =
+            account_in_progress.features_configuration.merge('scrolled_entry_type' => true)
+        end
+
+        seeds.sample_scrolled_entry(
+          attributes: {
+            title: 'Storybook seed',
+            account: account,
+            chapters: [],
+            image_files: {
+              turtle: {
+                url: 'https://s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/seed-assets/images/04_turtle.jpg',
+                configuration: {
+                  focusX: 24,
+                  focusY: 40,
+                  testReferenceName: 'turtle'
+                }
+              }.stringify_keys,
+              churchAfter: {
+                url: 'https://s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/seed-assets/images/17_haldern_church_after.jpg',
+                configuration: {
+                  testReferenceName: 'churchAfter'
+                }
+              }.stringify_keys,
+              churchBefore: {
+                url: 'https://s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/seed-assets/images/16_haldern_church_before.jpg',
+                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: {
+              interview_toni: {
+                url: 'https://s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/seed-assets/videos/08_interview_toni.mp4',
+                width: 1920,
+                height: 1080,
+                configuration: {
+                  testReferenceName: 'interview_toni'
+                }
+              }.stringify_keys
+            },
+            audio_files: {
+              quicktime_jingle: {
+                url: 'https://s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/seed-assets/audios/quicktime_jingle.m4a',
+                configuration: {
+                  testReferenceName: 'quicktime_jingle'
+                }
+              }.stringify_keys
+            }.stringify_keys,
+            text_track_files: {
+              sample: {
+                url: 'https://s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/seed-assets/text_tracks/sample.vtt',
+                parent_file_id: 'quicktime_jingle',
+                parent_file_model_type: 'Pageflow::AudioFile'
+              }.stringify_keys
+            }
+          },
+          options: {
+            skip_encoding: ENV.fetch('PAGEFLOW_SKIP_ENCODING_STORYBOOK_FILES', false)
+          }
+        )
+      end
+
+      desc 'Generate Storybook entry JSON seed'
+      task :generate_json, [: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
+
+        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 =
+          I18n.with_locale(draft_entry.locale) do
+            PageflowScrolled::EntriesController
+              .render(inline: 'scrolled_entry_json_seed(json, entry, ' \
+                              'translations: {include_inline_editing: true})',
+                      type: :jbuilder,
+                      locals: {entry: draft_entry})
+          end
+
+        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
+
+        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
+end

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

@@ -0,0 +1,11 @@
+module.exports = {
+  resolve: {
+    alias: {
+      // By default Video.js now includes the http-streaming
+      // plugin. To reduce bundle size on mobile devices, we load it
+      // dynamically in src/frontend/dash only if HLS is not natively
+      // supported by the browser.
+      'video.js$': 'video.js/core.es.js'
+    },
+  }
+};

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

@@ -1,33 +1,116 @@
-import { editor as editor$1 } from 'pageflow-scrolled/editor';
-import { TextInputView, TextAreaInputView, SliderInputView, CheckBoxInputView, UrlInputView, SelectInputView, cssModulesUtils, ConfigurationEditorView } from 'pageflow/ui';
-import { FileInputView, ColorInputView, ListView, transientReferences } from 'pageflow/editor';
+import { editor, NoOptionsHintView, buttonStyles } from 'pageflow-scrolled/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 _ from 'underscore';
+import I18n from 'i18n-js';
 import Backbone from 'backbone';
-import I18n$1 from 'i18n-js';
+import _ from 'underscore';
 
-editor$1.contentElementTypes.register('heading', {
+editor.contentElementTypes.register('heading', {
+  supportedPositions: ['inline', 'wide'],
+  defaultConfig: {
+    position: 'wide'
+  },
   configurationEditor: function configurationEditor() {
     this.tab('general', function () {
-      this.input('children', TextInputView);
+      this.group('ContentElementPosition');
     });
   }
 });
 
-editor$1.contentElementTypes.register('textBlock', {
+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 ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
+editor.contentElementTypes.register('textBlock', {
+  supportedPositions: ['inline'],
   configurationEditor: function configurationEditor() {
     this.tab('general', function () {
-      this.input('children', TextAreaInputView);
+      this.view(NoOptionsHintView);
     });
+  },
+  split: function split(configuration, insertIndex) {
+    return [_objectSpread2(_objectSpread2({}, configuration), {}, {
+      value: configuration.value.slice(0, insertIndex)
+    }), _objectSpread2(_objectSpread2({}, configuration), {}, {
+      value: configuration.value.slice(insertIndex)
+    })];
+  },
+  merge: function merge(configurationA, configurationB) {
+    // Value might still be empty if text block has not been edited
+    var value = (configurationA.value || []).concat(configurationB.value || []);
+    return _objectSpread2(_objectSpread2({}, configurationA), {}, {
+      // Slate.js does not like empty arrays as value.
+      // `inlineEditing/EditableText` sets default value, but only if
+      // `value` is falsy.
+      value: value.length ? value : undefined
+    });
+  },
+  handleDestroy: function handleDestroy(contentElement) {
+    var transientState = contentElement.get('transientState') || {};
+
+    if (!transientState.editableTextIsSingleBlock) {
+      contentElement.postCommand({
+        type: 'REMOVE'
+      });
+      return false;
+    }
   }
 });
 
-editor$1.contentElementTypes.register('inlineImage', {
+editor.contentElementTypes.register('inlineImage', {
+  supportedPositions: ['inline', 'sticky', 'left', 'right', 'wide', 'full'],
   configurationEditor: function configurationEditor() {
     this.tab('general', function () {
       this.input('id', FileInputView, {
         collection: 'image_files',
-        fileSelectionHandler: 'contentElementConfiguration'
+        fileSelectionHandler: 'contentElementConfiguration',
+        positioning: false
       });
       this.group('ContentElementCaption');
       this.group('ContentElementPosition');
@@ -35,13 +118,68 @@ editor$1.contentElementTypes.register('inlineImage', {
   }
 });
 
-editor$1.contentElementTypes.register('inlineVideo', {
+editor.contentElementTypes.register('inlineVideo', {
+  supportedPositions: ['inline', 'sticky', 'left', 'right', 'full'],
   configurationEditor: function configurationEditor() {
-    this.tab('general', function () {});
+    this.tab('general', function () {
+      this.input('id', FileInputView, {
+        collection: 'video_files',
+        fileSelectionHandler: 'contentElementConfiguration',
+        positioning: false,
+        defaultTextTrackFilePropertyName: 'defaultTextTrackFileId'
+      });
+      this.input('posterId', FileInputView, {
+        collection: 'image_files',
+        fileSelectionHandler: 'contentElementConfiguration',
+        positioning: false
+      });
+      this.input('autoplay', CheckBoxInputView);
+      this.input('atmoDuringPlayback', SelectInputView, {
+        values: ['play', 'mute', 'turnDown']
+      });
+      this.group('ContentElementCaption');
+      this.group('ContentElementPosition');
+    });
+  }
+});
+
+editor.contentElementTypes.register('inlineAudio', {
+  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',
+        fileSelectionHandler: 'contentElementConfiguration',
+        positioning: false,
+        defaultTextTrackFilePropertyName: 'defaultTextTrackFileId'
+      });
+      this.input('posterId', FileInputView, {
+        collection: 'image_files',
+        fileSelectionHandler: 'contentElementConfiguration',
+        positioning: false
+      });
+      this.input('autoplay', CheckBoxInputView);
+      this.input('playerControlVariant', SelectInputView, {
+        values: ['classic', 'waveform'],
+        ensureValueDefined: true
+      });
+      this.input('waveformColor', ColorInputView, {
+        visibleBinding: 'playerControlVariant',
+        visibleBindingValue: 'waveform',
+        defaultValue: entry.getTheme().get('options').colors.accent
+      });
+      this.input('atmoDuringPlayback', SelectInputView, {
+        values: ['play', 'mute', 'turnDown']
+      });
+      this.group('ContentElementCaption');
+      this.group('ContentElementPosition');
+    });
   }
 });
 
-editor$1.contentElementTypes.register('inlineBeforeAfter', {
+editor.contentElementTypes.register('inlineBeforeAfter', {
+  supportedPositions: ['inline'],
   configurationEditor: function configurationEditor() {
     this.tab('general', function () {
       this.input('before_id', FileInputView, {
@@ -57,11 +195,11 @@ editor$1.contentElementTypes.register('inlineBeforeAfter', {
       });
       this.input('after_label', TextInputView);
       this.input('initial_slider_position', SliderInputView);
-      this.input('slider', CheckBoxInputView);
-      this.input('slider_handle', CheckBoxInputView, {
+      this.input('slider', CheckBoxInputView$1);
+      this.input('slider_handle', CheckBoxInputView$1, {
         visibleBinding: 'slider'
       });
-      this.input('slider_color', ColorInputView, {
+      this.input('slider_color', ColorInputView$1, {
         visibleBinding: 'slider'
       });
       this.group('ContentElementPosition');
@@ -74,23 +212,27 @@ editor$1.contentElementTypes.register('inlineBeforeAfter', {
   }
 });
 
-editor$1.contentElementTypes.register('soundDisclaimer', {
+editor.contentElementTypes.register('soundDisclaimer', {
+  supportedPositions: ['inline'],
   configurationEditor: function configurationEditor() {
-    this.tab('general', function () {});
+    this.tab('general', function () {
+      this.view(NoOptionsHintView);
+    });
   }
 });
 
-editor$1.contentElementTypes.register('videoEmbed', {
+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
       });
-      this.input('hideInfo', CheckBoxInputView);
-      this.input('hideControls', CheckBoxInputView);
+      this.input('hideInfo', CheckBoxInputView$1);
+      this.input('hideControls', CheckBoxInputView$1);
       this.input('aspectRatio', SelectInputView, {
         values: ['wide', 'narrow', 'square', 'portrait']
       });
@@ -102,99 +244,10 @@ editor$1.contentElementTypes.register('videoEmbed', {
 
 var SidebarRouter = Marionette.AppRouter.extend({
   appRoutes: {
-    'scrolled/external_links/:id/': 'links',
     'scrolled/external_links/:id/:link_id': 'link'
   }
 });
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css = ".SidebarListView-module_container__2j0sq {\n  margin-top: 30px;\n}\n.SidebarListView-module_add__138Ey{\n  border: 1px solid #1c86fe;\n  border-radius: 3px;\n  box-shadow: inset 0 1px 0 0 #b6d5f8;\n  color: white !important;\n  display: inline-block;\n  font-size: 11px;\n  font-weight: bold;\n  background-color: #6aacf7;\n  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6aacf7), color-stop(100%, #2b8efe));\n  background-image: -webkit-linear-gradient(#6aacf7, #2b8efe);\n  background-image: linear-gradient(#6aacf7, #2b8efe) !important;\n  padding: 7px 18px;\n  text-decoration: none !important;\n  text-shadow: 0 1px 0 #067bff;\n  background-clip: padding-box;\n  padding-top: 5px;\n  padding-bottom: 4px;\n  padding-left: 12px\n}\n\n.SidebarListView-module_add__138Ey::before{\n  font-family: 'entypo';\n  content: \"\\2795\"\n}\n\n.SidebarListView-module_add__138Ey:hover:not(:disabled):not(.SidebarListView-module_disabled__2s_kN) {\n  box-shadow: inset 0 1px 0 0 #87baf4;\n  cursor: pointer;\n  background-color: #559ff2;\n  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #559ff2), color-stop(100%, #1d86fc));\n  background-image: -webkit-linear-gradient(#559ff2, #1d86fc);\n  background-image: linear-gradient(#559ff2, #1d86fc)\n}\n\n.SidebarListView-module_add__138Ey:active:not(:disabled):not(.SidebarListView-module_disabled__2s_kN) {\n  border: 1px solid #1c86fe;\n  box-shadow: inset 0 0 8px 4px #0f7efb, inset 0 0 8px 4px #0f7efb, 0 1px 1px 0 #eee\n}\n\n.SidebarListView-module_header__fxwPU{\n  display: 'block';\n}\n\n\n.SidebarListView-module_links_container__XDAeC {\n  margin-top: 10px;\n}";
-var styles = {"container":"SidebarListView-module_container__2j0sq","add":"SidebarListView-module_add__138Ey","disabled":"SidebarListView-module_disabled__2s_kN","header":"SidebarListView-module_header__fxwPU","links_container":"SidebarListView-module_links_container__XDAeC"};
-styleInject(css);
-
-var SidebarListView = Marionette.Layout.extend({
-  template: function template(data) {
-    return "\n    <a class=\"back\">".concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.outline'), "</a>\n    <a class=\"destroy\">").concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.destroy'), "</a>\n    <div class=\"").concat(styles.container, "\">\n      <label class=\"").concat(styles.header, "\">\n        <span class=\"name\">").concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.name'), "</span>\n      </label>\n      <div class='").concat(styles.links_container, "'></div>\n      <a class=\"").concat(styles.add, "\" href=\"\">").concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.add'), "</a>\n    </div>\n  ");
-  },
-  className: 'manage_external_links',
-  regions: {
-    linksContainer: '.' + styles.links_container
-  },
-  ui: cssModulesUtils.ui(styles, 'add', 'header'),
-  events: function events() {
-    var eventObject = {
-      'click a.back': 'goBack',
-      'click a.destroy': 'destroyElement'
-    };
-    eventObject['click a.' + styles.add] = 'addElement';
-    return eventObject;
-  },
-  initialize: function initialize(options) {
-    this.listenTo(options.contentElement.configuration, 'change', function () {
-      this.render();
-    });
-  },
-  onRender: function onRender() {
-    this.linksContainer.show(new ListView({
-      collection: this.model,
-      onEdit: _.bind(this.onEdit, this),
-      onRemove: _.bind(this.onRemove, this),
-      contentElement: this.options.contentElement
-    }));
-  },
-  goBack: function goBack() {
-    editor$1.navigate('', {
-      trigger: true
-    });
-  },
-  destroyElement: function destroyElement() {
-    if (confirm(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.confirm_delete'))) {
-      this.options.contentElement.destroy();
-      this.goBack();
-    }
-  },
-  addElement: function addElement() {
-    var newModel = this.model.addNewLink();
-    this.onEdit(newModel);
-  },
-  onEdit: function onEdit(linkModel) {
-    editor$1.navigate("/scrolled/external_links/".concat(this.options.contentElement.get('id'), "/").concat(linkModel.get('id')), {
-      trigger: true
-    });
-  },
-  onRemove: function onRemove(linkModel) {
-    if (confirm(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.confirm_delete_link'))) {
-      this.model.remove(linkModel);
-    }
-  }
-});
-
 var SidebarEditLinkView = Marionette.Layout.extend({
   template: function template(data) {
     return "\n    <a class=\"back\">".concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.back'), "</a>\n    <a class=\"destroy\">").concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.destroy'), "</a>\n\n    <div class='form_container'></div>\n  ");
@@ -219,7 +272,7 @@ var SidebarEditLinkView = Marionette.Layout.extend({
       this.input('url', TextInputView, {
         required: true
       });
-      this.input('open_in_new_tab', CheckBoxInputView);
+      this.input('open_in_new_tab', CheckBoxInputView$1);
       this.input('thumbnail', FileInputView, {
         collection: 'image_files',
         fileSelectionHandler: 'contentElement.externalLinks.link',
@@ -231,20 +284,17 @@ var SidebarEditLinkView = Marionette.Layout.extend({
       this.input('title', TextInputView, {
         required: true
       });
-      this.input('description', TextAreaInputView, {
-        size: 'short',
-        disableLinks: true
-      });
+      this.input('description', TextInputView);
     });
     this.formContainer.show(configurationEditor);
   },
   goBack: function goBack() {
-    editor.navigate("/scrolled/external_links/".concat(this.options.contentElement.get('id'), "/"), {
+    editor$1.navigate("/scrolled/content_elements/".concat(this.options.contentElement.get('id')), {
       trigger: true
     });
   },
   destroyLink: function destroyLink() {
-    if (confirm('pageflow_scrolled.editor.content_elements.externalLinkList.confirm_delete_link')) {
+    if (window.confirm(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.confirm_delete_link'))) {
       this.options.collection.remove(this.model);
       this.goBack();
     }
@@ -255,7 +305,6 @@ var ExternalLinkModel = Backbone.Model.extend({
   modelName: 'ExternalLink',
   i18nKey: 'external_link',
   mixins: [transientReferences],
-  initialize: function initialize(options) {},
   thumbnailUrl: function thumbnailUrl() {
     var image = this.collection.entry.imageFiles.getByPermaId(this.get('thumbnail'));
     return image ? image.get('thumbnail_url') : '';
@@ -278,17 +327,7 @@ var ExternalLinkCollection = Backbone.Collection.extend({
     return attrs.id;
   },
   updateConfiguration: function updateConfiguration() {
-    var _this = this;
-
-    this.configuration.set('links', this.toJSON(), {
-      silent: true
-    });
-    setTimeout(function () {
-      //triggering change event inside this timeout block because otherwise due to
-      //some unknown reason page navigates to window.location.origin+window.location.pathname
-      //ignoring the hash thus causing the page to refresh.
-      _this.configuration.trigger('change');
-    }, 0);
+    this.configuration.set('links', this.toJSON());
   },
   addNewLink: function addNewLink() {
     var newLink = {
@@ -304,83 +343,118 @@ var ExternalLinkCollection = Backbone.Collection.extend({
   }
 });
 
+ExternalLinkCollection.forContentElement = function (contentElement, entry) {
+  return new ExternalLinkCollection(contentElement.configuration.get('links') || [], {
+    entry: entry,
+    configuration: contentElement.configuration
+  });
+};
+
 var SidebarController = Marionette.Controller.extend({
   initialize: function initialize(options) {
+    this.entry = options.entry;
     this.region = options.region;
   },
-  links: function links(id) {
-    var _this = this;
-
-    this.setModel(id); //if not done without timeout another empty tab view is shown in the sidebar
-    //to me it seems to be the problem of some method call ordering which gets fixed with this
-    //hack but in future it should be fixed without having to use setTimeout
-
-    setTimeout(function () {
-      _this.region.show(new SidebarListView({
-        model: _this.linksCollection,
-        contentElement: _this.model,
-        entry: _this.options.entry
-      }));
-    }, 0);
-  },
-  link: function link(id, link_id) {
-    var _this2 = this;
-
-    this.setModel(id);
-    setTimeout(function () {
-      _this2.region.show(new SidebarEditLinkView({
-        model: _this2.linksCollection.get(link_id),
-        collection: _this2.linksCollection,
-        contentElement: _this2.model,
-        entry: _this2.options.entry
-      }));
-    }, 0);
-  },
-  setModel: function setModel(id) {
-    this.model = this.options.entry.contentElements.get(id);
-    var configuration = this.model.configuration;
+  link: function link(id, linkId) {
+    var contentElement = this.entry.contentElements.get(id);
+    var linksCollection = ExternalLinkCollection.forContentElement(contentElement, this.entry);
+    this.region.show(new SidebarEditLinkView({
+      model: linksCollection.get(linkId),
+      collection: linksCollection,
+      contentElement: contentElement
+    }));
+  }
+});
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
 
-    if (!configuration.get('links')) {
-      configuration.set('links', []);
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
     }
+  } else {
+    head.appendChild(style);
+  }
 
-    this.linksCollection = new ExternalLinkCollection(configuration.get('links'), {
-      entry: this.options.entry,
-      configuration: configuration
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css = ".SidebarListView-module_linksContainer__HvWq- {\n}\n";
+var styles = {"linksContainer":"SidebarListView-module_linksContainer__HvWq-"};
+styleInject(css);
+
+var SidebarListView = Marionette.Layout.extend({
+  template: function template(data) {
+    return "\n    <div class='".concat(styles.linksContainer, "'></div>\n    <button class=\"").concat(buttonStyles.addButton, "\">\n      ").concat(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.add'), "\n    </button>\n  ");
+  },
+  regions: cssModulesUtils.ui(styles, 'linksContainer'),
+  events: cssModulesUtils.events(buttonStyles, {
+    'click addButton': 'addElement'
+  }),
+  onRender: function onRender() {
+    this.linksContainer.show(new ListView({
+      collection: this.collection,
+      onEdit: _.bind(this.onEdit, this),
+      onRemove: _.bind(this.onRemove, this)
+    }));
+  },
+  addElement: function addElement() {
+    var newModel = this.collection.addNewLink();
+    this.onEdit(newModel);
+  },
+  onEdit: function onEdit(linkModel) {
+    editor.navigate("/scrolled/external_links/".concat(this.options.contentElement.id, "/").concat(linkModel.id), {
+      trigger: true
     });
+  },
+  onRemove: function onRemove(linkModel) {
+    if (window.confirm(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.confirm_delete_link'))) {
+      this.collection.remove(linkModel);
+    }
   }
 });
 
 //router defines the URL hash path mapping and controller provides functions for the paths
 
-editor$1.registerSideBarRouting({
+editor.registerSideBarRouting({
   router: SidebarRouter,
   controller: SidebarController
 }); // register external link list content element configuration editor for sidebar
 
-editor$1.contentElementTypes.register('externalLinkList', {
-  configurationEditor: function configurationEditor() {
+editor.contentElementTypes.register('externalLinkList', {
+  supportedPositions: ['inline'],
+  configurationEditor: function configurationEditor(_ref) {
+    var entry = _ref.entry;
     this.tab('general', function () {
-      var externalListModel = this.model.parent; //redirect to special hash path that is specific to external links only
-
-      editor$1.navigate("/scrolled/external_links/".concat(externalListModel.get('id'), "/"), {
-        trigger: true
+      this.view(SidebarListView, {
+        contentElement: this.model.parent,
+        collection: ExternalLinkCollection.forContentElement(this.model.parent, entry)
       });
     });
   }
 }); // register file handler for thumbnail of external link
 
-editor$1.registerFileSelectionHandler('contentElement.externalLinks.link', function (options) {
+editor.registerFileSelectionHandler('contentElement.externalLinks.link', function (options) {
   var contentElement = options.entry.contentElements.get(options.contentElementId);
-  var links = contentElement.configuration.get('links');
+  var links = ExternalLinkCollection.forContentElement(contentElement, options.entry);
 
   this.call = function (file) {
-    var link = links.find(function (link) {
-      return link.id == options.id;
-    });
-    link.thumbnail = file.get('perma_id');
-    contentElement.configuration.set('links', links);
-    contentElement.configuration.trigger('change', contentElement.configuration);
+    var link = links.get(options.id);
+    link.setReference('thumbnail', file);
   };
 
   this.getReferer = function () {
@@ -390,21 +464,78 @@ editor$1.registerFileSelectionHandler('contentElement.externalLinks.link', funct
 
 var DatawrapperAdView = Marionette.ItemView.extend({
   template: function template(data) {
-    return "\n    <form action=\"https://datawrapper.de/chart/create\" method=\"POST\" target=\"_blank\">\n      <input type=\"hidden\" name=\"theme\" value=\"pageflow\" />\n      <input type=\"submit\" value=\"".concat(I18n$1.t('pageflow_scrolled.editor.content_elements.dataWrapperChart.attributes.create_chart.label'), "\" />\n    </form>\n  ");
+    return "\n    <form action=\"https://datawrapper.de/chart/create\" method=\"POST\" target=\"_blank\">\n      <input type=\"hidden\" name=\"theme\" value=\"pageflow\" />\n      <input type=\"submit\" value=\"".concat(I18n.t('pageflow_scrolled.editor.content_elements.dataWrapperChart.attributes.create_chart.label'), "\" />\n    </form>\n  ");
   },
   className: 'datawrapper_ad'
 });
 
-editor$1.contentElementTypes.register('dataWrapperChart', {
+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
       });
       this.view(DatawrapperAdView);
+      this.input('title', TextInputView, {
+        placeholder: I18n.t('pageflow_scrolled.public.chart.default_title')
+      });
+      this.input('backgroundColor', ColorInputView, {
+        defaultValue: '#323d4d'
+      });
+      this.group('ContentElementCaption');
+      this.group('ContentElementPosition');
+    });
+  }
+});
+
+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');
+    }
+  }]
+});