app/assets/javascripts/pageflow/dist/ui.js in pageflow-15.1.0.beta2 vs app/assets/javascripts/pageflow/dist/ui.js in pageflow-15.1.0.beta3
- old
+ new
@@ -29,16 +29,10 @@
return JST[template](data);
};
/**
- * Helpers functions for handling translations.
- *
- * @memberof module:pageflow/ui
- */
-
- /**
* Returns an array of translation keys based on the `prefixes`
* option and the given `keyName`.
*
* @param {string} keyName
* Suffix to append to prefixes.
@@ -53,12 +47,13 @@
*
* @param {string} [options.fallbackModelI18nKey]
* Required if `fallbackPrefix` option is present.
*
* @return {string[]}
+ * @memberof i18nUtils
* @since 12.0
- */
+ */
function attributeTranslationKeys(attributeName, keyName, options) {
var result = [];
if (options.prefixes) {
@@ -73,15 +68,15 @@
return result;
}
/**
* Takes the same parameters as {@link
- * module:pageflow/ui.attributeTranslationKeys
- * i18nUtils.attributeTranslationKeys}, but returns the first
- * existing translation.
+ * #i18nutilsattributetranslationkeys attributeTranslationKeys}, but returns the first existing
+ * translation.
*
* @return {string}
+ * @memberof i18nUtils
* @since 12.0
*/
function attributeTranslation(attributeName, keyName, options) {
return findTranslation(attributeTranslationKeys(attributeName, keyName, options));
@@ -99,10 +94,11 @@
*
* @param {boolean} [options.html]
* If true, also search for keys ending in '_html' and HTML-escape
* keys that do not end in 'html'
*
+ * @memberof i18nUtils
* @return {string}
*/
function findTranslation(keys, options) {
options = options || {};
@@ -128,10 +124,11 @@
* first if non of the keys has a translation.
*
* @param {string[]} keys
* Translation key candidates.
*
+ * @memberof i18nUtils
* @return {string}
*/
function findKeyWithTranslation(keys) {
var missing = '_not_translated';
@@ -154,10 +151,180 @@
findTranslation: findTranslation,
findKeyWithTranslation: findKeyWithTranslation,
translationKeysWithSuffix: translationKeysWithSuffix
});
+ function _arrayWithHoles(arr) {
+ if (Array.isArray(arr)) return arr;
+ }
+
+ function _iterableToArrayLimit(arr, i) {
+ if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
+ return;
+ }
+
+ var _arr = [];
+ var _n = true;
+ var _d = false;
+ var _e = undefined;
+
+ try {
+ for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+ _arr.push(_s.value);
+
+ if (i && _arr.length === i) break;
+ }
+ } catch (err) {
+ _d = true;
+ _e = err;
+ } finally {
+ try {
+ if (!_n && _i["return"] != null) _i["return"]();
+ } finally {
+ if (_d) throw _e;
+ }
+ }
+
+ return _arr;
+ }
+
+ function _nonIterableRest() {
+ throw new TypeError("Invalid attempt to destructure non-iterable instance");
+ }
+
+ function _slicedToArray(arr, i) {
+ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+ }
+
+ /**
+ * Create object that can be passed to Marionette ui property from CSS
+ * module object.
+ *
+ * @param {Object} styles
+ * Class name mapping imported from `.module.css` file.
+ *
+ * @param {...string} classNames
+ * Keys from the styles object that shall be used in the ui object.
+ *
+ * @return {Object}
+ *
+ * @example
+ *
+ * // MyView.module.css
+ *
+ * .container {}
+ *
+ * // MyView.js
+ *
+ * import Marionette from 'marionette';
+ * import {cssModulesUtils} from 'pageflow/ui';
+ *
+ * import styles from './MyView.module.css';
+ *
+ * export const MyView = Marionette.ItemView({
+ * template: () => `
+ * <div class=${styles.container}></div>
+ * `,
+ *
+ * ui: cssModulesUtils.ui(styles, 'container'),
+ *
+ * onRender() {
+ * this.ui.container // => JQuery wrapper for container element
+ * }
+ * });
+ *
+ * @memberof cssModulesUtils
+ */
+ function ui(styles) {
+ for (var _len = arguments.length, classNames = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+ classNames[_key - 1] = arguments[_key];
+ }
+
+ return classNames.reduce(function (result, className) {
+ result[className] = selector(styles, className);
+ return result;
+ }, {});
+ }
+ /**
+ * Create object that can be passed to Marionette events property from CSS
+ * module object.
+ *
+ * @param {Object} styles
+ * Class name mapping imported from `.module.css` file.
+ *
+ * @param {Object} mapping
+ * Events mapping using keys from the `styles` instead of CSS class names.
+ *
+ * @return {Object}
+ *
+ * @example
+ *
+ * // MyView.module.css
+ *
+ * .addButton {}
+ *
+ * // MyView.js
+ *
+ * import Marionette from 'marionette';
+ * import {cssModulesUtils} from 'pageflow/ui';
+ *
+ * import styles from './MyView.module.css';
+ *
+ * export const MyView = Marionette.ItemView({
+ * template: () => `
+ * <button class=${styles.addButton}></button>
+ * `,
+ *
+ * events: cssModulesUtils.ui(styles, {
+ * 'click addButton': () => console.log('clicked add button');
+ * })
+ * });
+ *
+ * @memberof cssModulesUtils
+ */
+
+ function events(styles, mapping) {
+ return Object.keys(mapping).reduce(function (result, key) {
+ var _key$split = key.split(' '),
+ _key$split2 = _slicedToArray(_key$split, 2),
+ event = _key$split2[0],
+ className = _key$split2[1];
+
+ result["".concat(event, " ").concat(selector(styles, className))] = mapping[key];
+ return result;
+ }, {});
+ }
+ /**
+ * Generates a CSS selector from a CSS module rule.
+ *
+ * @param {Object} styles
+ * Class name mapping imported from `.module.css` file.
+ *
+ * @param {String} className
+ * Key from the `styles` object.
+ *
+ * @return {String} CSS Selector
+ * @memberof cssModulesUtils
+ */
+
+ function selector(styles, className) {
+ var classNames = styles[className];
+
+ if (!classNames) {
+ throw new Error("Unknown class name ".concat(className, " in mapping. Knwon names: ").concat(Object.keys(styles).join(', '), "."));
+ }
+
+ return ".".concat(classNames.replace(/ /g, '.'));
+ }
+
+ var cssModulesUtils = /*#__PURE__*/Object.freeze({
+ __proto__: null,
+ ui: ui,
+ events: events,
+ selector: selector
+ });
+
// https://github.com/jashkenas/backbone/issues/2601
function BaseObject(options) {
this.initialize.apply(this, arguments);
}
@@ -403,10 +570,12 @@
/*global pageflow*/
/**
* Switch between different views using tabs.
*
+ * @param {Object} [options]
+ *
* @param {string} [options.defaultTab]
* Name of the tab to enable by default.
*
* @param {string[]} [options.translationKeyPrefixes]
* List of prefixes to append tab name to. First exisiting translation is used as label.
@@ -417,14 +586,15 @@
*
* @param {string} [options.i18n]
* Legacy alias for `fallbackTranslationKeyPrefix`.
*
* @class
- * @memberof module:pageflow/ui
*/
- var TabsView = Marionette.Layout.extend({
+ var TabsView = Marionette.Layout.extend(
+ /* @lends TabView.prototype */
+ {
template: template,
className: 'tabs_view',
ui: {
headers: '.tabs_view-headers',
scroller: '.tabs_view-scroller'
@@ -530,10 +700,12 @@
});
/**
* Render a inputs on multiple tabs.
*
+ * @param {Object} [options]
+ *
* @param {string} [options.model]
* Backbone model to use for input views.
*
* @param {string} [options.placeholderModel]
* Backbone model to read placeholder values from.
@@ -549,11 +721,10 @@
*
* @param {string} [options.tabTranslationKeyPrefix]
* Prefixes to append tab name to.
*
* @class
- * @memberof module:pageflow/ui
*/
var ConfigurationEditorView = Marionette.View.extend({
className: 'configuration_editor',
initialize: function initialize() {
@@ -615,10 +786,12 @@
*
* Inside sub classes the name of the column options are available as
* `this.options.column`. Override the `update` method to populate the
* element.
*
+ * @param {Object} [options]
+ *
* @param {string} [options.className]
* Class attribute to apply to the cell element.
*
* @since 12.0
*/
@@ -962,11 +1135,10 @@
* @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
*/
var inputView = {
ui: {
labelText: 'label .name',
@@ -975,17 +1147,16 @@
/**
* Returns an array of translation keys based on the
* `attributeTranslationKeyPrefixes` option and the given keyName.
*
- * Combined with {@link
- * module:pageflow/ui.findTranslation
+ * Combined with {@link #i18nutils
* i18nUtils.findTranslation}, this can be used inside input views
* to obtain additional translations with the same logic as for
* labels and inline help texts.
*
- * findTranslation(this.attributeTranslationKeys('default_value'));
+ * findTranslation(this.attributeTranslationKeys('default_value'));
*
* @param {string} keyName
* Suffix to append to prefixes.
*
* @param {string} [options.fallbackPrefix]
@@ -1092,14 +1263,15 @@
return __p
}
/**
* Input view for attributes storing configuration hashes with boolean values.
+ * See {@link inputView} for further options.
*
- * @see {@link module:pageflow/ui.inputView inputView} for further options
+ * @param {Object} [options]
+ *
* @class
- * @memberof module:pageflow/ui
*/
var CheckBoxGroupInputView = Marionette.ItemView.extend({
mixins: [inputView],
template: template$4,
@@ -1165,17 +1337,18 @@
return __p
}
/**
* Display view for a link to a URL, to be used like an input view.
+ * See {@link inputView} for further options
*
+ * @param {Object} [options]
+ *
* @param {string} [options.propertyName]
* Target URL for link
*
- * @see {@link module:pageflow/ui.inputView inputView} for further options
* @class
- * @memberof module:pageflow/ui
*/
var UrlDisplayView = Marionette.ItemView.extend({
mixins: [inputView],
template: template$5,
@@ -1202,10 +1375,12 @@
});
/**
* Text based input view that can display a placeholder.
*
+ * @param {Object} [options]
+ *
* @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.
*
@@ -1217,13 +1392,10 @@
* 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.
- *
- * @mixin
- * @memberof module:pageflow/ui
*/
var inputWithPlaceholderText = {
onRender: function onRender() {
this.updatePlaceholder();
@@ -1259,25 +1431,25 @@
}
/**
* Input view for a single line of text.
*
+ * See {@link inputWithPlaceholderText} for placeholder related
+ * further options. See {@link inputView} for further options.
+ *
+ * @param {Object} [options]
+ *
* @param {boolean} [options.required=false]
- * Display an error if the input is blank.
+ * Display an error if the input is blank.
*
* @param {number} [options.maxLength=255]
- * Maximum length of characters for this input.
- * To support legacy data which consists of more characters than the specified maxLength,
- * the option will only take effect for data which is shorter than the specified maxLength.
+ * Maximum length of characters for this input. To support legacy
+ * data which consists of more characters than the specified
+ * maxLength, the option will only take effect for data which is
+ * shorter than the specified maxLength.
*
- * @see
- * {@link module:pageflow/ui.inputWithPlaceholderText inputWithPlaceholderText}
- * for placeholder related further options
- *
- * @see {@link module:pageflow/ui.inputView inputView} for further options
* @class
- * @memberof module:pageflow/ui
*/
var TextInputView = Marionette.ItemView.extend({
mixins: [inputView, inputWithPlaceholderText],
template: template$6,
@@ -1342,11 +1514,14 @@
}
});
/**
* Input view for a color value in hex representation.
+ * See {@link inputView} for further options
*
+ * @param {Object} [options]
+ *
* @param {string|function} [options.defaultValue]
* Color value to display by default. The corresponding value is not
* stored in the model. Selecting the default value when a different
* value was set before, unsets the attribute in the model.
*
@@ -1360,13 +1535,11 @@
* @param {string[]} [options.swatches]
* Preset color values to be displayed inside the picker drop
* down. The default value, if present, is always used as the
* first swatch automatically.
*
- * @see {@link module:pageflow/ui.inputView inputView} for further options
* @class
- * @memberof module:pageflow/ui
*/
var ColorInputView = Marionette.ItemView.extend({
mixins: [inputView],
template: template$6,
@@ -1436,11 +1609,14 @@
return __p
}
/**
* A drop down with support for grouped items.
+ * See {@link inputView} for further options
*
+ * @param {Object} [options]
+ *
* @param {string[]} [options.values]
* List of possible values to persist in the attribute.
*
* @param {string[]} [options.texts]
* List of display texts for drop down items.
@@ -1449,11 +1625,11 @@
* Translation keys to obtain item texts from.
*
* @param {string[]} [options.translationKeyPrefix]
* Obtain texts for items from translations by appending the item
* value to this prefix separated by a dot. By default the
- * [`attributeTranslationKeyPrefixes` option]{@link module:pageflow/ui:inputView}
+ * [`attributeTranslationKeyPrefixes` option]{@link inputView}
* is used by appending the suffix `.values` to each candidate.
*
* @param {string[]} [options.groups]
* Array of same length as `values` array, containing the display
* name of a group header each item shall be grouped under.
@@ -1503,13 +1679,11 @@
* up the `propertyName` attribute inside the given model. This
* option can be used if a fallback to the corresponding attribute
* value of the `placeholderModel` occurs whenever the attribute is
* blank.
*
- * @see {@link module:pageflow/ui.inputView inputView} for further options
* @class
- * @memberof module:pageflow/ui
*/
var SelectInputView = Marionette.ItemView.extend({
mixins: [inputView],
template: template$7,
@@ -1775,11 +1949,15 @@
return __p
}
/**
* Input view for multi line text with simple formatting options.
+ * See {@link inputWithPlaceholderText} for placeholder related options.
+ * See {@link inputView} for further options.
*
+ * @param {Object} [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.
@@ -1790,17 +1968,11 @@
* @param {Backbone.View} [options.fragmentLinkInputView]
* A view to select an id to use in links which only consist
* of a url fragment. Will receive a model with a `linkId`
* attribute.
*
- * @see
- * {@link module:pageflow/ui.inputWithPlaceholderText inputWithPlaceholderText}
- * for placeholder related options
- *
- * @see {@link module:pageflow/ui.inputView inputView} for further options
* @class
- * @memberof module:pageflow/ui
*/
var TextAreaInputView = Marionette.ItemView.extend({
mixins: [inputView, inputWithPlaceholderText],
template: template$8,
@@ -1986,27 +2158,28 @@
return __p
}
/**
* Input view for URLs.
+ * See {@link inputView} for further options
*
+ * @param {Object} [options]
+ *
* @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.inputView inputView} for further options
* @class
- * @memberof module:pageflow/ui
*/
var UrlInputView = Marionette.Layout.extend(
- /** @lends module:pageflow/ui.UrlInputView# */
+ /** @lends UrlInputView.prototype */
{
mixins: [inputView],
template: template$9,
ui: {
input: 'input',
@@ -2140,10 +2313,14 @@
* That way, when `/example` is setup to proxy requests to
* `http://example.com`, the user can enter an url of the form
* `http://example.com/some/path` but the string `/example/some/path`
* is persisited to the database.
*
+ * See {@link inputView} for further options
+ *
+ * @param {Object} options
+ *
* @param {string} options.displayPropertyName
* Attribute name to store the url entered by the user.
*
* @param {Object[]} options.proxies
* List of supported proxies.
@@ -2169,17 +2346,15 @@
* base_path: '/example'
* }
* ]
* });
*
- * @see {@link module:pageflow/ui.inputView inputView} for further options
* @class
- * @memberof module:pageflow/ui
*/
var ProxyUrlInputView = UrlInputView.extend(
- /** @lends module:pageflow/ui.ProxyUrlInputView# */
+ /** @lends ProxyUrlInputView.prototype */
{
// @override
validateUrl: function validateUrl(url) {
var view = this;
return $.Deferred(function (deferred) {
@@ -2192,15 +2367,15 @@
status: xhr.status
}));
});
}).promise();
},
- // @override
+ // override
transformPropertyValue: function transformPropertyValue(url) {
return this.rewriteUrl(url);
},
- // @override
+ // override
supportedHosts: function supportedHosts() {
return _.pluck(this.options.proxies, 'url');
},
rewriteUrl: function rewriteUrl(url) {
_.each(this.options.proxies, function (proxy) {
@@ -2217,14 +2392,15 @@
return __p
}
/**
* A slider for numeric inputs.
+ * See {@link inputView} for options
*
- * @see {@link module:pageflow/ui.inputView inputView} for options
+ * @param {Object} [options]
+ *
* @class
- * @memberof module:pageflow/ui
*/
var SliderInputView = Marionette.ItemView.extend({
mixins: [inputView],
className: 'slider_input',
@@ -2338,18 +2514,19 @@
return __p
}
/**
* Input view for boolean values.
+ * See {@link inputView} for further options
*
+ * @param {Object} [options]
+ *
* @param {boolean} [options.displayUncheckedIfDisabled=false]
* Ignore the attribute value if the input is disabled and display
* an unchecked check box.
*
- * @see {@link module:pageflow/ui.inputView inputView} for further options
* @class
- * @memberof module:pageflow/ui
*/
var CheckBoxInputView = Marionette.ItemView.extend({
mixins: [inputView],
template: template$c,
@@ -2428,10 +2605,12 @@
*
* The following attribute translation is used:
*
* - `.cell_title` - Used as title attribute.
*
+ * @param {Object} [options]
+ *
* @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.
*
@@ -2512,10 +2691,12 @@
* The following attribute translations are used:
*
* - `.cell_title.<attribute_value>` - Used as title attribute.
* - `.cell_title.blank` - Used as title attribute if attribute is blank.
*
+ * @param {Object} [options]
+ *
* @param {string[]} [options.icons]
* An array of all possible attribute values to be mapped to HTML
* classes of the same name. A global mapping from those classes to
* icon mixins is provided in
* pageflow/ui/table_cells/icon_table_cell.scss.
@@ -2542,10 +2723,12 @@
/**
* A table cell using the row model's value of the column attribute as
* text. If attribute value is empty, use most specific default
* available.
*
+ * @param {Object} [options]
+ *
* @param {function|string} [options.column.default]
* A function returning a default value for display if attribute
* value is empty.
*
* @param {string} [options.column.contentBinding]
@@ -2666,9 +2849,10 @@
exports.TextInputView = TextInputView;
exports.TextTableCellView = TextTableCellView;
exports.TooltipView = TooltipView;
exports.UrlDisplayView = UrlDisplayView;
exports.UrlInputView = UrlInputView;
+ exports.cssModulesUtils = cssModulesUtils;
exports.i18nUtils = i18nUtils;
exports.inputView = inputView;
exports.inputWithPlaceholderText = inputWithPlaceholderText;
exports.subviewContainer = subviewContainer;
exports.tooltipContainer = tooltipContainer;