ui.js in pageflow-15.1.0.rc0

- old
+ new

@@ -151,10 +151,52 @@
     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
@@ -181,11 +223,11 @@
    *     export const MyView = Marionette.ItemView({
    *       template: () => `
    *         <div class=${styles.container}></div>
    *       `,
    *
-   *       ui: cssModulesUtils.ui(styles, 'container');
+   *       ui: cssModulesUtils.ui(styles, 'container'),
    *
    *       onRender() {
    *         this.ui.container // => JQuery wrapper for container element
    *       }
    *     });
@@ -196,18 +238,91 @@
     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] = ".".concat(styles[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
+    ui: ui,
+    events: events,
+    selector: selector
   });
 
   // https://github.com/jashkenas/backbone/issues/2601
 
   function BaseObject(options) {
@@ -1060,9 +1175,11 @@
     },
     onRender: function onRender() {
       this.$el.addClass('input');
       this.$el.addClass(this.model.modelName + '_' + this.options.propertyName);
       this.$el.data('inputPropertyName', this.options.propertyName);
+      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();