pageflow 15.6.1 → 15.7.0

data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/editor.js

@@ -147,9 +147,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }).flatten().value();
   }
 
-  var i18nUtils =
-  /*#__PURE__*/
-  Object.freeze({
+  var i18nUtils = /*#__PURE__*/Object.freeze({
     __proto__: null,
     attributeTranslationKeys: attributeTranslationKeys,
     attributeTranslation: attributeTranslation,
@@ -340,9 +338,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     return ".".concat(classNames.replace(/ /g, '.'));
   }
 
-  var cssModulesUtils =
-  /*#__PURE__*/
-  Object.freeze({
+  var cssModulesUtils = /*#__PURE__*/Object.freeze({
     __proto__: null,
     ui: ui,
     events: events,
@@ -359,6 +355,23 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
 
 
   BaseObject.extend = Backbone.Model.extend;
+  var serverSideValidation = {
+    initialize: function initialize() {
+      var _this = this;
+
+      this.validationErrors = {};
+      this.listenTo(this, 'error', function (model, request) {
+        if (request.status === 422) {
+          _this.validationErrors = JSON.parse(request.responseText).errors;
+
+          _this.trigger('invalid');
+        }
+      });
+      this.listenTo(this, 'sync', function () {
+        _this.validationErrors = {};
+      });
+    }
+  };
   var CollectionView = Marionette.View.extend({
     initialize: function initialize() {
       this.rendered = false;
@@ -757,10 +770,12 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
       this.configure();
     },
     configure: function configure() {},
-    tab: function tab(name, callback) {
+    tab: function tab(name, callbackOrOptions, callback) {
+      callback = callback || callbackOrOptions;
+      var options = callback ? callbackOrOptions : {};
       this.tabsView.tab(name, _.bind(function () {
         var tabView = new ConfigurationEditorTabView({
-          model: this.model,
+          model: options.model || this.model,
           placeholderModel: this.options.placeholderModel,
           tab: name,
           attributeTranslationKeyPrefixes: this.options.attributeTranslationKeyPrefixes
@@ -900,7 +915,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   var TableHeaderCellView = TableCellView.extend({
     tagName: 'th',
     render: function render() {
-      this.$el.text(this.attributeTranslation('column_header'));
+      this.$el.text(this.options.column.headerText || this.attributeTranslation('column_header'));
       this.$el.data('columnName', this.options.column.name);
       return this;
     }
@@ -1273,6 +1288,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
       return this.getAttributeBoundOption('disabled');
     },
     updateDisabled: function updateDisabled() {
+      this.$el.toggleClass('input-disabled', !!this.isDisabled());
       this.updateInlineHelp();
 
       if (this.ui.input) {
@@ -1499,6 +1515,30 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
       return this.options.placeholderModel && this.options.placeholderModel.get(this.options.propertyName);
     }
   };
+  var viewWithValidationErrorMessages = {
+    onRender: function onRender() {
+      this.listenTo(this.model, 'invalid sync', this.updateValidationErrorMessages);
+      this.updateValidationErrorMessages();
+    },
+    updateValidationErrorMessages: function updateValidationErrorMessages() {
+      var _this = this;
+
+      var errors = this.model.validationErrors && this.model.validationErrors[this.options.propertyName] || [];
+
+      if (errors.length) {
+        this.validationErrorList = this.validationErrorList || $('<ul class="validation_error_messages" />').appendTo(this.el);
+        this.validationErrorList.html('');
+        errors.forEach(function (error) {
+          return _this.validationErrorList.append("<li>".concat(error, "</li>"));
+        });
+        this.$el.addClass('invalid');
+      } else if (this.validationErrorList) {
+        this.validationErrorList.remove();
+        this.validationErrorList = null;
+        this.$el.removeClass('invalid');
+      }
+    }
+  };
 
   function template$6(data) {
     var __p = '';
@@ -1527,7 +1567,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
 
 
   var TextInputView = Marionette.ItemView.extend({
-    mixins: [inputView, inputWithPlaceholderText],
+    mixins: [inputView, inputWithPlaceholderText, viewWithValidationErrorMessages],
     template: template$6,
     ui: {
       input: 'input'
@@ -2011,7 +2051,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     var __t,
         __p = '';
 
-    __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n\n<!-- inline style for wysihtml5 to pick up -->\n<textarea style="width: 100%;" dir="auto"></textarea>\n\n<div class="toolbar">\n  <a data-wysihtml5-command="bold" title="' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.bold')) == null ? '' : __t) + '"></a>\n  <a data-wysihtml5-command="italic" title="' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.italic')) == null ? '' : __t) + '"></a>\n  <a data-wysihtml5-command="underline" title="' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.underline')) == null ? '' : __t) + '"></a>\n  <a data-wysihtml5-command="createLink" class="link_button" title="' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.create_link')) == null ? '' : __t) + '"></a>\n  <a data-wysihtml5-command="insertOrderedList" title="' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.insert_ordered_list')) == null ? '' : __t) + '"></a>\n  <a data-wysihtml5-command="insertUnorderedList" title="' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.insert_unordered_list')) == null ? '' : __t) + '"></a>\n\n  <div data-wysihtml5-dialog="createLink" class="dialog link_dialog" style="display: none;">\n    <div class="link_type_select">\n      <label>\n        <input type="radio" name="link_type" class="url_link_radio_button">\n        ' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.link_type.url')) == null ? '' : __t) + '\n      </label>\n      <label>\n        <input type="radio" name="link_type" class="fragment_link_radio_button">\n        ' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.link_type.page_link')) == null ? '' : __t) + '\n      </label>\n    </div>\n    <div class="url_link_panel">\n      <label>\n        ' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.target')) == null ? '' : __t) + '\n      </label>\n      <input type="text" class="display_url">\n      <div class="open_in_new_tab_section">\n        <label>\n          <input type="checkbox" class="open_in_new_tab">\n          ' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.open_in_new_tab')) == null ? '' : __t) + '\n        </label>\n        <span class="inline_help">\n          ' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.open_in_new_tab_help')) == null ? '' : __t) + '\n        </span>\n      </div>\n    </div>\n    <div class="fragment_link_panel">\n      <!-- LinkInputView is inserted here -->\n    </div>\n\n    <!-- wysihtml5 does not handle hidden fields correctly -->\n    <div class="internal">\n      <input type="text" data-wysihtml5-dialog-field="href" class="current_url" value="">\n      <input type="text" data-wysihtml5-dialog-field="target" class="current_target" value="_blank">\n    </div>\n\n    <a class="button" data-wysihtml5-dialog-action="save">\n      ' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.save')) == null ? '' : __t) + '\n    </a>\n    <a class="button" data-wysihtml5-dialog-action="cancel">\n      ' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.cancel')) == null ? '' : __t) + '\n    </a>\n\n    <a data-wysihtml5-command="removeLink">' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.remove_link')) == null ? '' : __t) + '</a>\n  </div>\n</div>\n';
+    __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n\n<!-- inline style for wysihtml5 to pick up -->\n<textarea style="width: 100%;" dir="auto"></textarea>\n\n<div class="toolbar">\n  <a data-wysihtml5-command="bold" title="' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.bold')) == null ? '' : __t) + '"></a>\n  <a data-wysihtml5-command="italic" title="' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.italic')) == null ? '' : __t) + '"></a>\n  <a data-wysihtml5-command="underline" title="' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.underline')) == null ? '' : __t) + '"></a>\n  <a data-wysihtml5-command="createLink" class="link_button" title="' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.create_link')) == null ? '' : __t) + '"></a>\n  <a data-wysihtml5-command="insertOrderedList" title="' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.insert_ordered_list')) == null ? '' : __t) + '"></a>\n  <a data-wysihtml5-command="insertUnorderedList" title="' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.insert_unordered_list')) == null ? '' : __t) + '"></a>\n\n  <div data-wysihtml5-dialog="createLink" class="dialog link_dialog" style="display: none;">\n    <div class="link_type_select">\n      <label>\n        <input type="radio" name="link_type" class="url_link_radio_button">\n        ' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.link_type.url')) == null ? '' : __t) + '\n      </label>\n      <label>\n        <input type="radio" name="link_type" class="fragment_link_radio_button">\n        ' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.link_type.page_link')) == null ? '' : __t) + '\n      </label>\n    </div>\n    <div class="url_link_panel">\n      <label>\n        <span>\n          ' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.target')) == null ? '' : __t) + '\n        </span>\n      </label>\n      <input type="text" class="display_url">\n      <div class="open_in_new_tab_section">\n        <label>\n          <input type="checkbox" class="open_in_new_tab">\n          ' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.open_in_new_tab')) == null ? '' : __t) + '\n        </label>\n        <span class="inline_help">\n          ' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.open_in_new_tab_help')) == null ? '' : __t) + '\n        </span>\n      </div>\n    </div>\n    <div class="fragment_link_panel">\n      <!-- LinkInputView is inserted here -->\n    </div>\n\n    <!-- wysihtml5 does not handle hidden fields correctly -->\n    <div class="internal">\n      <input type="text" data-wysihtml5-dialog-field="href" class="current_url" value="">\n      <input type="text" data-wysihtml5-dialog-field="target" class="current_target" value="_blank">\n    </div>\n\n    <a class="button" data-wysihtml5-dialog-action="save">\n      ' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.save')) == null ? '' : __t) + '\n    </a>\n    <a class="button" data-wysihtml5-dialog-action="cancel">\n      ' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.cancel')) == null ? '' : __t) + '\n    </a>\n\n    <a data-wysihtml5-command="removeLink">' + ((__t = I18n.t('pageflow.ui.templates.inputs.text_area_input.remove_link')) == null ? '' : __t) + '</a>\n  </div>\n</div>\n';
     return __p;
   }
   /**
@@ -2335,6 +2375,15 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     supportedHosts: function supportedHosts() {
       return this.options.supportedHosts;
     },
+    // Host names used to be expected to include protocols. Remove
+    // protocols for backwards compatilbity. Since supportedHosts
+    // is supposed to be overridden in subclasses, we do it in a
+    // separate method.
+    supportedHostsWithoutLegacyProtocols: function supportedHostsWithoutLegacyProtocols() {
+      return _.map(this.supportedHosts(), function (host) {
+        return host.replace(/^https?:\/\//, '');
+      });
+    },
     validate: function validate(success) {
       var view = this;
       var options = this.options;
@@ -2371,23 +2420,26 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
       }
 
       function hasSupportedHost(url) {
-        return _.any(view.supportedHosts(), function (host) {
-          return url.match(new RegExp('^' + host));
+        return _.any(view.supportedHostsWithoutLegacyProtocols(), function (host) {
+          return url.match(new RegExp('^https?://' + host));
         });
       }
 
       function displayValidationError(message) {
         view.$el.addClass('invalid');
+        view.ui.input.attr('aria-invalid', 'true');
         view.ui.validation.removeClass('pending').addClass('failed').html(message).show();
       }
 
       function displayValidationPending(message) {
         view.$el.removeClass('invalid');
+        view.ui.input.removeAttr('aria-invalid');
         view.ui.validation.removeClass('failed').addClass('pending').html(message).show();
       }
 
       function resetValidationError(message) {
         view.$el.removeClass('invalid');
+        view.ui.input.attr('aria-invalid', 'false');
         view.ui.validation.hide();
       }
     }
@@ -2620,6 +2672,15 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
    *   Ignore the attribute value if the input is disabled and display
    *   an unchecked check box.
    *
+   * @param {boolean} [options.displayCheckedIfDisabled=false]
+   *   Ignore the attribute value if the input is disabled and display
+   *   an checked check box.
+   *
+   * @param {string} [options.storeInverted]
+   *   Display checked by default and store true in given attribute when
+   *   unchecked. The property name passed to `input` is only used for
+   *   translations.
+   *
    * @class
    */
 
