pageflow 15.2.0 → 15.5.0

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/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/contentElements-editor.js

@@ -0,0 +1,541 @@
+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 I18n from 'i18n-js';
+import Backbone from 'backbone';
+import _ from 'underscore';
+
+editor.contentElementTypes.register('heading', {
+  supportedPositions: ['inline', 'wide'],
+  defaultConfig: {
+    position: 'wide'
+  },
+  configurationEditor: function configurationEditor() {
+    this.tab('general', function () {
+      this.group('ContentElementPosition');
+    });
+  }
+});
+
+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.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.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',
+        positioning: false
+      });
+      this.group('ContentElementCaption');
+      this.group('ContentElementPosition');
+    });
+  }
+});
+
+editor.contentElementTypes.register('inlineVideo', {
+  supportedPositions: ['inline', 'sticky', 'left', 'right', 'full'],
+  configurationEditor: function configurationEditor() {
+    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.contentElementTypes.register('inlineBeforeAfter', {
+  supportedPositions: ['inline'],
+  configurationEditor: function configurationEditor() {
+    this.tab('general', function () {
+      this.input('before_id', FileInputView, {
+        collection: 'image_files',
+        fileSelectionHandler: 'contentElementConfiguration',
+        positioning: false
+      });
+      this.input('before_label', TextInputView);
+      this.input('after_id', FileInputView, {
+        collection: 'image_files',
+        fileSelectionHandler: 'contentElementConfiguration',
+        positioning: false
+      });
+      this.input('after_label', TextInputView);
+      this.input('initial_slider_position', SliderInputView);
+      this.input('slider', CheckBoxInputView$1);
+      this.input('slider_handle', CheckBoxInputView$1, {
+        visibleBinding: 'slider'
+      });
+      this.input('slider_color', ColorInputView$1, {
+        visibleBinding: 'slider'
+      });
+      this.group('ContentElementPosition');
+    });
+  },
+  defaultConfig: {
+    slider: true,
+    slider_handle: true,
+    initial_slider_position: 50
+  }
+});
+
+editor.contentElementTypes.register('soundDisclaimer', {
+  supportedPositions: ['inline'],
+  configurationEditor: function configurationEditor() {
+    this.tab('general', function () {
+      this.view(NoOptionsHintView);
+    });
+  }
+});
+
+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: 'displayVideoSource',
+        required: true,
+        permitHttps: true
+      });
+      this.input('hideInfo', CheckBoxInputView$1);
+      this.input('hideControls', CheckBoxInputView$1);
+      this.input('aspectRatio', SelectInputView, {
+        values: ['wide', 'narrow', 'square', 'portrait']
+      });
+      this.group('ContentElementCaption');
+      this.group('ContentElementPosition');
+    });
+  }
+});
+
+var SidebarRouter = Marionette.AppRouter.extend({
+  appRoutes: {
+    'scrolled/external_links/:id/:link_id': 'link'
+  }
+});
+
+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  ");
+  },
+  className: 'edit_external_link',
+  regions: {
+    formContainer: '.form_container'
+  },
+  events: {
+    'click a.back': 'goBack',
+    'click a.destroy': 'destroyLink'
+  },
+  initialize: function initialize(options) {},
+  onRender: function onRender() {
+    var configurationEditor = new ConfigurationEditorView({
+      model: this.model,
+      attributeTranslationKeyPrefixes: ['pageflow_scrolled.editor.content_elements.externalLinkList.attributes'],
+      tabTranslationKeyPrefix: 'pageflow_scrolled.editor.content_elements.externalLinkList.tabs'
+    });
+    var self = this;
+    configurationEditor.tab('edit_link', function () {
+      this.input('url', TextInputView, {
+        required: true
+      });
+      this.input('open_in_new_tab', CheckBoxInputView$1);
+      this.input('thumbnail', FileInputView, {
+        collection: 'image_files',
+        fileSelectionHandler: 'contentElement.externalLinks.link',
+        fileSelectionHandlerOptions: {
+          contentElementId: self.options.contentElement.get('id')
+        },
+        positioning: false
+      });
+      this.input('title', TextInputView, {
+        required: true
+      });
+      this.input('description', TextInputView);
+    });
+    this.formContainer.show(configurationEditor);
+  },
+  goBack: function goBack() {
+    editor$1.navigate("/scrolled/content_elements/".concat(this.options.contentElement.get('id')), {
+      trigger: true
+    });
+  },
+  destroyLink: function destroyLink() {
+    if (window.confirm(I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.confirm_delete_link'))) {
+      this.options.collection.remove(this.model);
+      this.goBack();
+    }
+  }
+});
+
+var ExternalLinkModel = Backbone.Model.extend({
+  modelName: 'ExternalLink',
+  i18nKey: 'external_link',
+  mixins: [transientReferences],
+  thumbnailUrl: function thumbnailUrl() {
+    var image = this.collection.entry.imageFiles.getByPermaId(this.get('thumbnail'));
+    return image ? image.get('thumbnail_url') : '';
+  },
+  title: function title() {
+    return this.get('title');
+  }
+});
+
+var ExternalLinkCollection = Backbone.Collection.extend({
+  model: ExternalLinkModel,
+  initialize: function initialize(models, options) {
+    this.entry = options.entry;
+    this.configuration = options.configuration;
+    this.bind('change', this.updateConfiguration);
+    this.bind('add', this.updateConfiguration);
+    this.bind('remove', this.updateConfiguration);
+  },
+  modelId: function modelId(attrs) {
+    return attrs.id;
+  },
+  updateConfiguration: function updateConfiguration() {
+    this.configuration.set('links', this.toJSON());
+  },
+  addNewLink: function addNewLink() {
+    var newLink = {
+      id: this.length + 1,
+      title: '',
+      url: '',
+      thumbnail: '',
+      description: '',
+      open_in_new_tab: 1
+    };
+    this.add(newLink);
+    return this.get(this.length);
+  }
+});
+
+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;
+  },
+  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 (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_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.registerSideBarRouting({
+  router: SidebarRouter,
+  controller: SidebarController
+}); // 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 () {
+      this.view(SidebarListView, {
+        contentElement: this.model.parent,
+        collection: ExternalLinkCollection.forContentElement(this.model.parent, entry)
+      });
+    });
+  }
+}); // register file handler for thumbnail of external link
+
+editor.registerFileSelectionHandler('contentElement.externalLinks.link', function (options) {
+  var contentElement = options.entry.contentElements.get(options.contentElementId);
+  var links = ExternalLinkCollection.forContentElement(contentElement, options.entry);
+
+  this.call = function (file) {
+    var link = links.get(options.id);
+    link.setReference('thumbnail', file);
+  };
+
+  this.getReferer = function () {
+    return '/scrolled/external_links/' + contentElement.id + '/' + options.id;
+  };
+});
+
+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.t('pageflow_scrolled.editor.content_elements.dataWrapperChart.attributes.create_chart.label'), "\" />\n    </form>\n  ");
+  },
+  className: 'datawrapper_ad'
+});
+
+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: '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');
+    }
+  }]
+});