Merge branch 'master' into #52/custom-color-picker-layout

src/scripts/components/index.js

@@ -11,5 +11,6 @@ module.exports = {
   toggle: require('./toggle'),
   radiogroup: require('./radiogroup'),
   checkboxgroup: require('./checkboxgroup'),
-  button: require('./button')
+  button: require('./button'),
+  slider: require('./slider')
 };

src/scripts/components/slider.js

@@ -0,0 +1,50 @@
+'use strict';
+
+module.exports = {
+  name: 'slider',
+  template: require('../../templates/components/slider.tpl'),
+  style: require('../../styles/clay/components/slider.scss'),
+  manipulator: 'slider',
+  defaults: {
+    label: '',
+    description: '',
+    min: 0,
+    max: 100,
+    step: 1,
+    attributes: {}
+  },
+  initialize: function() {
+    var self = this;
+
+    var $value = self.$element.select('.value');
+    var $valuePad = self.$element.select('.value-pad');
+    var $slider = self.$manipulatorTarget;
+
+    /**
+     * Sets the value display
+     * @return {void}
+     */
+    function setValueDisplay() {
+      var value = self.get();
+      $value.set('value', value);
+      $valuePad.set('innerHTML', value);
+    }
+
+    var step = $slider.get('step');
+    step = step.toString(10).split('.')[1];
+    self.precision = step ? step.length : 0;
+
+    self.on('change', setValueDisplay);
+    $slider.on('|input', setValueDisplay);
+    setValueDisplay();
+
+    $value.on('|input', function() {
+      $valuePad.set('innerHTML', this.get('value'));
+    });
+
+    $value.on('|change', function() {
+      self.set(this.get('value'));
+      setValueDisplay();
+    });
+  }
+};

src/scripts/config-page.js

@@ -28,7 +28,7 @@ var clayConfig = new ClayConfig(settings, config, $mainForm, clayMeta);
 $mainForm.on('submit', function() {
   // Set the return URL depending on the runtime environment
   location.href = returnTo +
-                  encodeURIComponent(JSON.stringify(clayConfig.getSettings()));
+                  encodeURIComponent(JSON.stringify(clayConfig.serialize()));
 });
 
 // Run the custom function in the context of the ClayConfig

src/scripts/lib/clay-config.js

@@ -155,10 +155,16 @@ function ClayConfig(settings, config, $rootContainer, meta) {
   /**
    * @returns {Object}
    */
-  self.getSettings = function() {
-    _checkBuilt('getSettings');
+  self.serialize = function() {
+    _checkBuilt('serialize');
     _.eachObj(_itemsByAppKey, function(appKey, item) {
-      _settings[appKey] = item.get();
+      _settings[appKey] = {
+        value: item.get()
+      };
+
+      if (item.precision) {
+        _settings[appKey].precision = item.precision;
+      }
     });
     return _settings;
   };

src/scripts/lib/manipulators.js

@@ -85,6 +85,21 @@ module.exports = {
     hide: hide,
     show: show
   },
+  slider: {
+    get: function() {
+      return parseFloat(this.$manipulatorTarget.get('value'));
+    },
+    set: function(value) {
+      var initVal = this.get();
+      this.$manipulatorTarget.set('value', value);
+      if (this.get() === initVal) { return this; }
+      return this.trigger('change');
+    },
+    disable: disable,
+    enable: enable,
+    hide: hide,
+    show: show
+  },
   checked: {
     get: function() {
       return this.$manipulatorTarget.get('checked');

src/scripts/lib/utils.js

@@ -17,54 +17,3 @@ 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;
-};
-
-/**
- * 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;
-};