feat(dynamic): support ng-if on td's

A TD element can receive a responsive-dynamic attribute/directive to be able to display the correct label.

Fixes #16

Author: awerlang

README.md

@@ -30,6 +30,7 @@ All this work is based on the following assumptions:
 * Angular native implementation compatible with 1.3.4+;
 * Keep things DRY;
 * Supports static and dynamic (ng-repeat) rows;
+* Support conditionally shown (ng-if) columns;
 * Easy to apply any style on top of it;
 * Works with any base CSS framework; 
 * Should integrate seamlessly with any table component you might choose to use.
@@ -77,6 +78,7 @@ All this work is based on the following assumptions:
  * table: wt-responsive-table
    * td: responsive-omit-title: title should be ommited
    * td: responsive-omit-if-empty: no row for empty cells
+   * td: responsive-dynamic: add it when there's an `ng-if` directive applied to the element
 
 ## Installation
 
@@ -97,6 +99,15 @@ All this work is based on the following assumptions:
 
 ## Special cases
 
+### Column can be shown/hidden with ng-if
+
+Also, more than one `td` exist for a single `th`...to deal with this add a `responsive-dynamic` attribute:
+
+    <tr>
+        <td ng-if="condition" responsive-dynamic>tom</td>
+        <td ng-if="!condition" responsive-dynamic>jerry</td>
+    </tr> 
+
 ### IE9 responsive hack
 
 Because IE9 doesn't handle correctly a `display` CSS rule for `<td>`, if you need to support it, you can use the following style, only for IE9:

src/directive.js

@@ -1,27 +1,73 @@
 'use strict';
 
+function getHeaders(element) {
+    return element.querySelectorAll('tr > th');
+}
+
+function updateTitle(td, th) {
+    var title = th && th.textContent;
+    if (title && !td.getAttributeNode('data-title')) {
+        td.setAttribute('data-title', title);
+    }
+}
+
+function colspan(td) {
+    var colspan = td.getAttributeNode('colspan');
+    return colspan ? parseInt(colspan.value) : 1;
+} 
+
 function wtResponsiveTable() {
     return {
         restrict: 'A',
+        controller: function ($element) {
+            return {
+                getHeader: function (td) {
+                    var headers = getHeaders($element[0]);
+                    if (headers.length) {
+                        var row = td.parentElement;
+                        var headerIndex = 0; 
+                        var found = Array.prototype.some.call(row.querySelectorAll('td'), function (value, index) {
+                            if (value === td) {
+                                return true;
+                            }
+
+                            headerIndex += colspan(value);
+                        });
+
+                        return found ? headers.item(headerIndex) : null;
+                    }
+                },
+            }
+        },
         compile: function (element, attrs) {
             attrs.$addClass('responsive');
-            var headers = element[0].querySelectorAll('tr > th');
+            var headers = getHeaders(element[0]);
             if (headers.length) {
                 var rows = element[0].querySelectorAll('tbody > tr');
                 Array.prototype.forEach.call(rows, function(row) {
                     var headerIndex = 0; 
                     Array.prototype.forEach.call(row.querySelectorAll('td'), function (value, index) {
-                        var th = value.parentElement.querySelector('th') || headers.item(headerIndex); 
-                        var title = th && th.textContent;
-                        if (title && !value.getAttributeNode('data-title')) {
-                            value.setAttribute('data-title', title);
+                        if (!value.getAttributeNode('responsive-dynamic')) {
+                            var th = value.parentElement.querySelector('th') || headers.item(headerIndex);
+                            updateTitle(value, th); 
                         }
-    
-                        var colspan = value.getAttributeNode('colspan');
-                        headerIndex += colspan ? parseInt(colspan.value) : 1;
+
+                        headerIndex += colspan(value);
                     });
                 });
             }
         }
     };
+}
+
+function wtResponsiveDynamic() {
+    return {
+        restrict: 'A',
+        require: '^^wtResponsiveTable',
+        link: function (scope, element, attrs, tableCtrl) {
+            var td = element[0];
+            var th = tableCtrl.getHeader(td); 
+            updateTitle(td, th);
+        }
+    };
 }

src/module.js

@@ -1,4 +1,5 @@
 'use strict';
 
 angular.module('wt.responsive', [])
-    .directive('wtResponsiveTable', [wtResponsiveTable]);
+    .directive('wtResponsiveTable', [wtResponsiveTable])
+    .directive('responsiveDynamic', [wtResponsiveDynamic]);

tests/directive.spec.js

@@ -295,4 +295,35 @@ describe('directive', function () {
 
 		expect(styles.paddingLeft).toBe('50%');
 	});
+
+	describe('wt-responsive-column', function () {
+		it('supports ng-if applied on TD', function () {
+			var markup = [
+				'<table wt-responsive-table>',
+				'    <thead>',
+				'        <tr>',
+				'            <th>column</th>',
+				'        </tr>',
+				'    </thead>',
+				'    <tbody>',
+				'        <tr>',
+				'            <td ng-if="!condition" responsive-dynamic>tom</td>',
+				'            <td ng-if="condition" responsive-dynamic>jerry</td>',
+				'        </tr>',
+				'    </tbody>',
+				'</table>'
+			].join('');
+			var element = angular.element(markup);
+			var scope = $rootScope.$new();
+			scope.condition = true;
+
+			$compile(element)(scope);
+			scope.$digest();
+
+			var els = element.find('tbody tr:first td');
+			expect(els.eq(0).text()).toBe('jerry');
+			expect(els.eq(0).attr('data-title')).toBe('column');
+		});
+
+	});
 });