pageflow 16.0.0 → 16.2.0

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

@@ -1,5 +1,5 @@
 this.pageflow = this.pageflow || {};
-this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, Backbone, ChildViewContainer, IScroll, jquery_minicolors, wysihtml5, Cocktail) {
+this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, Backbone, ChildViewContainer, IScroll, jquery_minicolors, wysihtml5, jqueryUi, Cocktail) {
   'use strict';
 
   Marionette = Marionette && Marionette.hasOwnProperty('default') ? Marionette['default'] : Marionette;
@@ -1067,6 +1067,107 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     }
   });
 
+  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 _objectSpread2(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;
+  }
+
+  var attributeBinding = {
+    setupBooleanAttributeBinding: function setupBooleanAttributeBinding(optionName, updateMethod) {
+      this.setupAttributeBinding(optionName, updateMethod, Boolean);
+    },
+    getBooleanAttributBoundOption: function getBooleanAttributBoundOption(optionName) {
+      return this.getAttributeBoundOption(optionName, Boolean);
+    },
+    setupAttributeBinding: function setupAttributeBinding(optionName, updateMethod) {
+      var _this = this;
+
+      var normalize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (value) {
+        return value;
+      };
+      var binding = this.options["".concat(optionName, "Binding")];
+      var view = this;
+
+      if (binding) {
+        _.flatten([binding]).forEach(function (attribute) {
+          _this.listenTo(_this.model, 'change:' + attribute, update);
+        });
+      }
+
+      update();
+
+      function update() {
+        updateMethod.call(view, view.getAttributeBoundOption(optionName, normalize));
+      }
+    },
+    getAttributeBoundOption: function getAttributeBoundOption(optionName) {
+      var _this2 = this;
+
+      var normalize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (value) {
+        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 normalize(this.options[optionName](value));
+      } else if (optionName in this.options) {
+        return normalize(this.options[optionName]);
+      } else if (binding) {
+        return normalize(value);
+      }
+    }
+  };
+
   /**
    * Mixin for input views handling common concerns like labels,
    * inline help, visiblity and disabling.
@@ -1196,7 +1297,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    * @mixin
    */
 
