pageflow 15.6.1 → 15.7.0

data/package/package.json

@@ -7,12 +7,13 @@
   "author": "Codevise Solutions GmbH <info@codevise.de>",
   "license": "MIT",
   "devDependencies": {
-    "babel-jest": "^24.9.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "babel-jest": "^27.0.6",
     "eslint": "^6.6.0",
     "eslint-import-resolver-jest": "^3.0.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^23.0.4",
-    "jest": "^24.9.0",
+    "jest": "^27.0.6",
     "jest-css-modules-processor": "^0.0.9",
     "jest-jquery-matchers": "^2.1.0",
     "jest-sinon": "^1.0.0",
@@ -26,6 +27,7 @@
     "backbone-events-standalone": "^0.2.7",
     "classlist.js": "^1.1.20150312",
     "core-js": "^3.4.1",
-    "i18n-js": "^3.5.1"
+    "i18n-js": "^3.5.1",
+    "postcss-functions": "^3.0.0"
   }
 }

data/package/testHelpers.js

@@ -2,7 +2,8 @@ import $ from 'jquery';
 import _ from 'underscore';
 import { Object as Object$1 } from 'pageflow/ui';
 import Backbone from 'backbone';
-import { Entry, Theme, FileTypes, FilesCollection, SubsetCollection, ImageFile, WidgetTypes, EditorApi, VideoFile, TextTrackFile } from 'pageflow/editor';
+import { Entry, Theme, FileTypes, FilesCollection, SubsetCollection, ImageFile, WidgetTypes, EditorApi, WidgetsCollection, VideoFile, TextTrackFile } from 'pageflow/editor';
+import { browser } from 'pageflow/frontend';
 import I18n from 'i18n-js';
 
 var Base = Object$1.extend({
@@ -67,9 +68,7 @@ Base.classMethods = function (Constructor) {
   };
 };
 
-Base.extend = function ()
-/* arguments */
-{
+Base.extend = function () {
   var result = Object$1.extend.apply(this, arguments);
 
   _.extend(result, Base.classMethods(result));
@@ -377,6 +376,7 @@ var factories = {
 
     ensureFileTypes(options);
     ensureFilesCollections(options);
+    ensureWidgetsCollections(options);
     var entry = new model(_objectSpread2({
       id: 1
     }, attributes), _.extend({
@@ -614,6 +614,27 @@ function ensureFilesCollections(options) {
   }
 }
 
+function ensureWidgetsCollections(options) {
+  if (!options.widgets) {
+    options.widgets = new WidgetsCollection(options.widgetsAttributes);
+  }
+}
+
+var userAgents = {
+  'Safari on iPhone': 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_0_1 like Mac OS X) ' + 'AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0' + 'Mobile/14A403 Safari/602.1',
+  'Safari on macOS': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14) ' + 'AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 ' + 'Safari/605.1.15',
+  'Chrome on Android': 'Mozilla/5.0 (Linux; Android 10) ' + 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106' + 'Mobile Safari/537.36',
+  'Chrome on iPhone': 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)' + 'AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/56.0.2924.75' + 'Mobile/14E5239e Safari/602.1',
+  'Chrome on Windows': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36' + '(KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36'
+};
+function fakeBrowserAgent(name) {
+  if (!userAgents[name]) {
+    throw new Error("Unknown browser ".concat(name, "."));
+  }
+
+  return new browser.Agent(userAgents[name]);
+}
+
 var state = window.pageflow || {};
 
 /**
@@ -729,4 +750,4 @@ function keysWithDotsToNestedObjects(translations) {
   }, {});
 }
 
-export { ColorInput, ConfigurationEditor, ConfigurationEditorTab, DropDownButton, FileMetaDataTable, FileStageItem, FileThumbnail, RadioButtonGroupInput, ReferenceInput, SelectInput, StaticThumbnail, Table, Tabs, ThemeItem, factories, setupGlobals, useFakeTranslations };
+export { ColorInput, ConfigurationEditor, ConfigurationEditorTab, DropDownButton, FileMetaDataTable, FileStageItem, FileThumbnail, RadioButtonGroupInput, ReferenceInput, SelectInput, StaticThumbnail, Table, Tabs, ThemeItem, factories, fakeBrowserAgent, setupGlobals, useFakeTranslations };

data/package/ui.js

@@ -349,6 +349,24 @@ _.extend(BaseObject.prototype, Backbone.Events, {
 
 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;
@@ -749,10 +767,12 @@ var ConfigurationEditorView = Marionette.View.extend({
     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
@@ -893,7 +913,7 @@ var TableCellView = Marionette.ItemView.extend({
 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;
   }
@@ -1270,6 +1290,7 @@ var inputView = {
     return this.getAttributeBoundOption('disabled');
   },
   updateDisabled: function updateDisabled() {
+    this.$el.toggleClass('input-disabled', !!this.isDisabled());
     this.updateInlineHelp();
 
     if (this.ui.input) {
@@ -1497,6 +1518,31 @@ var inputWithPlaceholderText = {
   }
 };
 
+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 = '';
 __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<input type="text" dir="auto" />\n';
@@ -1524,7 +1570,7 @@ return __p
  */
 
 var TextInputView = Marionette.ItemView.extend({
-  mixins: [inputView, inputWithPlaceholderText],
+  mixins: [inputView, inputWithPlaceholderText, viewWithValidationErrorMessages],
   template: template$6,
   ui: {
     input: 'input'
@@ -2024,9 +2070,9 @@ __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></spa
 ((__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        ' +
+'\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      </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          ' +
+'\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) +
@@ -2360,6 +2406,15 @@ var UrlInputView = Marionette.Layout.extend(
   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;
@@ -2396,23 +2451,26 @@ var UrlInputView = Marionette.Layout.extend(
     }
 
     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();
     }
   }
@@ -2647,6 +2705,15 @@ return __p
  *   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
  */
 
@@ -2672,7 +2739,13 @@ var CheckBoxInputView = Marionette.ItemView.extend({
   },
   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() {
@@ -2683,12 +2756,49 @@ var CheckBoxInputView = Marionette.ItemView.extend({
   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.
@@ -2908,7 +3018,10 @@ var subviewContainer = {
     }
   }
 };
-Cocktail.mixin(Marionette.View, subviewContainer);
+
+if (!Marionette.View.prototype.appendSubview) {
+  Cocktail.mixin(Marionette.View, subviewContainer);
+}
 
 var tooltipContainer = {
   events: {
@@ -2954,4 +3067,4 @@ var tooltipContainer = {
   }
 };
 
-export { CheckBoxGroupInputView, CheckBoxInputView, CollectionView, ColorInputView, ConfigurationEditorTabView, ConfigurationEditorView, DeleteRowTableCellView, EnumTableCellView, ExtendedSelectInputView, IconTableCellView, JsonInputView, BaseObject as Object, PresenceTableCellView, ProxyUrlInputView, SelectInputView, SliderInputView, SortableCollectionView, TableCellView, TableHeaderCellView, TableRowView, TableView, TabsView, TextAreaInputView, TextInputView, TextTableCellView, TooltipView, UrlDisplayView, UrlInputView, cssModulesUtils, i18nUtils, inputView, inputWithPlaceholderText, subviewContainer, tooltipContainer };
+export { CheckBoxGroupInputView, CheckBoxInputView, CollectionView, ColorInputView, ConfigurationEditorTabView, ConfigurationEditorView, DeleteRowTableCellView, EnumTableCellView, ExtendedSelectInputView, IconTableCellView, JsonInputView, LabelOnlyView, BaseObject as Object, PresenceTableCellView, ProxyUrlInputView, SelectInputView, SeparatorView, SliderInputView, SortableCollectionView, TableCellView, TableHeaderCellView, TableRowView, TableView, TabsView, TextAreaInputView, TextInputView, TextTableCellView, TooltipView, UrlDisplayView, UrlInputView, cssModulesUtils, i18nUtils, inputView, inputWithPlaceholderText, serverSideValidation, subviewContainer, tooltipContainer, viewWithValidationErrorMessages };

data/spec/factories/draft_entries.rb

@@ -1,8 +1,26 @@
 module Pageflow
   FactoryBot.define do
     factory :draft_entry, class: DraftEntry do
+      transient do
+        title
+        account
+        theming
+        type_name { 'paged' }
+        revision_attributes { {} }
+
+        with_feature { nil }
+        without_feature { nil }
+      end
+
       initialize_with do
-        DraftEntry.new(create(:entry))
+        DraftEntry.new(create(:entry,
+                              title: title,
+                              account: account,
+                              theming: theming,
+                              type_name: type_name,
+                              draft_attributes: revision_attributes,
+                              with_feature: with_feature,
+                              without_feature: without_feature))
       end
 
       to_create { |draft_entry| draft_entry.entry.save! }

data/spec/factories/entries.rb

@@ -21,6 +21,8 @@ module Pageflow
 
         with_feature { nil }
         without_feature { nil }
+
+        draft_attributes { nil }
       end
 
       after(:create) do |entry, evaluator|
@@ -40,6 +42,8 @@ module Pageflow
                entity: entry,
                user: evaluator.with_manager,
                role: :manager) if evaluator.with_manager
+
+        entry.draft.update!(evaluator.draft_attributes) if evaluator.draft_attributes
       end
 
       after(:build) do |entry, evaluator|

data/spec/factories/published_entries.rb

@@ -2,6 +2,9 @@ module Pageflow
   FactoryBot.define do
     factory :published_entry, class: PublishedEntry do
       transient do
+        title
+        account
+        theming
         type_name { 'paged' }
         revision_attributes { {} }
 
@@ -12,6 +15,9 @@ module Pageflow
       initialize_with do
         PublishedEntry.new(create(:entry,
                                   :published,
+                                  title: title,
+                                  account: account,
+                                  theming: theming,
                                   type_name: type_name,
                                   published_revision_attributes: revision_attributes,
                                   with_feature: with_feature,