pageflow 0.11.4 → 12.0.0.rc1

data/app/assets/javascripts/pageflow/ui/views/inputs/slider_input_view.js

@@ -1,3 +1,10 @@
+/**
+ * A slider for numeric inputs.
+ *
+ * @see {@link module:pageflow/ui.pageflow.inputView pageflow.inputView} for options
+ * @class
+ * @memberof module:pageflow/ui
+ */
 pageflow.SliderInputView = Backbone.Marionette.ItemView.extend({
   mixins: [pageflow.inputView],
 
@@ -44,4 +51,4 @@ pageflow.SliderInputView = Backbone.Marionette.ItemView.extend({
 
     this.ui.widget.slider('option', 'value', value);
   }
-});
+});

data/app/assets/javascripts/pageflow/ui/views/inputs/text_area_input_view.js

@@ -1,5 +1,21 @@
-/*global wysihtml5, wysihtml5ParserRules*/
+/*global wysihtml5*/
 
+/**
+ * Input view for multi line text with simple formatting options.
+ *
+ * @param {string} [options.size="normal"]
+ *   Pass `"short"` to reduce the text area height.
+ *
+ * @param {boolean} [options.disableLinks=false]
+ *   Do not allow links inside the text.
+ *
+ * @param {boolean} [options.disableRichtext=false]
+ *   Do not provide text formatting options.
+ *
+ * @see {@link module:pageflow/ui.pageflow.inputView pageflow.inputView} for further options
+ * @class
+ * @memberof module:pageflow/ui
+ */
 pageflow.TextAreaInputView = Backbone.Marionette.ItemView.extend({
   mixins: [pageflow.inputView],
 

data/app/assets/javascripts/pageflow/ui/views/inputs/text_input_view.js

@@ -1,3 +1,29 @@
+/**
+ * Input view for a single line of text.
+ *
+ * @param {boolean} [options.required=false]
+ *   Display an error if the input is blank.
+ *
+ * @param {string|function} [options.placeholder]
+ *   Display a placeholder string if the input is blank. Either a
+ *   string or a function taking the model as a first parameter and
+ *   returning a string.
+ *
+ * @param {string} [options.placeholderBinding]
+ *   Name of an attribute. Recompute the placeholder function whenever
+ *   this attribute changes.
+ *
+ * @param {boolean} [options.hidePlaceholderIfDisabled]
+ *   Do not display the placeholder if the input is disabled.
+ *
+ * @param {Backbone.Model} [options.placeholderModel]
+ *   Obtain placeholder by looking up the configured `propertyName`
+ *   inside a given model.
+ *
+ * @see {@link module:pageflow/ui.pageflow.inputView pageflow.inputView} for further options
+ * @class
+ * @memberof module:pageflow/ui
+ */
 pageflow.TextInputView = Backbone.Marionette.ItemView.extend({
   mixins: [pageflow.inputView],
 
@@ -17,6 +43,12 @@ pageflow.TextInputView = Backbone.Marionette.ItemView.extend({
     this.validate();
 
     this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
+
+    if (this.options.placeholderBinding) {
+      this.listenTo(this.model,
+                    'change:' + this.options.placeholderBinding,
+                    this.updatePlaceholder);
+    }
   },
 
   onChange: function() {
@@ -61,11 +93,22 @@ pageflow.TextInputView = Backbone.Marionette.ItemView.extend({
 
   placeholderText: function() {
     if (!this.options.disabled || !this.options.hidePlaceholderIfDisabled) {
-      return this.options.placeholder || this.placholderModelValue();
+      if (this.options.placeholder) {
+        if (typeof this.options.placeholder == 'function') {
+          return this.options.placeholder(this.model);
+        }
+        else {
+          return this.options.placeholder;
+        }
+      }
+      else {
+        return this.placeholderModelValue();
+      }
     }
   },
 
-  placholderModelValue: function() {
-    return this.options.placeholderModel && this.options.placeholderModel.get(this.options.propertyName);
+  placeholderModelValue: function() {
+    return this.options.placeholderModel &&
+      this.options.placeholderModel.get(this.options.propertyName);
   }
-});
+});

data/app/assets/javascripts/pageflow/ui/views/inputs/url_display_view.js

@@ -0,0 +1,42 @@
+/**
+ * Display view for a link to a URL, to be used like an input view.
+ *
+ * @param {string} [options.propertyName]
+ *   Target URL for link
+ *
+ * @see {@link module:pageflow/ui.pageflow.inputView pageflow.inputView} for further options
+ * @class
+ * @memberof module:pageflow/ui
+ */
+
+pageflow.UrlDisplayView = Backbone.Marionette.ItemView.extend({
+  mixins: [pageflow.inputView],
+
+  template: 'pageflow/ui/templates/inputs/url_display',
+
+  ui: {
+    link: 'a'
+  },
+
+  modelEvents: {
+    'change': 'update'
+  },
+
+  events: {
+    'click a': function(event) {
+      // Ensure default is not prevented by parent event listener.
+      event.stopPropagation();
+    }
+  },
+
+  onRender: function() {
+    this.update();
+  },
+
+  update: function() {
+    var url = this.model.get('original_url');
+
+    this.$el.toggle(this.model.isUploaded() && !_.isEmpty(url));
+    this.ui.link.attr('href', url);
+  }
+});

data/app/assets/javascripts/pageflow/ui/views/inputs/url_input_view.js

@@ -1,4 +1,22 @@
-pageflow.UrlInputView = Backbone.Marionette.Layout.extend({
+/**
+ * Input view for URLs.
+ *
+ * @param {string[]} options.supportedHosts
+ *   List of allowed url prefixes.
+ *
+ * @param {boolean} [options.required=false]
+ *   Display an error if the url is blank.
+ *
+ * @param {boolean} [options.permitHttps=false]
+ *   Allow urls with https protocol.
+ *
+ * @see {@link module:pageflow/ui.pageflow.inputView pageflow.inputView} for further options
+ * @class
+ * @memberof module:pageflow/ui
+ */
+pageflow.UrlInputView = Backbone.Marionette.Layout.extend(
+  /** @lends module:pageflow/ui.pageflow.UrlInputView# */{
+
   mixins: [pageflow.inputView],
 
   template: 'pageflow/ui/templates/inputs/url_input',
@@ -149,4 +167,4 @@ pageflow.UrlInputView = Backbone.Marionette.Layout.extend({
       view.ui.validation.hide();
     }
   }
-});
+});

data/app/assets/javascripts/pageflow/ui/views/mixins/input_view.js

@@ -15,6 +15,7 @@
  *
  * will be used for the label. And the key
  *
+ *     pageflow.ui.inline_help.page.title_html
  *     pageflow.ui.inline_help.page.title
  *
  * will be used for the inline help.
@@ -35,19 +36,22 @@
  *
  * Accordingly, for the inline help:
  *
+ *     some.attributes.title.inline_help_html
  *     some.attributes.title.inline_help
+ *     fallback.attributes.title.inline_help_html
  *     fallback.attributes.title.inline_help
+ *     pageflow.ui.inline_help.post.title_html
  *     pageflow.ui.inline_help.post.title
  *
  * This setup allows to keep all translation keys for an attribute
  * to share a common prefix:
  *
- *    some:
- *      attributes:
- *        title:
- *          label: "Label"
- *          inline_help: "..."
- *          inline_help_disabled: "..."
+ *     some:
+ *       attributes:
+ *         title:
+ *           label: "Label"
+ *           inline_help: "..."
+ *           inline_help_disabled: "..."
  *
  * ### Inline Help for Disabled Inputs
  *
@@ -57,38 +61,50 @@
  * attribute translation key prefixes take precedence over suffixed
  * keys:
  *
+ *     some.attributes.title.inline_help_html
  *     some.attributes.title.inline_help
+ *     some.attributes.title.inline_help_disabled_html
  *     some.attributes.title.inline_help_disabled
+ *     fallback.attributes.title.inline_help_html
  *     fallback.attributes.title.inline_help
+ *     fallback.attributes.title.inline_help_disabled_html
  *     fallback.attributes.title.inline_help_disabled
+ *     pageflow.ui.inline_help.post.title_html
  *     pageflow.ui.inline_help.post.title
+ *     pageflow.ui.inline_help.post.title_disabled_html
  *     pageflow.ui.inline_help.post.title_disabled
  *
- * @option propertyName [String]
+ * @param {string} options
+ *   Common constructor options for all views that include this mixin.
+ *
+ * @param {string} options.propertyName
  *   Name of the attribute on the model to display and edit.
  *
- * @option label [String]
+ * @param {string} [options.label]
  *   Label text for the input.
  *
- * @option attributeTranslationKeyPrefixes [Array<String>]
+ * @param {string[]} [options.attributeTranslationKeyPrefixes]
  *   An array of prefixes to lookup translations for labels and
  *   inline help texts based on attribute names.
  *
- * @option disabled [Boolean]
+ * @param {boolean} [options.disabled]
  *   Render input as disabled.
  *
- * @option visibleBinding [String]
+ * @param {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 as a truthy value.
+ *   input will be visible whenever this attribute has a truthy value.
  *
- * @option visible [Function|Boolean]
+ * @param {function|boolean} [options.visible]
  *   A Function taking the value of the `visibleBinding` attribute as
  *   parameter. Input will be visible only if function returns `true`.
  *
- * @option visibleBindingValue [Any]
+ * @param {any} [options.visibleBindingValue]
  *   Input will be visible whenever the value of the `visibleBinding`
  *   attribute equals the value of this option.
+ *
+ * @mixin
+ * @memberof module:pageflow/ui
  */
 pageflow.inputView = {
   ui: {
@@ -97,44 +113,47 @@ pageflow.inputView = {
   },
 
   /**
-   * Returns an array of translation keys based on the propertyName
-   * options and the given prefixes.
+   * Returns an array of translation keys based on the
+   * `attributeTranslationKeyPrefixes` option and the given keyName.
    *
-   * @param keyName [String]
-   *   Suffix to append to prefixes.
+   * Combined with {@link
+   * module:pageflow/ui.pageflow.i18nUtils.findTranslation
+   * i18nUtils.findTranslation}, this can be used inside input views
+   * to obtain additional translations with the same logic as for
+   * labels and inline help texts.
    *
-   * @option attributeTranslationKeyPrefixes [Array<String>]
-   *   An array of strings to use as prefixes to constructs
-   *   translation keys.
+   *      pageflow.i18nUtils.findTranslation(this.attributeTranslationKeys('default_value'));
    *
-   * @option fallbackPrefix [String]
+   * @param {string} keyName
+   * Suffix to append to prefixes.
+   *
+   * @param {string} [options.fallbackPrefix]
    *   Optional additional prefix to form a model based translation
    *   key of the form `prefix.modelI18nKey.propertyName.keyName
    *
-   * @api edge
+   * @return {string[]}
+   * @since 0.9
+   * @member
    */
   attributeTranslationKeys: function(keyName, options) {
-    var result = [];
-
-    if (this.options.attributeTranslationKeyPrefixes) {
-      result = result.concat(_(this.options.attributeTranslationKeyPrefixes).map(function(prefix) {
-        return prefix + '.' + this.options.propertyName + '.' + keyName;
-      }, this));
-    }
-
-    if (options && options.fallbackPrefix) {
-      result.push(options.fallbackPrefix + '.' + this.model.i18nKey + '.' + this.options.propertyName);
-    }
-
-    return result;
+    return pageflow.i18nUtils.attributeTranslationKeys(
+      this.options.propertyName,
+      keyName,
+      _.extend({
+        prefixes: this.options.attributeTranslationKeyPrefixes,
+        fallbackModelI18nKey: this.model.i18nKey
+      }, options || {})
+    );
   },
 
-  /** @private */
   onRender: function() {
+    this.$el.addClass('input');
     this.$el.addClass(this.model.modelName + '_' + this.options.propertyName);
-    this.ui.labelText.text(this.labelText());
 
-    this.ui.inlineHelp.text(this.inlineHelpText());
+    this.$el.data('inputPropertyName', this.options.propertyName);
+
+    this.ui.labelText.text(this.labelText());
+    this.ui.inlineHelp.html(this.inlineHelpText());
 
     if (!this.inlineHelpText()) {
       this.ui.inlineHelp.hide();
@@ -144,32 +163,42 @@ pageflow.inputView = {
     this.setupVisibleBinding();
   },
 
+  /**
+   * The label to display in the form.
+   * @return {string}
+   */
   labelText: function() {
     return this.options.label || this.localizedAttributeName();
   },
 
   localizedAttributeName: function() {
-    return pageflow.i18nUtils.findTranslation(this.attributeTranslationKeys('label', {fallbackPrefix: 'activerecord.attributes'}));
+    return pageflow.i18nUtils.findTranslation(this.attributeTranslationKeys('label', {
+      fallbackPrefix: 'activerecord.attributes'
+    }));
   },
 
+  /**
+   * The inline help text for the form field.
+   * @return {string}
+   */
   inlineHelpText: function() {
-    var keys = this.attributeTranslationKeys('inline_help', {fallbackPrefix: 'pageflow.ui.inline_help'});
+    var keys = this.attributeTranslationKeys('inline_help', {
+      fallbackPrefix: 'pageflow.ui.inline_help'
+    });
 
     if (this.options.disabled) {
       keys = pageflow.i18nUtils.translationKeysWithSuffix(keys, 'disabled');
     }
 
-    return pageflow.i18nUtils.findTranslation(keys, {defaultValue: ''});
+    return pageflow.i18nUtils.findTranslation(keys, {defaultValue: '', html: true});
   },
 
-  /** @private */
   updateDisabled: function() {
     if (this.ui.input) {
       this.updateDisabledAttribute(this.ui.input);
     }
   },
 
-  /** @private */
   updateDisabledAttribute: function(element) {
     if (this.options.disabled) {
       element.attr('disabled', true);
@@ -179,7 +208,6 @@ pageflow.inputView = {
     }
   },
 
-  /** @private */
   setupVisibleBinding: function() {
     var view = this;
 
@@ -207,4 +235,4 @@ pageflow.inputView = {
       }
     }
   }
-};
+};

data/app/assets/javascripts/pageflow/ui/views/table_cells/delete_row_table_cell_view.js

@@ -0,0 +1,63 @@
+/**
+ * A table cell providing a button which destroys the model that the
+ * current row refers to.
+ *
+ * ## Attribute Translations
+ *
+ * The following attribute translation is used:
+ *
+ * - `.cell_title` - Used as title attribute.
+ *
+ * @param {function} [options.toggleDeleteButton]
+ *   A function with boolean return value to be called on
+ *   this.getModel(). Delete button will be visible only if the
+ *   function returns a truthy value.
+ *
+ * @param {boolean} [options.invertToggleDeleteButton]
+ *   Invert the return value of `toggleDeleteButton`?
+ *
+ * @since 12.0
+ */
+pageflow.DeleteRowTableCellView = pageflow.TableCellView.extend({
+  className: 'delete_row_table_cell',
+  template: 'templates/delete_row_table_cell',
+
+  ui: {
+    removeButton: '.remove'
+  },
+
+  events: {
+    'click .remove': 'destroy',
+
+    'click': function() {
+      return false;
+    }
+  },
+
+  showButton: function() {
+    if (this.options.toggleDeleteButton) {
+      var context = this.getModel();
+      var toggle = context[this.options.toggleDeleteButton].apply(context);
+
+      if (this.options.invertToggleDeleteButton) {
+        return !toggle;
+      }
+      else {
+        return !!toggle;
+      }
+    }
+    else {
+      return true;
+    }
+  },
+
+  update: function() {
+    this.ui.removeButton.toggleClass('remove', this.showButton());
+
+    this.ui.removeButton.attr('title', this.attributeTranslation('cell_title'));
+  },
+
+  destroy: function() {
+    this.getModel().destroy();
+  }
+});