-  var inputView = {
+  var inputView = _objectSpread2(_objectSpread2({}, attributeBinding), {}, {
     ui: {
       label: 'label',
       labelText: 'label .name',
@@ -1240,8 +1341,8 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       this.ui.labelText.text(this.labelText());
       this.updateInlineHelp();
       this.setLabelFor();
-      this.setupAttributeBinding('disabled', this.updateDisabled);
-      this.setupAttributeBinding('visible', this.updateVisible);
+      this.setupBooleanAttributeBinding('disabled', this.updateDisabled);
+      this.setupBooleanAttributeBinding('visible', this.updateVisible);
     },
 
     /**
@@ -1290,7 +1391,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       }
     },
     isDisabled: function isDisabled() {
-      return this.getAttributeBoundOption('disabled');
+      return this.getBooleanAttributBoundOption('disabled');
     },
     updateDisabled: function updateDisabled() {
       this.$el.toggleClass('input-disabled', !!this.isDisabled());
@@ -1308,46 +1409,9 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       }
     },
     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 (binding) {
-        _.flatten([binding]).forEach(function (attribute) {
-          _this.listenTo(_this.model, 'change:' + attribute, update);
-        });
-      }
-
-      update();
-
-      function update() {
-        updateMethod.call(view, view.getAttributeBoundOption(optionName));
-      }
-    },
-    getAttributeBoundOption: function getAttributeBoundOption(optionName) {
-      var _this2 = this;
-
-      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;
-      }
+      this.$el.toggleClass('hidden_via_binding', this.getBooleanAttributBoundOption('visible') === false);
     }
-  };
+  });
 
   function template$4(data) {
   var __p = '';
@@ -1466,6 +1530,125 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     }
   });
 
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a 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);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
+
+  /**
+   * Input view for a number.
+   *
+   * See {@link inputView} for further options.
+   *
+   * @param {Object} [options]
+   *
+   * @param {string} [options.locale]
+   * Locale used to fomat and parse numbers.
+   *
+   * @class
+   */
+
+  var NumberInputView = 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    <input type=\"text\" dir=\"auto\" />\n  ";
+    },
+    ui: {
+      input: 'input'
+    },
+    events: {
+      'change': 'onChange'
+    },
+    initialize: function initialize() {
+      this.parser = new NumberParser(this.options.locale);
+    },
+    onRender: function onRender() {
+      this.load();
+      this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
+    },
+    onChange: function onChange() {
+      this.save();
+      this.load();
+    },
+    onClose: function onClose() {
+      this.save();
+    },
+    save: function save() {
+      var inputValue = this.ui.input.val();
+      this.model.set(this.options.propertyName, this.parser.parse(inputValue) || 0);
+    },
+    load: function load() {
+      var input = this.ui.input;
+      var value = this.model.get(this.options.propertyName) || 0;
+      input.val(value.toLocaleString(this.options.locale, {
+        useGrouping: false
+      }));
+    },
+    displayValidationError: function displayValidationError(message) {
+      this.$el.addClass('invalid');
+      this.ui.input.attr('title', message);
+    },
+    resetValidationError: function resetValidationError(message) {
+      this.$el.removeClass('invalid');
+      this.ui.input.attr('title', '');
+    }
+  });
+
+  var NumberParser = /*#__PURE__*/function () {
+    function NumberParser(locale) {
+      _classCallCheck(this, NumberParser);
+
+      var format = new Intl.NumberFormat(locale);
+      var parts = format.formatToParts(12345.6);
+      var numerals = Array.from({
+        length: 10
+      }).map(function (_, i) {
+        return format.format(i);
+      });
+      var index = new Map(numerals.map(function (d, i) {
+        return [d, i];
+      }));
+      this._group = new RegExp("[".concat(parts.find(function (d) {
+        return d.type === "group";
+      }).value, "]"), "g");
+      this._decimal = new RegExp("[".concat(parts.find(function (d) {
+        return d.type === "decimal";
+      }).value, "]"));
+      this._numeral = new RegExp("[".concat(numerals.join(""), "]"), "g");
+
+      this._index = function (d) {
+        return index.get(d);
+      };
+    }
+
+    _createClass(NumberParser, [{
+      key: "parse",
+      value: function parse(string) {
+        string = string.trim().replace(this._group, "").replace(this._decimal, ".").replace(this._numeral, this._index);
+        return string ? +string : NaN;
+      }
+    }]);
+
+    return NumberParser;
+  }();
+
   /**
    * Text based input view that can display a placeholder.
    *
@@ -1676,11 +1859,15 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       this.ui.input.minicolors({
         changeDelay: 200,
         change: _.bind(function (color) {
+          this._saving = true;
+
           if (color === this.defaultValue()) {
             this.model.unset(this.options.propertyName);
           } else {
             this.model.set(this.options.propertyName, color);
           }
+
+          this._saving = false;
         }, this)
       });
       this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
@@ -1709,7 +1896,10 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       }
     },
     load: function load() {
-      this.ui.input.minicolors('value', this.model.get(this.options.propertyName) || this.defaultValue());
+      if (!this._saving) {
+        this.ui.input.minicolors('value', this.model.get(this.options.propertyName) || this.defaultValue());
+      }
+
       this.$el.toggleClass('is_default', !this.model.has(this.options.propertyName));
     },
     refreshPicker: function refreshPicker() {
@@ -2116,6 +2306,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   var TextAreaInputView = Marionette.ItemView.extend({
     mixins: [inputView, inputWithPlaceholderText],
     template: template$8,
+    className: 'text_area_input',
     ui: {
       input: 'textarea',
       toolbar: '.toolbar',
@@ -2292,21 +2483,6 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     }
   });
 
-  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 template$9(data) {
   var __p = '';
   __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<input type="text" />\n<div class="validation"></div>\n';
@@ -2573,6 +2749,25 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @param {Object} [options]
    *
+   * @param {number} [options.defaultValue]
+   *   Defaults value to display if property is not set.
+   *
+   * @param {number} [options.minValue=0]
+   *   Value when dragging slider to the very left.
+   *
+   * @param {number} [options.maxValue=100]
+   *   Value when dragging slider to the very right.
+   *
+   * @param {string} [options.unit="%"]
+   *   Unit to display after value.
+   *
+   * @param {function} [options.displayText]
+   *   Function that receives value and returns custom text to display as value.
+   *
+   * @param {boolean} [options.saveOnSlide]
+   *   Already update the model while dragging the handle - not only after
+   *   handle has been released.
+   *
    * @class
    */
 
