From 548f70da15c888270f04f46ac20957996c9d48df Mon Sep 17 00:00:00 2001 From: Jordan Killpack Date: Mon, 13 May 2013 18:04:59 -0400 Subject: [PATCH] Add support for changing options dynamically. Motivation: to make this plugin more usable for pages that use responsive Bootstrap styling. On such pages, it is common for high-resolution views to use a floating "sticky" nav bar (in which case StickyTableHeaders needs an offset that's >= 0), while lower-resolution views might make the nav bar "non-sticky" to conserve screen space. When the viewport changes, it is necessary to tell StickyTableHeaders to change the fixedOffset option so that it can account for the varying "stickiness" of the nav bar. Prior to this commit, the only way to accomplish this was to destroy the StickyTableHeaders instance and recreate it. I think this fix is much easier and more efficient! --- js/jquery.stickytableheaders.js | 10 +++++++++- js/jquery.stickytableheaders.min.js | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/js/jquery.stickytableheaders.js b/js/jquery.stickytableheaders.js index 1fd9b9e..0ea5fe5 100644 --- a/js/jquery.stickytableheaders.js +++ b/js/jquery.stickytableheaders.js @@ -163,6 +163,12 @@ base.$clonedHeader.css('width', base.$originalHeader.width()); }; + base.updateOptions = function(options) { + base.options = $.extend({}, defaults, options); + base.updateWidth(); + base.toggleHeaders(); + }; + // Run initializer base.init(); } @@ -175,7 +181,9 @@ if (instance) { if (typeof options === "string") { instance[options].apply(instance); - } + } else { + instance.updateOptions(options); + } } else if(options !== 'destroy') { $.data(this, 'plugin_' + name, new Plugin( this, options )); } diff --git a/js/jquery.stickytableheaders.min.js b/js/jquery.stickytableheaders.min.js index 2bb2b96..c63296d 100644 --- a/js/jquery.stickytableheaders.min.js +++ b/js/jquery.stickytableheaders.min.js @@ -1 +1 @@ -(function(e,i){"use strict";function t(t,o){var d=this;d.$el=e(t),d.el=t,d.$el.bind("destroyed",e.proxy(d.teardown,d)),d.$window=e(i),d.$clonedHeader=null,d.$originalHeader=null,d.isCloneVisible=!1,d.leftOffset=null,d.topOffset=null,d.init=function(){d.options=e.extend({},l,o),d.$el.each(function(){var i=e(this);i.css("padding",0),d.$originalHeader=e("thead:first",this),d.$clonedHeader=d.$originalHeader.clone(),d.$clonedHeader.addClass("tableFloatingHeader"),d.$clonedHeader.css({position:"fixed",top:0,"z-index":1,display:"none"}),d.$originalHeader.addClass("tableFloatingHeaderOriginal"),d.$originalHeader.after(d.$clonedHeader),e("th",d.$clonedHeader).on("click."+n,function(){var i=e("th",d.$clonedHeader).index(this);e("th",d.$originalHeader).eq(i).click()}),i.on("sortEnd."+n,d.updateWidth),d.$printStyle=e(''),e("head").append(d.$printStyle)}),d.updateWidth(),d.toggleHeaders(),d.bind()},d.destroy=function(){d.$el.unbind("destroyed",d.teardown),d.teardown()},d.teardown=function(){e.removeData(d.el,"plugin_"+n),d.unbind(),d.$clonedHeader.remove(),d.$originalHeader.removeClass("tableFloatingHeaderOriginal"),d.$originalHeader.css("visibility","visible"),d.$printStyle.remove(),d.el=null,d.$el=null},d.bind=function(){d.$window.on("scroll."+n,d.toggleHeaders),d.$window.on("resize."+n,d.toggleHeaders),d.$window.on("resize."+n,d.updateWidth)},d.unbind=function(){d.$window.off("."+n,d.toggleHeaders),d.$window.off("."+n,d.updateWidth),d.$el.off("."+n),d.$el.find("*").off("."+n)},d.toggleHeaders=function(){d.$el.each(function(){var i=e(this),t=isNaN(d.options.fixedOffset)?d.options.fixedOffset.height():d.options.fixedOffset,n=i.offset(),l=d.$window.scrollTop()+t,o=d.$window.scrollLeft();if(l>n.top&&n.top+i.height()>l){var a=n.left-o;if(d.isCloneVisible&&a===d.leftOffset&&t===d.topOffset)return;d.$clonedHeader.css({top:t,"margin-top":0,left:a,display:"block"}),d.$originalHeader.css("visibility","hidden"),d.isCloneVisible=!0,d.leftOffset=a,d.topOffset=t}else d.isCloneVisible&&(d.$clonedHeader.css("display","none"),d.$originalHeader.css("visibility","visible"),d.isCloneVisible=!1)})},d.updateWidth=function(){e("th",d.$clonedHeader).each(function(i){var t=e(this),n=e("th",d.$originalHeader).eq(i);this.className=n.attr("class")||"",t.css({"min-width":n.width(),"max-width":n.width()})}),d.$clonedHeader.css("width",d.$originalHeader.width())},d.init()}var n="stickyTableHeaders",l={fixedOffset:0};e.fn[n]=function(i){return this.each(function(){var l=e.data(this,"plugin_"+n);l?"string"==typeof i&&l[i].apply(l):"destroy"!==i&&e.data(this,"plugin_"+n,new t(this,i))})}})(jQuery,window); \ No newline at end of file +(function(e,i){"use strict";function t(t,o){var l=this;l.$el=e(t),l.el=t,l.$el.bind("destroyed",e.proxy(l.teardown,l)),l.$window=e(i),l.$clonedHeader=null,l.$originalHeader=null,l.isCloneVisible=!1,l.leftOffset=null,l.topOffset=null,l.init=function(){l.options=e.extend({},d,o),l.$el.each(function(){var i=e(this);i.css("padding",0),l.$originalHeader=e("thead:first",this),l.$clonedHeader=l.$originalHeader.clone(),l.$clonedHeader.addClass("tableFloatingHeader"),l.$clonedHeader.css({position:"fixed",top:0,"z-index":1,display:"none"}),l.$originalHeader.addClass("tableFloatingHeaderOriginal"),l.$originalHeader.after(l.$clonedHeader),e("th",l.$clonedHeader).on("click."+n,function(){var i=e("th",l.$clonedHeader).index(this);e("th",l.$originalHeader).eq(i).click()}),i.on("sortEnd."+n,l.updateWidth),l.$printStyle=e(''),e("head").append(l.$printStyle)}),l.updateWidth(),l.toggleHeaders(),l.bind()},l.destroy=function(){l.$el.unbind("destroyed",l.teardown),l.teardown()},l.teardown=function(){e.removeData(l.el,"plugin_"+n),l.unbind(),l.$clonedHeader.remove(),l.$originalHeader.removeClass("tableFloatingHeaderOriginal"),l.$originalHeader.css("visibility","visible"),l.$printStyle.remove(),l.el=null,l.$el=null},l.bind=function(){l.$window.on("scroll."+n,l.toggleHeaders),l.$window.on("resize."+n,l.toggleHeaders),l.$window.on("resize."+n,l.updateWidth)},l.unbind=function(){l.$window.off("."+n,l.toggleHeaders),l.$window.off("."+n,l.updateWidth),l.$el.off("."+n),l.$el.find("*").off("."+n)},l.toggleHeaders=function(){l.$el.each(function(){var i=e(this),t=isNaN(l.options.fixedOffset)?l.options.fixedOffset.height():l.options.fixedOffset,n=i.offset(),d=l.$window.scrollTop()+t,o=l.$window.scrollLeft();if(d>n.top&&n.top+i.height()-l.$clonedHeader.height()>d){var a=n.left-o;if(l.isCloneVisible&&a===l.leftOffset&&t===l.topOffset)return;l.$clonedHeader.css({top:t,"margin-top":0,left:a,display:"block"}),l.$originalHeader.css("visibility","hidden"),l.isCloneVisible=!0,l.leftOffset=a,l.topOffset=t}else l.isCloneVisible&&(l.$clonedHeader.css("display","none"),l.$originalHeader.css("visibility","visible"),l.isCloneVisible=!1)})},l.updateWidth=function(){e("th",l.$clonedHeader).each(function(i){var t=e(this),n=e("th",l.$originalHeader).eq(i);this.className=n.attr("class")||"",t.css({"min-width":n.width(),"max-width":n.width()})}),l.$clonedHeader.css("width",l.$originalHeader.width())},l.updateOptions=function(i){l.options=e.extend({},d,i),l.updateWidth(),l.toggleHeaders()},l.init()}var n="stickyTableHeaders",d={fixedOffset:0};e.fn[n]=function(i){return this.each(function(){var d=e.data(this,"plugin_"+n);d?"string"==typeof i?d[i].apply(d):d.updateOptions(i):"destroy"!==i&&e.data(this,"plugin_"+n,new t(this,i))})}})(jQuery,window); \ No newline at end of file