pageflow 15.6.1 → 15.7.1

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

@@ -352,6 +352,24 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
 
   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;
@@ -752,10 +770,12 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       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
@@ -896,7 +916,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   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;
     }
@@ -1273,6 +1293,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       return this.getAttributeBoundOption('disabled');
     },
     updateDisabled: function updateDisabled() {
+      this.$el.toggleClass('input-disabled', !!this.isDisabled());
       this.updateInlineHelp();
 
       if (this.ui.input) {
@@ -1500,6 +1521,31 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     }
   };
 
+  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';
@@ -1527,7 +1573,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    */
 
   var TextInputView = Marionette.ItemView.extend({
-    mixins: [inputView, inputWithPlaceholderText],
+    mixins: [inputView, inputWithPlaceholderText, viewWithValidationErrorMessages],
     template: template$6,
     ui: {
       input: 'input'
@@ -2027,9 +2073,9 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   ((__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) +
@@ -2363,6 +2409,15 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     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;
@@ -2399,23 +2454,26 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       }
 
       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();
       }
     }
@@ -2650,6 +2708,15 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *   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
    */
 
@@ -2675,7 +2742,13 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     },
     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() {
@@ -2686,12 +2759,49 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     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.
@@ -2911,7 +3021,10 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       }
     }
   };
