From 271a0d1cfd10045a7e2ad26cda278824264a4917 Mon Sep 17 00:00:00 2001 From: Keegan Date: Mon, 7 Mar 2016 12:58:46 +1100 Subject: [PATCH 1/3] Change the ClayConfig.getSettings() method to convert data types to be compatible with sendAppMessage --- src/scripts/lib/clay-config.js | 2 +- src/scripts/lib/utils.js | 36 ++++++++++++++++++++++++++++++++++ test/spec/lib/clay-config.js | 14 ++++++++++--- test/spec/lib/utils.js | 30 ++++++++++++++++++++++++++++ 4 files changed, 78 insertions(+), 4 deletions(-) diff --git a/src/scripts/lib/clay-config.js b/src/scripts/lib/clay-config.js index 750e700..7de1379 100644 --- a/src/scripts/lib/clay-config.js +++ b/src/scripts/lib/clay-config.js @@ -158,7 +158,7 @@ function ClayConfig(settings, config, $rootContainer, meta) { self.getSettings = function() { _checkBuilt('getSettings'); _.eachObj(_itemsByAppKey, function(appKey, item) { - _settings[appKey] = item.get(); + _settings[appKey] = utils.prepareForAppMessage(item.get()); }); return _settings; }; diff --git a/src/scripts/lib/utils.js b/src/scripts/lib/utils.js index 02079f3..46ca729 100644 --- a/src/scripts/lib/utils.js +++ b/src/scripts/lib/utils.js @@ -17,3 +17,39 @@ module.exports.updateProperties = function(obj, descriptor) { Object.defineProperty(obj, prop, descriptor); }); }; + +/** + * Converts the val into a type compatible with Pebble.sendAppMessage(). + * - Strings will be returned without modification + * - Numbers will be returned without modification + * - Booleans will be converted to a 0 or 1 + * - Arrays that contain strings will be split with a zero. + * eg: ['one', 'two'] becomes ['one', 0, 'two', 0] + * - Arrays that contain numbers will be returned without modification + * eg: [1, 2] becomes [1, 2] + * - Arrays that contain booleans will be converted to a 0 or 1 + * eg: [true, false] becomes [1, 0] + * - Arrays must be single dimensional + * @param {number|string|boolean|Array} val + * @returns {number|string|Array} + */ +module.exports.prepareForAppMessage = function(val) { + var result; + + if (typeof val === 'boolean') { + result = val ? 1 : 0; + } else if (Array.isArray(val)) { + result = []; + val.forEach(function(item) { + var itemConverted = module.exports.prepareForAppMessage(item); + result.push(itemConverted); + if (typeof itemConverted === 'string') { + result.push(0); + } + }); + } else { + result = val; + } + + return result; +}; diff --git a/test/spec/lib/clay-config.js b/test/spec/lib/clay-config.js index 7aa2d4d..8275bab 100644 --- a/test/spec/lib/clay-config.js +++ b/test/spec/lib/clay-config.js @@ -108,7 +108,12 @@ describe('ClayConfig', function() { {label: 'label-1', value: 'val-1'}, {label: 'label-2', value: 'val-2'} ]}, - {type: 'toggle', appKey: 'test3'} + {type: 'toggle', appKey: 'test3'}, + {type: 'checkboxgroup', appKey: 'test4', options: [ + {label: 'label-1', value: 'cb-1'}, + {label: 'label-2', value: 'cb-2'}, + {label: 'label-2', value: 'cb-3'} + ]} ], true, true, @@ -120,16 +125,19 @@ describe('ClayConfig', function() { assert.deepEqual(clayConfig.getSettings(), { test1: 'default val', test2: 'val-2', - test3: 0 + test3: 0, + test4: [] }); clayConfig.getItemByAppKey('test1').set('val-1'); clayConfig.getItemByAppKey('test3').set(true); + clayConfig.getItemByAppKey('test4').set(['cb-1', 'cb-3']); assert.deepEqual(clayConfig.getSettings(), { test1: 'val-1', test2: 'val-2', - test3: 1 + test3: 1, + test4: ['cb-1', 0, 'cb-3', 0] }); }); }); diff --git a/test/spec/lib/utils.js b/test/spec/lib/utils.js index 11050b1..bf0bf5a 100644 --- a/test/spec/lib/utils.js +++ b/test/spec/lib/utils.js @@ -26,4 +26,34 @@ describe('Utils', function() { ); }); }); + + describe('.prepareForAppMessage', function() { + it('converts an array correctly when array contains strings', function() { + assert.deepEqual( + utils.prepareForAppMessage(['one', 'two']), + ['one', 0, 'two', 0] + ); + }); + + it('converts an array correctly when array contains numbers', function() { + assert.deepEqual(utils.prepareForAppMessage([1, 2, 3]), [1, 2, 3]); + }); + + it('converts an array correctly when array contains booleans', function() { + assert.deepEqual(utils.prepareForAppMessage([true, false, true]), [1, 0, 1]); + }); + + it('converts booleans to ints', function() { + assert.strictEqual(utils.prepareForAppMessage(false), 0); + assert.strictEqual(utils.prepareForAppMessage(true), 1); + }); + + it('leaves strings alone', function() { + assert.strictEqual(utils.prepareForAppMessage('test'), 'test'); + }); + + it('leaves numbers alone', function() { + assert.strictEqual(utils.prepareForAppMessage(123), 123); + }); + }); }); From de00ac1fd65e093f4ac8165fbf8e85aa807f48ea Mon Sep 17 00:00:00 2001 From: Keegan Date: Mon, 7 Mar 2016 13:05:38 +1100 Subject: [PATCH 2/3] update readme to reflect new behavior of ClayConfig.getSettings() --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2a3e468..7ac6e8f 100755 --- a/README.md +++ b/README.md @@ -565,7 +565,7 @@ Pebble.addEventListener('webviewclosed', function(e) { | `Clay( [array] config, [function] customFn=null, [object] options={autoHandleEvents: true})`
`config` - an Array representing your config
`customFn` - function to be run in the context of the generated page
`options.autoHandleEvents` - set to `false` to prevent Clay from automatically handling the "showConfiguration" and "webviewclosed" events | `Clay` - a new instance of Clay. | | `.registerComponent( [ClayComponent] component )`
Registers a custom component. | `void`. | | `.generateUrl()` | `string` - The URL to open with `Pebble.openURL()` to use the Clay-generated config page. | -| `.getSettings(response)`
`response` - the response object provided to the "webviewclosed" event | `Object` - object of keys and values for each config page item with an `appKey`, where the key is the `appKey` and the value is the chosen value of that item. | +| `.getSettings(response)`
`response` - the response object provided to the "webviewclosed" event | `Object` - object of keys and values for each config page item with an `appKey`, where the key is the `appKey` and the value is the chosen value of that item. This method may do some conversions depending on the type of the setting. Arrays containing strings will have zeros inserted before each item. eg `['one', 'two']` becomes `['one', 0, 'two', 0]`. Booleans will be converted to numbers. eg `true` becomes `1` and `false` becomes `0` | --- From d63c6c832db1609e43129b5e7a8b08391d006792 Mon Sep 17 00:00:00 2001 From: Keegan Date: Mon, 7 Mar 2016 13:13:36 +1100 Subject: [PATCH 3/3] Change behavior of the toggle to return a boolean again --- README.md | 4 ++-- src/scripts/lib/manipulators.js | 2 +- test/spec/lib/manipulators.js | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 7ac6e8f..6526185 100755 --- a/README.md +++ b/README.md @@ -480,7 +480,7 @@ Many of these methods fire an event when the method is called. You can listen fo | 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()` | `boolean` | | `true` if checked, `false` if not. **NOTE** this will be converted to a `1` or `0` when sent to the watch. See [`ClayConfig.getSettings()`](#methods-1) | | `.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 | @@ -513,7 +513,7 @@ Many of these methods fire an event when the method is called. You can listen fo | 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. **NOTE:** each item in the array will be separated by a zero when sent to the watch. See [`ClayConfig.getSettings()`](#methods-1) | | `.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 | diff --git a/src/scripts/lib/manipulators.js b/src/scripts/lib/manipulators.js index 9f0000b..a0f0fb8 100755 --- a/src/scripts/lib/manipulators.js +++ b/src/scripts/lib/manipulators.js @@ -61,7 +61,7 @@ module.exports = { }, checked: { get: function() { - return this.$manipulatorTarget.get('checked') ? 1 : 0; + return this.$manipulatorTarget.get('checked'); }, set: function(value) { this.$manipulatorTarget.set('checked', !!value); diff --git a/test/spec/lib/manipulators.js b/test/spec/lib/manipulators.js index 5dff85a..166a91e 100644 --- a/test/spec/lib/manipulators.js +++ b/test/spec/lib/manipulators.js @@ -152,10 +152,10 @@ describe('manipulators', function() { }); describe('checked', function() { - testSetGet('toggle', true, 1); - testSetGet('toggle', 1); - testSetGet('toggle', false, 0); - testSetGet('toggle', 0); + testSetGet('toggle', true); + testSetGet('toggle', 1, true); + testSetGet('toggle', false); + testSetGet('toggle', 0, false); testDisable('toggle'); testEnable('toggle'); testShow('toggle');