pageflow 15.1.2 → 15.2.0

data/entry_types/scrolled/package/package.json

@@ -7,14 +7,20 @@
   "author": "Codevise Solutions GmbH <info@codevise.de>",
   "license": "MIT",
   "dependencies": {
+    "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-tooltip": "^3.11.1"
+    "react-player": "^1.15.2",
+    "react-tooltip": "^3.11.1",
+    "react-compare-image": "^2.0.4"
   },
   "peerDependencies": {
     "pageflow": "15.1.0"
   },
   "devDependencies": {
+    "@percy/storybook": "^3.2.0",
+    "@storybook/addon-viewport": "^5.3.13",
+    "@storybook/react": "^5.3.9",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/react-hooks": "^3.2.1",
@@ -22,6 +28,7 @@
     "@typescript-eslint/parser": "2.x",
     "babel-eslint": "10.x",
     "babel-jest": "^24.9.0",
+    "babel-loader": "^8.0.6",
     "eslint": "6.x",
     "eslint-config-react-app": "^5.1.0",
     "eslint-import-resolver-jest": "^3.0.0",
@@ -38,6 +45,9 @@
   },
   "scripts": {
     "test": "jest",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "start-storybook": "start-storybook",
+    "build-storybook": "build-storybook -o .storybook/out",
+    "snapshot": "STORYBOOK_SPLIT=true build-storybook --quiet -o .storybook/out && PERCY_TOKEN=${PERCY_TOKEN:-$PT} percy-storybook --widths=1280 --build_dir=.storybook/out"
   }
 }

data/lib/pageflow/ability_mixin.rb

@@ -214,8 +214,8 @@ module Pageflow
           ThemingPolicy.new(user, theming).edit?
         end
 
-        can :index_widgets_for, Theming do |theming|
-          ThemingPolicy.new(user, theming).index_widgets_for?
+        can :edit, EntryTemplate do |entry_template|
+          EntryTemplatePolicy.new(user, entry_template).edit?
         end
 
         can :create, ::User do |managed_user|
@@ -260,6 +260,7 @@ module Pageflow
         can :manage, Pageflow.config.file_types.map(&:model)
         can :manage, Folder
         can :manage, Theming
+        can :manage, EntryTemplate
         can :manage, ::User
       end
     end

data/lib/pageflow/seeds.rb

