deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-01 22:32:49 +02:00
Code Issues Releases Wiki Activity

Added status bar feature

Browse source
This commit is contained in:
Max Guglielmi 2015-02-21 00:46:57 +11:00
parent b9e41827fb
commit 2b4880e8e8
9 changed files with 401 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,4 +1,3 @@
# Dependency directory
node_modules
npm-debug.log
*.js.map

2
dist/filtergrid.css vendored
View file

@ -1,6 +1,6 @@
/*------------------------------------------------------------------------
- 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
------------------------------------------------------------------------*/

8
dist/tablefilter.js vendored
View file

File diff suppressed because one or more lines are too long

117
src-es6/modules/statusBar.js Normal file
View 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
View file

@ -238,8 +238,6 @@ function TableFilter(id) {
this.externalFltEls = [];
//delays any filtering process if loader true
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
this.onFiltersLoaded = types.isFn(f.on_filters_loaded) ?
f.on_filters_loaded : null;
@ -622,7 +620,8 @@ function TableFilter(id) {
dropdown: null,
popupFilter: null,
clearButton: null,
help: null
help: null,
statusBar: null
};
/*** TF events ***/
@ -1136,7 +1135,10 @@ TableFilter.prototype = {
this.Cpt.rowsCounter.init();
}
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){
var Paging = require('modules/paging').Paging;
@ -1270,18 +1272,19 @@ TableFilter.prototype = {
o['_'+evt].call(null,o,s);
break;
}
if(o.status || o.statusBar){
o.StatusMsg('');
if(o.statusBar){
o.Cpt.statusBar.message('');
}
if(o.loader){
o.Cpt.loader.show('none');
}
}
if(this.loader || this.status || this.statusBar) {
if(this.loader || this.statusBar) {
try{
this.Cpt.loader.show('');
this.StatusMsg(o['msg'+evt]);
// this.StatusMsg(o['msg'+evt]);
this.Cpt.statusBar.message(this['msg'+evt]);
} catch(e){}
global.setTimeout(efx, this.execDelay);
} else {
@ -1442,7 +1445,8 @@ TableFilter.prototype = {
this.Cpt.paging.destroy();
}
if(this.statusBar){
this.RemoveStatusBar();
// this.RemoveStatusBar();
this.Cpt.statusBar.destroy();
}
if(this.rowsCounter){
this.Cpt.rowsCounter.destroy();
@ -2076,127 +2080,6 @@ TableFilter.prototype = {
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
- Params:

10
src/index.html
View file

@ -97,7 +97,7 @@
enable_default_theme: true,
// slc_filling_method: 'innerhtml',
paging: false,
paging_length: 2,
paging_length: 4,
// page_selector_type: 'input',
results_per_page: ['Results per page', [2,4,6]],
remember_grid_values: true,
@ -109,10 +109,14 @@
alternate_rows: true,
highlight_keywords: true,
match_case: false,
btn_reset: true
btn_reset: true,
status_bar: true,
// grid_layout: true,
// grid_width: '500px',
// grid_height: '200px'
// grid_height: '200px',
on_before_show_msg: function(tf){
console.log('on_before_show_msg');
}
});
tf.init();

130
src/modules/statusBar.js Normal file
View 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
View 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
View 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');
});
});