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

add radio component

Browse Source
This commit is contained in:
Keegan
2016-02-14 02:31:46 -08:00
parent f00b288a82
commit 71dd8ef1c3
12 changed files with 186 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev/config.js
+24 -3
View File
@@ -36,7 +36,7 @@ module.exports = [
"type": "toggle",
"appKey": "cool_stuff",
"label": "Enable Cool Stuff",
"defaultValue": true
"defaultValue": false
},
{
"type": "color",
@@ -62,13 +62,34 @@ module.exports = [
"defaultValue": "More Settings"
},
{
"id": "flavor",
"type": "radio",
"appKey": "radio-test",
"defaultValue": "quote' \"test",
"label": "Radio test",
"options": [
{ "label": "Test thing one", "value": "one" },
{ "label": "Another thing", "value": "two" },
{ "label": "One really long thing that would not fit", "value": "three" },
{ "label": "Small", "value": "quote' \"test" },
{ "label": "Final thing", "value": "three" }
]
},
{
"type": "input",
"appKey": "date",
"defaultValue": "",
"label": "Date",
"attributes": {
type: "date"
}
},
{
"type": "select",
"appKey": "flavor",
"defaultValue": "grape",
"label": "Favorite Flavor",
"options": [
{ "label": "Berry things", "value": "berry" },
{ "label": "Berry", "value": "berry" },
{ "label": "Grape", "value": "grape" },
{ "label": "Banana", "value": "banana" }
]
src/scripts/components/index.js
+2 -1
View File
@@ -8,5 +8,6 @@ module.exports = {
select: require('./select'),
submit: require('./submit'),
text: require('./text'),
toggle: require('./toggle')
toggle: require('./toggle'),
radio: require('./radio')
};
src/scripts/components/radio.js
+12
View File
@@ -0,0 +1,12 @@
'use strict';
module.exports = {
name: 'radio',
template: require('../../templates/components/radio.tpl'),
style: require('../../styles/clay/components/radio.scss'),
manipulator: 'radio',
defaults: {
label: '',
options: [],
}
};
src/scripts/lib/clay-config.js
+11 -8
View File
@@ -53,22 +53,25 @@ function ClayConfig(settings, config, $rootContainer) {
$container.add($wrapper);
_addItems(item.items, $wrapper);
} else {
var clayItem = new ClayItem(item).initialize();
var _item = _.copyObj(item);
_item.clayId = _items.length;
if (item.id) {
_itemsById[item.id] = clayItem;
var clayItem = new ClayItem(_item).initialize();
if (_item.id) {
_itemsById[_item.id] = clayItem;
}
if (item.appKey) {
_itemsByAppKey[item.appKey] = clayItem;
if (_item.appKey) {
_itemsByAppKey[_item.appKey] = clayItem;
}
_items.push(clayItem);
// set the value of the item via the manipulator to ensure consistency
var value = typeof _settings[item.appKey] !== 'undefined' ?
_settings[item.appKey] :
(item.defaultValue || '');
var value = typeof _settings[_item.appKey] !== 'undefined' ?
_settings[_item.appKey] :
(_item.defaultValue || '');
clayItem.set(value);
src/scripts/lib/clay-item.js
+1 -1
View File
@@ -58,7 +58,7 @@ function ClayItem(config) {
};
// attach event methods
ClayEvents.call(self, self.$manipulatorTarget);
ClayEvents.call(self, self.$element);
// attach the manipulator methods to the clayItem
_.eachObj(_component.manipulator, function(methodName, method) {
src/scripts/lib/manipulators.js
+13
View File
@@ -48,6 +48,19 @@ module.exports = {
disable: disable,
enable: enable
},
radio: {
get: function() {
return this.$element.select('input:checked').get('value');
},
set: function(value) {
this.$element
.select('input[value="' + value.replace('"', '\\"') + '"]')
.set('checked', true);
return this.trigger('change');
},
disable: disable,
enable: enable
},
color: {
get: function() {
return parseInt(this.$manipulatorTarget.get('value'), 16);
src/styles/clay/_base.scss
+5 -10
View File
@@ -50,11 +50,10 @@ h6 {
@include font-size(0.8);
}
.component {
label {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: $item-spacing-v;
.input {
white-space: nowrap;
@@ -84,6 +83,10 @@ h6 {
}
}
.component {
padding-bottom: $item-spacing-v;
@include tap-highlight();
}
.section {
background: $color-gray-4;
@@ -126,14 +129,6 @@ h6 {
}
label.component{
-webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
&:active {
background-color: rgba(255, 255, 255, 0.1);
}
}
strong {
@include font-pfdin(medium);
color: $color-orange;
src/styles/clay/_mixins.scss
+8
View File
@@ -33,3 +33,11 @@
font-size:$font-size;
line-height: $base-line-height * ceil($font-size / $base-line-height);
}
@mixin tap-highlight($color: rgba(255, 255, 255, 0.1)) {
-webkit-tap-highlight-color: $color;
&:active {
background-color: $color;
}
}
src/styles/clay/components/radio.scss
+60
View File
@@ -0,0 +1,60 @@
@import "bourbon";
@import "clay";
.component-radio {
@include tap-highlight(rgba(0,0,0,0));
display: block;
> .label {
display: block;
padding-bottom: $item-spacing-v / 2;
}
.radio-group {
label {
padding: $item-spacing-v / 2 0;
@include tap-highlight();
}
.label {
font-size: 0.9em;
padding: 0 $item-spacing-h / 2;
}
input {
display: none;
}
i {
display: block;
position: relative;
border-radius: $base-height;
width: $base-height;
height: $base-height;
border: 2px solid $color-gray-7;
flex-shrink: 0;
}
input:checked ~ i {
border-color: $color-orange;
&:after {
$padding: 15%;
content: '';
display: block;
position: absolute;
left: $padding;
right: $padding;
top: $padding;
bottom: $padding;
border-radius: $base-height;
background: $color-orange;
}
}
}
}
src/templates/components/radio.tpl
Executable
+17
View File
@@ -0,0 +1,17 @@
<div class="component component-radio">
<span class="label">{{{label}}}</span>
<div class="radio-group">
{{each options}}
<label>
<span class="label">{{{this.label}}}</span>
<input
type="radio"
value="{{this.value}}"
name="clay-{{clayId}}"
data-manipulator-target
/>
<i></i>
</label>
{{/each}}
</div>
</div>
test/spec/lib/clay-config.js
+14 -6
View File
@@ -42,7 +42,11 @@ describe('ClayConfig', function() {
describe('.getAllItems()', function() {
it('returns an array of all the items', function() {
var config = fixtures.config(['input', 'text', ['input']]);
var config = fixtures.config([
{type: 'input', clayId: 0},
{type: 'text', clayId: 1},
[{type: 'input', clayId: 2}]
]);
var clayConfig = fixtures.clayConfig(config);
var allItems = clayConfig.getAllItems();
assert.strictEqual(allItems.length, 3);
@@ -55,8 +59,8 @@ describe('ClayConfig', function() {
describe('.getItemByAppKey()', function() {
it('it returns the correct item', function() {
var config = fixtures.config([
{type: 'input', appKey: 'test-app-key'},
{type: 'input', appKey: undefined}
{type: 'input', appKey: 'test-app-key', clayId: 0},
{type: 'input', appKey: undefined, clayId: 1}
]);
var clayConfig = fixtures.clayConfig(config);
assert.deepEqual(clayConfig.getItemByAppKey('test-app-key').config, config[0]);
@@ -66,8 +70,8 @@ describe('ClayConfig', function() {
describe('.getItemById()', function() {
it('it returns the correct item', function() {
var config = fixtures.config([
{type: 'input', id: 'test-id'},
{type: 'input', id: undefined}
{type: 'input', id: 'test-id', clayId: 0},
{type: 'input', id: undefined, clayId: 1}
]);
var clayConfig = fixtures.clayConfig(config);
assert.deepEqual(clayConfig.getItemById('test-id').config, config[0]);
@@ -76,7 +80,11 @@ describe('ClayConfig', function() {
describe('.getItemsByType()', function() {
it('it returns the correct items', function() {
var config = fixtures.config(['input', 'text', 'input']);
var config = fixtures.config([
{type: 'input', clayId: 0},
{type: 'text', clayId: 1},
{type: 'input', clayId: 2}
]);
var clayConfig = fixtures.clayConfig(config);
assert.deepEqual(clayConfig.getItemsByType('input')[0].config, config[0]);
assert.deepEqual(clayConfig.getItemsByType('input')[1].config, config[2]);
test/spec/lib/manipulators.js
+19 -2
View File
@@ -7,7 +7,7 @@ var fixture = require('../../fixture');
describe('manipulators', function() {
/**
* @param {string} itemType
* @param {string|Clay~ConfigItem} itemType
* @param {*} value
* @param {*} [expected]
* @return {void}
@@ -31,7 +31,7 @@ describe('manipulators', function() {
}
/**
* @param {string} itemType
* @param {string|Clay~ConfigItem} itemType
* @return {void}
*/
function testDisable(itemType) {
@@ -85,6 +85,23 @@ describe('manipulators', function() {
testEnable('toggle');
});
describe('radio', function() {
var item = {
type: 'radio',
clayId: 1,
options: [
{ label: '1', value: 'one' },
{ label: '2', value: 'two' },
{ label: '3', value: 'three "quote' }
]
};
testSetGet(item, 'one');
testSetGet(item, 'two');
testSetGet(item, 'three "quote');
testDisable(item);
testEnable(item);
});
describe('color', function() {
testSetGet('color', 'FF0000', 0xff0000);
testSetGet('color', '#FF0000', 0xff0000);