Adding fixes for modifiers; Adding standalone init method for row-links

Author: Steven Bellamy

build/example.min.js

@@ -21,7 +21,7 @@ <h3 id="sample-sortable-table">Sample Sortable Table</h3>
             </button>
           </th>
           <th>
-            <button class="sortable sort-up" data-sort_type="number">
+            <button class="sortable sorted-up" data-sort_type="number">
               Distance
             </button>
           </th>

build/main.min.js

@@ -8,6 +8,8 @@
 
 'use strict';
 
+var closest = require( '../src/utilities/dom-closest' ).closest;
+
 var TableRowLinks = {
 
   events: {
@@ -25,10 +27,29 @@ var TableRowLinks = {
    */
   onRowLinkClick: function onRowLinkClick( event ) {
     var target = event.target;
-    var link = target && target.querySelector( 'a' );
+    if( target && target.tagName === 'A' ) {
+      return
+    }
+    target = closest( event.target, 'tr' );
+    var link = target.querySelector( 'a' );
     if( link ) window.location = link.getAttribute( 'href' );
-  }
+  },
 
+  /**
+   * Handle initilization of Table Row Links. Added for standalone
+   * use cases.
+   *
+   * @param {Object} event Mouse event for click on the table.
+   */
+  init: function() {
+    var elements = document.querySelector( TableRowLinks.ui.base );
+    for ( var i = 0; i < elements.length; ++i ) {
+      if( elements[i].hasAttribute( 'data-bound' ) === false ) {
+      elements[i].addEventListener( 'click', table,
+        TableRowLinks.onRowLinkClick );
+      }
+    }
+  }
 };
 
 module.exports = TableRowLinks;

examples/index.html

@@ -16,8 +16,8 @@ var UNDEFINED = config.UNDEFINED;
 var TableSortable = {
 
   classes: {
-    sortDown:    'sorted-down',
-    sortUp:      'sorted-up'
+    sortDown: 'sorted-down',
+    sortUp:   'sorted-up'
   },
 
   events: {

examples/table-row-links.js

@@ -33,6 +33,7 @@ function AtomicComponent( element, attributes ) {
   this.uId = this.uniqueId( 'ac' );
   this.element = element;
   assign( this, ( attributes || {} ) );
+  this.processModifiers();
   this.ensureElement();
   this.setCachedElements();
   this.initialize.forEach( function( func ) {
@@ -54,6 +55,29 @@ assign( AtomicComponent.prototype, Events, classList, {
    */
   initialize: [function (){ return }],
 
+  /**
+   * Function used to process class modifiers. These should
+   * correspond with BEM modifiers.
+   *
+   * @param {Object} attributes -  Hash of attributes to set on base element.
+   * @param {Object} atomicComponent -  Base component.
+   */
+  processModifiers: function() {
+    if ( !this.modifiers ) {
+      return;
+    }
+
+    this.modifiers.forEach( function( modifier ) {
+      if ( classList.contains( this.element, modifier.ui.base ) ) {
+        if ( modifier.initialize ) {
+          this.initialize.push( modifier.initialize );
+          delete modifier.initialize;
+        }
+        assign( this, modifier );
+      }
+    }, this );
+  },
+
   /**
    * Function used to render a template in Single Page Applications.
    *
@@ -249,12 +273,8 @@ AtomicComponent.extend = function extend( attributes ) {
   assign(child.prototype, attributes);
   assign(child, AtomicComponent);
 
-  if ( attributes.hasOwnProperty( 'modifiers' ) ) {
-    _processModifiers( attributes, child.prototype );
-  }
-
   if ( attributes.hasOwnProperty( 'ui' ) &&
-       attributes.ui.hasOwnProperty( 'base' ) ) {
+  attributes.ui.hasOwnProperty( 'base' ) ) {
     child.selector = attributes.ui.base;
   }
 
@@ -263,26 +283,6 @@ AtomicComponent.extend = function extend( attributes ) {
   return child;
 };
 
-/**
- * Function used to process class modifiers. These should
- * correspond with BEM modifiers.
- *
- * @param {Object} attributes -  Hash of attributes to set on base element.
- * @param {Object} atomicComponent -  Base component.
- */
-function _processModifiers( attributes, atomicComponent ) {
-  attributes.modifiers.forEach( function( modifier ) {
-    if ( modifier.initialize ) {
-      atomicComponent.initialize.push( modifier.initialize );
-      delete modifier.initialize;
-    }
-    if ( modifier.ui && modifier.ui.base ) {
-      atomicComponent.ui.base += ', ' + modifier.ui.base
-      delete modifier.ui.base;
-    }
-    assign( atomicComponent, modifier );
-  } );
-}
 
 /**
  * Function used to instantiate all instances of the particular

examples/table-sortable.js

@@ -57,6 +57,7 @@ function addClass( element ) {
  * @returns {Boolean} indicating if element has class.
  */
 function contains( element, className ) {
+  className = className.replace( '.', '' );
   if ( hasClassList ) {
     return element.classList.contains( className );
   }