CriticalDepsMirror/clay
1
0
Fork 0
mirror of https://github.com/pebble-dev/clay.git synced 2026-08-28 04:46:57 -04:00
Code Issues Packages Projects Releases Wiki Activity

Checkbox groups now return an array of booleans

Browse Source
This commit is contained in:
Keegan
2016-06-15 14:20:35 -07:00
parent cabee3ae0b
commit a0335be710
7 changed files with 44 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+7 -18
View File
@@ -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.<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 [`Clay.getSettings()`](#methods) |
| `.get()` | `Array.<string>` | | 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 |
dev/config.js
+2 -6
View File
@@ -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",
src/scripts/components/checkboxgroup.js
+1 -2
View File
@@ -8,7 +8,6 @@ module.exports = {
defaults: {
label: '',
options: [],
description: '',
attributes: {}
description: ''
}
};
src/scripts/lib/manipulators.js
+12 -9
View File
@@ -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);
values.map(function(value) {
self.$element
.select('input[value="' + value.toString(10).replace('"', '\\"') + '"]')
.set('checked', true);
self.$element.select('input')
.set('checked', false)
.each(function(item, index) {
item.checked = !!values[index];
});
return self.trigger('change');
},
disable: disable,
src/templates/components/checkboxgroup.tpl
+2 -7
View File
@@ -3,13 +3,8 @@
<div class="checkbox-group">
{{each options}}
<label class="tap-highlight">
<span class="label">{{{this.label}}}</span>
<input
type="checkbox"
value="{{this.value}}"
name="clay-{{clayId}}"
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
/>
<span class="label">{{{this}}}</span>
<input type="checkbox" value="1" name="clay-{{clayId}}" />
<i></i>
</label>
{{/each}}
test/spec/lib/clay-config.js
+7 -7
View File
@@ -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() {
test/spec/lib/manipulators.js
+13 -10
View File
@@ -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);