-  Cocktail.mixin(Marionette.View, subviewContainer);
+
+  if (!Marionette.View.prototype.appendSubview) {
+    Cocktail.mixin(Marionette.View, subviewContainer);
+  }
 
   var tooltipContainer = {
     events: {
@@ -2968,10 +3081,12 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   exports.ExtendedSelectInputView = ExtendedSelectInputView;
   exports.IconTableCellView = IconTableCellView;
   exports.JsonInputView = JsonInputView;
+  exports.LabelOnlyView = LabelOnlyView;
   exports.Object = BaseObject;
   exports.PresenceTableCellView = PresenceTableCellView;
   exports.ProxyUrlInputView = ProxyUrlInputView;
   exports.SelectInputView = SelectInputView;
+  exports.SeparatorView = SeparatorView;
   exports.SliderInputView = SliderInputView;
   exports.SortableCollectionView = SortableCollectionView;
   exports.TableCellView = TableCellView;
@@ -2989,8 +3104,10 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   exports.i18nUtils = i18nUtils;
   exports.inputView = inputView;
   exports.inputWithPlaceholderText = inputWithPlaceholderText;
+  exports.serverSideValidation = serverSideValidation;
   exports.subviewContainer = subviewContainer;
   exports.tooltipContainer = tooltipContainer;
+  exports.viewWithValidationErrorMessages = viewWithValidationErrorMessages;
 
   return exports;
 

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

@@ -1,21 +1,23 @@
-#wrapper {
-  overflow: hidden;
-  position: relative;
-}
-
-.action_items {
-  form,
-  div {
-    display: inline;
+@if not $pageflow-custom-admin-theme {
+  #wrapper {
+    overflow: hidden;
+    position: relative;
   }
 
-  input[type="submit"] {
-    @include light-button;
-    padding: 12px 17px 10px;
-    margin: 0;
+  .action_items {
+    form,
+    div {
+      display: inline;
+    }
+
+    input[type="submit"] {
+      @include light-button;
+      padding: 12px 17px 10px;
+      margin: 0;
+    }
   }
-}
 
-.blank_slate_container {
-  margin: 10px 0;
+  .blank_slate_container {
+    margin: 10px 0;
+  }
 }

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

@@ -1,47 +1,37 @@
+$pageflow-badge-color: #555 !default;
+$pageflow-badge-background-color: #fff !default;
+$pageflow-badge-border-color: #aaa !default;
+$pageflow-badge-border-radius: null !default;
+$pageflow-badge-margin: -4px 0 !default;
+
 .badge_list {
-  margin: -4px 0;
+  margin: $pageflow-badge-margin;
   padding: 0;
 
   li {
-    float: left;
     position: relative;
     list-style: none;
-
-    margin: 1px;
-    line-height: 22px;
-    padding: 0 5px;
-
-    background-color: #fff;
-    border: solid 1px #aaa;
-    text-align: center;
-
-    &:hover .tooltip {
-      opacity: 1;
-    }
-  }
-
-  .abbreviation, .name {
-    font-size: 11px;
-    font-weight: bold;
-    color: #555;
+    float: left;
   }
 
-  .tooltip {
-    position: absolute;
-    top: -1px;
-    left: -1px;
-    padding: 0 5px;
-
-    white-space: nowrap;
-    z-index: 1;
-
-    background-color: #fff;
-    border: solid 1px #aaa;
-    opacity: 0;
+  .abbreviation {
+    padding: 0 8px;
+    display: inline-block;
+    text-decoration: none;
+    margin: 2px;
+    background-color: $pageflow-badge-background-color;
+    border: solid 1px $pageflow-badge-border-color;
+    color: $pageflow-badge-color;
+    border-radius: $pageflow-badge-border-radius;
+    text-align: center;
+    font-size: 0.7rem;
   }
+}
 
-  a {
-    text-decoration: none;
-    font-weight: bold;
+.entry_user_badge_list {
+  .abbreviation {
+    width: 2em;
+    line-height: 2em;
+    padding: 0;
   }
 }

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

@@ -1,15 +1,17 @@
-.columns {
-  width: 100%;
+@if not $pageflow-custom-admin-theme {
+  .columns {
+    width: 100%;
 
-  > div {
-    width: 49%;
-  }
+    > div {
+      width: 49%;
+    }
 
-  > div:first-child {
-    float: left;
-  }
+    > div:first-child {
+      float: left;
+    }
 
-  > div:last-child {
-    float: right;
+    > div:last-child {
+      float: right;
+    }
   }
-}
+}

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

@@ -1,13 +1,10 @@
 .embed_code {
-  $hint-color: #9c9c9c;
-
   input {
     width: 100%;
   }
 
   p {
     margin: 5px 0 0 0;
-    color: $hint-color;
-    font-style: italic;
+    color: $pageflow-hint-color;
   }
 }

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

@@ -1,4 +1,14 @@
+$pageflow-folders-icon-directory: "pageflow/admin/icons" !default;
+
+$pageflow-active-folder-background-color: #75a1c2 !default;
+$pageflow-active-folder-color: #fff !default;
+$pageflow-folder-drop-target-background-color: #fff !default;
+$pageflow-folder-drop-target-outline-color: #000 !default;
+$pageflow-folders-heading-color: #888 !default;
+
 #folders_sidebar_section {
+  $icon-dir: $pageflow-folders-icon-directory;
+
   position: relative;
 
   ul {
@@ -11,12 +21,32 @@
     position: relative;
   }
 
+  .name,
+  .edit_folder,
+  .new,
+  .delete,
+  .edit_toggle {
+    background-size: $pageflow-icon-size $pageflow-icon-size;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .edit_folder,
+  .delete,
+  .edit_toggle {
+    background-position: center;
+  }
+
+  .name,
+  .new {
+    background-position: 7px center;
+  }
+
   .folders {
     margin-bottom: 10px;
 
     .name {
-      @include background-icon-left;
-      @include folder-icon;
+      background-image: image-url("#{$icon-dir}/folder.svg");
 
       display: block;
       padding: 5px 10px 5px 35px;
@@ -26,16 +56,14 @@
     }
 
     span.name {
-      @include highlight-gradient;
-      @include background-icon-color(#eee);
-      color: #fff;
-      font-weight: bold;
+      background-image: image-url("#{$icon-dir}/folder_active.svg");
+      background-color: $pageflow-active-folder-background-color;
+      color: $pageflow-active-folder-color;
       cursor: default;
     }
 
     .edit_folder,
     .delete {
-      @include background-icon-center(#444);
       @include hide-text;
 
       position: absolute;
@@ -45,21 +73,21 @@
     }
 
     .edit_folder {
-      @include pencil-icon;
+      background-image: image-url("#{$icon-dir}/edit.svg");
       right: 30px;
     }
 
     .delete {
-      @include trash-icon;
+      background-image: image-url("#{$icon-dir}/delete.svg");
       right: 0;
     }
 
     .drop_target {
-      background-color: #fff;
+      background-color: $pageflow-folder-drop-target-background-color;
     }
 
     .drop_over {
-      outline: solid 1px #444;
+      outline: solid 1px $pageflow-folder-drop-target-outline-color;
     }
   }
 
@@ -67,12 +95,11 @@
     margin: 0px 0 5px 0;
     font-size: 13px;
     font-weight: bold;
-    color: #888;
+    color: $pageflow-folders-heading-color;
   }
 
   .new {
-    @include background-icon-left;
-    @include plus-circled-icon;
+    background-image: image-url("#{$icon-dir}/new.svg");
 
     display: block;
     padding: 5px 10px 5px 35px;
@@ -101,8 +128,6 @@
   }
 
   .edit_toggle {
-    @include background-icon-center(#444);
-
     position: absolute;
     right: 0;
     top: 0;
@@ -110,11 +135,11 @@
     height: 30px;
 
     &.done {
-      @include check-icon;
+      background-image: image-url("#{$icon-dir}/done.svg");
     }
 
     &.edit {
-      @include pencil-icon;
+      background-image: image-url("#{$icon-dir}/edit.svg");
     }
   }
 }
@@ -124,4 +149,4 @@
   background-color: #eee;
   padding: 15px;
   z-index: 1000;
-}
+}

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

@@ -1,9 +1,10 @@
-.admin_entries {
-  $published-color: #BEEBB8;
+$pageflow-revision-color: #888 !default;
+$pageflow-published-revision-background-color: #beebb8 !default;
 
+.admin_entries {
   table.revisions {
-    tr {
-      color: #888;
+    td {
+      color: $pageflow-revision-color;
     }
 
     a.show {
@@ -13,49 +14,32 @@
     .published td {
       // scss-lint:disable ImportantRule
       // Win against overly specific Active Admin rule
-      background-color: $published-color !important;
+      background-color: $pageflow-published-revision-background-color !important;
       // scss-lint:enable ImportantRule
-      color: #000;
+      color: inherit;
     }
-  }
-
-  .snapshot {
-    float: right;
-  }
-
-  td > span[title] {
-    border-bottom: 1px #aaa dotted;
-    cursor: default;
-  }
 
-  span.password_protected {
-    @include background-icon-center($font-size: 13px, $color: #555);
-    @include lock-icon;
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    vertical-align: bottom;
-    border-bottom: none;
+    .publication_state_indicator {
+      height: 17px;
+    }
   }
 
   .legend {
-    float: left;
-    position: relative;
-    padding: 0 15px 0 22px;
+    display: flex;
+    align-items: center;
+    color: $pageflow-hint-color;
 
     &:before {
       content: " ";
-      position: absolute;
       display: block;
-      left: 0;
-      top: 0;
       width: 14px;
       height: 14px;
       border: solid 1px #999;
+      margin-right: 10px;
     }
 
     &.published:before {
-      background-color: $published-color;
+      background-color: $pageflow-published-revision-background-color;
     }
   }
 

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

@@ -1,5 +1,7 @@
+$pageflow-feature-select-width: 200px !default;
+
 form.features {
   select {
-    width: 200px;
+    width: $pageflow-feature-select-width;
   }
 }

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

@@ -1,18 +1,20 @@
-form {
-  fieldset p {
-    margin-left: 20%;
-    max-width: 550px;
-  }
+@if not $pageflow-custom-admin-theme {
+  form {
+    fieldset p {
+      margin-left: 20%;
+      max-width: 550px;
+    }
 
-  .inline_help_item {
-    padding: 5px 10px;
-  }
+    .inline_help_item {
+      padding: 5px 10px;
+    }
 
-  fieldset.actions .link_action {
-    padding: 5px;
+    fieldset.actions .link_action {
+      padding: 5px;
 
-    &.cancel {
-      padding: 0;
+      &.cancel {
+        padding: 0;
+      }
     }
   }
 }