release v0.2.0

Author: awerlang

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-responsive-tables",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Make your HTML tables look great on every device",
   "main": "release/angular-responsive-tables.js",
   "scripts": {

release/angular-responsive-tables.js

@@ -1,30 +1,81 @@
 // https://github.com/awerlang/angular-responsive-tables
 (function() {
     "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");
-                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.textContent;
-                            if (title && !value.getAttributeNode("data-title")) {
-                                value.setAttribute("data-title", title);
-                            }
-                            var colspan = value.getAttributeNode("colspan");
-                            headerIndex += colspan ? parseInt(colspan.value) : 1;
+                function apply() {
+                    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) {
+                                if (!value.getAttributeNode("responsive-dynamic")) {
+                                    var th = value.parentElement.querySelector("th") || headers.item(headerIndex);
+                                    updateTitle(value, th);
+                                }
+                                headerIndex += colspan(value);
+                            });
                         });
-                    });
+                    }
+                }
+                attrs.$addClass("responsive");
+                if (Array.prototype.some.call(element.find("th"), function(it) {
+                    return it.getAttributeNode("ng-repeat") || it.getAttributeNode("data-ng-repeat");
+                })) {
+                    setTimeout(function() {
+                        apply();
+                    }, 0);
+                } else {
+                    apply();
                 }
             }
         };
     }
+    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);
+            }
+        };
+    }
     "use strict";
-    angular.module("wt.responsive", []).directive("wtResponsiveTable", [ wtResponsiveTable ]);
+    angular.module("wt.responsive", []).directive("wtResponsiveTable", [ wtResponsiveTable ]).directive("responsiveDynamic", [ wtResponsiveDynamic ]);
 })();