diff --git a/README.md b/README.md index b539add..6842419 100755 --- a/README.md +++ b/README.md @@ -449,60 +449,75 @@ The submit button for the page. You **MUST** include this component somewhere in ## Manipulators -Each component has a **manipulator**. This is a set of methods used to talk to the item on the page. At a minimum, manipulators must have a `.get()` and `.set(value)` method. When the config page is closed, the `.get()` method is run on all components registered with an `appKey` to construct the object sent to the C app. Many of these methods fire an event when the method is called. You can listen for these events with `ClayItem.on()`. +Each component has a **manipulator**. This is a set of methods used to talk to the item on the page. +At a minimum, manipulators must have a `.get()` and `.set(value)` method however there are also methods to assist in interactivity such as `.hide()` and `.disable()`. +**NOTE:** There is currently no way to disable or hide an entire section. You must disable/hide each item in the section to achieve this effect. +When the config page is closed, the `.get()` method is run on all components registered with an `appKey` to construct the object sent to the C app. +Many of these methods fire an event when the method is called. You can listen for these events with `ClayItem.on()`. #### html | Method | Returns | Event Fired | Description | |--------|---------|-------------| ------------| | `.set( [string\|HTML] value)` | `ClayItem` | `change` | Sets the content of this item. | -| `.get()` | `string` | Gets the content of this item. | +| `.get()` | `string` | | Gets the content of this item. | +| `.hide()` | `ClayItem` | `hide` | Hides the item | +| `.show()` | `ClayItem` | `show` | Shows the item | #### val | Method | Returns | Event Fired | Description | |--------|---------|-------------| ------------| | `.set( [string] value)` | `ClayItem` | `change` | Sets the value of this item. | -| `.get()` | `string` | Gets the content of this item. | +| `.get()` | `string` | | Gets the content of this item. | | `.disable()` | `ClayItem` | `disabled` | Prevents this item from being edited by the user. | | `.enable()` | `ClayItem` | `enabled` | Allows this item to be edited by the user. | +| `.hide()` | `ClayItem` | `hide` | Hides the item | +| `.show()` | `ClayItem` | `show` | Shows the item | #### checked | Method | Returns | Event Fired | Description | |--------|---------|-------------| ------------| | `.set( [boolean\|int] value)` | `ClayItem` | `change` | Check/uncheck the state of this item. | -| `.get()` | `int` | 1 if checked, 0 if not checked | +| `.get()` | `int` | | 1 if checked, 0 if not checked | | `.disable()` | `ClayItem` | `disabled` | Prevents this item from being edited by the user. | | `.enable()` | `ClayItem` | `enabled` | Allows this item to be edited by the user. | +| `.hide()` | `ClayItem` | `hide` | Hides the item | +| `.show()` | `ClayItem` | `show` | Shows the item | #### color | Method | Returns | Event Fired | Description | |--------|---------|-------------| ------------| | `.set( [string\|int] value)` | `ClayItem` | `change` | Sets the color picker to the provided color. If the value is a string, it must be provided in hex notation eg `'FF0000'`. | -| `.get()` | `int` | Get the chosen color. This is returned as a number in order to make it easy to use on the watch side using `GColorFromHEX()`. | +| `.get()` | `int` | | Get the chosen color. This is returned as a number in order to make it easy to use on the watch side using `GColorFromHEX()`. | | `.disable()` | `ClayItem` | `disabled` | Prevents this item from being edited by the user. | | `.enable()` | `ClayItem` | `enabled` | Allows this item to be edited by the user. | +| `.hide()` | `ClayItem` | `hide` | Hides the item | +| `.show()` | `ClayItem` | `show` | Shows the item | #### radiogroup | Method | Returns | Event Fired | Description | |--------|---------|-------------| ------------| | `.set( [string] value)` | `ClayItem` | `change` | Checks the radio button that corresponds to the provided value. | -| `.get()` | `string` | Gets the value of the checked radio button in the list. | +| `.get()` | `string` | | Gets the value of the checked radio button in the list. | | `.disable()` | `ClayItem` | `disabled` | Prevents this item from being edited by the user. | | `.enable()` | `ClayItem` | `enabled` | Allows this item to be edited by the user. | +| `.hide()` | `ClayItem` | `hide` | Hides the item | +| `.show()` | `ClayItem` | `show` | Shows the item | #### checkboxgroup | Method | Returns | Event Fired | Description | |--------|---------|-------------| ------------| | `.set( [array] value)` | `ClayItem` | `change` | Checks the checkboxes that corresponds to the provided list of values. | -| `.get()` | `Array.` | Gets an array of strings representing the list of the values of the checked items | +| `.get()` | `Array.` | | Gets an array of strings representing the list of the values of the checked items | | `.disable()` | `ClayItem` | `disabled` | Prevents this item from being edited by the user. | | `.enable()` | `ClayItem` | `enabled` | Allows this item to be edited by the user. | - +| `.hide()` | `ClayItem` | `hide` | Hides the item | +| `.show()` | `ClayItem` | `show` | Shows the item | # Extending Clay @@ -597,7 +612,13 @@ module.exports = function(minified) { var coolStuffToggle = Clay.getItemByAppKey('cool_stuff'); toggleBackground.call(coolStuffToggle); coolStuffToggle.on('change', toggleBackground); + + // Hide the color picker for aplite + if (Clay.meta.activeWatchInfo.platform === 'aplite') { + Clay.getItemByAppKey('background').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 b788223..b452acd 100644 --- a/src/styles/clay/_base.scss +++ b/src/styles/clay/_base.scss @@ -17,7 +17,7 @@ html, body { body { background-color: $color-gray-2; - padding: $item-spacing-v $item-spacing-h; + padding: 0 $item-spacing-h $item-spacing-v; } em { @@ -101,30 +101,47 @@ label { } } +.hide { + display: none !important; +} + .tap-highlight { @include tap-highlight(); } .component { - padding-bottom: $item-spacing-v; + padding-top: $item-spacing-v; &.disabled { - opacity: 0.25; pointer-events: none; + > * { + opacity: 0.25; + } } } .section { background: $color-gray-4; border-radius: 0.25rem; - margin-bottom: 1rem; box-shadow: $color-gray-1 0 0.15rem 0.25rem; - .component { + > .component { + padding-bottom: $item-spacing-v; + padding-right: $item-spacing-h; + padding-left: $item-spacing-h; position: relative; - padding: $item-spacing-v $item-spacing-h; + margin-top: 1rem; - &:last-child:after { + &:not(.hide) ~ .component { + margin-top: 0; + } + + &:last-child, + &:first-child { + padding-bottom: $item-spacing-v; + } + + &:first-child:after { display: none; } @@ -133,7 +150,7 @@ label { background: $color-gray-6; display: block; position: absolute; - bottom: 0; + top: 0; left: $item-spacing-h / 2; right: $item-spacing-h / 2; height: 1px; @@ -141,13 +158,28 @@ label { } } - .component-heading:first-child { + // don't show the separator for the first non-hidden item + > .component:not(.hide):after { + display: none; + } + + > .component:not(.hide) ~ .component:not(.hide):after { + display: block; + } + + > .component-heading:first-child { background: $color-gray-3; border-radius: $border-radius $border-radius 0 0; - &:after { + // don't show the separator for the first non-hidden item after the heading + &:after, + ~ .component:not(.hide):after { display: none; } + + ~ .component:not(.hide) ~ .component:not(.hide):after { + display: block; + } } } diff --git a/src/styles/clay/_vars.scss b/src/styles/clay/_vars.scss index 7982216..391ecbd 100644 --- a/src/styles/clay/_vars.scss +++ b/src/styles/clay/_vars.scss @@ -34,14 +34,7 @@ $color-gray-9: #a4a4a4 ; $color-gray-10: #ececec; $color-gray-11: #f2f2f2; - - - -$global-margin: 55px; -$form-margin: 25px; $button-padding: 0.7rem; $button-padding-ios: 0.6rem; -$button-line-height: 13px; -$footer-height-large: 90px; $box-shadow-small-components: $color-gray-1 0 0.1rem 0.1rem; 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'); }); });