mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-13 11:56:46 +02:00
Added tests for Clear button
This commit is contained in:
Max Guglielmi
parent
0f64bb2f84
commit
79468f5185
2
dist/filtergrid.css
vendored
2
dist/filtergrid.css
vendored
|
|
@ -1,6 +1,6 @@
|
|||
/*------------------------------------------------------------------------
|
||||
- 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
|
||||
------------------------------------------------------------------------*/
|
||||
|
||||
|
|
|
|||
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