@@ -54,8 +54,6 @@ module Pageflow
     # @return [Theming] newly built theming
     def build_default_theming_for(account, attributes = {}, &block)
       default_attributes = {
-        theme_name: Pageflow.config_for(account).themes.names.first,
-
         imprint_link_label: 'Impressum',
         imprint_link_url: 'http://example.com/impressum.html',
         copyright_link_label: '© Pageflow 2014',

data/lib/pageflow/theme.rb

@@ -44,6 +44,10 @@ module Pageflow
       !!@options[:emphasized_pages]
     end
 
+    def supports_hide_logo_on_pages?
+      !!@options[:hide_logo_option]
+    end
+
     def page_change_by_scrolling?
       !@options[:no_page_change_by_scrolling]
     end

data/lib/pageflow/themes.rb

@@ -31,7 +31,11 @@ module Pageflow
     #
     # @option options :no_hide_text_on_swipe [Boolean]
     #   Pass true if hiding the text by swiping to left shall be
-    #   deactived on mobile devices.
+    #   deactivated on mobile devices.
+    #
+    # @option options :hide_logo_option [Boolean]
+    #   Pass true if hiding the logo on specific pages should be supported
+    #   as an option in the editor.
     def register(name, options = {})
       @themes[name] = Theme.new(name, options)
     end

data/lib/pageflow/version.rb

@@ -1,3 +1,3 @@
 module Pageflow
-  VERSION = '15.1.2'.freeze
+  VERSION = '15.2.0'.freeze
 end

data/packages/pageflow/config/jest/index.js

@@ -10,7 +10,6 @@ module.exports = {
     '^backbone$': resolve('../../src/vendor/backbone'),
     '^underscore$': resolve('../../src/vendor/underscore'),
     '^cocktail$': resolve('../../src/vendor/cocktail'),
-    '^i18n-js$': resolve('../../src/vendor/i18n'),
     '^iscroll$': resolve('../../src/vendor/iscroll'),
     '^wysihtml5': resolve('../../spec/support/wysihtmlStub'),
   },

data/packages/pageflow/config/jest/transformers/jst.js

@@ -3,6 +3,6 @@ const jst = jstPlugin();
 
 module.exports = {
   process(data, id) {
-    return jst.transform(data, id).replace('export default', 'var I18n = require("i18n-js").default; module.exports =');
+    return jst.transform(data, id).replace('export default', 'var I18n = require("i18n-js"); module.exports =');
   }
 };

data/packages/pageflow/config/webpack.js

@@ -8,7 +8,6 @@ module.exports = {
     'jquery.minicolors': 'jQuery',
     'underscore': '_',
     'backbone.marionette': 'Backbone.Marionette',
-    'i18n-js': 'I18n',
     'iscroll': 'IScroll',
     'wysihtml5': 'wysihtml5'
   }

data/packages/pageflow/editor.js

@@ -1119,7 +1119,9 @@ var EditorApi = Object$1.extend(
     }
 
     var payloadJson = JSON.parse(decodeURIComponent(encodedPayload));
-    return new this.fileSelectionHandlers[handlerName](payloadJson);
+    return new this.fileSelectionHandlers[handlerName](_objectSpread({}, payloadJson, {
+      entry: state.entry
+    }));
   },
   createPageConfigurationEditorView: function createPageConfigurationEditorView(page, options) {
     var view = this.pageTypes.findByPage(page).createConfigurationEditorView(_$1.extend(options, {
@@ -1132,6 +1134,13 @@ var EditorApi = Object$1.extend(
 
 var editor$1 = new EditorApi();
 var startEditor = function startEditor(options) {
+  // In Webpack builds, I18n object from the i18n-js module is not
+  // identical to window.I18n which is provided by the i18n-js gem via
+  // the asset pipeline. Make translations provided via the asset
+  // pipeline available in Webpack bundle.
+  I18n$1.defaultLocale = window.I18n.defaultLocale;
+  I18n$1.locale = window.I18n.locale;
+  I18n$1.translations = window.I18n.translations;
   $(function () {
     $.when($.getJSON('/editor/entries/' + options.entryId + '/seed'), pageflow.browser.detectFeatures()).done(function (result) {
       app.start(result[0]);
@@ -2259,6 +2268,9 @@ var Theme = Backbone.Model.extend({
   },
   supportsScrollIndicatorModes: function supportsScrollIndicatorModes() {
     return this.get('scroll_indicator_modes');
+  },
+  supportsHideLogoOnPages: function supportsHideLogoOnPages() {
+    return this.get('hide_logo_option');
   }
 });
 
@@ -3899,6 +3911,7 @@ var BackButtonDecoratorView = Marionette.Layout.extend({
     this.outlet.show(this.options.view);
   },
   goBack: function goBack() {
+    this.options.view.onGoBack && this.options.view.onGoBack();
     editor$1.navigate('/', {
       trigger: true
     });
@@ -5473,6 +5486,8 @@ var EditPageView = Marionette.Layout.extend({
     'change:template': 'load'
   },
   onRender: function onRender() {
+    var _this = this;
+
     this.pageTypeContainer.show(new ExtendedSelectInputView({
       model: this.model,
       propertyName: 'template',
@@ -5483,7 +5498,8 @@ var EditPageView = Marionette.Layout.extend({
       descriptionTranslationKeyProperty: 'description_translation_key',
       pictogramClass: 'type_pictogram',
       helpLinkClicked: function helpLinkClicked(value) {
-        var pageType = this.options.api.pageTypes.findByName(value);
+        var pageType = _this.options.api.pageTypes.findByName(value);
+
         app.trigger('toggle-help', pageType.seed.help_entry_translation_key);
       }
     }));
@@ -8093,7 +8109,7 @@ var ListView = Marionette.ItemView.extend({
         typeName: this.options.itemTypeName,
         typeDescription: this.options.itemTypeDescription,
         isInvalid: this.options.itemIsInvalid
-      }, _$1(this.options).pick('onEdit', 'onDelete', 'highlight')),
+      }, _$1(this.options).pick('onEdit', 'onRemove', 'highlight')),
       blankSlateViewConstructor: Marionette.ItemView.extend({
         tagName: 'li',
         className: 'list_blank_slate',
@@ -8478,6 +8494,10 @@ ConfigurationEditorTabView.groups.define('options', function (options) {
     collection: state.audioFiles
   });
 
+  if (theme.supportsHideLogoOnPages()) {
+    this.input('hide_logo', CheckBoxInputView);
+  }
+
   if (options.canPauseAtmo) {
     this.input('atmo_during_playback', SelectInputView, {
       values: pageflow.Atmo.duringPlaybackModes

data/packages/pageflow/package.json

@@ -22,6 +22,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "core-js": "^3.4.1"
+    "core-js": "^3.4.1",
+    "i18n-js": "^3.5.1"
   }
 }

data/packages/pageflow/testHelpers.js

@@ -1,7 +1,281 @@
-import Backbone from 'backbone';
+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 I18n from 'i18n-js';
+
+var Base = Object$1.extend({
+  initialize: function initialize($el) {
+    this.$el = $el;
+  }
+});
+
+Base.classMethods = function (Constructor) {
+  return {
+    find: function find(viewOrParentElement) {
+      var selector = Constructor.prototype.selector;
+      var parentElement = viewOrParentElement.$el || viewOrParentElement;
+      var element = parentElement.find(selector);
+
+      if (element.length > 1) {
+        throw new Error('Selector "' + selector + '" matches multiple elements in view. Expected only one');
+      }
+
+      if (element.length === 0) {
+        throw new Error('Selector "' + selector + '" did not match any elements in view.');
+      }
+
+      return new Constructor(element);
+    },
+    findAll: function findAll(viewOrParentElement) {
+      var selector = Constructor.prototype.selector;
+      var parentElement = viewOrParentElement.$el || viewOrParentElement;
+      var elements = parentElement.find(selector);
+      return elements.map(function () {
+        return new Constructor($(this));
+      }).get();
+    },
+    findBy: function findBy(predicate, options) {
+      var predicateString = options.predicateName ? ' filtered by ' + options.predicateName : '';
+      var selector = Constructor.prototype.selector;
+      var selectorString = 'Selector "' + selector + '"' + predicateString;
+      var elements = options.inView.$el.find(selector);
+      var element = elements.filter(function () {
+        return predicate($(this));
+      });
+
+      if (element.length > 1) {
+        throw new Error(selectorString + ' matches multiple elements in view. Expected only one');
+      }
+
+      if (element.length === 0) {
+        throw new Error(selectorString + ' did not match any elements in view.');
+      }
+
+      return new Constructor(element);
+    },
+    render: function render(view, options) {
+      view.render();
+
+      if (options && options.appendTo) {
+        options.appendTo.append(view.$el);
+      }
+
+      return new Constructor(view.$el);
+    }
+  };
+};
+
+Base.extend = function ()
+/* arguments */
+{
+  var result = Object$1.extend.apply(this, arguments);
+
+  _.extend(result, Base.classMethods(result));
+
+  return result;
+};
+
+var DropDownButton = Base.extend({
+  selector: '.drop_down_button',
+  menuItemNames: function menuItemNames() {
+    return this.$el.find('li').map(function () {
+      return $(this).data('name');
+    }).get();
+  },
+  menuItemLabels: function menuItemLabels() {
+    return this.$el.find('li a').map(function () {
+      return $(this).text();
+    }).get();
+  },
+  selectMenuItemByName: function selectMenuItemByName(name) {
+    var menuItem = this.$el.find('li').filter(function () {
+      return $(this).data('name') == name;
+    });
+
+    if (!menuItem.length) {
+      throw new Error('Could not find menu item with name "' + name + '"');
+    }
+
+    menuItem.find('a').trigger('click');
+  },
+  selectMenuItemByLabel: function selectMenuItemByLabel(label) {
+    var menuItemLink = this.$el.find('li a').filter(function () {
+      return $(this).text() == label;
+    });
+
+    if (!menuItemLink.length) {
+      throw new Error('Could not find menu item with label "' + label + '"');
+    }
+
+    menuItemLink.trigger('click');
+  }
+});
+
+var FileMetaDataTable = Base.extend({
+  selector: '.file_meta_data table',
+  values: function values() {
+    return this.$el.find('.value').map(function () {
+      return $(this).text();
+    }).get();
+  }
+});
+
+var FileStageItem = Base.extend({
+  selector: '.file_stage_item'
+});
+
+var FileThumbnail = Base.extend({
+  selector: '.file_thumbnail',
+  backgroundImage: function backgroundImage() {
+    return this.$el.css('backgroundImage');
+  }
+});
+
+var ReferenceInput = Base.extend({
+  clickChooseButton: function clickChooseButton() {
+    this.$el.find('.choose').trigger('click');
+  }
+});
+
+var StaticThumbnail = Base.extend({
+  selector: '.static_thumbnail',
+  backgroundImage: function backgroundImage() {
+    return this.$el.css('backgroundImage');
+  }
+});
+
+var ThemeItem = Base.extend({
+  selector: '.theme_item',
+  hover: function hover() {
+    this.$el.trigger('mouseenter');
+  },
+  click: function click() {
+    this.$el.trigger('click');
+  },
+  clickUseButton: function clickUseButton() {
+    this.$el.find('.use_theme').trigger('click');
+  }
+});
+
+ThemeItem.findByName = function (themeName, options) {
+  return this.findBy(function ($el) {
+    return $el.data('themeName') === themeName;
+  }, _.extend({
+    predicateName: 'theme name ' + themeName
+  }, options));
+};
+
+var ConfigurationEditorTab = Base.extend({
+  selector: '.configuration_editor_tab',
+  inputPropertyNames: function inputPropertyNames() {
+    return this.$el.find('.input').map(function () {
+      return $(this).data('inputPropertyName');
+    }).get();
+  },
+  inputLabels: function inputLabels() {
+    return this.$el.find('.input').map(function () {
+      return $(this).data('labelText');
+    }).get();
+  },
+  inlineHelpTexts: function inlineHelpTexts() {
+    return this.$el.find('.input').map(function () {
+      return $(this).data('inlineHelpText');
+    }).get();
+  }
+});
+
+var Tabs = Base.extend({
+  selector: '.tabs_view',
+  tabNames: function tabNames() {
+    return this.$el.find('[data-tab-name]').map(function () {
+      return $(this).data('tabName');
+    }).get();
+  },
+  tabLabels: function tabLabels() {
+    return this.$el.find('[data-tab-name]').map(function () {
+      return $(this).text();
+    }).get();
+  }
+});
+
+var ConfigurationEditor = Base.extend({
+  selector: '.configuration_editor',
+  tabNames: function tabNames() {
+    return Tabs.find(this.$el).tabNames();
+  },
+  tabLabels: function tabLabels() {
+    return Tabs.find(this.$el).tabLabels();
+  },
+  inputPropertyNames: function inputPropertyNames() {
+    return ConfigurationEditorTab.find(this.$el).inputPropertyNames();
+  },
+  inputLabels: function inputLabels() {
+    return ConfigurationEditorTab.find(this.$el).inputLabels();
+  },
+  inlineHelpTexts: function inlineHelpTexts() {
+    return ConfigurationEditorTab.find(this.$el).inlineHelpTexts();
+  }
+});
+
+var Table = Base.extend({
+  selector: '.table_view',
+  columnNames: function columnNames() {
+    return this.$el.find('th').map(function () {
+      return $(this).data('columnName');
+    }).get();
+  }
+});
+
+var ColorInput = Base.extend({
+  value: function value() {
+    return this._input().val();
+  },
+  fillIn: function fillIn(value, clock) {
+    this._input().val(value);
+
+    this._input().trigger('keyup');
+
+    clock.tick(500);
+  },
+  swatches: function swatches() {
+    return this.$el.find('.minicolors-swatches span').map(function () {
+      return window.getComputedStyle(this)['background-color'];
+    }).get();
+  },
+  _input: function _input() {
+    return this.$el.find('input');
+  }
+});
 
+var SelectInput = Base.extend({
+  selector: 'select',
+  values: function values() {
+    return this.$el.find('option').map(function () {
+      return $(this).attr('value');
+    }).get();
+  }
+});
+
+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 _objectSpread(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; }
 /**
  * Build editor Backbone models for tests.
  */
@@ -40,7 +314,9 @@ var factories = {
 
     ensureFileTypes(options);
     ensureFilesCollections(options);
-    var entry = new model(attributes, _.extend({
+    var entry = new model(_objectSpread({
+      id: 1
+    }, attributes), _.extend({
       storylines: new Backbone.Collection(),
       chapters: new Backbone.Collection()
     }, options));
@@ -233,7 +509,17 @@ var factories = {
     return widgetTypes;
   },
   editorApi: function editorApi(beforeSetup) {
-    var api = new EditorApi();
+    var api = new EditorApi({
+      router: {
+        navigate: function navigate(path, _ref) {
+          var trigger = _ref.trigger;
+
+          if (trigger) {
+            api.trigger('navigate', path);
+          }
+        }
+      }
+    });
 
     if (beforeSetup) {
       beforeSetup(api);
@@ -265,4 +551,81 @@ function ensureFilesCollections(options) {
   }
 }
 
-export { factories };
+/**
+ * Define translations to use in tests.
+ *
+ * @param {Object} translations -
+ *   A mapping of either the form `(translation key => translated
+ *   text)`.  Translation keys can contains dots.
+ * @param {Object} [options]
+ * @param {boolean} [options.multiLocale] -
+ *   Set to `true` if keys include the locale name.
+ *
+ * @example
+ * import {useFakeTranslations} from 'pageflow/testHelpers';
+ * import I18n from 'i18n-js';
+ *
+ * describe('...', () => {
+ *   useFakeTranslations({
+ *     'some.key': 'some translation'
+ *   });
+ *
+ *   it('...', () => {
+ *     I18n.t('some.key') // => 'some translation'
+ *   });
+ * });
+ *
+ * @example
+ * import {useFakeTranslations} from 'pageflow/testHelpers';
+ * import I18n from 'i18n-js';
+ *
+ * describe('...', () => {
+ *   useFakeTranslations({
+ *     'en.some.key': 'some text',
+ *     'de.some.key': 'etwas Text'
+ *   }, {multiLocale: true});
+ *
+ *   it('...', () => {
+ *     I18n.locale = 'de';
+ *     I18n.t('some.key') // => 'etwas Text'
+ *   });
+ * });
+ */
+
+function useFakeTranslations(translations) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      multiLocale = _ref.multiLocale;
+
+  var originalTranslations;
+  beforeEach(function () {
+    originalTranslations = I18n.translations;
+
+    if (multiLocale) {
+      I18n.translations = keysWithDotsToNestedObjects(translations);
+    } else {
+      I18n.translations = {
+        en: keysWithDotsToNestedObjects(translations)
+      };
+    }
+  });
+  afterEach(function () {
+    I18n.translations = originalTranslations;
+  });
+}
+
+function keysWithDotsToNestedObjects(translations) {
+  return _(translations).reduce(function (result, value, key) {
+    var keys = key.split('.');
+    var last = keys.pop();
+
+    var inner = _(keys).reduce(function (r, key) {
+      r[key] = r[key] || {};
+      return r[key];
+    }, result);
+
+    inner[last] = value;
+    return result;
+  }, {});
+}
+
+export { ColorInput, ConfigurationEditor, ConfigurationEditorTab, DropDownButton, FileMetaDataTable, FileStageItem, FileThumbnail, ReferenceInput, SelectInput, StaticThumbnail, Table, Tabs, ThemeItem, factories, useFakeTranslations };