mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-06-16 12:45:49 +02:00
Added status bar feature
This commit is contained in:
parent
b9e41827fb
commit
2b4880e8e8
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -1,4 +1,3 @@
|
||||||
# Dependency directory
|
|
||||||
node_modules
|
node_modules
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
*.js.map
|
*.js.map
|
||||||
|
|
2
dist/filtergrid.css
vendored
2
dist/filtergrid.css
vendored
|
@ -1,6 +1,6 @@
|
||||||
/*------------------------------------------------------------------------
|
/*------------------------------------------------------------------------
|
||||||
- TableFilter stylesheet by Max Guglielmi
|
- TableFilter stylesheet by Max Guglielmi
|
||||||
- (build date: Fri Feb 20 2015 15:11:39)
|
- (build date: Sat Feb 21 2015 00:45:41)
|
||||||
- Edit below for your projects' needs
|
- Edit below for your projects' needs
|
||||||
------------------------------------------------------------------------*/
|
------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
|
8
dist/tablefilter.js
vendored
8
dist/tablefilter.js
vendored
File diff suppressed because one or more lines are too long
117
src-es6/modules/statusBar.js
Normal file
117
src-es6/modules/statusBar.js
Normal file
|
@ -0,0 +1,117 @@
|
||||||
|
import {Dom} from '../dom';
|
||||||
|
import {Event} from '../event';
|
||||||
|
import {Types} from '../types';
|
||||||
|
import {Helpers} from '../helpers';
|
||||||
|
|
||||||
|
export class StatusBar{
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Status bar UI component
|
||||||
|
* @param {Object} tf TableFilter instance
|
||||||
|
*/
|
||||||
|
constructor(tf){
|
||||||
|
// Configuration object
|
||||||
|
var f = tf.fObj || {};
|
||||||
|
|
||||||
|
//id of custom container element
|
||||||
|
this.statusBarTgtId = f.status_bar_target_id || null;
|
||||||
|
//element containing status bar label
|
||||||
|
this.statusBarDiv = null;
|
||||||
|
//status bar
|
||||||
|
this.statusBarSpan = null;
|
||||||
|
//status bar label
|
||||||
|
this.statusBarSpanText = null;
|
||||||
|
//defines status bar text
|
||||||
|
this.statusBarText = f.status_bar_text || '';
|
||||||
|
//defines css class status bar
|
||||||
|
this.statusBarCssClass = f.status_bar_css_class || 'status';
|
||||||
|
//delay for status bar clearing
|
||||||
|
this.statusBarCloseDelay = 250;
|
||||||
|
|
||||||
|
//calls function before message is displayed
|
||||||
|
this.onBeforeShowMsg = Types.isFn(f.on_before_show_msg) ?
|
||||||
|
f.on_before_show_msg : null;
|
||||||
|
//calls function after message is displayed
|
||||||
|
this.onAfterShowMsg = Types.isFn(f.on_after_show_msg) ?
|
||||||
|
f.on_after_show_msg : null;
|
||||||
|
|
||||||
|
this.tf = tf;
|
||||||
|
}
|
||||||
|
|
||||||
|
init(){
|
||||||
|
var tf = this.tf;
|
||||||
|
if(!tf.hasGrid && !tf.isFirstLoad){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//status bar container
|
||||||
|
var statusDiv = Dom.create('div', ['id', tf.prfxStatus+tf.id]);
|
||||||
|
statusDiv.className = this.statusBarCssClass;
|
||||||
|
|
||||||
|
//status bar label
|
||||||
|
var statusSpan = Dom.create('span', ['id', tf.prfxStatusSpan+tf.id]);
|
||||||
|
//preceding text
|
||||||
|
var statusSpanText = Dom.create('span', ['id', tf.prfxStatusTxt+tf.id]);
|
||||||
|
statusSpanText.appendChild(Dom.text(this.statusBarText));
|
||||||
|
|
||||||
|
// target element container
|
||||||
|
if(!this.statusBarTgtId){
|
||||||
|
tf.SetTopDiv();
|
||||||
|
}
|
||||||
|
var targetEl = (!this.statusBarTgtId) ?
|
||||||
|
tf.lDiv : Dom.id(this.statusBarTgtId);
|
||||||
|
|
||||||
|
// TODO: use alternative to outerHTML
|
||||||
|
if(this.statusBarDiv && Helpers.isIE()){
|
||||||
|
this.statusBarDiv.outerHTML = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
//default container: 'lDiv'
|
||||||
|
if(!this.statusBarTgtId){
|
||||||
|
statusDiv.appendChild(statusSpanText);
|
||||||
|
statusDiv.appendChild(statusSpan);
|
||||||
|
targetEl.appendChild(statusDiv);
|
||||||
|
} else {
|
||||||
|
// custom container, no need to append statusDiv
|
||||||
|
targetEl.appendChild(statusSpanText);
|
||||||
|
targetEl.appendChild(statusSpan);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.statusBarDiv = statusDiv;
|
||||||
|
this.statusBarSpan = statusSpan;
|
||||||
|
this.statusBarSpanText = statusSpanText;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
message(t=''){
|
||||||
|
var tf = this.tf;
|
||||||
|
if(!tf.statusBar || !this.statusBarSpan){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(this.onBeforeShowMsg){
|
||||||
|
this.onBeforeShowMsg.call(null, this.tf, t);
|
||||||
|
}
|
||||||
|
|
||||||
|
var d = t==='' ? this.statusBarCloseDelay : 1;
|
||||||
|
window.setTimeout(() => {
|
||||||
|
this.statusBarSpan.innerHTML = t;
|
||||||
|
if(this.onAfterShowMsg){
|
||||||
|
this.onAfterShowMsg.call(null, this.tf, t);
|
||||||
|
}
|
||||||
|
}, d);
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy(){
|
||||||
|
var tf = this.tf;
|
||||||
|
if(!tf.hasGrid || !this.statusBarDiv){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.statusBarDiv.innerHTML = '';
|
||||||
|
this.statusBarDiv.parentNode.removeChild(this.statusBarDiv);
|
||||||
|
this.statusBarSpan = null;
|
||||||
|
this.statusBarSpanText = null;
|
||||||
|
this.statusBarDiv = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
143
src/core.js
143
src/core.js
|
@ -238,8 +238,6 @@ function TableFilter(id) {
|
||||||
this.externalFltEls = [];
|
this.externalFltEls = [];
|
||||||
//delays any filtering process if loader true
|
//delays any filtering process if loader true
|
||||||
this.execDelay = !isNaN(f.exec_delay) ? parseInt(f.exec_delay,10) : 100;
|
this.execDelay = !isNaN(f.exec_delay) ? parseInt(f.exec_delay,10) : 100;
|
||||||
//enables/disables status messages
|
|
||||||
this.status = f.status===true ? true : false;
|
|
||||||
//calls function when filters grid loaded
|
//calls function when filters grid loaded
|
||||||
this.onFiltersLoaded = types.isFn(f.on_filters_loaded) ?
|
this.onFiltersLoaded = types.isFn(f.on_filters_loaded) ?
|
||||||
f.on_filters_loaded : null;
|
f.on_filters_loaded : null;
|
||||||
|
@ -622,7 +620,8 @@ function TableFilter(id) {
|
||||||
dropdown: null,
|
dropdown: null,
|
||||||
popupFilter: null,
|
popupFilter: null,
|
||||||
clearButton: null,
|
clearButton: null,
|
||||||
help: null
|
help: null,
|
||||||
|
statusBar: null
|
||||||
};
|
};
|
||||||
|
|
||||||
/*** TF events ***/
|
/*** TF events ***/
|
||||||
|
@ -1136,7 +1135,10 @@ TableFilter.prototype = {
|
||||||
this.Cpt.rowsCounter.init();
|
this.Cpt.rowsCounter.init();
|
||||||
}
|
}
|
||||||
if(this.statusBar){
|
if(this.statusBar){
|
||||||
this.SetStatusBar();
|
// this.SetStatusBar();
|
||||||
|
var StatusBar = require('modules/statusBar').StatusBar;
|
||||||
|
this.Cpt.statusBar = new StatusBar(this);
|
||||||
|
this.Cpt.statusBar.init();
|
||||||
}
|
}
|
||||||
if(this.paging){
|
if(this.paging){
|
||||||
var Paging = require('modules/paging').Paging;
|
var Paging = require('modules/paging').Paging;
|
||||||
|
@ -1270,18 +1272,19 @@ TableFilter.prototype = {
|
||||||
o['_'+evt].call(null,o,s);
|
o['_'+evt].call(null,o,s);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
if(o.status || o.statusBar){
|
if(o.statusBar){
|
||||||
o.StatusMsg('');
|
o.Cpt.statusBar.message('');
|
||||||
}
|
}
|
||||||
if(o.loader){
|
if(o.loader){
|
||||||
o.Cpt.loader.show('none');
|
o.Cpt.loader.show('none');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.loader || this.status || this.statusBar) {
|
if(this.loader || this.statusBar) {
|
||||||
try{
|
try{
|
||||||
this.Cpt.loader.show('');
|
this.Cpt.loader.show('');
|
||||||
this.StatusMsg(o['msg'+evt]);
|
// this.StatusMsg(o['msg'+evt]);
|
||||||
|
this.Cpt.statusBar.message(this['msg'+evt]);
|
||||||
} catch(e){}
|
} catch(e){}
|
||||||
global.setTimeout(efx, this.execDelay);
|
global.setTimeout(efx, this.execDelay);
|
||||||
} else {
|
} else {
|
||||||
|
@ -1442,7 +1445,8 @@ TableFilter.prototype = {
|
||||||
this.Cpt.paging.destroy();
|
this.Cpt.paging.destroy();
|
||||||
}
|
}
|
||||||
if(this.statusBar){
|
if(this.statusBar){
|
||||||
this.RemoveStatusBar();
|
// this.RemoveStatusBar();
|
||||||
|
this.Cpt.statusBar.destroy();
|
||||||
}
|
}
|
||||||
if(this.rowsCounter){
|
if(this.rowsCounter){
|
||||||
this.Cpt.rowsCounter.destroy();
|
this.Cpt.rowsCounter.destroy();
|
||||||
|
@ -2076,127 +2080,6 @@ TableFilter.prototype = {
|
||||||
return [optArray,optTxt];
|
return [optArray,optTxt];
|
||||||
},
|
},
|
||||||
|
|
||||||
/*====================================================
|
|
||||||
- Generates status bar label
|
|
||||||
=====================================================*/
|
|
||||||
SetStatusBar: function(){
|
|
||||||
if(!this.hasGrid && !this.isFirstLoad){
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var f = this.fObj;
|
|
||||||
//id of custom container element
|
|
||||||
this.statusBarTgtId = f.status_bar_target_id || null;
|
|
||||||
//element containing status bar label
|
|
||||||
this.statusBarDiv = null;
|
|
||||||
//status bar
|
|
||||||
this.statusBarSpan = null;
|
|
||||||
//status bar label
|
|
||||||
this.statusBarSpanText = null;
|
|
||||||
//defines status bar text
|
|
||||||
this.statusBarText = f.status_bar_text || '';
|
|
||||||
//defines css class status bar
|
|
||||||
this.statusBarCssClass = f.status_bar_css_class || 'status';
|
|
||||||
//delay for status bar clearing
|
|
||||||
this.statusBarCloseDelay = 250;
|
|
||||||
//status bar container
|
|
||||||
var statusDiv = dom.create('div', ['id',this.prfxStatus+this.id]);
|
|
||||||
statusDiv.className = this.statusBarCssClass;
|
|
||||||
//status bar label
|
|
||||||
var statusSpan = dom.create(
|
|
||||||
'span', ['id',this.prfxStatusSpan+this.id]);
|
|
||||||
//preceding text
|
|
||||||
var statusSpanText = dom.create(
|
|
||||||
'span', ['id',this.prfxStatusTxt+this.id]);
|
|
||||||
statusSpanText.appendChild(dom.text(this.statusBarText));
|
|
||||||
//calls function before message is displayed
|
|
||||||
this.onBeforeShowMsg = types.isFn(f.on_before_show_msg) ?
|
|
||||||
f.on_before_show_msg : null;
|
|
||||||
//calls function after message is displayed
|
|
||||||
this.onAfterShowMsg = types.isFn(f.on_after_show_msg) ?
|
|
||||||
f.on_after_show_msg : null;
|
|
||||||
|
|
||||||
// target element container
|
|
||||||
if(!this.statusBarTgtId){
|
|
||||||
this.SetTopDiv();
|
|
||||||
}
|
|
||||||
var targetEl = (!this.statusBarTgtId) ?
|
|
||||||
this.lDiv : dom.id(this.statusBarTgtId);
|
|
||||||
|
|
||||||
if(this.statusBarDiv && hlp.isIE()){
|
|
||||||
this.statusBarDiv.outerHTML = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
//default container: 'lDiv'
|
|
||||||
if(!this.statusBarTgtId){
|
|
||||||
statusDiv.appendChild(statusSpanText);
|
|
||||||
statusDiv.appendChild(statusSpan);
|
|
||||||
targetEl.appendChild(statusDiv);
|
|
||||||
} else {
|
|
||||||
// custom container, no need to append statusDiv
|
|
||||||
targetEl.appendChild(statusSpanText);
|
|
||||||
targetEl.appendChild(statusSpan);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.statusBarDiv = dom.id( this.prfxStatus+this.id );
|
|
||||||
this.statusBarSpan = dom.id( this.prfxStatusSpan+this.id );
|
|
||||||
this.statusBarSpanText = dom.id( this.prfxStatusTxt+this.id );
|
|
||||||
},
|
|
||||||
|
|
||||||
/*====================================================
|
|
||||||
- Removes status bar div
|
|
||||||
=====================================================*/
|
|
||||||
RemoveStatusBar: function(){
|
|
||||||
if(!this.hasGrid && !this.statusBarDiv){
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.statusBarDiv.innerHTML = '';
|
|
||||||
this.statusBarDiv.parentNode.removeChild(this.statusBarDiv);
|
|
||||||
this.statusBarSpan = null;
|
|
||||||
this.statusBarSpanText = null;
|
|
||||||
this.statusBarDiv = null;
|
|
||||||
},
|
|
||||||
|
|
||||||
/*====================================================
|
|
||||||
- sets status messages
|
|
||||||
=====================================================*/
|
|
||||||
StatusMsg: function(t){
|
|
||||||
if(!t){
|
|
||||||
this.StatusMsg('');
|
|
||||||
}
|
|
||||||
if(this.status){ this.WinStatusMsg(t); }
|
|
||||||
if(this.statusBar){ this.StatusBarMsg(t); }
|
|
||||||
},
|
|
||||||
|
|
||||||
/*====================================================
|
|
||||||
- sets window status messages
|
|
||||||
=====================================================*/
|
|
||||||
WinStatusMsg: function(t){
|
|
||||||
if(!this.status){
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(this.onBeforeShowMsg){ this.onBeforeShowMsg.call(null, this, t); }
|
|
||||||
global.status = t;
|
|
||||||
if(this.onAfterShowMsg){ this.onAfterShowMsg.call(null, this, t); }
|
|
||||||
},
|
|
||||||
|
|
||||||
/*====================================================
|
|
||||||
- sets status bar messages
|
|
||||||
=====================================================*/
|
|
||||||
StatusBarMsg: function(t){
|
|
||||||
if(!this.statusBar || !this.statusBarSpan){
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(this.onBeforeShowMsg){ this.onBeforeShowMsg.call(null, this, t); }
|
|
||||||
var o = this;
|
|
||||||
function setMsg(){
|
|
||||||
o.statusBarSpan.innerHTML = t;
|
|
||||||
if(o.onAfterShowMsg){ o.onAfterShowMsg.call(null, o, t); }
|
|
||||||
}
|
|
||||||
var d = t==='' ? this.statusBarCloseDelay : 1;
|
|
||||||
global.setTimeout(setMsg, d);
|
|
||||||
},
|
|
||||||
|
|
||||||
/*====================================================
|
/*====================================================
|
||||||
- inserts or removes input watermark
|
- inserts or removes input watermark
|
||||||
- Params:
|
- Params:
|
||||||
|
|
|
@ -97,7 +97,7 @@
|
||||||
enable_default_theme: true,
|
enable_default_theme: true,
|
||||||
// slc_filling_method: 'innerhtml',
|
// slc_filling_method: 'innerhtml',
|
||||||
paging: false,
|
paging: false,
|
||||||
paging_length: 2,
|
paging_length: 4,
|
||||||
// page_selector_type: 'input',
|
// page_selector_type: 'input',
|
||||||
results_per_page: ['Results per page', [2,4,6]],
|
results_per_page: ['Results per page', [2,4,6]],
|
||||||
remember_grid_values: true,
|
remember_grid_values: true,
|
||||||
|
@ -109,10 +109,14 @@
|
||||||
alternate_rows: true,
|
alternate_rows: true,
|
||||||
highlight_keywords: true,
|
highlight_keywords: true,
|
||||||
match_case: false,
|
match_case: false,
|
||||||
btn_reset: true
|
btn_reset: true,
|
||||||
|
status_bar: true,
|
||||||
// grid_layout: true,
|
// grid_layout: true,
|
||||||
// grid_width: '500px',
|
// grid_width: '500px',
|
||||||
// grid_height: '200px'
|
// grid_height: '200px',
|
||||||
|
on_before_show_msg: function(tf){
|
||||||
|
console.log('on_before_show_msg');
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
tf.init();
|
tf.init();
|
||||||
|
|
130
src/modules/statusBar.js
Normal file
130
src/modules/statusBar.js
Normal file
|
@ -0,0 +1,130 @@
|
||||||
|
define(["exports", "../dom", "../event", "../types", "../helpers"], function (exports, _dom, _event, _types, _helpers) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var _classProps = function (child, staticProps, instanceProps) {
|
||||||
|
if (staticProps) Object.defineProperties(child, staticProps);
|
||||||
|
if (instanceProps) Object.defineProperties(child.prototype, instanceProps);
|
||||||
|
};
|
||||||
|
|
||||||
|
var Dom = _dom.Dom;
|
||||||
|
var Event = _event.Event;
|
||||||
|
var Types = _types.Types;
|
||||||
|
var Helpers = _helpers.Helpers;
|
||||||
|
var StatusBar = (function () {
|
||||||
|
var StatusBar = function StatusBar(tf) {
|
||||||
|
// Configuration object
|
||||||
|
var f = tf.fObj || {};
|
||||||
|
|
||||||
|
//id of custom container element
|
||||||
|
this.statusBarTgtId = f.status_bar_target_id || null;
|
||||||
|
//element containing status bar label
|
||||||
|
this.statusBarDiv = null;
|
||||||
|
//status bar
|
||||||
|
this.statusBarSpan = null;
|
||||||
|
//status bar label
|
||||||
|
this.statusBarSpanText = null;
|
||||||
|
//defines status bar text
|
||||||
|
this.statusBarText = f.status_bar_text || "";
|
||||||
|
//defines css class status bar
|
||||||
|
this.statusBarCssClass = f.status_bar_css_class || "status";
|
||||||
|
//delay for status bar clearing
|
||||||
|
this.statusBarCloseDelay = 250;
|
||||||
|
|
||||||
|
//calls function before message is displayed
|
||||||
|
this.onBeforeShowMsg = Types.isFn(f.on_before_show_msg) ? f.on_before_show_msg : null;
|
||||||
|
//calls function after message is displayed
|
||||||
|
this.onAfterShowMsg = Types.isFn(f.on_after_show_msg) ? f.on_after_show_msg : null;
|
||||||
|
|
||||||
|
this.tf = tf;
|
||||||
|
};
|
||||||
|
|
||||||
|
_classProps(StatusBar, null, {
|
||||||
|
init: {
|
||||||
|
writable: true,
|
||||||
|
value: function () {
|
||||||
|
var tf = this.tf;
|
||||||
|
if (!tf.hasGrid && !tf.isFirstLoad) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//status bar container
|
||||||
|
var statusDiv = Dom.create("div", ["id", tf.prfxStatus + tf.id]);
|
||||||
|
statusDiv.className = this.statusBarCssClass;
|
||||||
|
|
||||||
|
//status bar label
|
||||||
|
var statusSpan = Dom.create("span", ["id", tf.prfxStatusSpan + tf.id]);
|
||||||
|
//preceding text
|
||||||
|
var statusSpanText = Dom.create("span", ["id", tf.prfxStatusTxt + tf.id]);
|
||||||
|
statusSpanText.appendChild(Dom.text(this.statusBarText));
|
||||||
|
|
||||||
|
// target element container
|
||||||
|
if (!this.statusBarTgtId) {
|
||||||
|
tf.SetTopDiv();
|
||||||
|
}
|
||||||
|
var targetEl = (!this.statusBarTgtId) ? tf.lDiv : Dom.id(this.statusBarTgtId);
|
||||||
|
|
||||||
|
// TODO: use alternative to outerHTML
|
||||||
|
if (this.statusBarDiv && Helpers.isIE()) {
|
||||||
|
this.statusBarDiv.outerHTML = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
//default container: 'lDiv'
|
||||||
|
if (!this.statusBarTgtId) {
|
||||||
|
statusDiv.appendChild(statusSpanText);
|
||||||
|
statusDiv.appendChild(statusSpan);
|
||||||
|
targetEl.appendChild(statusDiv);
|
||||||
|
} else {
|
||||||
|
// custom container, no need to append statusDiv
|
||||||
|
targetEl.appendChild(statusSpanText);
|
||||||
|
targetEl.appendChild(statusSpan);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.statusBarDiv = statusDiv;
|
||||||
|
this.statusBarSpan = statusSpan;
|
||||||
|
this.statusBarSpanText = statusSpanText;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
message: {
|
||||||
|
writable: true,
|
||||||
|
value: function (t) {
|
||||||
|
var _this = this;
|
||||||
|
if (t === undefined) t = "";
|
||||||
|
var tf = this.tf;
|
||||||
|
if (!tf.statusBar || !this.statusBarSpan) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.onBeforeShowMsg) {
|
||||||
|
this.onBeforeShowMsg.call(null, this.tf, t);
|
||||||
|
}
|
||||||
|
|
||||||
|
var d = t === "" ? this.statusBarCloseDelay : 1;
|
||||||
|
window.setTimeout(function () {
|
||||||
|
_this.statusBarSpan.innerHTML = t;
|
||||||
|
if (_this.onAfterShowMsg) {
|
||||||
|
_this.onAfterShowMsg.call(null, _this.tf, t);
|
||||||
|
}
|
||||||
|
}, d);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroy: {
|
||||||
|
writable: true,
|
||||||
|
value: function () {
|
||||||
|
var tf = this.tf;
|
||||||
|
if (!tf.hasGrid || !this.statusBarDiv) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.statusBarDiv.innerHTML = "";
|
||||||
|
this.statusBarDiv.parentNode.removeChild(this.statusBarDiv);
|
||||||
|
this.statusBarSpan = null;
|
||||||
|
this.statusBarSpanText = null;
|
||||||
|
this.statusBarDiv = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return StatusBar;
|
||||||
|
})();
|
||||||
|
|
||||||
|
exports.StatusBar = StatusBar;
|
||||||
|
});
|
82
test/test-status-bar.html
Normal file
82
test/test-status-bar.html
Normal file
|
@ -0,0 +1,82 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>TableFilter status bar</title>
|
||||||
|
<link rel="stylesheet" href="libs/qunit/qunit.css">
|
||||||
|
<link rel="stylesheet" href="../dist/filtergrid.css">
|
||||||
|
<script src="libs/qunit/qunit.js"></script>
|
||||||
|
<script>
|
||||||
|
// Defer Qunit so RequireJS can work its magic and resolve all modules.
|
||||||
|
QUnit.config.autostart = false;
|
||||||
|
QUnit.config.autoload = false;
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<table id="demo" cellpadding="0" cellspacing="0">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>From</th>
|
||||||
|
<th>Destination</th>
|
||||||
|
<th>Road Distance (km)</th>
|
||||||
|
<th>By Air (hrs)</th>
|
||||||
|
<th>By Rail (hrs)</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Adelaide</td>
|
||||||
|
<td>1412</td>
|
||||||
|
<td>1.4</td>
|
||||||
|
<td>25.3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Brisbane</td>
|
||||||
|
<td>982</td>
|
||||||
|
<td>1.5</td>
|
||||||
|
<td>16</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Canberra</td>
|
||||||
|
<td>286</td>
|
||||||
|
<td>.6</td>
|
||||||
|
<td>4.3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Melbourne</td>
|
||||||
|
<td>872</td>
|
||||||
|
<td>1.1</td>
|
||||||
|
<td>10.5</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Adelaide</strong></td>
|
||||||
|
<td>Perth</td>
|
||||||
|
<td>2781</td>
|
||||||
|
<td>3.1</td>
|
||||||
|
<td>38</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Adelaide</strong></td>
|
||||||
|
<td>Alice Springs</td>
|
||||||
|
<td>1533</td>
|
||||||
|
<td>2</td>
|
||||||
|
<td>20.25</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Adelaide</strong></td>
|
||||||
|
<td>Brisbane</td>
|
||||||
|
<td>2045</td>
|
||||||
|
<td>2.15</td>
|
||||||
|
<td>40</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<script data-main="test-status-bar" src="../libs/requirejs/require.js"></script>
|
||||||
|
|
||||||
|
<div id="qunit"></div>
|
||||||
|
<div id="qunit-fixture"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
47
test/test-status-bar.js
Normal file
47
test/test-status-bar.js
Normal file
|
@ -0,0 +1,47 @@
|
||||||
|
requirejs(['test-config', '../src/core'], function(config, TableFilter){
|
||||||
|
|
||||||
|
QUnit.start();
|
||||||
|
|
||||||
|
var StatusBar = require('modules/statusBar').StatusBar,
|
||||||
|
types = require('types').Types,
|
||||||
|
dom = require('dom').Dom;
|
||||||
|
|
||||||
|
var tf = new TableFilter('demo', {
|
||||||
|
status_bar: true
|
||||||
|
});
|
||||||
|
tf.init();
|
||||||
|
|
||||||
|
var statusBar = tf.Cpt.statusBar;
|
||||||
|
module('Sanity checks');
|
||||||
|
test('Status bar component', function() {
|
||||||
|
deepEqual(statusBar instanceof StatusBar, true, 'StatusBar type');
|
||||||
|
notEqual(statusBar.statusBarDiv, null, 'statusBarDiv property');
|
||||||
|
});
|
||||||
|
|
||||||
|
module('UI elements');
|
||||||
|
test('Status bar UI elements', function() {
|
||||||
|
var container = statusBar.statusBarDiv,
|
||||||
|
label = statusBar.statusBarSpanText;
|
||||||
|
deepEqual(container.nodeName, 'DIV', 'Status bar container');
|
||||||
|
deepEqual(label.nodeName, 'SPAN', 'Status bar label');
|
||||||
|
});
|
||||||
|
|
||||||
|
module('Destroy');
|
||||||
|
test('Remove UI', function() {
|
||||||
|
statusBar.destroy();
|
||||||
|
var container = statusBar.statusBarDiv,
|
||||||
|
label = statusBar.statusBarSpanText;
|
||||||
|
deepEqual(container, null, 'Status bar container removed');
|
||||||
|
deepEqual(label, null, 'Status bar button removed');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Re-set UI', function() {
|
||||||
|
statusBar.statusBarText = '→←';
|
||||||
|
statusBar.init();
|
||||||
|
|
||||||
|
var label = statusBar.statusBarSpanText;
|
||||||
|
notEqual(
|
||||||
|
dom.getText(label).indexOf('→←'), -1, 'Status bar text');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
Loading…
Reference in a new issue