From a0335be71036377af49b4eb8f07f3cf25dc03f9e Mon Sep 17 00:00:00 2001 From: Keegan Date: Wed, 15 Jun 2016 14:20:35 -0700 Subject: [PATCH] Checkbox groups now return an array of booleans --- README.md | 25 ++++++---------------- dev/config.js | 8 ++----- src/scripts/components/checkboxgroup.js | 3 +-- src/scripts/lib/manipulators.js | 21 ++++++++++-------- src/templates/components/checkboxgroup.tpl | 9 ++------ test/spec/lib/clay-config.js | 14 ++++++------ test/spec/lib/manipulators.js | 23 +++++++++++--------- 7 files changed, 44 insertions(+), 59 deletions(-) diff --git a/README.md b/README.md index 5347cf3..12e96af 100755 --- a/README.md +++ b/README.md @@ -482,9 +482,9 @@ A list of options where a user may choose more than one option to submit. | id | string (unique) | Set this to a unique string to allow this item to be looked up using `Clay.getItemsById()` in your [custom function](#custom-function). | | messageKey | string (unique) | The AppMessage key matching the `messageKey` item defined in your `package.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByMessageKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. | | label | string | The label that should appear next to this item. | -| defaultValue | array of strings | The default selected items. Each value must match one in the `options` array. | +| defaultValue | array of booleans | The default selected items. | | description | string | Optional sub-text to include below the component | -| options | array of objects | The options you want to appear in the checkbox group. Each option is an object with a `label` and `value` property. | +| options | array of strings | The labels for each checkbox you want to appear in the checkbox group. | | capabilities | array | Array of features that the connected watch must have for this item to be present | ##### Example @@ -494,24 +494,13 @@ A list of options where a user may choose more than one option to submit. "type": "checkboxgroup", "messageKey": "favorite_food", "label": "Favorite Food", - "defaultValue": ["sushi", "burgers"], - "options": [ - { - "label": "Sushi", - "value": "sushi" - }, - { - "label": "Pizza", - "value": "pizza" - }, - { - "label": "Burgers", - "value": "burgers" - } - ] + "defaultValue": [true, false, true], + "options": ["Sushi", "Pizza", "Burgers"] } ``` +In the above example, Sushi and Burgers will be selected by default. + --- ### Generic Button @@ -757,7 +746,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.` | | 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 [`Clay.getSettings()`](#methods) | +| `.get()` | `Array.` | | Gets an array of booleans representing the list the checked items. **NOTE:** each item in the array will be converted to an `int` when sent to the watch. See [`Clay.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 | diff --git a/dev/config.js b/dev/config.js index 0bf30f3..ee98c1c 100644 --- a/dev/config.js +++ b/dev/config.js @@ -121,13 +121,9 @@ module.exports = [ { "type": "checkboxgroup", "messageKey": "checkboxgroup-test", - "defaultValue": ["quote' \"test", "two"], + "defaultValue": [0, 1, 0], "label": "Checkbox Group", - "options": [ - { "label": "First thing", "value": "three" }, - { "label": "Another thing", "value": "two" }, - { "label": "Final thing", "value": "three" } - ] + "options": [ "First thing", "Another thing", "Final thing" ] }, { "type": "select", diff --git a/src/scripts/components/checkboxgroup.js b/src/scripts/components/checkboxgroup.js index b894745..8c999c4 100644 --- a/src/scripts/components/checkboxgroup.js +++ b/src/scripts/components/checkboxgroup.js @@ -8,7 +8,6 @@ module.exports = { defaults: { label: '', options: [], - description: '', - attributes: {} + description: '' } }; diff --git a/src/scripts/lib/manipulators.js b/src/scripts/lib/manipulators.js index 25fd76b..baf69e7 100755 --- a/src/scripts/lib/manipulators.js +++ b/src/scripts/lib/manipulators.js @@ -133,24 +133,27 @@ module.exports = { checkboxgroup: { get: function() { var result = []; - this.$element.select('input:checked').each(function(item) { - result.push(item.value); + this.$element.select('input').each(function(item) { + result.push(!!item.checked); }); return result; }, set: function(values) { var self = this; - values = values || []; + values = Array.isArray(values) ? values : []; + + while (values.length < this.get().length) { + values.push(false); + } if (_.equals(this.get(), values)) { return this; } - self.$element.select('input').set('checked', false); + self.$element.select('input') + .set('checked', false) + .each(function(item, index) { + item.checked = !!values[index]; + }); - values.map(function(value) { - self.$element - .select('input[value="' + value.toString(10).replace('"', '\\"') + '"]') - .set('checked', true); - }); return self.trigger('change'); }, disable: disable, diff --git a/src/templates/components/checkboxgroup.tpl b/src/templates/components/checkboxgroup.tpl index 6f7c15c..153c58d 100755 --- a/src/templates/components/checkboxgroup.tpl +++ b/src/templates/components/checkboxgroup.tpl @@ -3,13 +3,8 @@
{{each options}} {{/each}} diff --git a/test/spec/lib/clay-config.js b/test/spec/lib/clay-config.js index 899dfbd..fbe72b5 100644 --- a/test/spec/lib/clay-config.js +++ b/test/spec/lib/clay-config.js @@ -297,9 +297,9 @@ describe('ClayConfig', function() { ]}, {type: 'toggle', messageKey: 'test3'}, {type: 'checkboxgroup', messageKey: 'test4', options: [ - {label: 'label-1', value: 'cb-1'}, - {label: 'label-2', value: 'cb-2'}, - {label: 'label-2', value: 'cb-3'} + 'label-1', + 'label-2', + 'label-3' ]}, {type: 'slider', messageKey: 'test5', step: 0.05, defaultValue: 12.5} ]; @@ -313,19 +313,19 @@ describe('ClayConfig', function() { test1: {value: 'default val'}, test2: {value: 'val-2'}, test3: {value: false}, - test4: {value: []}, + test4: {value: [false, false, false]}, test5: {value: 12.5, precision: 2} }); clayConfig.getItemByMessageKey('test1').set('val-1'); clayConfig.getItemByMessageKey('test3').set(true); - clayConfig.getItemByMessageKey('test4').set(['cb-1', 'cb-3']); + clayConfig.getItemByMessageKey('test4').set([true, false, true]); assert.deepEqual(clayConfig.serialize(), { test1: {value: 'val-1'}, test2: {value: 'val-2'}, test3: {value: true}, - test4: {value: ['cb-1', 'cb-3']}, + test4: {value: [true, false, true]}, test5: {value: 12.5, precision: 2} }); @@ -340,7 +340,7 @@ describe('ClayConfig', function() { test1: 'val-1', test2: 'val-2', test3: true, - test4: ['cb-1', 'cb-3'], + test4: [true, false, true], test5: 12.5 }); assert.doesNotThrow(function() { diff --git a/test/spec/lib/manipulators.js b/test/spec/lib/manipulators.js index af886c0..4cf2ee4 100644 --- a/test/spec/lib/manipulators.js +++ b/test/spec/lib/manipulators.js @@ -225,17 +225,20 @@ describe('manipulators', function() { var type = { type: 'checkboxgroup', clayId: 1, - defaultValue: ['two'], - options: [ - { label: '1', value: 'one' }, - { label: '2', value: 'two' }, - { label: '3', value: 'three "quote' } - ] + defaultValue: [true, true, true], + options: ['First', 'Second', 'Third'] }; - testSetGet(type, ['one', 'two']); - testSetGet(type, ['three "quote']); - testSetGet(type, []); - testSetGet(type, false, []); + testSetGet(type, [false, false, true]); + testSetGet(type, [true, false], [true, false, false]); + testSetGet(type, [1, 0], [true, false, false]); + testSetGet(type, [true], [true, false, false]); + testSetGet(type, [1], [true, false, false]); + testSetGet(type, [], [false, false, false]); + + // any non-array values should result in all false + testSetGet(type, false, [false, false, false]); + testSetGet(type, true, [false, false, false]); + testSetGet(type, null, [false, false, false]); testDisable(type); testEnable(type); testShow(type);