@@ -2585,15 +2780,27 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       value: '.value'
     },
     events: {
-      'slidechange': 'save'
+      'slidechange': 'save',
+      'slide': 'handleSlide'
     },
     onRender: function onRender() {
+      var _this = this;
+
       this.ui.widget.slider({
-        animate: 'fast',
-        min: 'minValue' in this.options ? this.options.minValue : 0,
-        max: 'maxValue' in this.options ? this.options.maxValue : 100
+        animate: 'fast'
+      });
+      this.setupAttributeBinding('minValue', function (value) {
+        return _this.updateSliderOption('min', value || 0);
+      });
+      this.setupAttributeBinding('maxValue', function (value) {
+        return _this.updateSliderOption('max', value || 100);
       });
       this.load();
+      this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
+    },
+    updateSliderOption: function updateSliderOption(name, value) {
+      this.ui.widget.slider('option', name, value);
+      this.updateText(this.ui.widget.slider('value'));
     },
     updateDisabled: function updateDisabled(disabled) {
       this.$el.toggleClass('disabled', !!disabled);
@@ -2604,11 +2811,15 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         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 : '%';
-      this.ui.value.text(value + unit);
-      this.model.set(this.options.propertyName, value);
+    handleSlide: function handleSlide(event, ui) {
+      this.updateText(ui.value);
+
+      if (this.options.saveOnSlide) {
+        this.save(event, ui);
+      }
+    },
+    save: function save(event, ui) {
+      this.model.set(this.options.propertyName, ui.value);
     },
     load: function load() {
       var value;
@@ -2619,7 +2830,18 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         value = 'defaultValue' in this.options ? this.options.defaultValue : 0;
       }
 
-      this.ui.widget.slider('option', 'value', value);
+      this.ui.widget.slider('option', 'value', this.clampValue(value));
+      this.updateText(value);
+    },
+    clampValue: function clampValue(value) {
+      var min = this.ui.widget.slider('option', 'min');
+      var max = this.ui.widget.slider('option', 'max');
+      return Math.min(max, Math.max(min, value));
+    },
+    updateText: function updateText(value) {
+      var unit = 'unit' in this.options ? this.options.unit : '%';
+      var text = 'displayText' in this.options ? this.options.displayText(value) : value + unit;
+      this.ui.value.text(text);
     }
   });
 
@@ -3013,7 +3235,10 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       return view;
     },
     appendSubview: function appendSubview(view) {
-      return this.$el.append(this.subview(view).el);
+      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+          to = _ref.to;
+
+      return (to || this.$el).append(this.subview(view).el);
     },
     onClose: function onClose() {
       if (this.subviews) {
@@ -3082,6 +3307,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   exports.IconTableCellView = IconTableCellView;
   exports.JsonInputView = JsonInputView;
   exports.LabelOnlyView = LabelOnlyView;
+  exports.NumberInputView = NumberInputView;
   exports.Object = BaseObject;
   exports.PresenceTableCellView = PresenceTableCellView;
   exports.ProxyUrlInputView = ProxyUrlInputView;
@@ -3100,6 +3326,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   exports.TooltipView = TooltipView;
   exports.UrlDisplayView = UrlDisplayView;
   exports.UrlInputView = UrlInputView;
+  exports.attributeBinding = attributeBinding;
   exports.cssModulesUtils = cssModulesUtils;
   exports.i18nUtils = i18nUtils;
   exports.inputView = inputView;
@@ -3111,4 +3338,4 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
 
   return exports;
 
-}({}, Backbone.Marionette, _, jQuery, I18n, Backbone, Backbone.ChildViewContainer, IScroll, jQuery, wysihtml5, Cocktail));
+}({}, Backbone.Marionette, _, jQuery, I18n, Backbone, Backbone.ChildViewContainer, IScroll, jQuery, wysihtml5, jQuery, Cocktail));

