fixes #263 - Working with responsive tables

also can now use `scrollContainer:true` to auto-detect offsetParent of the table
mkoryak · Mar 23, 2016 · 052d952 · 052d952 · jfly · Mar 27, 2016
1 parent 81ed8fa
commit 052d952
Show file tree

Hide file tree

Showing 8 changed files with 226 additions and 71 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+### 1.4.0
+new features:
+- https://github.com/mkoryak/floatThead/issues/263 - support for responsive table wrappers
+- can now use `scrollContainer:true` to auto-detect offsetParent of the table
+- https://github.com/mkoryak/floatThead/issues/68 - support for printing the table (not in crappy IEs though)
+
+bug fixes:
+- https://github.com/mkoryak/floatThead/issues/268 - fire 'floatThead' event on destroy
+
+
 ### 1.3.2
 - https://github.com/mkoryak/floatThead/issues/264 - header alignments messed up when table within a floated container (when using position:absolute)
 - hide more stuff from screen readers that should be hidden
@@ -9,10 +19,10 @@
 - allow 'useAbsolutePositioning', 'scrollingTop' and 'scrollingBottom' to be used, but yell about it via console.error
 
 ### 1.3.0
-- **Breaking**: renamed 'useAbsolutePositioning' option to `position`. value mappings (old -> new) are: [true -> 'absolute', false -> 'fixed', null -> 'auto']
-- **Breaking**: renamed 'scrollingTop' to `top` and 'scrollingBottom' to `bottom`
-- **Breaking**: removed cellTag and debounceResizeMs options
-- **Breaking**: removed `floatThead-floatContainer` class from the $floatContainer because `floatThead-container` class is already there and it is configurable via `floatContainerClass` option.
+- renamed 'useAbsolutePositioning' option to `position`. value mappings (old -> new) are: [true -> 'absolute', false -> 'fixed', null -> 'auto']
+- renamed 'scrollingTop' to `top` and 'scrollingBottom' to `bottom`
+- removed cellTag and debounceResizeMs options
+- removed `floatThead-floatContainer` class from the $floatContainer because `floatThead-container` class is already there and it is configurable via `floatContainerClass` option.
 - added `autoReflow` option
 - https://github.com/mkoryak/floatThead/issues/235 - fix tabindex of the floated header (thanks [robinpoort](https://github.com/robinpoort))
 - https://github.com/mkoryak/floatThead/issues/242 - support for multiple tables within a single scrolling div

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-jquery.floatThead v1.3.2
+jquery.floatThead v1.4.0
 =================
 [![woot](http://giant.gfycat.com/AnyGloriousAlpaca.gif "or just click")](http://mkoryak.github.io/floatThead/)
 
@@ -22,7 +22,7 @@ bower install floatThead
 npm install floatthead
 ```
 #### Download code
-[Latest Release (zip)](https://github.com/mkoryak/floatThead/archive/v1.3.2.zip)
+[Latest Release (zip)](https://github.com/mkoryak/floatThead/archive/v1.4.0.zip)
 
 #### Via CDN
 [http://cdnjs.com/libraries/floatthead/](http://cdnjs.com/libraries/floatthead/)  
@@ -40,11 +40,12 @@ npm install floatthead
 # Things this plugin does:
 ---------
 -   Works on tables within a scrollable container or whole window scrolling
+-   Works with responsive table wrappers
 -   Works with dynamically hidden/added/removed columns
 -   Doesn't clone the thead - so your events stay bound
 -   Doesn't mess with your styles, and doesnt require any css
 -   Works with border-collapse variants, weird margins, padding and borders
--   Works with libs like [datatables](http://datatables.net), [perfect-scrollbar](http://mkoryak.github.io/floatThead/examples/perfect-scrollbar/), [bootstrap](http://mkoryak.github.io/floatThead/examples/bootstrap3/), and many more
+-   Works with libs like [datatables](http://datatables.net), [perfect-scrollbar](http://mkoryak.github.io/floatThead/examples/perfect-scrollbar/), [bootstrap3](http://mkoryak.github.io/floatThead/examples/bootstrap3/), and many more
 -   Header can be floated with `position:absolute` which adds a wrapper, or `position:fixed` which does not. Both have their pros and cons. By default the best option is chosen based on your configuration
 
 
@@ -60,12 +61,8 @@ If you use css and html best practices, this plugin will work. If you are stuck
 
 How to get help with the floatThead
 ------------
-All issues should be reported through github. If you don't have an account you can make one.  
-Providing the following will greatly increase the chances of your issue being resolved quickly:
- - Include the browser and operating system where you are having the problem. If its IE, a screenshot is also nice since I don't have quick access to that abomination.
- - **Provide a jsfiddle that reproduces your issue in its simplest form possible**. If its hard to read your code, you did it wrong.
- - A description of the issue and steps to reproduce
-
+All issues should be reported through github.
+
 I will do my best to help you in a timely manner.
 
 
@@ -99,8 +96,6 @@ Change Log
 
 ### [http://kangax.github.io/compat-table/](http://kangax.github.io/compat-table/es6/)
 
-### https://github.com/sosy-lab/benchexec
-
 ### [staticsitegenerators.net](http://staticsitegenerators.net/)
 
 ### [netdisco](http://netdisco.org)
@@ -112,15 +107,6 @@ Change Log
 ### [django-sql-explorer](https://github.com/epantry/django-sql-explorer)
 - https://github.com/epantry/django-sql-explorer/commit/34ae345325a1e07ff952800fcd6dc5bddac5e3f2- 
 
-### [Yii framework](http://www.yiiframework.com/)
-- http://www.yiiframework.com/extension/yii2-grid/
-- http://demos.krajee.com/grid-demo 
-
-### [api.tinata.co.uk](http://api.tinata.co.uk/countries)
-- https://github.com/tinata/tinatapi/commit/b1cf62dd97a5caa76bafcd5ec3b4f12e6b88f385
-
-
-*Your site? email me: my last name at gmail*
 
 # Woot
 

diff --git a/dist/jquery.floatThead-slim.js b/dist/jquery.floatThead-slim.js
@@ -1,4 +1,4 @@
-// @preserve jQuery.floatThead 1.3.3dev - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2015 Misha Koryak
+// @preserve jQuery.floatThead 1.4.0 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2016 Misha Koryak
 // @license MIT
 
 /* @author Misha Koryak
@@ -24,8 +24,11 @@
     position: 'auto', // 'fixed', 'absolute', 'auto'. auto picks the best for your table scrolling type.
     top: 0, //String or function($table) - offset from top of window where the header should not pass above
     bottom: 0, //String or function($table) - offset from the bottom of the table where the header should stop scrolling
-    scrollContainer: function($table){
-      return $([]); //if the table has horizontal scroll bars then this is the container that has overflow:auto and causes those scroll bars
+    scrollContainer: function($table) { // or boolean 'true' (use offsetParent) | function -> if the table has horizontal scroll bars then this is the container that has overflow:auto and causes those scroll bars
+      return $([]);
+    },
+    responsiveContainer: function($table) { // only valid if scrollContainer is not used (ie window scrolling). this is the container which will control y scrolling at some mobile breakpoints
+      return $([]);
     },
     getSizingRow: function($table, $cols, $fthCells){ // this is only called when using IE,
       // override it if the first row of the table is going to contain colgroups (any cell spans greater than one col)
@@ -105,6 +108,33 @@
     }
   }
 
+  function getTrueOffsetParent($elem) {
+    var elem = $elem[0];
+    var parent = elem.offsetParent;
+
+    if (!parent) {
+      parent = elem.parentElement;
+
+      do {
+        var pos = window
+            .getComputedStyle(parent)
+            .getPropertyValue('position');
+
+        if (pos != 'static') break;
+
+        if (parent.offsetParent) {
+          parent = parent.offsetParent;
+          break;
+        }
+
+      } while (parent = parent.parentElement)
+    }
+    if(parent == document.body){
+      return $([]);
+    }
+    return $(parent);
+  }
+
 
   function debug(str){
     window && window.console && window.console.error && window.console.error("jQuery.floatThead: " + str);
@@ -247,8 +277,15 @@
       var scrollbarOffset = {vertical: 0, horizontal: 0};
       var scWidth = scrollbarWidth();
       var lastColumnCount = 0; //used by columnNum()
+
+      if(opts.scrollContainer === true){
+        opts.scrollContainer = getTrueOffsetParent;
+      }
+
       var $scrollContainer = opts.scrollContainer($table) || $([]); //guard against returned nulls
       var locked = $scrollContainer.length > 0;
+      var $responsiveContainer = locked ? $([]) : opts.responsiveContainer($table) || $([]);
+      var responsive = isResponsiveContainerActive();
 
       var useAbsolutePositioning = null;
       if(typeof opts.useAbsolutePositioning !== 'undefined'){
@@ -263,8 +300,8 @@
         debug("option 'scrollingTop' has been renamed to 'top' in v1.3.0. See docs for more info: http://mkoryak.github.io/floatThead/#options");
       }
       if(typeof opts.scrollingBottom !== 'undefined'){
-          opts.bottom = opts.scrollingBottom;
-          debug("option 'scrollingBottom' has been renamed to 'bottom' in v1.3.0. See docs for more info: http://mkoryak.github.io/floatThead/#options");
+        opts.bottom = opts.scrollingBottom;
+        debug("option 'scrollingBottom' has been renamed to 'bottom' in v1.3.0. See docs for more info: http://mkoryak.github.io/floatThead/#options");
       }
 
 
@@ -402,8 +439,9 @@
 
       function setFloatWidth(){
         var tw = tableWidth($table, $fthCells, true);
-        var width = $scrollContainer.width() || tw;
-        var floatContainerWidth = $scrollContainer.css("overflow-y") != 'hidden' ? width - scrollbarOffset.vertical : width;
+        var $container = responsive ? $responsiveContainer : $scrollContainer;
+        var width = $container.width() || tw;
+        var floatContainerWidth = $container.css("overflow-y") != 'hidden' ? width - scrollbarOffset.vertical : width;
         $floatContainer.width(floatContainerWidth);
         if(locked){
           var percent = 100 * tw / (floatContainerWidth);
@@ -570,6 +608,10 @@
         }
         return w;
       }
+
+      function isResponsiveContainerActive(){
+        return $responsiveContainer.css("overflow-x") == 'auto';
+      }
       /**
        * first performs initial calculations that we expect to not change when the table, window, or scrolling container are scrolled.
        * returns a function that calculates the floating container's top and left coords. takes into account if we are using page scrolling or inner scrolling
@@ -602,9 +644,11 @@
         }
         var windowTop = $window.scrollTop();
         var windowLeft = $window.scrollLeft();
-        var scrollContainerLeft =  $scrollContainer.scrollLeft();
+        var scrollContainerLeft =  (isResponsiveContainerActive() ? $responsiveContainer : $scrollContainer).scrollLeft();
 
         return function(eventType){
+          responsive = isResponsiveContainerActive();
+
           var isTableHidden = $table[0].offsetWidth <= 0 && $table[0].offsetHeight <= 0;
           if(!isTableHidden && floatTableHidden) {
             floatTableHidden = false;
@@ -624,13 +668,20 @@
             windowTop = $window.scrollTop();
             windowLeft = $window.scrollLeft();
           } else if(eventType == 'containerScroll'){
-            scrollingContainerTop = $scrollContainer.scrollTop();
-            scrollContainerLeft =  $scrollContainer.scrollLeft();
+            if($responsiveContainer.length){
+              if(!responsive){
+                return; //we dont care about the event if we arent responsive right now
+              }
+              scrollContainerLeft = $responsiveContainer.scrollLeft();
+            } else {
+              scrollingContainerTop = $scrollContainer.scrollTop();
+              scrollContainerLeft = $scrollContainer.scrollLeft();
+            }
           } else if(eventType != 'init') {
             windowTop = $window.scrollTop();
             windowLeft = $window.scrollLeft();
             scrollingContainerTop = $scrollContainer.scrollTop();
-            scrollContainerLeft =  $scrollContainer.scrollLeft();
+            scrollContainerLeft =  (responsive ? $responsiveContainer : $scrollContainer).scrollLeft();
           }
           if(isWebkit && (windowTop < 0 || windowLeft < 0)){ //chrome overscroll effect at the top of the page - breaks fixed positioned floated headers
             return;
@@ -676,7 +727,7 @@
               refloat(); //scrolling within table. header floated
               triggerFloatEvent(true);
             }
-            left =  0;
+            left =  scrollContainerLeft;
           } else if(locked && !useAbsolutePositioning){ //inner scrolling, fixed positioning
             if (tableContainerGap > scrollingContainerTop || scrollingContainerTop - tableContainerGap > tableHeight) {
               top = tableOffset.top - windowTop;
@@ -703,7 +754,7 @@
               top = scrollingTop;
               triggerFloatEvent(true);
             }
-            left = tableOffset.left - windowLeft;
+            left = tableOffset.left + scrollContainerLeft - windowLeft;
           }
           return {top: top, left: left};
         };
@@ -731,7 +782,7 @@
           if(setHeight){
             setHeaderHeight();
           }
-          var scrollLeft = $scrollContainer.scrollLeft();
+          var scrollLeft = (responsive ? $responsiveContainer : $scrollContainer).scrollLeft();
           if(!useAbsolutePositioning || oldScrollLeft != scrollLeft){
             $floatContainer.scrollLeft(scrollLeft);
             oldScrollLeft = scrollLeft;
@@ -841,6 +892,7 @@
           $window.on(eventName('scroll'), windowScrollEvent);
         }
       } else { //window scrolling
+        $responsiveContainer.on(eventName('scroll'), containerScrollEvent);
         $window.on(eventName('scroll'), windowScrollEvent);
       }
 
@@ -902,6 +954,7 @@
           }
           $table.off('reflow reflowed');
           $scrollContainer.off(ns);
+          $responsiveContainer.off(ns);
           if (wrappedContainer) {
             if ($scrollContainer.length) {
               $scrollContainer.unwrap();