@@ -2646,7 +2707,13 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     },
     save: function save() {
       if (!this.isDisabled()) {
-        this.model.set(this.options.propertyName, this.ui.input.is(':checked'));
+        var value = this.ui.input.is(':checked');
+
+        if (this.options.storeInverted) {
+          this.model.set(this.options.storeInverted, !value);
+        } else {
+          this.model.set(this.options.propertyName, value);
+        }
       }
     },
     load: function load() {
@@ -2657,11 +2724,46 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     displayValue: function displayValue() {
       if (this.isDisabled() && this.options.displayUncheckedIfDisabled) {
         return false;
+      } else if (this.isDisabled() && this.options.displayCheckedIfDisabled) {
+        return true;
+      } else if (this.options.storeInverted) {
+        return !this.model.get(this.options.storeInverted);
       } else {
         return this.model.get(this.options.propertyName);
       }
     }
   });
+  /**
+   * Render a separator in a {@link ConfigurationEditorView} tab.
+   *
+   * @example
+   *
+   * this.view(SeparatorView);
+   *
+   * @class
+   */
+
+  var SeparatorView = Marionette.View.extend({
+    className: 'separator'
+  });
+  /**
+   * Render an input that is only a label. Can be used to render
+   * additional inline help.
+   *
+   * See {@link inputView} for further options
+   *
+   * @class
+   */
+
+  var LabelOnlyView = Marionette.ItemView.extend({
+    mixins: [inputView],
+    template: function template() {
+      return "\n    <label>\n      <span class=\"name\"></span>\n      <span class=\"inline_help\"></span>\n    </label>\n  ";
+    },
+    ui: {
+      label: 'label'
+    }
+  });
   /**
    * A table cell mapping column attribute values to a list of
    * translations.
@@ -2877,7 +2979,11 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
       }
     }
   };
-  Cocktail.mixin(Marionette.View, subviewContainer);
+
+  if (!Marionette.View.prototype.appendSubview) {
+    Cocktail.mixin(Marionette.View, subviewContainer);
+  }
+
   var tooltipContainer = {
     events: {
       'mouseover [data-tooltip]': function mouseoverDataTooltip(event) {
@@ -3243,10 +3349,14 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
         model: this.model.configuration,
         attributeTranslationKeyPrefixes: ['pageflow.editor.files.attributes.' + fileType.collectionName, 'pageflow.editor.files.common_attributes', 'pageflow.editor.nested_files.' + fileType.collectionName, 'pageflow.editor.nested_files.common_attributes']
       });
-      tab.input('file_name', TextInputView, {
-        model: this.model,
-        disabled: true
-      });
+
+      if (this.options.displayFileName) {
+        tab.input('file_name', TextInputView, {
+          model: this.model,
+          disabled: true
+        });
+      }
+
       tab.input('rights', TextInputView, {
         model: this.model,
         placeholder: entry.get('default_file_rights')
@@ -3291,7 +3401,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     var __t,
         __p = '';
 
-    __p += '<div class="box">\n  <div class="content">\n  </div>\n\n  <div class="footer">\n    <a href="" class="close">\n      ' + ((__t = I18n.t('pageflow.editor.templates.file_settings_dialog.close')) == null ? '' : __t) + '\n    </a>\n  </div>\n</div>\n';
+    __p += '<div class="box">\n  <div class="content">\n    <h1 class="dialog-header"></h1>\n  </div>\n\n  <div class="footer">\n    <a href="" class="close">\n      ' + ((__t = I18n.t('pageflow.editor.templates.file_settings_dialog.close')) == null ? '' : __t) + '\n    </a>\n  </div>\n</div>\n';
     return __p;
   }
 
@@ -3300,9 +3410,11 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     className: 'file_settings_dialog editor dialog',
     mixins: [dialogView],
     ui: {
-      content: '.content'
+      content: '.content',
+      header: '.dialog-header'
     },
     onRender: function onRender() {
+      this.ui.header.text(this.model.title());
       this.tabsView = new TabsView({
         model: this.model,
         i18n: 'pageflow.editor.files.settings_dialog_tabs',
@@ -5229,8 +5341,8 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     initialize: function initialize(attributes, options) {
       Configuration.prototype.initialize.apply(this, attributes, options);
       this.configuration = new EntryMetadataConfiguration(_.clone(attributes.configuration) || {});
-      this.listenTo(this.configuration, 'change', function () {
-        this.trigger('change');
+      this.listenTo(this.configuration, 'change', function (model, options) {
+        this.trigger('change', model, options);
         this.parent.save();
       });
     },
@@ -6752,7 +6864,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
 
     __p += '<div class="blank_slate">\n  <p>\n      ' + ((__t = I18n.t('pageflow.editor.templates.confirm_encoding.all_released')) == null ? '' : __t) + '\n  </p>\n  <p>\n      ' + ((__t = I18n.t('pageflow.editor.templates.confirm_encoding.link_to_progress', {
       link: '<a href="#/files/video_files">' + I18n.t('pageflow.editor.templates.confirm_encoding.manage_files') + '</a>'
-    })) == null ? '' : __t) + '\n  </p>\n</div>\n\n<div class="video_files_panel">\n  <h2>' + ((__t = I18n.t('pageflow.editor.templates.confirm_encoding.videos_tab')) == null ? '' : __t) + '</h2>\n</div>\n\n<div class="audio_files_panel">\n  <h2>' + ((__t = I18n.t('pageflow.editor.templates.confirm_encoding.audios_tab')) == null ? '' : __t) + '</h2>\n</div>\n\n<div class="summary">\n</div>\n<button class="confirm">' + ((__t = I18n.t('pageflow.editor.templates.confirm_encoding.confirm_button')) == null ? '' : __t) + '</button>\n';
+    })) == null ? '' : __t) + '\n  </p>\n</div>\n\n<div class="intro">\n</div>\n\n<div class="video_files_panel">\n  <h2>' + ((__t = I18n.t('pageflow.editor.templates.confirm_encoding.videos_tab')) == null ? '' : __t) + '</h2>\n</div>\n\n<div class="audio_files_panel">\n  <h2>' + ((__t = I18n.t('pageflow.editor.templates.confirm_encoding.audios_tab')) == null ? '' : __t) + '</h2>\n</div>\n\n<div class="summary">\n</div>\n<button class="confirm">' + ((__t = I18n.t('pageflow.editor.templates.confirm_encoding.confirm_button')) == null ? '' : __t) + '</button>\n';
     return __p;
   }
 
@@ -6764,6 +6876,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
       videoFilesPanel: '.video_files_panel',
       audioFilesPanel: '.audio_files_panel',
       summary: '.summary',
+      intro: '.intro',
       confirmButton: 'button'
     },
     events: {
@@ -6805,10 +6918,12 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     },
     updateBlankSlate: function updateBlankSlate() {
       this.ui.blankSlate.toggle(!this.confirmableVideoFiles.length && !this.confirmableAudioFiles.length);
+      this.ui.intro.toggle(!!this.confirmableVideoFiles.length || !!this.confirmableAudioFiles.length);
       this.ui.videoFilesPanel.toggle(!!this.confirmableVideoFiles.length);
       this.ui.audioFilesPanel.toggle(!!this.confirmableAudioFiles.length);
     },
     updateSummary: function updateSummary(enabled) {
+      this.ui.intro.html(this.model.get('intro_html'));
       this.ui.summary.html(this.model.get('summary_html'));
       this.ui.confirmButton.toggleClass('checking', !!this.model.get('checking'));
 
@@ -7197,13 +7312,13 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     var __t,
         __p = '';
 
-    __p += '<div class="box">\n  <h2>' + ((__t = I18n.t('pageflow.editor.templates.background_positioning.title')) == null ? '' : __t) + '</h2>\n  <p>' + ((__t = I18n.t('pageflow.editor.templates.background_positioning.help')) == null ? '' : __t) + '</p>\n\n  <div class="wrapper">\n  </div>\n\n  <h3>' + ((__t = I18n.t('pageflow.editor.templates.background_positioning.preview_title')) == null ? '' : __t) + '</h3>\n  <div class="previews">\n    <div>\n    </div>\n  </div>\n\n  <div class="footer">\n    <a href="" class="save">' + ((__t = I18n.t('pageflow.editor.templates.background_positioning.save')) == null ? '' : __t) + '</a>\n    <a href="" class="close">' + ((__t = I18n.t('pageflow.editor.templates.background_positioning.cancel')) == null ? '' : __t) + '</a>\n  </div>\n</div>\n';
+    __p += '<div class="box">\n  <div class="content">\n    <h2 class="dialog-header">' + ((__t = I18n.t('pageflow.editor.templates.background_positioning.title')) == null ? '' : __t) + '</h2>\n    <p class="dialog-hint">' + ((__t = I18n.t('pageflow.editor.templates.background_positioning.help')) == null ? '' : __t) + '</p>\n\n    <div class="wrapper">\n    </div>\n\n    <h3>' + ((__t = I18n.t('pageflow.editor.templates.background_positioning.preview_title')) == null ? '' : __t) + '</h3>\n    <div class="previews">\n      <div>\n      </div>\n    </div>\n  </div>\n\n  <div class="footer">\n    <a href="" class="save">' + ((__t = I18n.t('pageflow.editor.templates.background_positioning.save')) == null ? '' : __t) + '</a>\n    <a href="" class="close">' + ((__t = I18n.t('pageflow.editor.templates.background_positioning.cancel')) == null ? '' : __t) + '</a>\n  </div>\n</div>\n';
     return __p;
   }
 
   var BackgroundPositioningView = Marionette.ItemView.extend({
     template: template$b$1,
-    className: 'background_positioning dialog',
+    className: 'background_positioning editor dialog',
     mixins: [dialogView],
     ui: {
       previews: '.previews > div',
@@ -7754,7 +7869,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     var __t,
         __p = '';
 
-    __p += '<div class="box">\n  <div class="content">\n    <div>\n      <h2 class="themes_header">' + ((__t = I18n.t('pageflow.editor.templates.change_theme_dialog.header')) == null ? '' : __t) + '</h2>\n      <div class="themes_panel">\n      </div>\n      <div class="preview_panel">\n        <h2 class="preview_header">' + ((__t = I18n.t('pageflow.editor.templates.change_theme_dialog.preview_header_prefix')) == null ? '' : __t) + '\n          <span class="preview_header_theme_name"></span>' + ((__t = I18n.t('pageflow.editor.templates.change_theme_dialog.preview_header_suffix')) == null ? '' : __t) + '\n        </h2>\n        <div class="preview_image_region">\n          <img class="preview_image" src="default_template.png">\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class="footer">\n    <a href="" class="close">\n      ' + ((__t = I18n.t('pageflow.editor.templates.change_theme_dialog.close')) == null ? '' : __t) + '\n    </a>\n  </div>\n</div>\n';
+    __p += '<div class="box">\n  <h1 class="dialog-header">\n    ' + ((__t = I18n.t('pageflow.editor.templates.change_theme_dialog.header')) == null ? '' : __t) + '\n  </h1>\n  <div class="panels">\n    <div class="themes_panel">\n    </div>\n    <div class="preview_panel">\n      <h2 class="dialog-sub_header">\n        ' + ((__t = I18n.t('pageflow.editor.templates.change_theme_dialog.preview_header_prefix')) == null ? '' : __t) + '\n        <span class="preview_header_theme_name"></span>\n        ' + ((__t = I18n.t('pageflow.editor.templates.change_theme_dialog.preview_header_suffix')) == null ? '' : __t) + '\n      </h2>\n      <div class="preview_image_region">\n        <img class="preview_image" src="default_template.png">\n      </div>\n    </div>\n  </div>\n  <div class="footer">\n    <a href="" class="close">\n      ' + ((__t = I18n.t('pageflow.editor.templates.change_theme_dialog.close')) == null ? '' : __t) + '\n    </a>\n  </div>\n</div>\n';
     return __p;
   }
 
@@ -7763,7 +7878,6 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     className: 'change_theme dialog editor',
     mixins: [dialogView],
     ui: {
-      content: '.content',
       themesPanel: '.themes_panel',
       previewPanel: '.preview_panel',
       previewImageRegion: '.preview_image_region',
@@ -8269,7 +8383,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     var __t,
         __p = '';
 
-    __p += '<div class="box">\n  <h2>' + ((__t = I18n.t('pageflow.editor.templates.files_explorer.reuse_files')) == null ? '' : __t) + '</h2>\n\n  <div class="panels">\n    <ul class="entries_panel">\n    </ul>\n\n    <div class="files_panel">\n    </div>\n  </div>\n\n  <div class="footer">\n    <button class="ok">' + ((__t = I18n.t('pageflow.editor.templates.files_explorer.ok')) == null ? '' : __t) + '</button>\n    <button class="close">' + ((__t = I18n.t('pageflow.editor.templates.files_explorer.cancel')) == null ? '' : __t) + '</button>\n  </div>\n</div>\n';
+    __p += '<div class="box">\n  <h1 class="dialog-header">\n    ' + ((__t = I18n.t('pageflow.editor.templates.files_explorer.reuse_files')) == null ? '' : __t) + '\n  </h1>\n\n  <div class="panels">\n    <ul class="entries_panel">\n    </ul>\n\n    <div class="files_panel">\n    </div>\n  </div>\n\n  <div class="footer">\n    <button class="ok">' + ((__t = I18n.t('pageflow.editor.templates.files_explorer.ok')) == null ? '' : __t) + '</button>\n    <button class="close">' + ((__t = I18n.t('pageflow.editor.templates.files_explorer.cancel')) == null ? '' : __t) + '</button>\n  </div>\n</div>\n';
     return __p;
   }
 
@@ -8735,7 +8849,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     var __t,
         __p = '';
 
-    __p += '<div class="box file_importer_box">\n  <h1 class="dialog-header">' + ((__t = I18n.t('pageflow.editor.file_importers.' + data.importerKey + '.dialog_label')) == null ? '' : __t) + '</h1>\n\n  <div class="content_panel">\n    \n  </div>\n\n  <div class="footer">\n    <div class="disclaimer">\n      <p>' + ((__t = I18n.t('pageflow.editor.file_importers.' + data.importerKey + '.disclaimer')) == null ? '' : __t) + '</p>\n    </div>\n    <button class="import">' + ((__t = I18n.t('pageflow.editor.views.files_view.import')) == null ? '' : __t) + '</button>\n    <button class="close">' + ((__t = I18n.t('pageflow.editor.templates.files_explorer.cancel')) == null ? '' : __t) + '</button>\n  </div>\n</div>\n';
+    __p += '<div class="box file_importer_box">\n  <h1 class="dialog-header">' + ((__t = I18n.t('pageflow.editor.file_importers.' + data.importerKey + '.dialog_label')) == null ? '' : __t) + '</h1>\n\n  <div class="content_panel">\n    \n  </div>\n\n  <div class="footer">\n    <div class="disclaimer">\n      ' + ((__t = I18n.t('pageflow.editor.file_importers.' + data.importerKey + '.disclaimer')) == null ? '' : __t) + '\n    </div>\n    <button class="import" disabled>' + ((__t = I18n.t('pageflow.editor.views.files_view.import')) == null ? '' : __t) + '</button>\n    <button class="close">' + ((__t = I18n.t('pageflow.editor.templates.files_explorer.cancel')) == null ? '' : __t) + '</button>\n  </div>\n</div>\n';
     return __p;
   }
 
@@ -8743,18 +8857,11 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     var __t,
         __p = '';
 
-    __p += '<div class="box">\n  <h1 class="dialog-header">' + ((__t = I18n.t('pageflow.editor.templates.confirm_upload.header')) == null ? '' : __t) + '</h1>\n  <p class="dialog-hint">' + ((__t = I18n.t('pageflow.editor.templates.confirm_upload.hint')) == null ? '' : __t) + '</p>\n\n  <div class="files_panel">\n  </div>\n\n  <div class="selected_file_panel">\n    <h2>' + ((__t = I18n.t('pageflow.editor.templates.confirm_upload.edit_file_header')) == null ? '' : __t) + '</h2>\n    <div class="selected_file_region">\n    </div>\n  </div>\n\n  <div class="footer">\n    <button class="upload">' + ((__t = I18n.t('pageflow.editor.templates.confirm_upload.upload')) == null ? '' : __t) + '</button>\n    <button class="close">' + ((__t = I18n.t('pageflow.editor.templates.confirm_upload.close')) == null ? '' : __t) + '</button>\n  </div>\n</div>\n';
-    return __p;
-  }
-
-  function template$z(data) {
-    var __p = '';
-    __p += '<h2></h2>\n';
+    __p += '<div class="box">\n  <h1 class="dialog-header">' + ((__t = I18n.t('pageflow.editor.templates.confirm_upload.header')) == null ? '' : __t) + '</h1>\n  <p class="dialog-hint">' + ((__t = I18n.t('pageflow.editor.templates.confirm_upload.hint')) == null ? '' : __t) + '</p>\n\n  <div class="panels">\n    <div class="files_panel">\n    </div>\n\n    <div class="selected_file_panel">\n      <h2 class="dialog-sub_header">' + ((__t = I18n.t('pageflow.editor.templates.confirm_upload.edit_file_header')) == null ? '' : __t) + '</h2>\n      <div class="selected_file_region">\n      </div>\n    </div>\n  </div>\n\n  <div class="footer">\n    <button class="upload">' + ((__t = I18n.t('pageflow.editor.templates.confirm_upload.upload')) == null ? '' : __t) + '</button>\n    <button class="close">' + ((__t = I18n.t('pageflow.editor.templates.confirm_upload.close')) == null ? '' : __t) + '</button>\n  </div>\n</div>\n';
     return __p;
   }
 
-  var UploadableFilesView = Marionette.ItemView.extend({
-    template: template$z,
+  var UploadableFilesView = Marionette.View.extend({
     className: 'uploadable_files',
     ui: {
       header: 'h2'
@@ -8766,24 +8873,27 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
         this.options.selection.set('file', this.uploadableFiles.first());
       }
     },
-    onRender: function onRender() {
-      this.ui.header.text(I18n$1.t('pageflow.editor.files.tabs.' + this.options.fileType.collectionName));
+    render: function render() {
       this.appendSubview(new TableView({
         collection: this.uploadableFiles,
         attributeTranslationKeyPrefixes: ['pageflow.editor.files.attributes.' + this.options.fileType.collectionName, 'pageflow.editor.files.common_attributes'],
-        columns: this.commonColumns().concat(this.fileTypeColumns()),
+        columns: this.commonColumns({
+          fileTypeDisplayName: I18n$1.t('pageflow.editor.files.tabs.' + this.options.fileType.collectionName)
+        }).concat(this.fileTypeColumns()),
         selection: this.options.selection,
         selectionAttribute: 'file'
       }));
       this.listenTo(this.uploadableFiles, 'add remove', this.update);
       this.update();
+      return this;
     },
     update: function update() {
       this.$el.toggleClass('is_empty', this.uploadableFiles.length === 0);
     },
-    commonColumns: function commonColumns() {
+    commonColumns: function commonColumns(options) {
       return [{
         name: 'file_name',
+        headerText: options.fileTypeDisplayName,
         cellView: TextTableCellView
       }, {
         name: 'rights',
@@ -8956,7 +9066,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     app.dialogRegion.show(new FilesImporterView(options).render());
   };
 
-  function template$A(data) {
+  function template$z(data) {
     var __t,
         __p = '';
 
@@ -8965,7 +9075,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   }
 
   var SelectButtonView = Marionette.ItemView.extend({
-    template: template$A,
+    template: template$z,
     className: 'select_button',
     ui: {
       button: 'button',
@@ -9000,7 +9110,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$B(data) {
+  function template$A(data) {
     var __t,
         __p = '';
 
@@ -9009,7 +9119,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   }
 
   var FilesView = Marionette.ItemView.extend({
-    template: template$B,
+    template: template$A,
     className: 'manage_files',
     events: {
       'click a.back': 'goBack',
@@ -9094,14 +9204,14 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$C(data) {
+  function template$B(data) {
     var __p = '';
     __p += '<div class="quota_state">\n</div>\n<div class="outlet">\n</div>\n<div class="exhausted_message">\n</div>\n';
     return __p;
   }
 
   var EntryPublicationQuotaDecoratorView = Marionette.Layout.extend({
-    template: template$C,
+    template: template$B,
     className: 'quota_decorator',
     regions: {
       outlet: '.outlet'
@@ -9142,7 +9252,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$D(data) {
+  function template$C(data) {
     var __t,
         __p = '';
 
@@ -9151,7 +9261,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   }
 
   var PublishEntryView = Marionette.ItemView.extend({
-    template: template$D,
+    template: template$C,
     className: 'publish_entry',
     ui: {
       publishUntilFields: '.publish_until_fields',
@@ -9424,11 +9534,13 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
       editor.setDefaultHelpEntry('pageflow.help_entries.files');
     },
     confirmableFiles: function confirmableFiles(preselectedFileType, preselectedFileId) {
+      var model = EncodingConfirmation.createWithPreselection({
+        fileType: preselectedFileType,
+        fileId: preselectedFileId
+      });
+      model.check();
       this.region.show(ConfirmEncodingView.create({
-        model: EncodingConfirmation.createWithPreselection({
-          fileType: preselectedFileType,
-          fileId: preselectedFileId
-        })
+        model: model
       }));
     },
     metaData: function metaData(tab) {
@@ -9532,7 +9644,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$E(data) {
+  function template$D(data) {
     var __t,
         __p = '';
 
@@ -9541,7 +9653,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   }
 
   var HelpView = Marionette.ItemView.extend({
-    template: template$E,
+    template: template$D,
     className: 'help',
     ui: {
       placeholder: '.placeholder',
@@ -9617,7 +9729,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     className: 'model_thumbnail page_thumbnail'
   });
 
-  function template$F(data) {
+  function template$E(data) {
     var __t,
         __p = '';
 
@@ -9626,7 +9738,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   }
 
   var PageLinkItemView = Marionette.ItemView.extend({
-    template: template$F,
+    template: template$E,
     tagName: 'li',
     className: 'page_link',
     ui: {
@@ -9676,7 +9788,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$G(data) {
+  function template$F(data) {
     var __t,
         __p = '';
 
@@ -9685,7 +9797,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   }
 
   var PageLinksView = Marionette.ItemView.extend({
-    template: template$G,
+    template: template$F,
     className: 'page_links',
     ui: {
       links: 'ul.links',
@@ -9721,14 +9833,14 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$H(data) {
+  function template$G(data) {
     var __p = '';
     __p += '<div class="emulation_mode_button-wrapper"\n     data-tooltip-align="top center">\n  <div class="emulation_mode_button-desktop_icon"/>\n  <div class="emulation_mode_button-phone_icon"/>\n  <div class="emulation_mode_button-track" />\n  <div class="emulation_mode_button-thumb" />\n</div>\n';
     return __p;
   }
 
   var EmulationModeButtonView = Marionette.ItemView.extend({
-    template: template$H,
+    template: template$G,
     className: 'emulation_mode_button',
     mixins: [tooltipContainer],
     ui: {
@@ -9762,7 +9874,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$I(data) {
+  function template$H(data) {
     var __t,
         __p = '';
 
@@ -9771,7 +9883,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   }
 
   var HelpButtonView = Marionette.ItemView.extend({
-    template: template$I,
+    template: template$H,
     className: 'help_button',
     events: {
       'click': function click() {
@@ -9808,7 +9920,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$J(data) {
+  function template$I(data) {
     var __t,
         __p = '';
 
@@ -9817,7 +9929,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   }
 
   var ListItemView = Marionette.ItemView.extend({
-    template: template$J,
+    template: template$I,
     tagName: 'li',
     className: 'list_item',
     ui: {
@@ -9891,16 +10003,16 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$K(data) {
+  function template$J(data) {
     var __t,
         __p = '';
 
-    __p += '<div class="checking notice">\n  <p>' + ((__t = I18n.t('pageflow.editor.templates.locked.loading')) == null ? '' : __t) + '</p>\n\n  <a class="close" href="#">' + ((__t = I18n.t('pageflow.editor.templates.locked.close')) == null ? '' : __t) + '</a>\n</div>\n\n<div class="error notice">\n  <div class="message"></div>\n\n  <a class="close" href="#">' + ((__t = I18n.t('pageflow.editor.templates.locked.close')) == null ? '' : __t) + '</a>\n  <a class="break" href="#">' + ((__t = I18n.t('pageflow.editor.templates.locked.open_here')) == null ? '' : __t) + '</a>\n</div>\n\n';
+    __p += '<div class="checking notice editor">\n  <p>' + ((__t = I18n.t('pageflow.editor.templates.locked.loading')) == null ? '' : __t) + '</p>\n\n  <a class="close" href="#">' + ((__t = I18n.t('pageflow.editor.templates.locked.close')) == null ? '' : __t) + '</a>\n</div>\n\n<div class="error notice editor">\n  <p class="message"></p>\n\n  <a class="close" href="#">' + ((__t = I18n.t('pageflow.editor.templates.locked.close')) == null ? '' : __t) + '</a>\n  <a class="break" href="#">' + ((__t = I18n.t('pageflow.editor.templates.locked.open_here')) == null ? '' : __t) + '</a>\n</div>\n\n';
     return __p;
   }
 
   var LockedView = Marionette.ItemView.extend({
-    template: template$K,
+    template: template$J,
     className: 'locked checking',
     ui: {
       breakButton: '.break',
@@ -10090,7 +10202,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$L(data) {
+  function template$K(data) {
     var __t,
         __p = '';
 
@@ -10103,7 +10215,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   var NotificationsView = Marionette.ItemView.extend({
     className: 'notifications',
     tagName: 'ul',
-    template: template$L,
+    template: template$K,
     ui: {
       failedCount: '.failed .count',
       uploadingCount: '.uploading .count',
@@ -10188,15 +10300,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
       return this.model.getReference(this.options.propertyName, this.options.collection);
     }
   });
-
-  function template$M(data) {
-    var __p = '';
-    __p += '<h2></h2>\n';
-    return __p;
-  }
-
-  var NestedFilesView = Marionette.ItemView.extend({
-    template: template$M,
+  var NestedFilesView = Marionette.View.extend({
     className: 'nested_files',
     ui: {
       header: 'h2'
@@ -10215,8 +10319,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
       this.listenTo(this.collection, 'request', this.update);
       this.listenTo(this.collection, 'sync', this.update);
     },
-    onRender: function onRender() {
-      this.ui.header.text(this.collection.parentModel.get('file_name'));
+    render: function render() {
       this.appendSubview(new TableView({
         collection: this.collection,
         attributeTranslationKeyPrefixes: ['pageflow.editor.nested_files.' + this.options.fileType.collectionName],
@@ -10226,6 +10329,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
         blankSlateText: this.options.tableBlankSlateText
       }));
       this.update();
+      return this;
     },
     update: function update() {
       this.$el.toggleClass('is_empty', this.collection.length === 0);
@@ -10272,16 +10376,16 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }, 200)
   });
 
-  function template$N(data) {
+  function template$L(data) {
     var __t,
         __p = '';
 
-    __p += '<div class="text_tracks_container">\n  <div class="files_upload_panel">\n    <div class="files_panel">\n    </div>\n    <a class="upload" href="">' + ((__t = I18n.t('pageflow.editor.templates.text_tracks.upload')) == null ? '' : __t) + '</a>\n  </div>\n\n  <div class="selected_file_panel">\n    <h2 class="selected_file_header">' + ((__t = I18n.t('pageflow.editor.templates.text_tracks.edit_file_header')) == null ? '' : __t) + '</h2>\n    <div class="selected_file_region">\n    </div>\n  </div>\n</div>\n';
+    __p += '<div class="text_tracks_container">\n  <div class="files_upload_panel">\n    <div class="files_panel">\n    </div>\n    <a class="upload" href="">' + ((__t = I18n.t('pageflow.editor.templates.text_tracks.upload')) == null ? '' : __t) + '</a>\n  </div>\n\n  <div class="selected_file_panel">\n    <h2 class="selected_file_header dialog-sub_header">' + ((__t = I18n.t('pageflow.editor.templates.text_tracks.edit_file_header')) == null ? '' : __t) + '</h2>\n    <div class="selected_file_region">\n    </div>\n  </div>\n</div>\n';
     return __p;
   }
 
   var TextTracksView = Marionette.Layout.extend({
-    template: template$N,
+    template: template$L,
     className: 'text_tracks',
     regions: {
       selectedFileRegion: '.selected_file_region'
@@ -10319,6 +10423,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
       if (selectedFile) {
         this.selectedFileRegion.show(new EditFileView({
           model: selectedFile,
+          displayFileName: true,
           attributeTranslationKeyPrefixes: ['pageflow.editor.nested_files.text_track_files']
         }));
         this.ui.selectedFileHeader.toggle(true);
@@ -10343,7 +10448,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$O(data) {
+  function template$M(data) {
     var __p = '';
     __p += '<label>\n  <span class="list_label"></span>\n</label>\n\n<ul class="list_items"></ul>\n';
     return __p;
@@ -10390,7 +10495,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
 
 
   var ListView = Marionette.ItemView.extend({
-    template: template$O,
+    template: template$M,
     className: 'list',
     ui: {
       label: '.list_label',
@@ -10590,6 +10695,17 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
       }
     })
   });
+  editor.widgetTypes.register('consent_bar', {
+    configurationEditorView: ConfigurationEditorView.extend({
+      configure: function configure() {
+        this.tab('consent_bar', function () {
+          this.view(InfoBoxView, {
+            text: I18n$1.t('pageflow.editor.consent_bar.widget_type_info_box_text')
+          });
+        });
+      }
+    })
+  });
   editor.widgetTypes.registerRole('cookie_notice', {
     isOptional: true
   });
@@ -10898,9 +11014,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
       }
     });
   });
-  app.addInitializer(function ()
-  /* args */
-  {
+  app.addInitializer(function () {
     var context = this;
     var args = arguments;
 
@@ -10994,7 +11108,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$P(data) {
+  function template$N(data) {
   var __t, __p = '';
   __p += '<a href="">\n  <span class="type_pictogram"></span>\n  <span class="page_thumbnail"></span>\n  <span class="title"></span>\n  <span class="failure_icon" title="' +
   ((__t = ( I18n.t('pageflow.editor.templates.page_item.save_error') )) == null ? '' : __t) +
@@ -11004,7 +11118,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
 
   var PageItemView = Marionette.ItemView.extend({
     tagName: 'li',
-    template: template$P,
+    template: template$N,
     ui: {
       title: '.title',
       pictogram: '.type_pictogram',
@@ -11024,19 +11138,29 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     update: function update() {
       this.$el.attr('data-id', this.model.id);
       this.$el.attr('data-perma-id', this.model.get('perma_id'));
+      this.$el.attr('title', this._getItemTitle());
       this.$el.toggleClass('active', this.model.get('active'));
       this.$el.toggleClass('disabled', !!(this.options.isDisabled && this.options.isDisabled(this.model)));
-      this.$el.toggleClass('display_in_navigation', !!this.model.configuration.get('display_in_navigation'));
+      this.$el.toggleClass('hide_in_navigation', !this.model.configuration.get('display_in_navigation'));
       this.$el.removeClass(editor.pageTypes.pluck('name').join(' ')).addClass(this.model.get('template'));
       this.ui.pictogram.attr('title', this._getPictogramTitle());
-      this.ui.title.text(this.model.title() || I18n$1.t('pageflow.editor.views.page_item_view.unnamed'));
+      this.ui.title.text(this._getTitle());
     },
     _getPictogramTitle: function _getPictogramTitle() {
-      var result = I18n$1.t(this.model.pageType().translationKey());
-      result += ' Seite';
+      return I18n$1.t(this.model.pageType().translationKey()) + ' Seite';
+    },
+    _getItemTitle: function _getItemTitle() {
+      if (this.options.displayInNavigationHint && !this.model.configuration.get('display_in_navigation')) {
+        return 'nicht in Navigationsleiste';
+      }
+
+      return '';
+    },
+    _getTitle: function _getTitle() {
+      var result = this.model.title() || I18n$1.t('pageflow.editor.views.page_item_view.unnamed');
 
       if (this.options.displayInNavigationHint && !this.model.configuration.get('display_in_navigation')) {
-        result += ' (nicht in Navigationsleiste)';
+        return "(".concat(result, ")");
       }
 
       return result;
@@ -11059,9 +11183,9 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$Q(data) {
+  function template$O(data) {
   var __t, __p = '';
-  __p += '<a class="edit_chapter" href="">\n  <span class="pictogram"></span>\n  <span class="number"></span>\n  <span class="title"></span>\n  <span class="failure_icon" title=' +
+  __p += '<a class="edit_chapter" href="">\n  <span class="drag_handle"></span>\n  <span class="number"></span>\n  <span class="title"></span>\n  <span class="failure_icon" title=' +
   ((__t = ( I18n.t('pageflow.editor.templates.chapter_item.save_error') )) == null ? '' : __t) +
   ' />\n</a>\n\n<ul class="pages outline"></ul>\n\n<a href="" class="add_page">' +
   ((__t = ( I18n.t('pageflow.editor.templates.chapter_item.new_page') )) == null ? '' : __t) +
@@ -11071,7 +11195,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
 
   var ChapterItemView = Marionette.ItemView.extend({
     tagName: 'li',
-    template: template$Q,
+    template: template$O,
     ui: {
       title: '> a > .title',
       number: '> a > .number',
@@ -11099,6 +11223,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
 
   var NavigatableChapterItemView = ChapterItemView.extend({
     mixins: [loadable, failureIndicatingView],
+    className: 'draggable',
     events: {
       'click a.add_page': function clickAAdd_page() {
         this.model.addPage();
@@ -11115,18 +11240,18 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$R(data) {
+  function template$P(data) {
   var __t, __p = '';
   __p += '<h2>' +
   ((__t = ( I18n.t('pageflow.editor.templates.storyline_outline.header') )) == null ? '' : __t) +
-  '</h2>\n<ul class="storyline_outline_chapters chapters"></ul>\n\n<a class="add_chapter" href="">' +
+  '</h2>\n<ul class="storyline_outline_chapters chapters outline"></ul>\n\n<a class="add_chapter" href="">' +
   ((__t = ( I18n.t('pageflow.editor.templates.storyline_outline.new_chapter') )) == null ? '' : __t) +
   '</a>\n';
   return __p
   }
 
   var StorylineOutlineView = Marionette.Layout.extend({
-    template: template$R,
+    template: template$P,
     className: 'storyline_outline',
     ui: {
       chapters: 'ul.storyline_outline_chapters'
@@ -11137,7 +11262,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
       }
     },
     onRender: function onRender() {
-      this.ui.chapters.toggleClass('outline navigatable', !!this.options.navigatable);
+      this.ui.chapters.toggleClass('navigatable', !!this.options.navigatable);
       var collectionView = this.options.sortable ? SortableCollectionView : CollectionView;
       new collectionView({
         el: this.ui.chapters,
@@ -11154,7 +11279,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$S(data) {
+  function template$Q(data) {
   var __t, __p = '';
   __p += '<div class="storyline_picker_storylines">\n  <div class="storyline_picker_select_region"></div>\n  <a href="" class="add_storyline" title="' +
   ((__t = ( I18n.t('pageflow.editor.templates.storyline_picker.add') )) == null ? '' : __t) +
@@ -11165,7 +11290,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   }
 
   var StorylinePickerView = Marionette.Layout.extend({
-    template: template$S,
+    template: template$Q,
     className: 'storyline_picker',
     regions: {
       selectRegion: '.storyline_picker_select_region',
@@ -11269,7 +11394,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }, options));
   };
 
-  function template$T(data) {
+  function template$R(data) {
   var __t, __p = '';
   __p += '<h2>' +
   ((__t = ( I18n.t('pageflow.editor.blank_entry.header') )) == null ? '' : __t) +
@@ -11288,7 +11413,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   }
 
   var BlankEntryView = Marionette.ItemView.extend({
-    template: template$T,
+    template: template$R,
     className: 'blank_entry'
   });
 
@@ -11385,7 +11510,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$U(data) {
+  function template$S(data) {
   var __t, __p = '';
   __p += '<div class="container">\n  <div class="header"></div>\n  <div class="overview"></div>\n\n  <div class="entry"></div>\n</div>\n<div class="navigation_disabled_hint">\n  ' +
   ((__t = ( I18n.t('pageflow.editor.templates.entry_preview.navigation_disabled_hint') )) == null ? '' : __t) +
@@ -11394,7 +11519,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   }
 
   var EntryPreviewView = Marionette.ItemView.extend({
-    template: template$U,
+    template: template$S,
     className: 'entry_preview',
     ui: {
       container: '> .container',
@@ -11569,19 +11694,19 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   };
 
-  function template$V(data) {
+  function template$T(data) {
   var __t, __p = '';
-  __p += '<div class="box">\n  <h2>' +
+  __p += '<div class="box">\n  <h1 class="dialog-header">\n    ' +
   ((__t = ( I18n.t('pageflow.editor.templates.page_selection.title') )) == null ? '' : __t) +
-  '</h2>\n\n  <div class="wrapper editor">\n    <div class="storyline_picker">\n    </div>\n  </div>\n\n  <div class="footer">\n    <a href="" class="close">' +
+  '\n  </h1>\n\n  <div class="content">\n    <div class="storyline_picker">\n    </div>\n  </div>\n\n  <div class="footer">\n    <a href="" class="close">' +
   ((__t = ( I18n.t('pageflow.editor.templates.page_selection.cancel') )) == null ? '' : __t) +
   '</a>\n  </div>\n</div>\n';
   return __p
   }
 
   var PageSelectionView = Marionette.ItemView.extend({
-    template: template$V,
-    className: 'page_selection dialog',
+    template: template$T,
+    className: 'page_selection dialog editor',
     mixins: [dialogView],
     ui: {
       storylines: '.storyline_picker',
@@ -11633,7 +11758,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$W(data) {
+  function template$U(data) {
   var __t, __p = '';
   __p += '<a class="back">' +
   ((__t = ( I18n.t('pageflow.editor.templates.edit_chapter.outline') )) == null ? '' : __t) +
@@ -11648,7 +11773,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   }
 
   var EditChapterView = Marionette.Layout.extend({
-    template: template$W,
+    template: template$U,
     className: 'edit_chapter',
     mixins: [failureIndicatingView],
     regions: {
@@ -11690,7 +11815,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$X(data) {
+  function template$V(data) {
   var __t, __p = '';
   __p += '<a class="back">' +
   ((__t = ( I18n.t('pageflow.editor.templates.edit_page_link.back') )) == null ? '' : __t) +
@@ -11701,7 +11826,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   }
 
   var EditPageLinkView = Marionette.Layout.extend({
-    template: template$X,
+    template: template$V,
     regions: {
       formContainer: '.form_container'
     },
@@ -11740,7 +11865,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$Y(data) {
+  function template$W(data) {
   var __t, __p = '';
   __p += '<a class="back">' +
   ((__t = ( I18n.t('pageflow.editor.templates.edit_page.outline') )) == null ? '' : __t) +
@@ -11755,7 +11880,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   }
 
   var EditPageView = Marionette.Layout.extend({
-    template: template$Y,
+    template: template$W,
     className: 'edit_page',
     mixins: [failureIndicatingView],
     regions: {
@@ -11825,7 +11950,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
     }
   });
 
-  function template$Z(data) {
+  function template$X(data) {
   var __t, __p = '';
   __p += '<a class="back">' +
   ((__t = ( I18n.t('pageflow.editor.templates.edit_storyline.outline') )) == null ? '' : __t) +
@@ -11840,7 +11965,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   }
 
   var EditStorylineView = Marionette.Layout.extend({
-    template: template$Z,
+    template: template$X,
     className: 'edit_storyline',
     mixins: [failureIndicatingView, tooltipContainer],
     regions: {
@@ -12059,6 +12184,9 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
       });
       this.tab('options', function () {
         this.input('autoplay', CheckBoxInputView);
+        this.input('smart_contain', CheckBoxInputView, {
+          storeInverted: 'contain'
+        });
 
         if (frontend.features.isEnabled('auto_change_page')) {
           this.input('auto_change_page_on_ended', CheckBoxInputView);
@@ -12349,6 +12477,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   exports.InfoBoxView = InfoBoxView;
   exports.InvalidNestedTypeError = InvalidNestedTypeError;
   exports.JsonInputView = JsonInputView;
+  exports.LabelOnlyView = LabelOnlyView;
   exports.LazyVideoEmbeddedView = LazyVideoEmbeddedView;
   exports.ListItemView = ListItemView;
   exports.ListView = ListView;
@@ -12386,6 +12515,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   exports.ScrollingView = ScrollingView;
   exports.SelectButtonView = SelectButtonView;
   exports.SelectInputView = SelectInputView;
+  exports.SeparatorView = SeparatorView;
   exports.SidebarController = SidebarController;
   exports.SidebarFooterView = SidebarFooterView;
   exports.SidebarRouter = SidebarRouter;
@@ -12456,6 +12586,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   exports.polling = polling;
   exports.retryable = retryable;
   exports.selectableView = selectableView;
+  exports.serverSideValidation = serverSideValidation;
   exports.stageProvider = stageProvider;
   exports.startEditor = startEditor;
   exports.state = state;
@@ -12464,6 +12595,7 @@ var pageflow_paged = (function (exports, Backbone, _, Marionette, $, I18n$1, Chi
   exports.tooltipContainer = tooltipContainer;
   exports.transientReferences = transientReferences;
   exports.validFileTypeTranslationList = validFileTypeTranslationList;
+  exports.viewWithValidationErrorMessages = viewWithValidationErrorMessages;
 
   return exports;