Release v0.4.0

Author: awerlang

release/angular-responsive-tables.css

@@ -9,25 +9,25 @@
 
     /* Force table to not be like tables anymore */
     /* table.responsive,*/
-    .responsive thead,
-    .responsive tbody,
-    .responsive tr,
-    .responsive th {
+    .responsive > thead,
+    .responsive > tbody,
+    .responsive > tbody > tr,
+    .responsive > thead > th {
         display: block;
     }
 
     /* Hide table headers (but not display: none;, for accessibility) */
-    .responsive thead tr, .responsive th {
+    .responsive > thead > tr, .responsive > thead > tr > th, .responsive > tbody > tr > th {
         position: absolute;
         top: -9999px;
         left: -9999px;
     }
 
-    .responsive tr {
+    .responsive > tbody > tr {
         border: 1px solid #ccc;
     }
 
-    .responsive td:nth-child(odd), .responsive td:nth-child(even) {
+    .responsive > tbody > tr > td {
         /* Behave  like a "row" */
         border: none;
         border-bottom: 1px solid #eee;
@@ -43,7 +43,7 @@
         min-height: 1em;
     }
 
-    .responsive td:nth-child(odd)::before, .responsive td:nth-child(even)::before {
+    .responsive > tbody > tr > td::before {
         /* Now like a table header */
         position: absolute;
         /* Top/left values mimic padding */

release/angular-responsive-tables.js

@@ -1,8 +1,22 @@
 // https://github.com/awerlang/angular-responsive-tables
 (function() {
     "use strict";
+    function getFirstHeaderInRow(tr) {
+        var th = tr.firstChild;
+        while (th) {
+            if (th.tagName === "TH") break;
+            if (th.tagName === "TD") {
+                th = null;
+                break;
+            }
+            th = th.nextSibling;
+        }
+        return th;
+    }
     function getHeaders(element) {
-        return element.querySelectorAll("tr > th");
+        return [].filter.call(element.children().children().children(), function(it) {
+            return it.tagName === "TH";
+        });
     }
     function updateTitle(td, th) {
         var title = th && th.textContent;
@@ -18,35 +32,50 @@
     function wtResponsiveTable() {
         return {
             restrict: "A",
-            controller: ['$element', function($element) {
+            controller: [ "$element", function($element) {
                 return {
+                    contains: function(td) {
+                        var tableEl = $element[0];
+                        var el = td;
+                        do {
+                            if (el === tableEl) return true;
+                            if (el.tagName === "TABLE") return false;
+                            el = el.parentElement;
+                        } while (el);
+                        throw new Error("Table element not found for " + td);
+                    },
                     getHeader: function(td) {
-                        var firstHeader = td.parentElement.querySelector("th");
+                        var firstHeader = getFirstHeaderInRow(td.parentElement);
                         if (firstHeader) return firstHeader;
-                        var headers = getHeaders($element[0]);
+                        var headers = getHeaders($element);
                         if (headers.length) {
                             var row = td.parentElement;
                             var headerIndex = 0;
-                            var found = Array.prototype.some.call(row.querySelectorAll("td"), function(value, index) {
+                            var found = Array.prototype.some.call(row.children, function(value, index) {
+                                if (value.tagName !== "TD") return false;
                                 if (value === td) {
                                     return true;
                                 }
                                 headerIndex += colspan(value);
                             });
-                            return found ? headers.item(headerIndex) : null;
+                            return found ? headers[headerIndex] : null;
                         }
                     }
                 };
-            }],
+            } ],
             compile: function(element, attrs) {
                 attrs.$addClass("responsive");
-                var headers = getHeaders(element[0]);
+                var headers = getHeaders(element);
                 if (headers.length) {
-                    var rows = element[0].querySelectorAll("tbody > tr");
+                    var rows = [].filter.call(element.children(), function(it) {
+                        return it.tagName === "TBODY";
+                    })[0].children;
                     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);
+                        [].forEach.call(row.children, function(value, index) {
+                            if (value.tagName !== "TD") return;
+                            var th = getFirstHeaderInRow(value.parentElement);
+                            th = th || headers[headerIndex];
                             updateTitle(value, th);
                             headerIndex += colspan(value);
                         });
@@ -61,8 +90,10 @@
             require: "?^^wtResponsiveTable",
             link: function(scope, element, attrs, tableCtrl) {
                 if (!tableCtrl) return;
+                if (!tableCtrl.contains(element[0])) return;
                 setTimeout(function() {
-                    Array.prototype.forEach.call(element[0].parentElement.querySelectorAll("td"), function(td) {
+                    [].forEach.call(element[0].parentElement.children, function(td) {
+                        if (td.tagName !== "TD") return;
                         var th = tableCtrl.getHeader(td);
                         updateTitle(td, th);
                     });