From 901a3fdb79e432e19fe48c88e1a78516ed09547f Mon Sep 17 00:00:00 2001 From: odignal Date: Fri, 22 Aug 2014 14:35:09 +0200 Subject: [PATCH 1/6] New options to use parent or container element for breakpoint evaluation, debounce support. New options to either use the window object, the parent object or a custom container object as reference for breakpoint checks. Added support for jQuery extensions Debounce and Underscore debounce function for the resize event handler. Option to log resize events to console. --- files/1.10/js/datatables.responsive.js | 55 ++++++++++++++++++++++---- 1 file changed, 47 insertions(+), 8 deletions(-) diff --git a/files/1.10/js/datatables.responsive.js b/files/1.10/js/datatables.responsive.js index ec677ff..dbfb97e 100644 --- a/files/1.10/js/datatables.responsive.js +++ b/files/1.10/js/datatables.responsive.js @@ -48,6 +48,18 @@ * clickOn - icon|cell|row, default: icon * showDetail - function called when detail row shown * hideDetail - function called when detail row hidden + * useParentWidth - Boolean, default: false. If true, all + * breakpoints will be compared against + * the width of the tables parent element. + * useContainerWidth - Boolean, default: false. If true, all + * breakpoints will be compared againt + * the width of containerElement. + * containerElement - The container element to compare + * breakpoints with. + * debounceWait - Wait time for debounce resize events, + * default: 100 (ms) + * consoleLog - Boolean, default: false. Defines wether + * resize events should be logged to console. * } * * @param {Object|string} tableSelector jQuery wrapped set or selector for @@ -115,7 +127,12 @@ function ResponsiveDatatablesHelper(tableSelector, breakpoints, options) { hideEmptyColumnsInRowDetail: false, clickOn: 'icon', showDetail: null, - hideDetail: null + hideDetail: null, + useParentWidth: false, + useTableWidth: false, + containerElement: null, + debounceWait: 100, + consoleLog: false }; // Expand icon template @@ -266,9 +283,21 @@ ResponsiveDatatablesHelper.prototype.setWindowsResizeHandler = function(bindFlag if (bindFlag) { var that = this; - $(window).bind("resize", function () { - that.respond(); - }); + if ($.debounce && (typeof $.debounce == "function")) { + // Use jQuery debounce plugin, if available + $(window).bind("resize", $.debounce(this.options.debounceWait, function () { + that.respond(); + })); + } else if (_.debounce && (typeof _.debounce == "function")) { + // Use Underscore/Lo-Dash debounce, if available + $(window).bind("resize", _.debounce(function () { + that.respond(); + }, this.options.debounceWait)); + } else { + $(window).bind("resize", function () { + that.respond(); + }); + } } else { $(window).unbind("resize"); } @@ -283,15 +312,25 @@ ResponsiveDatatablesHelper.prototype.respond = function () { } var that = this; - // Get new windows width - var newWindowWidth = $(window).width(); - + // Get new window or table width + var newWidth = 0; + if ((this.options.useContainerWidth === true) && (this.options.containerElement !== null)) { + newWidth = this.options.containerElement.width(); + if (this.options.consoleLog && console && console.log && (typeof console.log == "function")) console.log("Responding to resize event, using container width: " + newWidth); + } else if (this.options.useParentWidth === true) { + newWidth = this.tableElement.parent().width(); + if (this.options.consoleLog && console && console.log && (typeof console.log == "function")) console.log("Responding to resize event, using parent width: " + newWidth); + } else { + newWidth = $(window).width(); + if (this.options.consoleLog && console && console.log && (typeof console.log == "function")) console.log("Responding to resize event, using window width: " + newWidth); + } + // Loop through breakpoints to see which columns need to be shown/hidden. var newColumnsToHide = []; for (var prop in this.breakpoints) { var element = this.breakpoints[prop]; - if ((!element.lowerLimit || newWindowWidth > element.lowerLimit) && (!element.upperLimit || newWindowWidth <= element.upperLimit)) { + if ((!element.lowerLimit || newWidth > element.lowerLimit) && (!element.upperLimit || newWidth <= element.upperLimit)) { this.currentBreakpoint = element.name; newColumnsToHide = element.columnsToHide; } From b4a172c63d477b840c226c91a795b4712b94038d Mon Sep 17 00:00:00 2001 From: odignal Date: Fri, 22 Aug 2014 14:47:28 +0200 Subject: [PATCH 2/6] Revert "New options to use parent or container element for breakpoint evaluation, debounce support." This reverts commit 901a3fdb79e432e19fe48c88e1a78516ed09547f. --- files/1.10/js/datatables.responsive.js | 55 ++++---------------------- 1 file changed, 8 insertions(+), 47 deletions(-) diff --git a/files/1.10/js/datatables.responsive.js b/files/1.10/js/datatables.responsive.js index dbfb97e..ec677ff 100644 --- a/files/1.10/js/datatables.responsive.js +++ b/files/1.10/js/datatables.responsive.js @@ -48,18 +48,6 @@ * clickOn - icon|cell|row, default: icon * showDetail - function called when detail row shown * hideDetail - function called when detail row hidden - * useParentWidth - Boolean, default: false. If true, all - * breakpoints will be compared against - * the width of the tables parent element. - * useContainerWidth - Boolean, default: false. If true, all - * breakpoints will be compared againt - * the width of containerElement. - * containerElement - The container element to compare - * breakpoints with. - * debounceWait - Wait time for debounce resize events, - * default: 100 (ms) - * consoleLog - Boolean, default: false. Defines wether - * resize events should be logged to console. * } * * @param {Object|string} tableSelector jQuery wrapped set or selector for @@ -127,12 +115,7 @@ function ResponsiveDatatablesHelper(tableSelector, breakpoints, options) { hideEmptyColumnsInRowDetail: false, clickOn: 'icon', showDetail: null, - hideDetail: null, - useParentWidth: false, - useTableWidth: false, - containerElement: null, - debounceWait: 100, - consoleLog: false + hideDetail: null }; // Expand icon template @@ -283,21 +266,9 @@ ResponsiveDatatablesHelper.prototype.setWindowsResizeHandler = function(bindFlag if (bindFlag) { var that = this; - if ($.debounce && (typeof $.debounce == "function")) { - // Use jQuery debounce plugin, if available - $(window).bind("resize", $.debounce(this.options.debounceWait, function () { - that.respond(); - })); - } else if (_.debounce && (typeof _.debounce == "function")) { - // Use Underscore/Lo-Dash debounce, if available - $(window).bind("resize", _.debounce(function () { - that.respond(); - }, this.options.debounceWait)); - } else { - $(window).bind("resize", function () { - that.respond(); - }); - } + $(window).bind("resize", function () { + that.respond(); + }); } else { $(window).unbind("resize"); } @@ -312,25 +283,15 @@ ResponsiveDatatablesHelper.prototype.respond = function () { } var that = this; - // Get new window or table width - var newWidth = 0; - if ((this.options.useContainerWidth === true) && (this.options.containerElement !== null)) { - newWidth = this.options.containerElement.width(); - if (this.options.consoleLog && console && console.log && (typeof console.log == "function")) console.log("Responding to resize event, using container width: " + newWidth); - } else if (this.options.useParentWidth === true) { - newWidth = this.tableElement.parent().width(); - if (this.options.consoleLog && console && console.log && (typeof console.log == "function")) console.log("Responding to resize event, using parent width: " + newWidth); - } else { - newWidth = $(window).width(); - if (this.options.consoleLog && console && console.log && (typeof console.log == "function")) console.log("Responding to resize event, using window width: " + newWidth); - } - + // Get new windows width + var newWindowWidth = $(window).width(); + // Loop through breakpoints to see which columns need to be shown/hidden. var newColumnsToHide = []; for (var prop in this.breakpoints) { var element = this.breakpoints[prop]; - if ((!element.lowerLimit || newWidth > element.lowerLimit) && (!element.upperLimit || newWidth <= element.upperLimit)) { + if ((!element.lowerLimit || newWindowWidth > element.lowerLimit) && (!element.upperLimit || newWindowWidth <= element.upperLimit)) { this.currentBreakpoint = element.name; newColumnsToHide = element.columnsToHide; } From cefcf1caacb37790eb847dd96fb1bf015c594f05 Mon Sep 17 00:00:00 2001 From: Frank Odignal Date: Fri, 22 Aug 2014 14:50:55 +0200 Subject: [PATCH 3/6] New options breakpoint evaluation, debounce support New options to either use the window object, the parent object or a custom container object as reference for breakpoint checks. Added support for jQuery extensions Debounce and Underscore debounce function for the resize event handler. Option to log resize events to console. --- files/1.10/js/datatables.responsive.js | 54 ++++++++++++++++++++++---- 1 file changed, 46 insertions(+), 8 deletions(-) diff --git a/files/1.10/js/datatables.responsive.js b/files/1.10/js/datatables.responsive.js index ec677ff..f1ade7f 100644 --- a/files/1.10/js/datatables.responsive.js +++ b/files/1.10/js/datatables.responsive.js @@ -48,6 +48,18 @@ * clickOn - icon|cell|row, default: icon * showDetail - function called when detail row shown * hideDetail - function called when detail row hidden + * widthReference - window|parent|custom, default: window + * Defines, which is the reference element + * width to compare the breakpoints to: + * window = browser window, parent = parent + * element of the table element, custom = + * custom element defined by + * customReferenceElement + * customReferenceElement - custom reference element, default: null + * debounceWait - Wait time for debounce resize events, + * default: 100 (ms) + * consoleLog - Boolean, default: false. Defines wether + * resize events should be logged to console. * } * * @param {Object|string} tableSelector jQuery wrapped set or selector for @@ -115,7 +127,11 @@ function ResponsiveDatatablesHelper(tableSelector, breakpoints, options) { hideEmptyColumnsInRowDetail: false, clickOn: 'icon', showDetail: null, - hideDetail: null + hideDetail: null, + widthReference: "window", + customReferenceElement: null, + debounceWait: 100, + consoleLog: false }; // Expand icon template @@ -266,9 +282,21 @@ ResponsiveDatatablesHelper.prototype.setWindowsResizeHandler = function(bindFlag if (bindFlag) { var that = this; - $(window).bind("resize", function () { - that.respond(); - }); + if ($.debounce && (typeof $.debounce == "function")) { + // Use jQuery debounce plugin, if available + $(window).bind("resize", $.debounce(this.options.debounceWait, function () { + that.respond(); + })); + } else if (_.debounce && (typeof _.debounce == "function")) { + // Use Underscore/Lo-Dash debounce, if available + $(window).bind("resize", _.debounce(function () { + that.respond(); + }, this.options.debounceWait)); + } else { + $(window).bind("resize", function () { + that.respond(); + }); + } } else { $(window).unbind("resize"); } @@ -283,15 +311,25 @@ ResponsiveDatatablesHelper.prototype.respond = function () { } var that = this; - // Get new windows width - var newWindowWidth = $(window).width(); - + // Get new window or table width + var newWidth = 0; + if ((this.options.widthReference === "custom") && (this.options.customReferenceElement) && (typeof this.options.customReferenceElement.width === 'function')) { + newWidth = this.options.customReferenceElement.width(); + if (this.options.consoleLog && console && (typeof console.log === "function")) console.log("Responding to resize event, using custom reference width: " + newWidth); + } else if (this.options.widthReference === "parent") { + newWidth = this.tableElement.parent().width(); + if (this.options.consoleLog && console && (typeof console.log === "function")) console.log("Responding to resize event, using parent width: " + newWidth); + } else { + newWidth = $(window).width(); + if (this.options.consoleLog && console && (typeof console.log === "function")) console.log("Responding to resize event, using window width: " + newWidth); + } + // Loop through breakpoints to see which columns need to be shown/hidden. var newColumnsToHide = []; for (var prop in this.breakpoints) { var element = this.breakpoints[prop]; - if ((!element.lowerLimit || newWindowWidth > element.lowerLimit) && (!element.upperLimit || newWindowWidth <= element.upperLimit)) { + if ((!element.lowerLimit || newWidth > element.lowerLimit) && (!element.upperLimit || newWidth <= element.upperLimit)) { this.currentBreakpoint = element.name; newColumnsToHide = element.columnsToHide; } From 46a6729cf9fb944dfece9af21671edb3e1336502 Mon Sep 17 00:00:00 2001 From: Frank Odignal Date: Fri, 22 Aug 2014 15:37:03 +0200 Subject: [PATCH 4/6] Documentation update --- README.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/README.md b/README.md index 955b6e5..3483969 100644 --- a/README.md +++ b/README.md @@ -236,6 +236,31 @@ Currently supported options are: - Default: null - Function called when the detail row is going to be hidden. Passes the jquery tr object for the detail row as an argument. +`widthReference` + +- Type: `String` +- Acceptable values: `window`, `parent` or `custom` +- Default: `window` +- Defines, which DOM element should be used to compare width to breakpoints: Window object, the parent object of the table element (usually the enclosing container element) or a custom element defined by customReferenceElement. + +`customReferenceElement` + +- Type: `Object` +- Default: null +- DOM object to be used as reference element to compare width to breakpoints. + +`consoleLog` + +- Type: `Boolean` +- Default: false +- Defines, whether window resize events and the measured reference element width should be logged to console. + +`debounceWait` + +- Type: `Integer` +- Default: 100 +- Wait time for debounced window resize events, supports jQuery Debounce plugin and Underscore debound methods. + ## Thanks Thanks to Allan Jardine for making the best data table plugin for jQuery. Nothing out there comes close. From 310c77e0da4ce2dec69ea0e59ccbed8117c56e5c Mon Sep 17 00:00:00 2001 From: Frank Odignal Date: Mon, 25 Aug 2014 14:25:11 +0200 Subject: [PATCH 5/6] Fixed folder names in README.md Path changed from files/1 and files/2 to files/1.9 and files/1.10 --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 3483969..46d2191 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ Add Bootstrap, Datatables-Bootstrap and responsive Datatables helper CSS files. - + ``` If you are using Bootstrap 2, see the `ajax-bootstrap2.html` example. @@ -35,7 +35,7 @@ If you are using Bootstrap 2, see the `ajax-bootstrap2.html` example. - + ``` @@ -56,7 +56,7 @@ Add jQuery, Datatables, Datables-Bootstrap and the responsive Datatables helper - + ``` **DataTables 1.10.x and Bootstrap 3.x** @@ -64,7 +64,7 @@ Add jQuery, Datatables, Datables-Bootstrap and the responsive Datatables helper - + ``` ## Create variables and break point definitions. From 3993c5069cfc0dde3c1e303a7eebb3db8141ba40 Mon Sep 17 00:00:00 2001 From: Frank Odignal Date: Tue, 9 Sep 2014 13:08:15 +0200 Subject: [PATCH 6/6] Fixed missing context in jQuery selectors for .row-details --- files/1.9/js/datatables.responsive.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/1.9/js/datatables.responsive.js b/files/1.9/js/datatables.responsive.js index 7327010..0bb2b40 100644 --- a/files/1.9/js/datatables.responsive.js +++ b/files/1.9/js/datatables.responsive.js @@ -345,7 +345,7 @@ ResponsiveDatatablesHelper.prototype.respond = function () { }); } else { this.tableElement.removeClass('has-columns-hidden'); - $('tr.row-detail').each(function (event) { + $('tr.row-detail', this.tableElement).each(function (event) { ResponsiveDatatablesHelper.prototype.hideRowDetail(that, $(this).prev()); }); } @@ -368,7 +368,7 @@ ResponsiveDatatablesHelper.prototype.showHideColumns = function () { // Rebuild details to reflect shown/hidden column changes. var that = this; - $('tr.row-detail').each(function () { + $('tr.row-detail', this.tableElement).each(function () { ResponsiveDatatablesHelper.prototype.hideRowDetail(that, $(this).prev()); }); if (this.tableElement.hasClass('has-columns-hidden')) {