pageflow 15.3.0 → 15.4.0

data/README.md

@@ -1,7 +1,7 @@
 # Pageflow
 
 [![Gem Version](https://badge.fury.io/rb/pageflow.svg)](http://badge.fury.io/rb/pageflow)
-[![Build Status](https://travis-ci.org/codevise/pageflow.svg?branch=master)](https://travis-ci.org/codevise/pageflow)
+[![Build Status](https://github.com/codevise/pageflow/workflows/tests/badge.svg)](https://github.com/codevise/pageflow/actions)
 [![Coverage Status](https://coveralls.io/repos/github/codevise/pageflow/badge.svg?branch=master)](https://coveralls.io/github/codevise/pageflow?branch=master)
 [![Code Climate](https://codeclimate.com/github/codevise/pageflow/badges/gpa.svg)](https://codeclimate.com/github/codevise/pageflow)
 [![Reviewed by Hound](https://img.shields.io/badge/Reviewed_by-Hound-8E64B0.svg)](https://houndci.com)
@@ -53,7 +53,7 @@ Pageflow assumes the following choice of libraries:
 Pageflow runs in environments with:
 
 * Ruby >= 2.1 (see `.travis.yml` for supported versions)
-* Node >= 10.0
+* Node >= 10.18
 * Rails 4.2
 * Redis server (for Resque)
 * A database server supported by Active Record (tested with MySQL)
@@ -212,4 +212,3 @@ We would like to express our special thanks to the following services
 for supporting Pageflow through free open source plans:
 
 [![BrowserStack](doc/supporter_logos/browser_stack.png)](https://browserstack.com)
-[![Travis CI](doc/supporter_logos/travis_ci.png)](https://travis-ci.com/)

data/app/assets/javascripts/pageflow/dist/ui.js

@@ -1140,13 +1140,30 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *   A text that will be appended to the translation based inline
    *   text.
    *
-   * @param {boolean} [options.disabled]
-   *   Render input as disabled.
+   * @param {string|string[]} [options.disabledBinding]
+   *   Name of an attribute to control whether the input is disabled. If
+   *   the `disabled` and `disabledBinding` options are not set,
+   *   input will be disabled whenever this attribute has a truthy value.
+   *   When multiple attribute names are passed, the function passed to
+   *   the `disabled` option will receive an array of values in the same
+   *   order.
+   *
+   * @param {function|boolean} [options.disabled]
+   *   Render input as disabled. A Function taking the value of the
+   *  `disabledBinding` attribute as parameter. Input will be disabled
+   *  only if function returns `true`.
+   *
+   * @param {any} [options.disabledBindingValue]
+   *   Input will be disabled whenever the value of the `disabledBinding`
+   *   attribute equals the value of this option.
    *
-   * @param {string} [options.visibleBinding]
+   * @param {string|string[]} [options.visibleBinding]
    *   Name of an attribute to control whether the input is visible. If
    *   the `visible` and `visibleBindingValue` options are not set,
    *   input will be visible whenever this attribute has a truthy value.
+   *   When multiple attribute names are passed, the function passed to
+   *   the `visible` option will receive an array of values in the same
+   *   order.
    *
    * @param {function|boolean} [options.visible]
    *   A Function taking the value of the `visibleBinding` attribute as
@@ -1201,15 +1218,10 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       this.$el.data('labelText', this.labelText());
       this.$el.data('inlineHelpText', this.inlineHelpText());
       this.ui.labelText.text(this.labelText());
-      this.ui.inlineHelp.html(this.inlineHelpText());
-
-      if (!this.inlineHelpText()) {
-        this.ui.inlineHelp.hide();
-      }
-
+      this.updateInlineHelp();
       this.setLabelFor();
-      this.updateDisabled();
-      this.setupVisibleBinding();
+      this.setupAttributeBinding('disabled', this.updateDisabled);
+      this.setupAttributeBinding('visible', this.updateVisible);
     },
 
     /**
@@ -1224,6 +1236,13 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         fallbackPrefix: 'activerecord.attributes'
       }));
     },
+    updateInlineHelp: function updateInlineHelp() {
+      this.ui.inlineHelp.html(this.inlineHelpText());
+
+      if (!this.inlineHelpText()) {
+        this.ui.inlineHelp.hide();
+      }
+    },
 
     /**
      * The inline help text for the form field.
@@ -1234,7 +1253,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         fallbackPrefix: 'pageflow.ui.inline_help'
       });
 
-      if (this.options.disabled) {
+      if (this.isDisabled()) {
         keys = translationKeysWithSuffix(keys, 'disabled');
       }
 
@@ -1250,40 +1269,61 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         this.ui.label.attr('for', id);
       }
     },
+    isDisabled: function isDisabled() {
+      return this.getAttributeBoundOption('disabled');
+    },
     updateDisabled: function updateDisabled() {
+      this.updateInlineHelp();
+
       if (this.ui.input) {
         this.updateDisabledAttribute(this.ui.input);
       }
     },
     updateDisabledAttribute: function updateDisabledAttribute(element) {
-      if (this.options.disabled) {
+      if (this.isDisabled()) {
         element.attr('disabled', true);
       } else {
         element.removeAttr('disabled');
       }
     },
-    setupVisibleBinding: function setupVisibleBinding() {
+    updateVisible: function updateVisible() {
+      this.$el.toggleClass('input-hidden_via_binding', this.getAttributeBoundOption('visible') === false);
+    },
+    setupAttributeBinding: function setupAttributeBinding(optionName, updateMethod) {
+      var _this = this;
+
+      var binding = this.options["".concat(optionName, "Binding")];
       var view = this;
 
-      if (this.options.visibleBinding) {
-        this.listenTo(this.model, 'change:' + this.options.visibleBinding, updateVisible);
-        updateVisible(this.model, this.model.get(this.options.visibleBinding));
+      if (binding) {
+        _.flatten([binding]).forEach(function (attribute) {
+          _this.listenTo(_this.model, 'change:' + attribute, update);
+        });
       }
 
-      function updateVisible(model, value) {
-        view.$el.toggleClass('input-hidden_via_binding', !isVisible(value));
+      update();
+
+      function update() {
+        updateMethod.call(view, view.getAttributeBoundOption(optionName));
       }
+    },
+    getAttributeBoundOption: function getAttributeBoundOption(optionName) {
+      var _this2 = this;
 
-      function isVisible(value) {
-        if ('visibleBindingValue' in view.options) {
-          return value === view.options.visibleBindingValue;
-        } else if (typeof view.options.visible === 'function') {
-          return !!view.options.visible(value);
-        } else if ('visible' in view.options) {
-          return !!view.options.visible;
-        } else {
-          return !!value;
-        }
+      var binding = this.options["".concat(optionName, "Binding")];
+      var bindingValueOptionName = "".concat(optionName, "BindingValue");
+      var value = Array.isArray(binding) ? binding.map(function (attribute) {
+        return _this2.model.get(attribute);
+      }) : this.model.get(binding);
+
+      if (bindingValueOptionName in this.options) {
+        return value === this.options[bindingValueOptionName];
+      } else if (typeof this.options[optionName] === 'function') {
+        return !!this.options[optionName](value);
+      } else if (optionName in this.options) {
+        return !!this.options[optionName];
+      } else if (binding) {
+        return !!value;
       }
     }
   };
@@ -1434,11 +1474,14 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         this.listenTo(this.model, 'change:' + this.options.placeholderBinding, this.updatePlaceholder);
       }
     },
+    updateDisabled: function updateDisabled() {
+      this.updatePlaceholder();
+    },
     updatePlaceholder: function updatePlaceholder() {
       this.ui.input.attr('placeholder', this.placeholderText());
     },
     placeholderText: function placeholderText() {
-      if (!this.options.disabled || !this.options.hidePlaceholderIfDisabled) {
+      if (!this.isDisabled() || !this.options.hidePlaceholderIfDisabled) {
         if (this.options.placeholder) {
           if (typeof this.options.placeholder == 'function') {
             return this.options.placeholder(this.model);
@@ -1449,6 +1492,8 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
           return this.placeholderModelValue();
         }
       }
+
+      return '';
     },
     placeholderModelValue: function placeholderModelValue() {
       return this.options.placeholderModel && this.options.placeholderModel.get(this.options.propertyName);
@@ -1601,12 +1646,22 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       this.updateSettings();
     },
     updateSettings: function updateSettings() {
+      this.resetSwatchesInStoredSettings();
       this.ui.input.minicolors('settings', {
         defaultValue: this.defaultValue(),
         swatches: this.getSwatches()
       });
       this.load();
     },
+    // see https://github.com/claviska/jquery-minicolors/issues/287
+    resetSwatchesInStoredSettings: function resetSwatchesInStoredSettings() {
+      var settings = this.ui.input.data('minicolors-settings');
+
+      if (settings) {
+        delete settings.swatches;
+        this.ui.input.data('minicolors-settings', settings);
+      }
+    },
     load: function load() {
       this.ui.input.minicolors('value', this.model.get(this.options.propertyName) || this.defaultValue());
       this.$el.toggleClass('is_default', !this.model.has(this.options.propertyName));
@@ -2459,6 +2514,15 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       });
       this.load();
     },
+    updateDisabled: function updateDisabled(disabled) {
+      this.$el.toggleClass('disabled', !!disabled);
+
+      if (disabled) {
+        this.ui.widget.slider('disable');
+      } else {
+        this.ui.widget.slider('enable');
+      }
+    },
     save: function save() {
       var value = this.ui.widget.slider('option', 'value');
       var unit = 'unit' in this.options ? this.options.unit : '%';
@@ -2583,8 +2647,11 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       this.load();
       this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
     },
+    updateDisabled: function updateDisabled() {
+      this.load();
+    },
     save: function save() {
-      if (!this.options.disabled) {
+      if (!this.isDisabled()) {
         this.model.set(this.options.propertyName, this.ui.input.is(':checked'));
       }
     },
@@ -2594,7 +2661,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       }
     },
     displayValue: function displayValue() {
-      if (this.options.disabled && this.options.displayUncheckedIfDisabled) {
+      if (this.isDisabled() && this.options.displayUncheckedIfDisabled) {
         return false;
       } else {
         return this.model.get(this.options.propertyName);

data/app/assets/javascripts/pageflow/vendor.js

@@ -3,7 +3,6 @@
 // It means this asset will stay cached for much longer.
 
 // = require polyfills/bind
-// = require ./videojs
 // = require ./asset_urls
 
 // = require i18n

data/app/assets/stylesheets/pageflow/editor/base.scss

@@ -24,7 +24,7 @@
   @import "./change_theme";
   @extend %pageflow-ui;
 
-  font-family: Helvetica, "Sans-Serif";
+  font-family: Helvetica, Arial, "Sans-Serif";
   font-size: 13px;
 
   padding: 0;
@@ -131,8 +131,9 @@
     top: 0;
     left: 0;
     right: 0;
-    bottom: 25px;
+    bottom: 31px;
     overflow: auto;
+    overflow-y: scroll;
   }
 }
 

data/app/assets/stylesheets/pageflow/editor/drop_down_button.scss

@@ -31,7 +31,7 @@ $drop-down-button-menu-border-color: #aaa !default;
   &.is_visible {
     @include transition(visibility 0ms, opacity 100ms);
     visibility: visible;
-    pointer-events: all;
+    pointer-events: auto;
     opacity: 1;
   }
 }

data/app/assets/stylesheets/pageflow/editor/select_button.scss

@@ -37,7 +37,7 @@
   &:hover .dropdown {
     @include transition(visibility 0ms, opacity 100ms, top 200ms);
     visibility: visible;
-    pointer-events: all;
+    pointer-events: auto;
 
     top: 18px;
     opacity: 1;

data/app/assets/stylesheets/pageflow/editor/sidebar_footer.scss

@@ -4,7 +4,7 @@
   right: 0;
   left: 0;
 
-  font-family: Helvetica, "Sans-Serif";
+  font-family: Helvetica, Arial, "Sans-Serif";
   font-size: 13px;
 
   border-top: solid 1px #aaa;

data/app/assets/stylesheets/pageflow/entries.scss

@@ -73,7 +73,7 @@
     }
 
     &.visible {
-      pointer-events: all;
+      pointer-events: auto;
       visibility: visible;
     }
 

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

@@ -1,4 +1,7 @@
 .loading_spinner {
+  // Ensure loading spinner does not cover page if JS is
+  // disabled. Will be overridden by
+  // layouts/pageflow_paged/_loading_spinner_inline_script.html.erb
   display: none;
 
   position: absolute;
@@ -17,4 +20,4 @@
     @include transition(opacity 0.5s linear);
     opacity: 0;
   }
-}
+}

data/app/assets/stylesheets/pageflow/navigation_mobile.scss

@@ -75,7 +75,7 @@ body {
     background-position: -45px 0px;
     background-size: auto 100%;
     right: 10px;
-    pointer-events: all;
+    pointer-events: auto;
     cursor: pointer;
     @include transition(opacity 500ms, right 250ms);
 
@@ -99,7 +99,7 @@ body {
     @include background-icon-center($color: #ddd);
     @include fa-arrow-left-icon;
     cursor: pointer;
-    pointer-events: all;
+    pointer-events: auto;
     position: absolute;
     top: 16px;
     right: 60px;
@@ -277,7 +277,7 @@ body {
   }
 
   &.active {
-    pointer-events: all;
+    pointer-events: auto;
     visibility: visible;
 
     &:before {
@@ -293,7 +293,7 @@ body {
       right: 200px;
 
       &.sharing, &.imprint {
-        pointer-events: all;
+        pointer-events: auto;
         opacity: 1;
       }
     }

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

@@ -12,7 +12,7 @@ $anchor-external-links-icon: false !default;
   }
 
   text-decoration: none;
-  pointer-events: all;
+  pointer-events: auto;
   position: relative;
   margin-left: 6px;
   margin-right: 6px;

data/app/assets/stylesheets/pageflow/themes/default/logo/variant/watermark.scss

@@ -111,7 +111,7 @@ $logo-watermark-mobile-height: null !default;
   }
 
   .header.near_top .header_logo {
-    pointer-events: all;
+    pointer-events: auto;
   }
 
   @if $logo-watermark-variant-fade-in-near-top == "first-page" {

data/app/assets/stylesheets/pageflow/themes/default/page/anchors.scss

@@ -15,7 +15,7 @@ $page-anchor-typography: () !default;
   .page_text a {
     @extend %anchor;
     color: $page-anchor-color;
-    pointer-events: all;
+    pointer-events: auto;
     margin-right: 0;
     @include typography($page-anchor-typography)
   }

data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/control_bar.scss

@@ -61,7 +61,7 @@ $classic-player-controls-timestamp-position: "left" !default;
 
     background-color: $classic-player-controls-background-color;
     border: $classic-player-controls-border-width solid $classic-player-controls-border-color;
-    pointer-events: all;
+    pointer-events: auto;
 
     &:before {
       content: "";

data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/info_box.scss

@@ -80,7 +80,7 @@ $classic-player-controls-info-box-border-radius: 4px !default;
     pointer-events: none;
 
     a {
-      pointer-events: all;
+      pointer-events: auto;
     }
 
     margin: 0;

data/app/assets/stylesheets/pageflow/themes/default/player_controls/shared/menu_bar.scss

@@ -15,7 +15,7 @@ $player-controls-quality-menu-annotation-color: #ff0000 !default;
     position: absolute;
     bottom: 0;
     z-index: 10;
-    pointer-events: all;
+    pointer-events: auto;
 
     @include transition(opacity 0.5s, visibility 0.5s);
 
@@ -98,7 +98,7 @@ $player-controls-quality-menu-annotation-color: #ff0000 !default;
   &-menu_bar_button-sub_menu_visible .player_controls-menu_bar_button_sub_menu {
     visibility: visible;
     opacity: 1;
-    pointer-events: all;
+    pointer-events: auto;
     @include transition(none);
   }
 

data/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/control_bar.scss

@@ -53,7 +53,7 @@ $slim-player-controls-control-bar-text-phone-typography: () !default;
   }
 
   &-container-playing %player_controls-control_bar {
-    pointer-events: all;
+    pointer-events: auto;
   }
 
   &-control_bar_text {
@@ -248,7 +248,7 @@ $slim-player-controls-control-bar-text-phone-typography: () !default;
   &-control_bar_text,
   &-play_button,
   &-skip_button {
-    pointer-events: all;
+    pointer-events: auto;
   }
 
   &-progress_bar,