pageflow 15.0.0.beta2 → 15.0.0.beta3

data/app/assets/javascripts/pageflow/dist/react-server.js

@@ -8960,7 +8960,7 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 
 	var _loadingSpinner = __webpack_require__(616);
 
-	var _pageflow = __webpack_require__(619);
+	var _pageflow = __webpack_require__(620);
 
 	var _pageflow2 = _interopRequireDefault(_pageflow);
 
@@ -12016,6 +12016,7 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	});
 	exports.firstPage = exports.selector = exports.pageBackgroundImageUrl = undefined;
 	exports.firstPageAttribures = firstPageAttribures;
+	exports.firstPageAttribute = firstPageAttribute;
 	exports.pageAttribute = pageAttribute;
 	exports.pageAttributes = pageAttributes;
 	exports.pageState = pageState;
@@ -12045,6 +12046,12 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	  });
 	}
 
+	function firstPageAttribute(property) {
+	  return (0, _utils.memoizedSelector)(firstPage, function (page) {
+	    return page && page.attributes[property];
+	  });
+	}
+
 	function pageAttribute(property, options) {
 	  return (0, _utils.memoizedSelector)(selector(options), function (page) {
 	    return page && page.attributes[property];
@@ -31060,11 +31067,14 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 
 	var _ClassicLoadingSpinner = __webpack_require__(617);
 
-	var _TitleLoadingSpinner = __webpack_require__(618);
+	var _MediaLoadingSpinner = __webpack_require__(618);
+
+	var _TitleLoadingSpinner = __webpack_require__(619);
 
 	function registerWidgetTypes() {
 	  (0, _ClassicLoadingSpinner.register)();
 	  (0, _TitleLoadingSpinner.register)();
+	  (0, _MediaLoadingSpinner.register)();
 	}
 
 /***/ }),
@@ -31214,9 +31224,11 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	Object.defineProperty(exports, "__esModule", {
 	  value: true
 	});
+	exports.MediaLoadingSpinner = exports.MediaLoadingSpinnerComponent = undefined;
 
 	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+	exports.getInvert = getInvert;
 	exports.register = register;
 
 	var _utils = __webpack_require__(340);
@@ -31251,13 +31263,13 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 
 	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-	var TitleLoadingSpinner = function (_React$Component) {
-	  _inherits(TitleLoadingSpinner, _React$Component);
+	var MediaLoadingSpinnerComponent = exports.MediaLoadingSpinnerComponent = function (_React$Component) {
+	  _inherits(MediaLoadingSpinnerComponent, _React$Component);
 
-	  function TitleLoadingSpinner(props) {
-	    _classCallCheck(this, TitleLoadingSpinner);
+	  function MediaLoadingSpinnerComponent(props) {
+	    _classCallCheck(this, MediaLoadingSpinnerComponent);
 
-	    var _this = _possibleConstructorReturn(this, (TitleLoadingSpinner.__proto__ || Object.getPrototypeOf(TitleLoadingSpinner)).call(this, props));
+	    var _this = _possibleConstructorReturn(this, (MediaLoadingSpinnerComponent.__proto__ || Object.getPrototypeOf(MediaLoadingSpinnerComponent)).call(this, props));
 
 	    _this.state = {
 	      hidden: false,
@@ -31266,7 +31278,7 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	    return _this;
 	  }
 
-	  _createClass(TitleLoadingSpinner, [{
+	  _createClass(MediaLoadingSpinnerComponent, [{
 	    key: 'componentDidMount',
 	    value: function componentDidMount() {
 	      var _this2 = this;
@@ -31307,42 +31319,29 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	    value: function render() {
 	      var _this4 = this;
 
-	      var _props = this.props,
-	          editing = _props.editing,
-	          title = _props.title,
-	          subtitle = _props.subtitle,
-	          entryTitle = _props.entryTitle;
+	      var editing = this.props.editing;
 	      var _state = this.state,
 	          hidden = _state.hidden,
 	          animating = _state.animating;
 
-
+	      var invert = getInvert(this.props);
+	      var logoElement = _react2.default.createElement('div', { className: (0, _classnames2.default)("media_loading_spinner-logo", { 'media_loading_spinner-logo-invert': invert }) });
+	      if (this.props.removeLogo) {
+	        logoElement = '';
+	      }
 	      if (editing || !hidden) {
 	        return _react2.default.createElement(
 	          'div',
-	          { className: (0, _classnames2.default)('title_loading_spinner', { 'title_loading_spinner-fade': animating }),
+	          { className: (0, _classnames2.default)('media_loading_spinner', { 'media_loading_spinner-fade': animating }, { 'media_loading_spinner-invert': invert }),
 	            onAnimationEnd: function onAnimationEnd(event) {
 	              return _this4.hideOrLoop(event);
 	            },
 	            onTouchMove: preventScrollBouncing,
-	            style: inlineStyle() },
-	          _react2.default.createElement('div', { className: 'title_loading_spinner-logo' }),
-	          _react2.default.createElement('div', { className: 'title_loading_spinner-image',
+	            style: inlineStyle(this.props) },
+	          logoElement,
+	          _react2.default.createElement('div', { className: 'media_loading_spinner-image',
 	            style: backgroundImageInlineStyles(this.props) }),
-	          _react2.default.createElement(
-	            'div',
-	            { className: 'title_loading_spinner-titles' },
-	            _react2.default.createElement(
-	              'div',
-	              { className: 'title_loading_spinner-title' },
-	              title || entryTitle
-	            ),
-	            _react2.default.createElement(
-	              'div',
-	              { className: 'title_loading_spinner-subtitle' },
-	              subtitle
-	            )
-	          )
+	          this.props.children
 	        );
 	      } else {
 	        return _react2.default.createElement('noscript', null);
@@ -31350,10 +31349,36 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	    }
 	  }]);
 
-	  return TitleLoadingSpinner;
+	  return MediaLoadingSpinnerComponent;
 	}(_react2.default.Component);
 
-	function inlineStyle() {
+	function preventScrollBouncing(e) {
+	  e.preventDefault();
+	}
+
+	function backgroundImageInlineStyles(_ref) {
+	  var firstPageBackgroundImageUrl = _ref.firstPageBackgroundImageUrl,
+	      backgroundImage = _ref.backgroundImage,
+	      blurStrength = _ref.blurStrength;
+
+	  var url = backgroundImage ? backgroundImage.urls.medium : firstPageBackgroundImageUrl;
+	  if (url) {
+	    return {
+	      backgroundImage: 'url("' + url + '")',
+	      filter: 'blur(' + blurStrength + 'px)'
+	    };
+	  }
+	}
+
+	function getInvert(props) {
+	  if (!props.backgroundImage && props.invert == undefined) {
+	    return props.firstPageInvert;
+	  }
+	  return props.invert;
+	}
+
+	function inlineStyle(props) {
+	  var invert = getInvert(props);
 	  return {
 	    position: 'absolute',
 	    top: 0,
@@ -31361,49 +31386,144 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	    width: '100%',
 	    height: '100%',
 	    zIndex: 100,
-	    backgroundColor: '#000'
+	    backgroundColor: invert ? '#fff' : '#000'
 	  };
 	}
 
-	function backgroundImageInlineStyles(_ref) {
-	  var firstPageBackgroundImageUrl = _ref.firstPageBackgroundImageUrl,
-	      backgroundImage = _ref.backgroundImage;
+	var MediaLoadingSpinner = exports.MediaLoadingSpinner = (0, _reactRedux.connect)((0, _utils.combineSelectors)({
+	  editing: (0, _selectors2.editingWidget)({ role: 'loading_spinner' }),
+	  firstPageInvert: (0, _selectors4.firstPageAttribute)('invert'),
+	  firstPageBackgroundImageUrl: (0, _selectors4.pageBackgroundImageUrl)({
+	    variant: 'medium',
+	    page: (0, _selectors4.firstPageAttribures)()
+	  }),
+	  backgroundImage: (0, _selectors3.file)('imageFiles', {
+	    id: (0, _selectors2.widgetAttribute)('customBackgroundImageId', {
+	      role: 'loading_spinner'
+	    })
+	  }),
+	  invert: (0, _selectors2.widgetAttribute)('invert', { role: 'loading_spinner' }),
+	  removeLogo: (0, _selectors2.widgetAttribute)('removeLogo', { role: 'loading_spinner' }),
+	  blurStrength: (0, _selectors2.widgetAttribute)('blurStrength', { role: 'loading_spinner' })
+	}))(MediaLoadingSpinnerComponent);
 
-	  var url = backgroundImage ? backgroundImage.urls.medium : firstPageBackgroundImageUrl;
+	function register() {
+	  (0, _registerWidgetType2.default)('media_loading_spinner', {
+	    component: MediaLoadingSpinner
+	  });
+	}
 
-	  if (url) {
-	    return {
-	      backgroundImage: 'url("' + url + '")'
-	    };
+/***/ }),
+/* 619 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+	exports.TitleLoadingSpinner = undefined;
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	exports.register = register;
+
+	var _utils = __webpack_require__(340);
+
+	var _react = __webpack_require__(334);
+
+	var _react2 = _interopRequireDefault(_react);
+
+	var _reactRedux = __webpack_require__(399);
+
+	var _classnames = __webpack_require__(335);
+
+	var _classnames2 = _interopRequireDefault(_classnames);
+
+	var _registerWidgetType = __webpack_require__(562);
+
+	var _registerWidgetType2 = _interopRequireDefault(_registerWidgetType);
+
+	var _selectors = __webpack_require__(502);
+
+	var _selectors2 = __webpack_require__(376);
+
+	var _selectors3 = __webpack_require__(429);
+
+	var _selectors4 = __webpack_require__(493);
+
+	var _MediaLoadingSpinner = __webpack_require__(618);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+	var TitleLoadingSpinner = exports.TitleLoadingSpinner = function (_React$Component) {
+	  _inherits(TitleLoadingSpinner, _React$Component);
+
+	  function TitleLoadingSpinner() {
+	    _classCallCheck(this, TitleLoadingSpinner);
+
+	    return _possibleConstructorReturn(this, (TitleLoadingSpinner.__proto__ || Object.getPrototypeOf(TitleLoadingSpinner)).apply(this, arguments));
 	  }
-	}
 
-	function preventScrollBouncing(e) {
-	  e.preventDefault();
-	}
+	  _createClass(TitleLoadingSpinner, [{
+	    key: 'render',
+	    value: function render() {
+	      var _props = this.props,
+	          title = _props.title,
+	          subtitle = _props.subtitle,
+	          entryTitle = _props.entryTitle;
+
+	      var invert = (0, _MediaLoadingSpinner.getInvert)(this.props);
+	      return _react2.default.createElement(
+	        _MediaLoadingSpinner.MediaLoadingSpinner,
+	        null,
+	        _react2.default.createElement(
+	          'div',
+	          { className: (0, _classnames2.default)('media_loading_spinner-titles', { 'media_loading_spinner-invert': invert }) },
+	          _react2.default.createElement(
+	            'div',
+	            { className: 'media_loading_spinner-title' },
+	            title || entryTitle
+	          ),
+	          _react2.default.createElement(
+	            'div',
+	            { className: 'media_loading_spinner-subtitle' },
+	            subtitle
+	          )
+	        )
+	      );
+	    }
+	  }]);
+
+	  return TitleLoadingSpinner;
+	}(_react2.default.Component);
 
 	function register() {
 	  (0, _registerWidgetType2.default)('title_loading_spinner', {
 	    component: (0, _reactRedux.connect)((0, _utils.combineSelectors)({
-	      editing: (0, _selectors2.editingWidget)({ role: 'loading_spinner' }),
-	      firstPageBackgroundImageUrl: (0, _selectors4.pageBackgroundImageUrl)({
-	        variant: 'medium',
-	        page: (0, _selectors4.firstPageAttribures)()
-	      }),
+	      firstPageInvert: (0, _selectors2.firstPageAttribute)('invert'),
 	      backgroundImage: (0, _selectors3.file)('imageFiles', {
-	        id: (0, _selectors2.widgetAttribute)('customBackgroundImageId', {
+	        id: (0, _selectors4.widgetAttribute)('customBackgroundImageId', {
 	          role: 'loading_spinner'
 	        })
 	      }),
 	      entryTitle: (0, _selectors.entryAttribute)('title'),
-	      title: (0, _selectors2.widgetAttribute)('title', { role: 'loading_spinner' }),
-	      subtitle: (0, _selectors2.widgetAttribute)('subtitle', { role: 'loading_spinner' })
+	      title: (0, _selectors4.widgetAttribute)('title', { role: 'loading_spinner' }),
+	      subtitle: (0, _selectors4.widgetAttribute)('subtitle', { role: 'loading_spinner' }),
+	      removeLogo: (0, _selectors4.widgetAttribute)('removeLogo', { role: 'loading_spinner' }),
+	      invert: (0, _selectors4.widgetAttribute)('invert', { role: 'loading_spinner' })
 	    }))(TitleLoadingSpinner)
 	  });
 	}
 
 /***/ }),
-/* 619 */
+/* 620 */
 /***/ (function(module, exports) {
 
 	module.exports = pageflow;

data/app/assets/javascripts/pageflow/editor/api/widget_type.js

@@ -12,7 +12,6 @@ pageflow.WidgetType = pageflow.Object.extend({
 
   createConfigurationEditorView: function(options) {
     var constructor = this.configurationEditorView;
-
     return new constructor(_.extend({
       attributeTranslationKeyPrefixes: [
         'pageflow.editor.widgets.attributes.' + this.name,

data/app/assets/javascripts/pageflow/editor/views/widget_types/media_loading_spinner.js

@@ -0,0 +1,18 @@
+pageflow.editor.widgetTypes.register('media_loading_spinner', {
+  configurationEditorView: pageflow.ConfigurationEditorView.extend({
+    configure: function() {
+      this.tab('loading_spinner', function() {
+        this.view(pageflow.InfoBoxView, {
+          text: I18n.t('pageflow.editor.media_loading_spinner.widget_type_info_box_text')
+        });
+        this.input('custom_background_image_id', pageflow.FileInputView, {
+          collection: 'image_files',
+          fileSelectionHandler: 'widgetConfiguration'
+        });
+        this.input('invert', pageflow.CheckBoxInputView);
+        this.input('remove_logo', pageflow.CheckBoxInputView);
+        this.input('blur_strength', pageflow.SliderInputView);
+      });
+    }
+  })
+});

data/app/assets/javascripts/pageflow/editor/views/widget_types/title_loading_spinner.js

@@ -14,6 +14,9 @@ pageflow.editor.widgetTypes.register('title_loading_spinner', {
           collection: 'image_files',
           fileSelectionHandler: 'widgetConfiguration'
         });
+        this.input('invert', pageflow.CheckBoxInputView);
+        this.input('remove_logo', pageflow.CheckBoxInputView);
+        this.input('blur_strength', pageflow.SliderInputView);
       });
     }
   })

data/app/assets/javascripts/pageflow/ui/views/tabs_view.js

@@ -64,7 +64,8 @@ pageflow.TabsView = Backbone.Marionette.Layout.extend({
       scrollX: true,
       scrollY: false,
       bounce: false,
-      mouseWheel: true
+      mouseWheel: true,
+      preventDefault: false,
     });
 
     this.changeTab(this.defaultTab());

data/app/assets/stylesheets/pageflow/themes/default/base.scss

@@ -17,9 +17,9 @@
 @import "./built_in_page_types";
 @import "./anchors";
 @import "./cookie_notice_bar";
-@import "./loading_spinner";
 @import "./logo";
 @import "./page";
+@import "./loading_spinner";
 @import "./indicators";
 @import "./navigation";
 @import "./navigation_share_box";

data/app/assets/stylesheets/pageflow/themes/default/loading_spinner.scss

@@ -17,6 +17,12 @@ $loading-spinner-logo-width: 130px !default;
 /// Height of the loading spinner image.
 $loading-spinner-logo-height: 112px !default;
 
+/// Width of the loading spinner image for mobile.
+$loading-spinner-logo-mobile-width: null !default;
+
+/// Height of the loading spinner image for mobile.
+$loading-spinner-logo-mobile-height: null !default;
+
 /// Spinner background color.
 $loading-spinner-background-color: #3b5159 !default;
 
@@ -46,8 +52,14 @@ $loading-spinner-glow-size: 140px !default;
 /// File extension of background and logo
 $loading-spinner-image-file-extension: "png" !default;
 
+/// Background position for background image
+$loading-spinner-background-position: 50% 50% !default;
+
+
+@import "./loading_spinner/media";
 @import "./loading_spinner/title";
 
+
 @if not $custom-loading-spinner {
   .loading_spinner {
     // scss-lint:disable ImportantRule
@@ -57,7 +69,7 @@ $loading-spinner-image-file-extension: "png" !default;
     // scss-lint:enable ImportantRule
 
     &:before {
-      background-position: 50% 50%;
+      background-position: $loading-spinner-background-position;
       background-repeat: no-repeat;
       display: block;
       height: 100%;
@@ -75,7 +87,10 @@ $loading-spinner-image-file-extension: "png" !default;
 
         @if $loading-spinner-background-size == "logo" {
           background-size: $loading-spinner-logo-width $loading-spinner-logo-height;
+        }@else if $loading-spinner-background-size != "auto" {
+          background-size: $loading-spinner-background-size;
         }
+
       }
 
       @if $loading-spinner-animate-background {
@@ -110,6 +125,21 @@ $loading-spinner-image-file-extension: "png" !default;
       margin-top: -$loading-spinner-logo-height / 2;
       position: absolute;
 
+      @if ($loading-spinner-logo-mobile-height) {
+        @include mobile {
+          height: $loading-spinner-logo-mobile-height;
+          margin-top: -$loading-spinner-logo-mobile-height / 2;
+        }
+      }
+
+      @if ($loading-spinner-logo-mobile-width) {
+        @include mobile {
+          width: $loading-spinner-logo-mobile-width;
+          margin-left: -$loading-spinner-logo-mobile-width / 2;
+        }
+      }
+
+
       div {
         width: 100%;
         height: 100%;
@@ -117,6 +147,12 @@ $loading-spinner-image-file-extension: "png" !default;
         background-repeat: no-repeat;
         position: absolute;
 
+        @if ($loading-spinner-logo-mobile-width) {
+          @include mobile {
+            background-size: $loading-spinner-logo-mobile-width $loading-spinner-logo-mobile-height;
+          }  
+        }
+        
         @if $loading-spinner-logo == "custom" {
           background-image: image-url("pageflow/themes/#{$theme-name}/loading_spinner/logo.#{$loading-spinner-image-file-extension}");
         } @else {