mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-06-16 12:45:49 +02:00
Added tests for Clear button
This commit is contained in:
parent
0f64bb2f84
commit
79468f5185
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: Thu Feb 19 2015 15:38:38)
|
- (build date: Thu Feb 19 2015 16:23:57)
|
||||||
- Edit below for your projects' needs
|
- Edit below for your projects' needs
|
||||||
------------------------------------------------------------------------*/
|
------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
|
87
src-es6/modules/clearButton.js
Normal file
87
src-es6/modules/clearButton.js
Normal file
|
@ -0,0 +1,87 @@
|
||||||
|
import {Dom} from '../dom';
|
||||||
|
import {Event} from '../event';
|
||||||
|
|
||||||
|
export class ClearButton{
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear button component
|
||||||
|
* @param {Object} tf TableFilter instance
|
||||||
|
*/
|
||||||
|
constructor(tf){
|
||||||
|
// Configuration object
|
||||||
|
var f = tf.fObj;
|
||||||
|
|
||||||
|
//id of container element
|
||||||
|
this.btnResetTgtId = f.btn_reset_target_id || null;
|
||||||
|
//reset button element
|
||||||
|
this.btnResetEl = null;
|
||||||
|
//defines reset text
|
||||||
|
this.btnResetText = f.btn_reset_text || 'Reset';
|
||||||
|
//defines reset button tooltip
|
||||||
|
this.btnResetTooltip = f.btn_reset_tooltip || 'Clear filters';
|
||||||
|
//defines reset button innerHtml
|
||||||
|
this.btnResetHtml = f.btn_reset_html ||
|
||||||
|
(!tf.enableIcons ? null :
|
||||||
|
'<input type="button" value="" class="'+tf.btnResetCssClass+'" ' +
|
||||||
|
'title="'+this.btnResetTooltip+'" />');
|
||||||
|
|
||||||
|
this.tf = tf;
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick(){
|
||||||
|
this.tf.ClearFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Build DOM elements
|
||||||
|
*/
|
||||||
|
init(){
|
||||||
|
var tf = this.tf;
|
||||||
|
|
||||||
|
if(!tf.hasGrid && !tf.isFirstLoad && tf.btnResetEl){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var resetspan = Dom.create('span', ['id', tf.prfxResetSpan+tf.id]);
|
||||||
|
|
||||||
|
// reset button is added to defined element
|
||||||
|
if(!this.btnResetTgtId){
|
||||||
|
tf.SetTopDiv();
|
||||||
|
}
|
||||||
|
var targetEl = !this.btnResetTgtId ?
|
||||||
|
tf.rDiv : Dom.id(this.btnResetTgtId);
|
||||||
|
targetEl.appendChild(resetspan);
|
||||||
|
|
||||||
|
if(!this.btnResetHtml){
|
||||||
|
var fltreset = Dom.create('a', ['href', 'javascript:void(0);']);
|
||||||
|
fltreset.className = tf.btnResetCssClass;
|
||||||
|
fltreset.appendChild(Dom.text(this.btnResetText));
|
||||||
|
resetspan.appendChild(fltreset);
|
||||||
|
// fltreset.onclick = this.Evt._Clear;
|
||||||
|
Event.add(fltreset, 'click', () => { this.onClick(); });
|
||||||
|
} else {
|
||||||
|
resetspan.innerHTML = this.btnResetHtml;
|
||||||
|
var resetEl = resetspan.firstChild;
|
||||||
|
// resetEl.onclick = this.Evt._Clear;
|
||||||
|
Event.add(resetEl, 'click', () => { this.onClick(); });
|
||||||
|
}
|
||||||
|
this.btnResetEl = resetspan.firstChild;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove clear button UI
|
||||||
|
*/
|
||||||
|
destroy(){
|
||||||
|
var tf = this.tf;
|
||||||
|
|
||||||
|
if(!tf.hasGrid || !this.btnResetEl){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var resetspan = Dom.id(tf.prfxResetSpan+tf.id);
|
||||||
|
if(resetspan){
|
||||||
|
resetspan.parentNode.removeChild(resetspan);
|
||||||
|
}
|
||||||
|
this.btnResetEl = null;
|
||||||
|
}
|
||||||
|
}
|
98
src/modules/clearButton.js
Normal file
98
src/modules/clearButton.js
Normal file
|
@ -0,0 +1,98 @@
|
||||||
|
define(["exports", "../dom", "../event"], function (exports, _dom, _event) {
|
||||||
|
"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 ClearButton = (function () {
|
||||||
|
var ClearButton = function ClearButton(tf) {
|
||||||
|
// Configuration object
|
||||||
|
var f = tf.fObj;
|
||||||
|
|
||||||
|
//id of container element
|
||||||
|
this.btnResetTgtId = f.btn_reset_target_id || null;
|
||||||
|
//reset button element
|
||||||
|
this.btnResetEl = null;
|
||||||
|
//defines reset text
|
||||||
|
this.btnResetText = f.btn_reset_text || "Reset";
|
||||||
|
//defines reset button tooltip
|
||||||
|
this.btnResetTooltip = f.btn_reset_tooltip || "Clear filters";
|
||||||
|
//defines reset button innerHtml
|
||||||
|
this.btnResetHtml = f.btn_reset_html || (!tf.enableIcons ? null : "<input type=\"button\" value=\"\" class=\"" + tf.btnResetCssClass + "\" " + "title=\"" + this.btnResetTooltip + "\" />");
|
||||||
|
|
||||||
|
this.tf = tf;
|
||||||
|
};
|
||||||
|
|
||||||
|
_classProps(ClearButton, null, {
|
||||||
|
onClick: {
|
||||||
|
writable: true,
|
||||||
|
value: function () {
|
||||||
|
this.tf.ClearFilters();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
init: {
|
||||||
|
writable: true,
|
||||||
|
value: function () {
|
||||||
|
var _this = this;
|
||||||
|
var tf = this.tf;
|
||||||
|
|
||||||
|
if (!tf.hasGrid && !tf.isFirstLoad && tf.btnResetEl) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var resetspan = Dom.create("span", ["id", tf.prfxResetSpan + tf.id]);
|
||||||
|
|
||||||
|
// reset button is added to defined element
|
||||||
|
if (!this.btnResetTgtId) {
|
||||||
|
tf.SetTopDiv();
|
||||||
|
}
|
||||||
|
var targetEl = !this.btnResetTgtId ? tf.rDiv : Dom.id(this.btnResetTgtId);
|
||||||
|
targetEl.appendChild(resetspan);
|
||||||
|
|
||||||
|
if (!this.btnResetHtml) {
|
||||||
|
var fltreset = Dom.create("a", ["href", "javascript:void(0);"]);
|
||||||
|
fltreset.className = tf.btnResetCssClass;
|
||||||
|
fltreset.appendChild(Dom.text(this.btnResetText));
|
||||||
|
resetspan.appendChild(fltreset);
|
||||||
|
// fltreset.onclick = this.Evt._Clear;
|
||||||
|
Event.add(fltreset, "click", function () {
|
||||||
|
_this.onClick();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
resetspan.innerHTML = this.btnResetHtml;
|
||||||
|
var resetEl = resetspan.firstChild;
|
||||||
|
// resetEl.onclick = this.Evt._Clear;
|
||||||
|
Event.add(resetEl, "click", function () {
|
||||||
|
_this.onClick();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.btnResetEl = resetspan.firstChild;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroy: {
|
||||||
|
writable: true,
|
||||||
|
value: function () {
|
||||||
|
var tf = this.tf;
|
||||||
|
|
||||||
|
if (!tf.hasGrid || !this.btnResetEl) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var resetspan = Dom.id(tf.prfxResetSpan + tf.id);
|
||||||
|
if (resetspan) {
|
||||||
|
resetspan.parentNode.removeChild(resetspan);
|
||||||
|
}
|
||||||
|
this.btnResetEl = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return ClearButton;
|
||||||
|
})();
|
||||||
|
|
||||||
|
exports.ClearButton = ClearButton;
|
||||||
|
});
|
1
src/modules/clearButton.js.map
Normal file
1
src/modules/clearButton.js.map
Normal file
File diff suppressed because one or more lines are too long
82
test/test-clear-button.html
Normal file
82
test/test-clear-button.html
Normal file
|
@ -0,0 +1,82 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>TableFilter clear button</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-clear-button" src="../libs/requirejs/require.js"></script>
|
||||||
|
|
||||||
|
<div id="qunit"></div>
|
||||||
|
<div id="qunit-fixture"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
47
test/test-clear-button.js
Normal file
47
test/test-clear-button.js
Normal file
|
@ -0,0 +1,47 @@
|
||||||
|
requirejs(['test-config', '../src/core'], function(config, TableFilter){
|
||||||
|
|
||||||
|
QUnit.start();
|
||||||
|
|
||||||
|
var ClearButton = require('modules/clearButton').ClearButton,
|
||||||
|
types = require('types').Types,
|
||||||
|
dom = require('dom').Dom;
|
||||||
|
|
||||||
|
var tf = new TableFilter('demo', {
|
||||||
|
btn_reset: true
|
||||||
|
});
|
||||||
|
tf.init();
|
||||||
|
|
||||||
|
var clearButton = tf.Cpt.clearButton;
|
||||||
|
module('Sanity checks');
|
||||||
|
test('Clear button component', function() {
|
||||||
|
deepEqual(clearButton instanceof ClearButton, true, 'ClearButton type');
|
||||||
|
notEqual(clearButton, null, 'ClearButton instanciated');
|
||||||
|
notEqual(clearButton.btnResetEl, null, 'btnResetEl property');
|
||||||
|
});
|
||||||
|
|
||||||
|
module('UI elements');
|
||||||
|
test('ClearButton UI elements', function() {
|
||||||
|
var container = clearButton.btnResetEl;
|
||||||
|
deepEqual(container.nodeName, 'INPUT', 'Clear button container');
|
||||||
|
deepEqual(container.parentNode.id, tf.prfxResetSpan+tf.id, 'Container id');
|
||||||
|
});
|
||||||
|
|
||||||
|
module('Destroy and re-init');
|
||||||
|
test('Remove UI', function() {
|
||||||
|
clearButton.destroy();
|
||||||
|
var btnResetEl = tf.Cpt.clearButton.btnResetEl;
|
||||||
|
deepEqual(btnResetEl, null, 'Clear button is removed');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Re-set UI', function() {
|
||||||
|
tf.enableIcons = false;
|
||||||
|
tf.Cpt.clearButton.btnResetHtml = null;
|
||||||
|
tf.Cpt.clearButton.btnResetText = 'Clear';
|
||||||
|
tf.Cpt.clearButton.init();
|
||||||
|
|
||||||
|
var btnResetEl = tf.Cpt.clearButton.btnResetEl;
|
||||||
|
deepEqual(btnResetEl.nodeName, 'A', 'Clear button tag changed');
|
||||||
|
deepEqual(dom.getText(btnResetEl), 'Clear', 'Clear button text');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
Loading…
Reference in a new issue