From 060704cb1a7396573fc136f1d2998ed749970256 Mon Sep 17 00:00:00 2001 From: Keegan Date: Mon, 29 Feb 2016 14:24:59 +1100 Subject: [PATCH] Add hide/show method to manipulators. --- dev/custom-fn.js | 4 +- src/scripts/lib/manipulators.js | 40 +++++++++++++++--- src/styles/clay/_base.scss | 31 +++++++------- test/spec/lib/manipulators.js | 73 +++++++++++++++++++++++++++++++-- 4 files changed, 122 insertions(+), 26 deletions(-) diff --git a/dev/custom-fn.js b/dev/custom-fn.js index 4688283..6a52d7e 100644 --- a/dev/custom-fn.js +++ b/dev/custom-fn.js @@ -10,9 +10,9 @@ module.exports = function() { */ function toggleBackground() { if (this.get()) { - Clay.getItemByAppKey('background').enable(); + Clay.getItemByAppKey('colorTest').show(); } else { - Clay.getItemByAppKey('background').disable(); + Clay.getItemByAppKey('colorTest').hide(); } } diff --git a/src/scripts/lib/manipulators.js b/src/scripts/lib/manipulators.js index 5a54cde..9f0000b 100755 --- a/src/scripts/lib/manipulators.js +++ b/src/scripts/lib/manipulators.js @@ -18,6 +18,22 @@ function enable() { return this.trigger('enabled'); } +/** + * @returns {ClayEvents} + */ +function hide() { + this.$element.set('+hide'); + return this.trigger('hide'); +} + +/** + * @returns {ClayEvents} + */ +function show() { + this.$element.set('-hide'); + return this.trigger('show'); +} + module.exports = { html: { get: function() { @@ -26,7 +42,9 @@ module.exports = { set: function(value) { this.$manipulatorTarget.set('innerHTML', value); return this.trigger('change'); - } + }, + hide: hide, + show: show }, val: { get: function() { @@ -37,7 +55,9 @@ module.exports = { return this.trigger('change'); }, disable: disable, - enable: enable + enable: enable, + hide: hide, + show: show }, checked: { get: function() { @@ -48,7 +68,9 @@ module.exports = { return this.trigger('change'); }, disable: disable, - enable: enable + enable: enable, + hide: hide, + show: show }, radiogroup: { get: function() { @@ -61,7 +83,9 @@ module.exports = { return this.trigger('change'); }, disable: disable, - enable: enable + enable: enable, + hide: hide, + show: show }, checkboxgroup: { get: function() { @@ -83,7 +107,9 @@ module.exports = { return self.trigger('change'); }, disable: disable, - enable: enable + enable: enable, + hide: hide, + show: show }, color: { get: function() { @@ -99,6 +125,8 @@ module.exports = { return this.trigger('change'); }, disable: disable, - enable: enable + enable: enable, + hide: hide, + show: show } }; diff --git a/src/styles/clay/_base.scss b/src/styles/clay/_base.scss index 6a468fa..1581160 100644 --- a/src/styles/clay/_base.scss +++ b/src/styles/clay/_base.scss @@ -50,6 +50,19 @@ h6 { @include font-size(0.8); } +strong { + @include font-pfdin(medium); + color: $color-orange; +} + +a { + color: $color-gray-8; + + &:hover { + color: inherit; + } +} + label { display: flex; justify-content: space-between; @@ -83,9 +96,12 @@ label { } } +.hide { + display: none; +} + .component { padding-bottom: $item-spacing-v; - @include tap-highlight(); &.disabled { opacity: 0.25; @@ -134,19 +150,6 @@ label { } -strong { - @include font-pfdin(medium); - color: $color-orange; -} - -a { - color: $color-gray-8; - - &:hover { - color: inherit; - } -} - .inputs { display: block; width:100%; diff --git a/test/spec/lib/manipulators.js b/test/spec/lib/manipulators.js index 550cd12..5dff85a 100644 --- a/test/spec/lib/manipulators.js +++ b/test/spec/lib/manipulators.js @@ -7,7 +7,7 @@ var fixture = require('../../fixture'); describe('manipulators', function() { /** - * @param {string|Clay~ConfigItem} itemType + * @param {string|Object} itemType * @param {*} value * @param {*} [expected] * @return {void} @@ -31,7 +31,7 @@ describe('manipulators', function() { } /** - * @param {string|Clay~ConfigItem} itemType + * @param {string|Object} itemType * @return {void} */ function testDisable(itemType) { @@ -57,7 +57,7 @@ describe('manipulators', function() { } /** - * @param {string} itemType + * @param {string|Object} itemType * @return {void} */ function testEnable(itemType) { @@ -84,14 +84,71 @@ describe('manipulators', function() { }); } + /** + * @param {string|Object} itemType + * @return {void} + */ + function testHide(itemType) { + describe('.hide()', function() { + it('hides the field then triggers a "hide" event', function() { + var handlerSpy = sinon.spy(); + var clayItem = fixture.clayItem(itemType); + clayItem.on('hide', handlerSpy); + + assert.strictEqual( + clayItem.$element[0].classList.contains('hide'), + false + ); + clayItem.hide(); + assert.strictEqual( + clayItem.$element[0].classList.contains('hide'), + true + ); + assert.strictEqual(handlerSpy.callCount, 1, 'handler not called once'); + assert(handlerSpy.calledOn(clayItem), 'handler not called on clayItem'); + }); + }); + } + + /** + * @param {string|Object} itemType + * @return {void} + */ + function testShow(itemType) { + describe('.show()', function() { + it('shows the field then triggers a "show" event', function() { + var handlerSpy = sinon.spy(); + var clayItem = fixture.clayItem(itemType); + clayItem.on('show', handlerSpy); + + clayItem.hide(); + assert.strictEqual( + clayItem.$element[0].classList.contains('hide'), + true + ); + clayItem.show(); + assert.strictEqual( + clayItem.$element[0].classList.contains('hide'), + false + ); + assert.strictEqual(handlerSpy.callCount, 1, 'handler not called once'); + assert(handlerSpy.calledOn(clayItem), 'handler not called on clayItem'); + }); + }); + } + describe('html', function() { - testSetGet('footer', 'test123'); + testSetGet('text', 'test123'); + testShow('text'); + testHide('text'); }); describe('val', function() { testSetGet('input', 'test321'); testDisable('input'); testEnable('input'); + testShow('text'); + testHide('text'); }); describe('checked', function() { @@ -101,6 +158,8 @@ describe('manipulators', function() { testSetGet('toggle', 0); testDisable('toggle'); testEnable('toggle'); + testShow('toggle'); + testHide('toggle'); }); describe('radiogroup', function() { @@ -118,6 +177,8 @@ describe('manipulators', function() { testSetGet(item, 'three "quote'); testDisable(item); testEnable(item); + testShow(item); + testHide(item); }); describe('checkboxgroup', function() { @@ -136,6 +197,8 @@ describe('manipulators', function() { testSetGet(item, false, []); testDisable(item); testEnable(item); + testShow(item); + testHide(item); }); describe('color', function() { @@ -149,5 +212,7 @@ describe('manipulators', function() { testSetGet('color', undefined, 0x000000); testDisable('color'); testEnable('color'); + testShow('color'); + testHide('color'); }); });