diff --git a/dev/config.js b/dev/config.js index 4460ea8..7e67c7e 100644 --- a/dev/config.js +++ b/dev/config.js @@ -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" } ] diff --git a/src/scripts/components/index.js b/src/scripts/components/index.js index f08ccc3..25a6961 100644 --- a/src/scripts/components/index.js +++ b/src/scripts/components/index.js @@ -8,5 +8,6 @@ module.exports = { select: require('./select'), submit: require('./submit'), text: require('./text'), - toggle: require('./toggle') + toggle: require('./toggle'), + radio: require('./radio') }; diff --git a/src/scripts/components/radio.js b/src/scripts/components/radio.js new file mode 100644 index 0000000..67645fd --- /dev/null +++ b/src/scripts/components/radio.js @@ -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: [], + } +}; diff --git a/src/scripts/lib/clay-config.js b/src/scripts/lib/clay-config.js index 9730a07..17ce0c7 100644 --- a/src/scripts/lib/clay-config.js +++ b/src/scripts/lib/clay-config.js @@ -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); diff --git a/src/scripts/lib/clay-item.js b/src/scripts/lib/clay-item.js index a75a052..02a0ca3 100644 --- a/src/scripts/lib/clay-item.js +++ b/src/scripts/lib/clay-item.js @@ -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) { diff --git a/src/scripts/lib/manipulators.js b/src/scripts/lib/manipulators.js index 17c366f..79ae87b 100755 --- a/src/scripts/lib/manipulators.js +++ b/src/scripts/lib/manipulators.js @@ -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); diff --git a/src/styles/clay/_base.scss b/src/styles/clay/_base.scss index e97d04d..120f4a4 100644 --- a/src/styles/clay/_base.scss +++ b/src/styles/clay/_base.scss @@ -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; diff --git a/src/styles/clay/_mixins.scss b/src/styles/clay/_mixins.scss index c0601a3..c1c0e6f 100644 --- a/src/styles/clay/_mixins.scss +++ b/src/styles/clay/_mixins.scss @@ -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; + } +} diff --git a/src/styles/clay/components/radio.scss b/src/styles/clay/components/radio.scss new file mode 100644 index 0000000..a0f27a0 --- /dev/null +++ b/src/styles/clay/components/radio.scss @@ -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; + + } + } + + } +} diff --git a/src/templates/components/radio.tpl b/src/templates/components/radio.tpl new file mode 100755 index 0000000..99f532f --- /dev/null +++ b/src/templates/components/radio.tpl @@ -0,0 +1,17 @@ +
+ {{{label}}} +
+ {{each options}} + + {{/each}} +
+
diff --git a/test/spec/lib/clay-config.js b/test/spec/lib/clay-config.js index c3d45f6..443dec2 100644 --- a/test/spec/lib/clay-config.js +++ b/test/spec/lib/clay-config.js @@ -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]); diff --git a/test/spec/lib/manipulators.js b/test/spec/lib/manipulators.js index df860f2..c51d5fb 100644 --- a/test/spec/lib/manipulators.js +++ b/test/spec/lib/manipulators.js @@ -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);