From 79468f518515be5767074c96abf6db019778d3bf Mon Sep 17 00:00:00 2001 From: Max Guglielmi Date: Thu, 19 Feb 2015 16:28:50 +1100 Subject: [PATCH] Added tests for Clear button --- dist/filtergrid.css | 2 +- src-es6/modules/clearButton.js | 87 ++++++++++++++++++++++++++++++ src/modules/clearButton.js | 98 ++++++++++++++++++++++++++++++++++ src/modules/clearButton.js.map | 1 + test/test-clear-button.html | 82 ++++++++++++++++++++++++++++ test/test-clear-button.js | 47 ++++++++++++++++ 6 files changed, 316 insertions(+), 1 deletion(-) create mode 100644 src-es6/modules/clearButton.js create mode 100644 src/modules/clearButton.js create mode 100644 src/modules/clearButton.js.map create mode 100644 test/test-clear-button.html create mode 100644 test/test-clear-button.js diff --git a/dist/filtergrid.css b/dist/filtergrid.css index aae4eb81..74efe624 100644 --- a/dist/filtergrid.css +++ b/dist/filtergrid.css @@ -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 ------------------------------------------------------------------------*/ diff --git a/src-es6/modules/clearButton.js b/src-es6/modules/clearButton.js new file mode 100644 index 00000000..a777bdc9 --- /dev/null +++ b/src-es6/modules/clearButton.js @@ -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 : + ''); + + 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; + } +} diff --git a/src/modules/clearButton.js b/src/modules/clearButton.js new file mode 100644 index 00000000..b3b2aff5 --- /dev/null +++ b/src/modules/clearButton.js @@ -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 : ""); + + 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; +}); \ No newline at end of file diff --git a/src/modules/clearButton.js.map b/src/modules/clearButton.js.map new file mode 100644 index 00000000..084a404a --- /dev/null +++ b/src/modules/clearButton.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["src-es6/modules/clearButton.js"],"names":[],"mappings":"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","file":"src-es6/modules/clearButton.js","sourcesContent":["import {Dom} from '../dom';\r\nimport {Event} from '../event';\r\n\r\nexport class ClearButton{\r\n\r\n /**\r\n * Clear button component\r\n * @param {Object} tf TableFilter instance\r\n */\r\n constructor(tf){\r\n // Configuration object\r\n var f = tf.fObj;\r\n\r\n //id of container element\r\n this.btnResetTgtId = f.btn_reset_target_id || null;\r\n //reset button element\r\n this.btnResetEl = null;\r\n //defines reset text\r\n this.btnResetText = f.btn_reset_text || 'Reset';\r\n //defines reset button tooltip\r\n this.btnResetTooltip = f.btn_reset_tooltip || 'Clear filters';\r\n //defines reset button innerHtml\r\n this.btnResetHtml = f.btn_reset_html ||\r\n (!tf.enableIcons ? null :\r\n '');\r\n\r\n this.tf = tf;\r\n }\r\n\r\n onClick(){\r\n this.tf.ClearFilters();\r\n }\r\n\r\n /**\r\n * Build DOM elements\r\n */\r\n init(){\r\n var tf = this.tf;\r\n\r\n if(!tf.hasGrid && !tf.isFirstLoad && tf.btnResetEl){\r\n return;\r\n }\r\n\r\n var resetspan = Dom.create('span', ['id', tf.prfxResetSpan+tf.id]);\r\n\r\n // reset button is added to defined element\r\n if(!this.btnResetTgtId){\r\n tf.SetTopDiv();\r\n }\r\n var targetEl = !this.btnResetTgtId ?\r\n tf.rDiv : Dom.id(this.btnResetTgtId);\r\n targetEl.appendChild(resetspan);\r\n\r\n if(!this.btnResetHtml){\r\n var fltreset = Dom.create('a', ['href', 'javascript:void(0);']);\r\n fltreset.className = tf.btnResetCssClass;\r\n fltreset.appendChild(Dom.text(this.btnResetText));\r\n resetspan.appendChild(fltreset);\r\n // fltreset.onclick = this.Evt._Clear;\r\n Event.add(fltreset, 'click', () => { this.onClick(); });\r\n } else {\r\n resetspan.innerHTML = this.btnResetHtml;\r\n var resetEl = resetspan.firstChild;\r\n // resetEl.onclick = this.Evt._Clear;\r\n Event.add(resetEl, 'click', () => { this.onClick(); });\r\n }\r\n this.btnResetEl = resetspan.firstChild;\r\n }\r\n\r\n /**\r\n * Remove clear button UI\r\n */\r\n destroy(){\r\n var tf = this.tf;\r\n\r\n if(!tf.hasGrid || !this.btnResetEl){\r\n return;\r\n }\r\n\r\n var resetspan = Dom.id(tf.prfxResetSpan+tf.id);\r\n if(resetspan){\r\n resetspan.parentNode.removeChild(resetspan);\r\n }\r\n this.btnResetEl = null;\r\n }\r\n}\r\n"]} \ No newline at end of file diff --git a/test/test-clear-button.html b/test/test-clear-button.html new file mode 100644 index 00000000..6bc9aba9 --- /dev/null +++ b/test/test-clear-button.html @@ -0,0 +1,82 @@ + + + + + TableFilter clear button + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FromDestinationRoad Distance (km)By Air (hrs)By Rail (hrs)
SydneyAdelaide14121.425.3
SydneyBrisbane9821.516
SydneyCanberra286.64.3
SydneyMelbourne8721.110.5
AdelaidePerth27813.138
AdelaideAlice Springs1533220.25
AdelaideBrisbane20452.1540
+ + + +
+
+ + \ No newline at end of file diff --git a/test/test-clear-button.js b/test/test-clear-button.js new file mode 100644 index 00000000..018257fa --- /dev/null +++ b/test/test-clear-button.js @@ -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'); + }); + +});