From 2ec5ac80ff9f067c1daef6be01e458184d7af200 Mon Sep 17 00:00:00 2001 From: Rob Garrison Date: Wed, 14 Dec 2016 15:43:30 -0600 Subject: [PATCH] ColumnSelector: revert b9e89d4, add layoutCustomizer option. See #1335 --- dist/js/widgets/widget-columnSelector.min.js | 2 +- docs/example-widget-column-selector.html | 32 ++++++++++++++++++++ js/widgets/widget-columnSelector.js | 14 ++++++--- 3 files changed, 43 insertions(+), 5 deletions(-) diff --git a/dist/js/widgets/widget-columnSelector.min.js b/dist/js/widgets/widget-columnSelector.min.js index 1d41d86f..de0c0445 100644 --- a/dist/js/widgets/widget-columnSelector.min.js +++ b/dist/js/widgets/widget-columnSelector.min.js @@ -1 +1 @@ -!function(a){"use strict";var b=a.tablesorter,c=".tscolsel",d=b.columnSelector={queryAll:"@media only all { [columns] { display: none; } } ",queryBreak:"@media all and (min-width: [size]) { [columns] { display: table-cell; } } ",init:function(b,e,f){var g,h;return g=a(f.columnSelector_layout),g.find("input").add(g.filter("input")).length?(e.$table.addClass(e.namespace.slice(1)+"columnselector"),h=e.selector={$container:a(f.columnSelector_container||"
")},h.$style=a("").prop("disabled",!0).appendTo("head"),h.$breakpoints=a("").prop("disabled",!0).appendTo("head"),h.isInitializing=!0,d.setUpColspan(e,f),d.setupSelector(e,f),f.columnSelector_mediaquery&&d.setupBreakpoints(e,f),h.isInitializing=!1,h.$container.length?d.updateCols(e,f):e.debug&&console.warn("ColumnSelector: >> container not found"),void e.$table.off("refreshColumnSelector"+c).on("refreshColumnSelector"+c,function(a,b,c){d.refreshColumns(this.config,b,c)})):void(e.debug&&console.error("ColumnSelector: >> ERROR: Column Selector aborting, no input found in the layout! ***"))},refreshColumns:function(b,c,e){var f,g,h,i,j=b.selector,k=a.isArray(e||c),l=b.widgetOptions;if("undefined"!=typeof c&&null!==c&&j.$container.length){if("selectors"===c&&(j.$container.empty(),d.setupSelector(b,l),d.setupBreakpoints(b,l),"undefined"==typeof e&&null!==e&&(e=j.auto)),k)for(g=e||c,a.each(g,function(a,b){g[a]=parseInt(b,10)}),f=0;f=0,h=j.$container.find("input[data-column="+f+"]"),h.length&&(h.prop("checked",i),j.states[f]=i);i=e===!0||c===!0||"auto"===c&&e!==!1,h=j.$container.find('input[data-column="auto"]').prop("checked",i),d.updateAuto(b,l,h)}else d.updateBreakpoints(b,l),d.updateCols(b,l);d.saveValues(b,l),d.adjustColspans(b,l)},setupSelector:function(c,e){var f,g,h,i,j,k,l=c.selector,m=l.$container,n=e.columnSelector_saveColumns&&b.storage,o=n?b.storage(c.table,"tablesorter-columnSelector"):[],p=n?b.storage(c.table,"tablesorter-columnSelector-auto"):{};for(l.auto=a.isEmptyObject(p)||"boolean"!==a.type(p.auto)?e.columnSelector_mediaqueryState:p.auto,l.states=[],l.$column=[],l.$wrapper=[],l.$checkbox=[],f=0;f0||"disable"===p||e.columnSelector_columns[k]&&"disable"===e.columnSelector_columns[k]?l.states[k]=null:(l.states[k]=o&&"undefined"!=typeof o[k]&&null!==o[k]?o[k]:"undefined"!=typeof e.columnSelector_columns[k]&&null!==e.columnSelector_columns[k]?e.columnSelector_columns[k]:"true"===p||"false"!==p,l.$column[k]=a(this),g=h.attr(e.columnSelector_name)||h.text().trim()||c.headerContent[f],m.length&&(l.$wrapper[k]=a(e.columnSelector_layout.replace(/\{name\}/g,g)).appendTo(m),l.$checkbox[k]=l.$wrapper[k].find("input").add(l.$wrapper[k].filter("input")).attr("data-column",k).toggleClass(e.columnSelector_cssChecked,l.states[k]).prop("checked",l.states[k]).on("change",function(){if(!l.isInitializing){var b=a(this).attr("data-column");if(!d.checkChange(c,this.checked))return this.checked=!this.checked,!1;c.selector.states[b]=this.checked,d.updateCols(c,e)}}).change()))},checkChange:function(a,b){for(var c=a.widgetOptions,d=c.columnSelector_maxVisible,e=c.columnSelector_minVisible,f=a.selector.states,g=f.length,h=0;g-- >=0;)f[g]&&h++;return!(b&null!==d&&h>=d||!b&&null!==e&&h<=e)},setupBreakpoints:function(b,e){var f=b.selector;e.columnSelector_mediaquery&&(f.lastIndex=-1,d.updateBreakpoints(b,e),b.$table.off("updateAll"+c).on("updateAll"+c,function(){d.setupSelector(b,e),d.setupBreakpoints(b,e),d.updateBreakpoints(b,e),d.updateCols(b,e)})),f.$container.length&&(e.columnSelector_mediaquery&&(f.$auto=a(e.columnSelector_layout.replace(/\{name\}/g,e.columnSelector_mediaqueryName)).prependTo(f.$container),f.$auto.find("input").add(f.$auto.filter("input")).attr("data-column","auto").prop("checked",f.auto).toggleClass(e.columnSelector_cssChecked,f.auto).on("change",function(){d.updateAuto(b,e,a(this))}).change()),b.$table.off("update"+c).on("update"+c,function(){d.updateCols(b,e)}))},updateAuto:function(b,c,e){var f=b.selector;f.auto=e.prop("checked")||!1,a.each(f.$checkbox,function(a,b){b&&(b[0].disabled=f.auto,f.$wrapper[a].toggleClass("disabled",f.auto))}),c.columnSelector_mediaquery&&d.updateBreakpoints(b,c),d.updateCols(b,c),b.selector.$popup&&b.selector.$popup.find(".tablesorter-column-selector").html(f.$container.html()).find("input").each(function(){var b=a(this).attr("data-column");a(this).prop("checked","auto"===b?f.auto:f.states[b])}),d.saveValues(b,c),d.adjustColspans(b,c),f.auto&&b.$table.triggerHandler(c.columnSelector_updated)},addSelectors:function(a,b){var c=[],d=" col:nth-child("+b+")";return c.push(a+d+","+a+"_extra_table"+d),d=' tr:not(.hasSpan) th[data-column="'+(b-1)+'"]',c.push(a+d+","+a+"_extra_table"+d),d=" tr:not(.hasSpan) td:nth-child("+b+")",c.push(a+d+","+a+"_extra_table"+d),d=" tr td:not("+a+'HasSpan)[data-column="'+(b-1)+'"]',c.push(a+d+","+a+"_extra_table"+d),c},updateBreakpoints:function(c,e){var f,g,h,i,j=[],k=c.selector,l=c.namespace+"columnselector",m=[],n="";if(e.columnSelector_mediaquery&&!k.auto)return k.$breakpoints.prop("disabled",!0),void k.$style.prop("disabled",!1);if(e.columnSelector_mediaqueryHidden)for(h=0;h1&&(j=!0,k.eq(f).addClass(c.namespace.slice(1)+"columnselectorHasSpan").attr("data-col-span",g),b.computeColumnIndex(k.eq(f).parent().addClass("hasSpan")));j&&e.columnSelector_mediaquery&&(h=c.namespace+"columnselector",i.off(h).on("resize"+h,b.window_resize).on("resizeEnd"+h,function(){i.off("resize"+h,b.window_resize),d.adjustColspans(c,e),i.on("resize"+h,b.window_resize)}))},adjustColspans:function(b,c){var d,e,f,g,h,i,j=b.selector,k=c.filter_filteredRow||"filtered",l=c.columnSelector_mediaquery&&j.auto,m=b.$table.children("thead, tfoot").children().children().add(a(b.namespace+"_extra_table").children("thead, tfoot").children().children()),n=m.length;for(d=0;d1){for(e=f;e'),e=h.selector,f=h.widgetOptions,i.find(".tablesorter-column-selector").html(e.$container.html()).find("input").each(function(){var b=a(this).attr("data-column"),c="auto"===b?e.auto:e.states[b];a(this).toggleClass(f.columnSelector_cssChecked,c).prop("checked",c)}),e.$popup=i.on("change","input",function(){if(!e.isInitializing){if(!d.checkChange(h,this.checked))return this.checked=!this.checked,!1;g=a(this).toggleClass(f.columnSelector_cssChecked,this.checked).attr("data-column"),e.$container.find('input[data-column="'+g+'"]').prop("checked",this.checked).trigger("change")}}))}};b.window_resize=function(){b.timer_resize&&clearTimeout(b.timer_resize),b.timer_resize=setTimeout(function(){a(window).trigger("resizeEnd")},250)},b.addWidget({id:"columnSelector",priority:10,options:{columnSelector_container:null,columnSelector_columns:{},columnSelector_saveColumns:!0,columnSelector_layout:'',columnSelector_name:"data-selector-name",columnSelector_mediaquery:!0,columnSelector_mediaqueryName:"Auto: ",columnSelector_mediaqueryState:!0,columnSelector_mediaqueryHidden:!1,columnSelector_maxVisible:null,columnSelector_minVisible:null,columnSelector_breakpoints:["20em","30em","40em","50em","60em","70em"],columnSelector_maxPriorities:6,columnSelector_priority:"data-priority",columnSelector_cssChecked:"checked",columnSelector_updated:"columnUpdate"},init:function(a,b,c,e){d.init(a,c,e)},remove:function(b,d,e,f){var g=d.selector;g&&g.$container.empty(),!f&&g&&(g.$popup&&g.$popup.empty(),g.$style.remove(),g.$breakpoints.remove(),a(d.namespace+"columnselectorHasSpan").removeClass(e.filter_filteredRow||"filtered"),d.$table.off("updateAll"+c+" update"+c))}})}(jQuery); \ No newline at end of file +!function(a){"use strict";var b=a.tablesorter,c=".tscolsel",d=b.columnSelector={queryAll:"@media only all { [columns] { display: none; } } ",queryBreak:"@media all and (min-width: [size]) { [columns] { display: table-cell; } } ",init:function(b,e,f){var g,h;return g=a(f.columnSelector_layout),g.find("input").add(g.filter("input")).length?(e.$table.addClass(e.namespace.slice(1)+"columnselector"),h=e.selector={$container:a(f.columnSelector_container||"
")},h.$style=a("").prop("disabled",!0).appendTo("head"),h.$breakpoints=a("").prop("disabled",!0).appendTo("head"),h.isInitializing=!0,d.setUpColspan(e,f),d.setupSelector(e,f),f.columnSelector_mediaquery&&d.setupBreakpoints(e,f),h.isInitializing=!1,h.$container.length?d.updateCols(e,f):e.debug&&console.warn("ColumnSelector: >> container not found"),void e.$table.off("refreshColumnSelector"+c).on("refreshColumnSelector"+c,function(a,b,c){d.refreshColumns(this.config,b,c)})):void(e.debug&&console.error("ColumnSelector: >> ERROR: Column Selector aborting, no input found in the layout! ***"))},refreshColumns:function(b,c,e){var f,g,h,i,j=b.selector,k=a.isArray(e||c),l=b.widgetOptions;if("undefined"!=typeof c&&null!==c&&j.$container.length){if("selectors"===c&&(j.$container.empty(),d.setupSelector(b,l),d.setupBreakpoints(b,l),"undefined"==typeof e&&null!==e&&(e=j.auto)),k)for(g=e||c,a.each(g,function(a,b){g[a]=parseInt(b,10)}),f=0;f=0,h=j.$container.find("input[data-column="+f+"]"),h.length&&(h.prop("checked",i),j.states[f]=i);i=e===!0||c===!0||"auto"===c&&e!==!1,h=j.$container.find('input[data-column="auto"]').prop("checked",i),d.updateAuto(b,l,h)}else d.updateBreakpoints(b,l),d.updateCols(b,l);d.saveValues(b,l),d.adjustColspans(b,l)},setupSelector:function(c,e){var f,g,h,i,j,k,l,m=c.selector,n=m.$container,o=e.columnSelector_saveColumns&&b.storage,p=o?b.storage(c.table,"tablesorter-columnSelector"):[],q=o?b.storage(c.table,"tablesorter-columnSelector-auto"):{};for(m.auto=a.isEmptyObject(q)||"boolean"!==a.type(q.auto)?e.columnSelector_mediaqueryState:q.auto,m.states=[],m.$column=[],m.$wrapper=[],m.$checkbox=[],f=0;f0||"disable"===q||e.columnSelector_columns[k]&&"disable"===e.columnSelector_columns[k]?m.states[k]=null:(m.states[k]=p&&"undefined"!=typeof p[k]&&null!==p[k]?p[k]:"undefined"!=typeof e.columnSelector_columns[k]&&null!==e.columnSelector_columns[k]?e.columnSelector_columns[k]:"true"===q||"false"!==q,m.$column[k]=a(this),n.length&&(g=h.attr(e.columnSelector_name)||h.text().trim(),"function"==typeof e.columnSelector_layoutCustomizer&&(l=h.find("."+b.css.headerIn),g=e.columnSelector_layoutCustomizer(l.length?l:h,g,parseInt(k,10))),m.$wrapper[k]=a(e.columnSelector_layout.replace(/\{name\}/g,g)).appendTo(n),m.$checkbox[k]=m.$wrapper[k].find("input").add(m.$wrapper[k].filter("input")).attr("data-column",k).toggleClass(e.columnSelector_cssChecked,m.states[k]).prop("checked",m.states[k]).on("change",function(){if(!m.isInitializing){var b=a(this).attr("data-column");if(!d.checkChange(c,this.checked))return this.checked=!this.checked,!1;c.selector.states[b]=this.checked,d.updateCols(c,e)}}).change()))},checkChange:function(a,b){for(var c=a.widgetOptions,d=c.columnSelector_maxVisible,e=c.columnSelector_minVisible,f=a.selector.states,g=f.length,h=0;g-- >=0;)f[g]&&h++;return!(b&null!==d&&h>=d||!b&&null!==e&&h<=e)},setupBreakpoints:function(b,e){var f=b.selector;e.columnSelector_mediaquery&&(f.lastIndex=-1,d.updateBreakpoints(b,e),b.$table.off("updateAll"+c).on("updateAll"+c,function(){d.setupSelector(b,e),d.setupBreakpoints(b,e),d.updateBreakpoints(b,e),d.updateCols(b,e)})),f.$container.length&&(e.columnSelector_mediaquery&&(f.$auto=a(e.columnSelector_layout.replace(/\{name\}/g,e.columnSelector_mediaqueryName)).prependTo(f.$container),f.$auto.find("input").add(f.$auto.filter("input")).attr("data-column","auto").prop("checked",f.auto).toggleClass(e.columnSelector_cssChecked,f.auto).on("change",function(){d.updateAuto(b,e,a(this))}).change()),b.$table.off("update"+c).on("update"+c,function(){d.updateCols(b,e)}))},updateAuto:function(b,c,e){var f=b.selector;f.auto=e.prop("checked")||!1,a.each(f.$checkbox,function(a,b){b&&(b[0].disabled=f.auto,f.$wrapper[a].toggleClass("disabled",f.auto))}),c.columnSelector_mediaquery&&d.updateBreakpoints(b,c),d.updateCols(b,c),b.selector.$popup&&b.selector.$popup.find(".tablesorter-column-selector").html(f.$container.html()).find("input").each(function(){var b=a(this).attr("data-column");a(this).prop("checked","auto"===b?f.auto:f.states[b])}),d.saveValues(b,c),d.adjustColspans(b,c),f.auto&&b.$table.triggerHandler(c.columnSelector_updated)},addSelectors:function(a,b){var c=[],d=" col:nth-child("+b+")";return c.push(a+d+","+a+"_extra_table"+d),d=' tr:not(.hasSpan) th[data-column="'+(b-1)+'"]',c.push(a+d+","+a+"_extra_table"+d),d=" tr:not(.hasSpan) td:nth-child("+b+")",c.push(a+d+","+a+"_extra_table"+d),d=" tr td:not("+a+'HasSpan)[data-column="'+(b-1)+'"]',c.push(a+d+","+a+"_extra_table"+d),c},updateBreakpoints:function(c,e){var f,g,h,i,j=[],k=c.selector,l=c.namespace+"columnselector",m=[],n="";if(e.columnSelector_mediaquery&&!k.auto)return k.$breakpoints.prop("disabled",!0),void k.$style.prop("disabled",!1);if(e.columnSelector_mediaqueryHidden)for(h=0;h1&&(j=!0,k.eq(f).addClass(c.namespace.slice(1)+"columnselectorHasSpan").attr("data-col-span",g),b.computeColumnIndex(k.eq(f).parent().addClass("hasSpan")));j&&e.columnSelector_mediaquery&&(h=c.namespace+"columnselector",i.off(h).on("resize"+h,b.window_resize).on("resizeEnd"+h,function(){i.off("resize"+h,b.window_resize),d.adjustColspans(c,e),i.on("resize"+h,b.window_resize)}))},adjustColspans:function(b,c){var d,e,f,g,h,i,j=b.selector,k=c.filter_filteredRow||"filtered",l=c.columnSelector_mediaquery&&j.auto,m=b.$table.children("thead, tfoot").children().children().add(a(b.namespace+"_extra_table").children("thead, tfoot").children().children()),n=m.length;for(d=0;d1){for(e=f;e'),e=h.selector,f=h.widgetOptions,i.find(".tablesorter-column-selector").html(e.$container.html()).find("input").each(function(){var b=a(this).attr("data-column"),c="auto"===b?e.auto:e.states[b];a(this).toggleClass(f.columnSelector_cssChecked,c).prop("checked",c)}),e.$popup=i.on("change","input",function(){if(!e.isInitializing){if(!d.checkChange(h,this.checked))return this.checked=!this.checked,!1;g=a(this).toggleClass(f.columnSelector_cssChecked,this.checked).attr("data-column"),e.$container.find('input[data-column="'+g+'"]').prop("checked",this.checked).trigger("change")}}))}};b.window_resize=function(){b.timer_resize&&clearTimeout(b.timer_resize),b.timer_resize=setTimeout(function(){a(window).trigger("resizeEnd")},250)},b.addWidget({id:"columnSelector",priority:10,options:{columnSelector_container:null,columnSelector_columns:{},columnSelector_saveColumns:!0,columnSelector_layout:'',columnSelector_layoutCustomizer:null,columnSelector_name:"data-selector-name",columnSelector_mediaquery:!0,columnSelector_mediaqueryName:"Auto: ",columnSelector_mediaqueryState:!0,columnSelector_mediaqueryHidden:!1,columnSelector_maxVisible:null,columnSelector_minVisible:null,columnSelector_breakpoints:["20em","30em","40em","50em","60em","70em"],columnSelector_maxPriorities:6,columnSelector_priority:"data-priority",columnSelector_cssChecked:"checked",columnSelector_updated:"columnUpdate"},init:function(a,b,c,e){d.init(a,c,e)},remove:function(b,d,e,f){var g=d.selector;g&&g.$container.empty(),!f&&g&&(g.$popup&&g.$popup.empty(),g.$style.remove(),g.$breakpoints.remove(),a(d.namespace+"columnselectorHasSpan").removeClass(e.filter_filteredRow||"filtered"),d.$table.off("updateAll"+c+" update"+c))}})}(jQuery); \ No newline at end of file diff --git a/docs/example-widget-column-selector.html b/docs/example-widget-column-selector.html index 7c5df4d6..d1fcb551 100644 --- a/docs/example-widget-column-selector.html +++ b/docs/example-widget-column-selector.html @@ -107,6 +107,9 @@ // container layout columnSelector_layout : '', + // layout customizer callback called for each column + // function($cell, name, column){ return name || $cell.html(); } + columnSelector_layoutCustomizer : null, // data attribute containing column name to use in the selector container columnSelector_name : 'data-selector-name', @@ -316,6 +319,35 @@ + + + + This option is set as a callback function that is called during the processing of the layout for each column. +
+
+

This callback contains three parameters:

+
    +
  • $cell - jQuery object pointing to the header cell inner wrapper. If the headerTemplate option is set as an empty string, then the inner wrapper is not included, and the $cell would then point to the table cell (th or td depending on the markup).
    • +
  • name - This parameter contains the header cell title string. This value is obtained from the header cell data-selector-name attribute, if defined, or the header cell text.
    • +
  • index - The current column index as a number value.
    • +
+ 
$(function() {
+  $("#task").tablesorter({
+    widgets: ["columnSelector"],
+    widgetOptions: {
+      columnSelector_container: $('#columnSelector'),
+      columnSelector_layoutCustomizer: function($cell, name, index) {
+        // return the HTML for the first column only
+        return index === 0 ? $cell.html() : name;
+      }
+    }
+  });
+});
+ Default value: null +
+ + + diff --git a/js/widgets/widget-columnSelector.js b/js/widgets/widget-columnSelector.js index 23f8d9e3..537a53e0 100644 --- a/js/widgets/widget-columnSelector.js +++ b/js/widgets/widget-columnSelector.js @@ -113,7 +113,7 @@ }, setupSelector: function(c, wo) { - var index, name, $header, priority, col, colId, + var index, name, $header, priority, col, colId, $el, colSel = c.selector, $container = colSel.$container, useStorage = wo.columnSelector_saveColumns && ts.storage, @@ -149,10 +149,13 @@ saved[colId] : (typeof wo.columnSelector_columns[colId] !== 'undefined' && wo.columnSelector_columns[colId] !== null) ? wo.columnSelector_columns[colId] : (state === 'true' || state !== 'false'); colSel.$column[colId] = $(this); - - // set default col title - name = $header.attr(wo.columnSelector_name) || $header.text().trim() || c.headerContent[ index ]; if ($container.length) { + // set default col title + name = $header.attr(wo.columnSelector_name) || $header.text().trim(); + if (typeof wo.columnSelector_layoutCustomizer === "function") { + $el = $header.find('.' + ts.css.headerIn); + name = wo.columnSelector_layoutCustomizer( $el.length ? $el : $header, name, parseInt(colId, 10) ); + } colSel.$wrapper[colId] = $(wo.columnSelector_layout.replace(/\{name\}/g, name)).appendTo($container); colSel.$checkbox[colId] = colSel.$wrapper[colId] // input may not be wrapped within the layout template @@ -497,6 +500,9 @@ // container layout columnSelector_layout : '', + // layout customizer callback called for each column + // function($cell, name, column){ return name || $cell.html(); } + columnSelector_layoutCustomizer : null, // data attribute containing column name to use in the selector container columnSelector_name : 'data-selector-name',