Separate the results of the checkboxgroup manipulator with a zero.

README.md

@@ -520,7 +520,7 @@ Eg: If you run the `.show()` manipulator on an item that is already visible, the
 | 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 |
@@ -553,7 +553,7 @@ Eg: If you run the `.show()` manipulator on an item that is already visible, the
 | Method | Returns | Event Fired | Description | 
 |--------|---------|-------------| ------------|
 | `.set( [array] value)` | `ClayItem` | `change` | Checks the checkboxes that corresponds to the provided list of values. |
-| `.get()` |  `Array.<string>` | | Gets an array of strings representing the list of the values of the checked items |
+| `.get()` |  `Array.<string>` | | 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 |
@@ -624,7 +624,7 @@ Pebble.addEventListener('webviewclosed', function(e) {
 | `Clay( [array] config, [function] customFn=null, [object] options={autoHandleEvents: true})` <br> `config` - an Array representing your config <br> `customFn` - function to be run in the context of the generated page <br> `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 )` <br> Registers a custom component. | `void`. |  
 | `.generateUrl()` | `string` - The URL to open with `Pebble.openURL()` to use the Clay-generated config page. |
-| `.getSettings(response)` <br> `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)` <br> `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` |
 
 ---
 

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;
   };

src/scripts/lib/manipulators.js

@@ -87,7 +87,7 @@ module.exports = {
   },
   checked: {
     get: function() {
-      return this.$manipulatorTarget.get('checked') ? 1 : 0;
+      return this.$manipulatorTarget.get('checked');
     },
     set: function(value) {
       if (!this.get() === !value) { return this; }

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;
+};

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]
       });
     });
   });

test/spec/lib/manipulators.js

@@ -168,10 +168,10 @@ describe('manipulators', function() {
   });
 
   describe('checked', function() {
-    testSetGet({type: 'toggle', defaultValue: 0}, true, 1);
-    testSetGet({type: 'toggle', defaultValue: 0}, 1);
-    testSetGet({type: 'toggle', defaultValue: 1}, false, 0);
-    testSetGet({type: 'toggle', defaultValue: 1}, 0);
+    testSetGet({type: 'toggle', defaultValue: false}, 1, true);
+    testSetGet({type: 'toggle', defaultValue: false}, true);
+    testSetGet({type: 'toggle', defaultValue: true}, 0, false);
+    testSetGet({type: 'toggle', defaultValue: true}, false);
     testDisable('toggle');
     testEnable('toggle');
     testShow('toggle');

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);
+    });
+  });
 });