Merge pull request #41 from pebble/#40/move-settings-conversion

`Clay.getSettings()` now does type conversion, not `ClayConfg.getSettings()`

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()` | `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) |
+| `.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) |
 | `.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( [object] response, [boolean] convert=true)` <br> `response` - the response object provided to the "webviewclosed" event <br> `convert` - Pass `false` to not convert the settings to be compatible with `Pebble.sendAppMessage()` | `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 will 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`. Pass `false` as the second parameter to disable this behavior |
 
 ---
 
@@ -708,7 +708,7 @@ This is the main way of talking to your generated config page. An instance of th
 | `.getItemByAppKey( [string] appKey )` | `ConfigItem\|undefined` - a single `ConfigItem` that has the provided `appKey`, otherwise `undefined`. |
 | `.getItemById( [string] id )` | `ConfigItem\|undefined` - a single `ConfigItem` that has the provided `id`, otherwise `undefined`. |
 | `.getItemsByType( [string] type )` | `Array.<ConfigItem>` - an array of config items that match the provided `type`. |
-| `.getSettings()` | `Object` - an object representing all items with an `appKey` where the key is the `appKey` and the value is the result of running `.get()` on the Clay 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` |
+| `.getSettings()` | `Object` - an object representing all items with an `appKey` where the key is the `appKey` and the value is the result of running `.get()` on the Clay item. |
 | `.build()` <br> Builds the config page. Will dispatch the `BEFORE_BUILD` event prior to building the page, then the `AFTER_BUILD` event once it is complete. | `ClayConfig` |
 | `.on( [string] events, [function] handler )` <br> Register an event to the provided handler. The handler will be called with this instance of `ClayConfig` as the context. If you wish to register multiple events to the same handler, then separate the events with a space | `ClayConfig` |
 | `.off( [function] handler )` <br> Remove the given event handler. **NOTE:** This will remove the handler from all registered events. | `ClayConfig` |

gulpfile.js

@@ -86,6 +86,7 @@ gulp.task('clay', ['inlineHtml'], function() {
     debug: false,
     standalone: 'clay'
   })
+    .transform('deamdify')
     .transform(stringify(stringifyOptions))
     .transform(sassify, sassifyOptions)
     .transform(autoprefixify, autoprefixerOptions)

index.js

@@ -3,6 +3,7 @@
 var configPageHtml = require('./tmp/config-page.html');
 var toSource = require('tosource');
 var standardComponents = require('./src/scripts/components');
+var utils = require('./src/scripts/lib/utils');
 
 /**
  * @param {Array} config - the Clay config
@@ -149,9 +150,10 @@ Clay.prototype.generateUrl = function() {
 /**
  * Parse the response from the webviewclosed event data
  * @param {string} response
+ * @param {boolean} [convert=true]
  * @returns {Object}
  */
-Clay.prototype.getSettings = function(response) {
+Clay.prototype.getSettings = function(response, convert) {
   // Decode and parse config data as JSON
   var settings = {};
 
@@ -162,7 +164,8 @@ Clay.prototype.getSettings = function(response) {
   }
 
   localStorage.setItem('clay-settings', JSON.stringify(settings));
-  return settings;
+
+  return convert === false ? settings : utils.prepareSettingsForAppMessage(settings);
 };
 
 /**

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] = utils.prepareForAppMessage(item.get());
+      _settings[appKey] = item.get();
     });
     return _settings;
   };

src/scripts/lib/manipulators.js

@@ -133,7 +133,7 @@ module.exports = {
 
       values.map(function(value) {
         self.$element
-          .select('input[value="' + value.replace('"', '\\"') + '"]')
+          .select('input[value="' + value.toString(10).replace('"', '\\"') + '"]')
           .set('checked', true);
       });
       return self.trigger('change');

src/scripts/lib/utils.js

@@ -53,3 +53,18 @@ module.exports.prepareForAppMessage = function(val) {
 
   return result;
 };
+
+/**
+ * Converts a Clay settings dict into one that is compatible with
+ * Pebble.sendAppMessage();
+ * @see {prepareForAppMessage}
+ * @param {Object} settings
+ * @returns {{}}
+ */
+module.exports.prepareSettingsForAppMessage = function(settings) {
+  var result = {};
+  Object.keys(settings).forEach(function(key) {
+    result[key] = module.exports.prepareForAppMessage(settings[key]);
+  });
+  return result;
+};

test/spec/index.js

@@ -254,6 +254,47 @@ describe('Clay', function() {
       }, /Not Valid JSON/i);
       assert.equal(localStorage.getItem('clay-settings'), '{"appKey":"value"}');
     });
