From e188110cb2fb1be1c82b640b06e46a890daef3e7 Mon Sep 17 00:00:00 2001 From: Max Guglielmi Date: Sun, 24 Apr 2016 18:47:01 +0200 Subject: [PATCH] Updated relevant unit tests for filters persistence --- dist/tablefilter/tablefilter.js | 30 ++++++++----- dist/tablefilter/tf-1.js | 43 +++++++++++++------ .../filtersVisibility/filtersVisibility.js | 38 ++++++++++------ src/modules/state.js | 26 ++++++----- test/test-state.js | 14 ++++++ 5 files changed, 102 insertions(+), 49 deletions(-) diff --git a/dist/tablefilter/tablefilter.js b/dist/tablefilter/tablefilter.js index f95202f1..74551d2c 100644 --- a/dist/tablefilter/tablefilter.js +++ b/dist/tablefilter/tablefilter.js @@ -7776,7 +7776,7 @@ return /******/ (function(modules) { // webpackBootstrap /** * Refresh page number field on page number changes * - * @param pageNb Current page number + * @param {Number} pageNb Current page number */ @@ -7788,7 +7788,7 @@ return /******/ (function(modules) { // webpackBootstrap /** * Refresh page length field on page length changes * - * @param pageLength Current page length value + * @param {Number} pageLength Current page length value */ @@ -7801,7 +7801,7 @@ return /******/ (function(modules) { // webpackBootstrap * Refresh column sorting information on sort changes * * @param index {Number} Column index - * @param descending {Boolean} Descending manner + * @param {Boolean} descending Descending manner */ @@ -7816,7 +7816,7 @@ return /******/ (function(modules) { // webpackBootstrap /** * Refresh hidden columns information on columns visibility changes * - * @param hiddenCols {Array} Columns indexes + * @param {Array} hiddenCols Columns indexes */ @@ -7825,8 +7825,14 @@ return /******/ (function(modules) { // webpackBootstrap this.update(); }; + /** + * Refresh filters visibility on filters visibility change + * + * @param {Boolean} visible Visibility flad + */ + + State.prototype.updateFiltersVisibility = function updateFiltersVisibility(visible) { - console.log('updateFiltersVisibility', visible); this.filtersVisibility = visible; this.update(); }; @@ -7863,11 +7869,6 @@ return /******/ (function(modules) { // webpackBootstrap this.emitter.emit('change-page-results', tf, pageLength); } - // if (this.persistFiltersVisibility) { console.log('sync'); - // let filtersVisibility = state[this.filtersVisKey]; - // this.emitter.emit('toggle-filters', tf, filtersVisibility); - // } - this._syncSort(); this._syncColsVisibility(); this._syncFiltersVisibility(); @@ -7977,6 +7978,13 @@ return /******/ (function(modules) { // webpackBootstrap }); }; + /** + * Sync filters visibility with stored information + * + * @private + */ + + State.prototype._syncFiltersVisibility = function _syncFiltersVisibility() { if (!this.persistFiltersVisibility) { return; @@ -7985,7 +7993,7 @@ return /******/ (function(modules) { // webpackBootstrap var tf = this.tf; var filtersVisibility = state[this.filtersVisKey]; - this.emitter.emit('toggle-filters', tf, filtersVisibility); + this.emitter.emit('show-filters', tf, filtersVisibility); }; /** diff --git a/dist/tablefilter/tf-1.js b/dist/tablefilter/tf-1.js index e23a44f9..8f0d117c 100644 --- a/dist/tablefilter/tf-1.js +++ b/dist/tablefilter/tf-1.js @@ -1637,8 +1637,8 @@ webpackJsonp([1],{ this.buildUI(); this.initialized = true; - this.emitter.on(['toggle-filters'], function () { - return _this.toggle(); + this.emitter.on(['show-filters'], function (tf, visible) { + return _this.show(visible); }); this.emitter.emit('filters-visibility-initialized', tf, this); }; @@ -1699,32 +1699,47 @@ webpackJsonp([1],{ FiltersVisibility.prototype.toggle = function toggle() { - console.log('toggle', arguments); var tf = this.tf; var tbl = tf.gridLayout ? tf.feature('gridLayout').headTbl : tf.tbl; var fltRow = tbl.rows[this.filtersRowIndex]; - var fltRowDisplay = fltRow.style.display; - var isDisplayed = fltRowDisplay === ''; + var isDisplayed = fltRow.style.display === ''; - if (this.onBeforeShow && !isDisplayed) { + this.show(!isDisplayed); + this.emitter.emit('filters-toggled', tf, this, !isDisplayed); + }; + + /** + * Show or hide filters + * + * @param {boolean} [visible=true] Visibility flag + */ + + + FiltersVisibility.prototype.show = function show() { + var visible = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0]; + + var tf = this.tf; + var tbl = tf.gridLayout ? tf.feature('gridLayout').headTbl : tf.tbl; + var fltRow = tbl.rows[this.filtersRowIndex]; + + if (this.onBeforeShow && visible) { this.onBeforeShow.call(this, this); } - if (this.onBeforeHide && isDisplayed) { + if (this.onBeforeHide && !visible) { this.onBeforeHide.call(null, this); } - fltRow.style.display = isDisplayed ? 'none' : ''; + fltRow.style.display = visible ? '' : 'none'; if (this.enableIcon && !this.btnHtml) { - this.btnEl.innerHTML = isDisplayed ? this.expandBtnHtml : this.collapseBtnHtml; + this.btnEl.innerHTML = visible ? this.collapseBtnHtml : this.expandBtnHtml; } - if (this.onAfterShow && !isDisplayed) { + if (this.onAfterShow && visible) { this.onAfterShow.call(null, this); } - if (this.onAfterHide && isDisplayed) { + if (this.onAfterHide && !visible) { this.onAfterHide.call(null, this); } - this.emitter.emit('filters-toggled', tf, this, !isDisplayed); }; /** @@ -1739,8 +1754,8 @@ webpackJsonp([1],{ return; } - this.emitter.off(['toggle-filters'], function () { - return _this3.toggle(); + this.emitter.off(['show-filters'], function (tf, visible) { + return _this3.show(visible); }); this.btnEl.innerHTML = ''; diff --git a/src/extensions/filtersVisibility/filtersVisibility.js b/src/extensions/filtersVisibility/filtersVisibility.js index 7d602bb6..f8c15695 100644 --- a/src/extensions/filtersVisibility/filtersVisibility.js +++ b/src/extensions/filtersVisibility/filtersVisibility.js @@ -90,7 +90,7 @@ export default class FiltersVisibility { this.buildUI(); this.initialized = true; - this.emitter.on(['toggle-filters'], () => this.toggle()); + this.emitter.on(['show-filters'], (tf, visible) => this.show(visible)); this.emitter.emit('filters-visibility-initialized', tf, this); } @@ -140,33 +140,45 @@ export default class FiltersVisibility { /** * Toggle filters visibility */ - toggle() {console.log('toggle', arguments); + toggle() { let tf = this.tf; let tbl = tf.gridLayout ? tf.feature('gridLayout').headTbl : tf.tbl; let fltRow = tbl.rows[this.filtersRowIndex]; - let fltRowDisplay = fltRow.style.display; - let isDisplayed = fltRowDisplay === ''; + let isDisplayed = fltRow.style.display === ''; - if (this.onBeforeShow && !isDisplayed) { + this.show(!isDisplayed); + this.emitter.emit('filters-toggled', tf, this, !isDisplayed); + } + + /** + * Show or hide filters + * + * @param {boolean} [visible=true] Visibility flag + */ + show(visible = true) { + let tf = this.tf; + let tbl = tf.gridLayout ? tf.feature('gridLayout').headTbl : tf.tbl; + let fltRow = tbl.rows[this.filtersRowIndex]; + + if (this.onBeforeShow && visible) { this.onBeforeShow.call(this, this); } - if (this.onBeforeHide && isDisplayed) { + if (this.onBeforeHide && !visible) { this.onBeforeHide.call(null, this); } - fltRow.style.display = isDisplayed ? 'none' : ''; + fltRow.style.display = visible ? '' : 'none'; if (this.enableIcon && !this.btnHtml) { - this.btnEl.innerHTML = isDisplayed ? - this.expandBtnHtml : this.collapseBtnHtml; + this.btnEl.innerHTML = visible ? + this.collapseBtnHtml : this.expandBtnHtml; } - if (this.onAfterShow && !isDisplayed) { + if (this.onAfterShow && visible) { this.onAfterShow.call(null, this); } - if (this.onAfterHide && isDisplayed) { + if (this.onAfterHide && !visible) { this.onAfterHide.call(null, this); } - this.emitter.emit('filters-toggled', tf, this, !isDisplayed); } /** @@ -177,7 +189,7 @@ export default class FiltersVisibility { return; } - this.emitter.off(['toggle-filters'], () => this.toggle()); + this.emitter.off(['show-filters'], (tf, visible) => this.show(visible)); this.btnEl.innerHTML = ''; Dom.remove(this.btnEl); diff --git a/src/modules/state.js b/src/modules/state.js index 8e0cc1c9..4d9a1016 100644 --- a/src/modules/state.js +++ b/src/modules/state.js @@ -180,7 +180,7 @@ export class State extends Feature { /** * Refresh page number field on page number changes * - * @param pageNb Current page number + * @param {Number} pageNb Current page number */ updatePage(pageNb) { this.pageNb = pageNb; @@ -190,7 +190,7 @@ export class State extends Feature { /** * Refresh page length field on page length changes * - * @param pageLength Current page length value + * @param {Number} pageLength Current page length value */ updatePageLength(pageLength) { this.pageLength = pageLength; @@ -201,7 +201,7 @@ export class State extends Feature { * Refresh column sorting information on sort changes * * @param index {Number} Column index - * @param descending {Boolean} Descending manner + * @param {Boolean} descending Descending manner */ updateSort(index, descending) { this.sort = { @@ -214,15 +214,19 @@ export class State extends Feature { /** * Refresh hidden columns information on columns visibility changes * - * @param hiddenCols {Array} Columns indexes + * @param {Array} hiddenCols Columns indexes */ updateColsVisibility(hiddenCols) { this.hiddenCols = hiddenCols; this.update(); } + /** + * Refresh filters visibility on filters visibility change + * + * @param {Boolean} visible Visibility flad + */ updateFiltersVisibility(visible) { - console.log('updateFiltersVisibility', visible); this.filtersVisibility = visible; this.update(); } @@ -255,11 +259,6 @@ export class State extends Feature { this.emitter.emit('change-page-results', tf, pageLength); } - // if (this.persistFiltersVisibility) { console.log('sync'); - // let filtersVisibility = state[this.filtersVisKey]; - // this.emitter.emit('toggle-filters', tf, filtersVisibility); - // } - this._syncSort(); this._syncColsVisibility(); this._syncFiltersVisibility(); @@ -355,6 +354,11 @@ export class State extends Feature { }); } + /** + * Sync filters visibility with stored information + * + * @private + */ _syncFiltersVisibility(){ if (!this.persistFiltersVisibility) { return; @@ -363,7 +367,7 @@ export class State extends Feature { let tf = this.tf; let filtersVisibility = state[this.filtersVisKey]; - this.emitter.emit('toggle-filters', tf, filtersVisibility); + this.emitter.emit('show-filters', tf, filtersVisibility); } /** diff --git a/test/test-state.js b/test/test-state.js index 69614414..6b45f2b8 100644 --- a/test/test-state.js +++ b/test/test-state.js @@ -133,6 +133,20 @@ test('Can update columns visibility', function() { deepEqual(state.state.col_2.hidden, true, 'Column 2 visibility updated'); }); +test('Can update filters visibility', function() { + // setup + state.persistFiltersVisibility = true; + state.state = {}; + + // act + state.updateFiltersVisibility(false); + state.persistFiltersVisibility = false; + + // assert + deepEqual(state.state.filters_visibility, false, + 'Filters visibility updated'); +}); + module('Tear-down'); test('Can destroy TF', function() { // setup