data/app/assets/stylesheets/pageflow/admin/active_admin_patches.scss

@@ -10,7 +10,7 @@
       display: inline;
     }
 
-    input[type="submit"] {
+    [type="submit"] {
       @include light-button;
       padding: 12px 17px 10px;
       margin: 0;

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

@@ -22,6 +22,10 @@ $pageflow-published-revision-background-color: #beebb8 !default;
     .publication_state_indicator {
       height: 17px;
     }
+
+    .tooltip_clue {
+      display: inline-block;
+    }
   }
 
   .legend {

data/app/assets/stylesheets/pageflow/admin/permalink_input.scss

@@ -62,4 +62,14 @@ $pageflow-permalink-input-directory-background-position: null !default;
     padding-left: 0;
     flex: 1;
   }
+
+  &.no_directories {
+    select {
+      display: none;
+    }
+
+    input {
+      padding-left: $pageflow-permalink-input-directory-padding-left;
+    }
+  }
 }

data/app/assets/stylesheets/pageflow/admin/publication_state_indicator.scss

@@ -22,4 +22,8 @@ $pageflow-publication-state-indicator-size: 25px !default;
   &.published_with_password_protection {
     background-image: image-url("#{$dir}/published_with_password.svg");
   }
+
+  &.published_with_noindex {
+    background-image: image-url("#{$dir}/published_with_noindex.svg");
+  }
 }

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

@@ -77,7 +77,6 @@
   @import "./info_box";
   @import "./text_tracks";
   @import "./static_thumbnails";
-  @import "./wysihtml5";
   @import "./notifications";
   @import "./publish_entry";
   @import "./other_entry_item";

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

@@ -10,6 +10,11 @@
     @include icon-only-button;
   }
 
+  > button.ellipsis_icon {
+    @include fa-ellipsis-v-icon;
+    width: 31px;
+  }
+
   &.full_width {
     width: 100%;
 
@@ -26,7 +31,7 @@
   @include transition(visibility 100ms, opacity 100ms);
 
   position: absolute;
-  z-index: 1;
+  z-index: 6;
   padding: 1px;
   border: solid 1px var(--ui-on-surface-color-lighter);
   border-radius: rounded(sm);
@@ -45,7 +50,8 @@
 .drop_down_button_item {
   a,
   .label {
-    padding: 7px 15px;
+    padding: 5px 15px;
+    line-height: 1.75;
   }
 
   a {
@@ -59,6 +65,11 @@
 
   .label {
     cursor: default;
+    font-weight: 500;
+  }
+
+  &.is_hidden {
+    display: none;
   }
 
   &.is_selectable {
@@ -79,13 +90,56 @@
     }
   }
 
-  &.is_checked a {
-    @include background-icon-left($left: 15px, $font-size: 15px);
-    @include fa-check-icon;
+  &.separated {
+    border-top: solid 1px var(--ui-on-surface-color-lighter);
+    margin-top: 1px;
+    padding-top: 1px;
   }
 
-  .drop_down_button_item a {
-    padding-left: 39px;
+  &.has_radio,
+  &.has_check_box {
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: space(2);
+
+      &:after {
+        content: "";
+        flex-shrink: 0;
+        display: block;
+        box-sizing: border-box;
+        border: solid 1px var(--ui-on-surface-color-light);
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+
+    &.is_checked a:after {
+      background-color: var(--ui-primary-color);
+      background-size: 100% 100%;
+      background-position: center;
+    }
+  }
+
+  &.has_check_box {
+    a:after {
+      border-radius: size(1);
+    }
+
+    &.is_checked a:after {
+      background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+    }
+  }
+
+  &.has_radio {
+    a:after {
+      border-radius: 100%;
+    }
+
+    &.is_checked a:after {
+      background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+    }
   }
 
   ul {

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

@@ -22,13 +22,24 @@
   }
 
   td {
-    padding: 5px 5px 5px 0;
+    padding: 5px 0;
+    max-width: 0;
   }
 
   a {
     text-decoration: underline;
   }
 
+  .value_wrapper {
+    display: flex;
+  }
+
+  .value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .edit {
     @include background-icon-center($font-size: 15px,
                                     $color: var(--ui-primary-color-light));