Release v1.0.4 (#156)

* .setSettings(key, value) to set a single setting
* .setSettings(object) to set multiple settings at once

README.md

@@ -876,6 +876,8 @@ Pebble.addEventListener('webviewclosed', function(e) {
 | `.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( [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 `messageKey`, where the key is the `messageKey` and the value is the chosen value of that item.  <br><br>This method will do some conversions depending on the type of the setting. Arrays will use message key array syntax to make the values of each item in the array available as individual message keys. Booleans will be converted to numbers. eg `true` becomes `1` and `false` becomes `0`. If the value is a number or an array of numbers and the optional property: "precision" is the power of precision (value * 10 ^ precision) and then floored. Eg: `1.4567` with a precision set to `3` will become `1456`. Pass `false` as the second parameter to disable this behavior. See the example below for how this all works |
+| `.setSettings( [string] key, [*] value )` <br> `key` - The key for the setting you want to set. <br> `value` - The value of the setting you want to set. | `void` |
+| `.setSettings( [object] settings )` <br> `settings` - An object of key/value pairs that you would like to update the settings with. eg `{ user_name: 'Emily', show_animations: true }` | `void` |
 
 #### `.getSettings()` Example 
 

dev/config.js

@@ -64,11 +64,11 @@ module.exports = [
       {
         "type": "slider",
         "messageKey": "slider",
-        "defaultValue": 15,
+        "defaultValue": 0,
         "label": "Slider",
         "description": "This is the description for the slider",
-        "min": 10,
-        "max": 20,
+        "min": 0,
+        "max": 30,
         "step": 0.25
       },
       {

index.js

@@ -213,6 +213,39 @@ Clay.prototype.getSettings = function(response, convert) {
   return convert === false ? settings : Clay.prepareSettingsForAppMessage(settings);
 };
 
+/**
+ * Updates the settings with the given value(s).
+ *
+ * @signature `clay.setSettings(key, value)`
+ * @param {String} key - The property to set.
+ * @param {*} value - the value assigned to _key_.
+ * @return {undefined}
+ *
+ * @signature `clay.setSettings(settings)`
+ * @param {Object} settings - an object containing the key/value pairs to be set.
+ * @return {undefined}
+ */
+Clay.prototype.setSettings = function(key, value) {
+  var settingsStorage = {};
+
+  try {
+    settingsStorage = JSON.parse(localStorage.getItem('clay-settings')) || {};
+  } catch (e) {
+    console.error(e.toString());
+  }
+
+  if (typeof key === 'object') {
+    var settings = key;
+    Object.keys(settings).forEach(function(key) {
+      settingsStorage[key] = settings[key];
+    });
+  } else {
+    settingsStorage[key] = value;
+  }
+
+  localStorage.setItem('clay-settings', JSON.stringify(settingsStorage));
+};
+
 /**
  * @param {string} input
  * @param {string} [prefix='data:text/html;charset=utf-8,']

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-clay",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Pebble Config Framework",
   "scripts": {
     "test-travis": "./node_modules/.bin/gulp && ./node_modules/.bin/karma start ./test/karma.conf.js --single-run --browsers chromeTravisCI && ./node_modules/.bin/eslint ./",

src/scripts/lib/clay-config.js

@@ -86,9 +86,9 @@ function ClayConfig(settings, config, $rootContainer, meta) {
         // set the value of the item via the manipulator to ensure consistency
         var value = typeof _settings[_item.messageKey] !== 'undefined' ?
           _settings[_item.messageKey] :
-          (_item.defaultValue || '');
+          _item.defaultValue;
 
-        clayItem.set(value);
+        clayItem.set(typeof value !== 'undefined' ? value : '');
 
         $container.add(clayItem.$element);
       }

test/spec/index.js

@@ -386,6 +386,54 @@ describe('Clay', function() {
     });
   });
 
+  describe('.setSettings', function() {
+    it('it writes to localStorage when passing an object',
+      function() {
+        var clay = fixture.clay([]);
+        var settings = {
+          key1: 'value1',
+          key2: 'value2'
+        };
+        var expected = {
+          key1: 'value1',
+          key2: 'value2'
+        };
+
+        clay.setSettings(settings);
+        assert.equal(
+          localStorage.getItem('clay-settings'),
+          JSON.stringify(expected)
+        );
+      });
+
+    it('it writes to localStorage when passing a key and a value',
+      function() {
+        var clay = fixture.clay([]);
+        var expected = {
+          key1: 'value1',
+          key2: 'value2%7Dbreaks'
+        };
+
+        clay.setSettings('key1', 'value1');
+        clay.setSettings('key2', 'value2%7Dbreaks');
+        assert.equal(localStorage.getItem('clay-settings'),
+          JSON.stringify(expected)
+        );
+      });
+
+    it('doesn\'t throw and logs an error if settings in localStorage are broken',
+      function() {
+        var clay = fixture.clay([]);
+        var errorStub = sinon.stub(console, 'error');
+        localStorage.setItem('clay-settings', 'not valid JSON');
+        assert.doesNotThrow(function() {
+          clay.setSettings('key', 'value');
+        });
+        assert(errorStub.calledWithMatch(/SyntaxError/i));
+        errorStub.restore();
+      });
+  });
+
   describe('.meta', function() {
     var emptyMeta = {
       activeWatchInfo: null,