+
+    it('Prepares the settings for sendAppMessage', function() {
+      var clay = fixture.clay([]);
+      var response = encodeURIComponent(JSON.stringify({
+        test1: false,
+        test2: 'val-2',
+        test3: true,
+        test4: ['cb-1', 'cb-3'],
+        test5: 12345,
+        test6: [1, 2, 3, 4],
+        test7: [true, false, true]
+      }));
+      var expected = {
+        test1: 0,
+        test2: 'val-2',
+        test3: 1,
+        test4: ['cb-1', 0, 'cb-3', 0],
+        test5: 12345,
+        test6: [1, 2, 3, 4],
+        test7: [1, 0, 1]
+      };
+
+      assert.deepEqual(clay.getSettings(response), expected);
+    });
+
+    it('does not prepare the settings for sendAppMessage if convert is false',
+    function() {
+      var clay = fixture.clay([]);
+      var settings = {
+        test1: false,
+        test2: 'val-2',
+        test3: true,
+        test4: ['cb-1', 'cb-3'],
+        test5: 12345,
+        test6: [1, 2, 3, 4],
+        test7: [true, false, true]
+      };
+      var response = encodeURIComponent(JSON.stringify(settings));
+
+      assert.deepEqual(clay.getSettings(response, false), settings);
+    });
   });
 
   describe('.meta', function() {

test/spec/lib/clay-config.js

@@ -101,31 +101,29 @@ describe('ClayConfig', function() {
 
   describe('.getSettings()', function() {
     it('returns the correct settings', function() {
-      var clayConfig = fixtures.clayConfig(
-        [
-          {type: 'input', appKey: 'test1', defaultValue: 'default val'},
-          {type: 'select', appKey: 'test2', options: [
-            {label: 'label-1', value: 'val-1'},
-            {label: 'label-2', value: 'val-2'}
-          ]},
-          {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,
-        {
-          test2: 'val-2' // set one of the values via settings
-        }
-      );
+      var config = [
+        {type: 'input', appKey: 'test1', defaultValue: 'default val'},
+        {type: 'select', appKey: 'test2', options: [
+          {label: 'label-1', value: 'val-1'},
+          {label: 'label-2', value: 'val-2'}
+        ]},
+        {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'}
+        ]}
+      ];
+      var settings = {
+        test2: 'val-2'
+      };
+
+      var clayConfig = fixtures.clayConfig(config, true, true, settings);
 
       assert.deepEqual(clayConfig.getSettings(), {
         test1: 'default val',
         test2: 'val-2',
-        test3: 0,
+        test3: false,
         test4: []
       });
 
@@ -136,8 +134,15 @@ describe('ClayConfig', function() {
       assert.deepEqual(clayConfig.getSettings(), {
         test1: 'val-1',
         test2: 'val-2',
-        test3: 1,
-        test4: ['cb-1', 0, 'cb-3', 0]
+        test3: true,
+        test4: ['cb-1', 'cb-3']
+      });
+
+      // make sure the result of getSettings() can actually be fed back in to
+      // a new instance of ClayConfig
+      assert.doesNotThrow(function() {
+        settings = clayConfig.getSettings();
+        fixtures.clayConfig(config, true, true, settings);
       });
     });
   });

test/spec/lib/utils.js

@@ -56,4 +56,30 @@ describe('Utils', function() {
       assert.strictEqual(utils.prepareForAppMessage(123), 123);
     });
   });
+
+  describe('.prepareSettingsForAppMessage', function() {
+    it('converts the settings correctly', function() {
+      var settings = {
+        test1: false,
+        test2: 'val-2',
+        test3: true,
+        test4: ['cb-1', 'cb-3'],
+        test5: 12345,
+        test6: [1, 2, 3, 4],
+        test7: [true, false, true]
+      };
+      var expected = {
+        test1: 0,
+        test2: 'val-2',
+        test3: 1,
+        test4: ['cb-1', 0, 'cb-3', 0],
+        test5: 12345,
+        test6: [1, 2, 3, 4],
+        test7: [1, 0, 1]
+      };
+
+      assert.deepEqual(utils.prepareSettingsForAppMessage(settings), expected);
+    });
+  });
 });
+