diff --git a/dev/config.js b/dev/config.js index 7e67c7e..16ced90 100644 --- a/dev/config.js +++ b/dev/config.js @@ -62,8 +62,8 @@ module.exports = [ "defaultValue": "More Settings" }, { - "type": "radio", - "appKey": "radio-test", + "type": "radiogroup", + "appKey": "radiogroup-test", "defaultValue": "quote' \"test", "label": "Radio test", "options": [ @@ -74,6 +74,19 @@ module.exports = [ { "label": "Final thing", "value": "three" } ] }, + { + "type": "checkboxgroup", + "appKey": "checkboxgroup-test", + "defaultValue": ["quote' \"test", "two"], + "label": "Checkbox 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", diff --git a/dist/clay.js b/dist/clay.js index 7df89f1..dc23715 100644 --- a/dist/clay.js +++ b/dist/clay.js @@ -80,6 +80,20 @@ function stringifyRegExp (re) { },{}],2:[function(require,module,exports){ 'use strict'; +module.exports = { + name: 'checkboxgroup', + template: require('../../templates/components/checkboxgroup.tpl'), + style: require('../../styles/clay/components/checkboxgroup.scss'), + manipulator: 'checkboxgroup', + defaults: { + label: '', + options: [] + } +}; + +},{"../../styles/clay/components/checkboxgroup.scss":13,"../../templates/components/checkboxgroup.tpl":19}],3:[function(require,module,exports){ +'use strict'; + module.exports = { name: 'color', template: require('../../templates/components/color.tpl'), @@ -273,7 +287,7 @@ module.exports = { } }; -},{"../../styles/clay/components/color.scss":11,"../../templates/components/color.tpl":15}],3:[function(require,module,exports){ +},{"../../styles/clay/components/color.scss":14,"../../templates/components/color.tpl":20}],4:[function(require,module,exports){ 'use strict'; module.exports = { @@ -285,7 +299,7 @@ module.exports = { } }; -},{"../../templates/components/footer.tpl":16}],4:[function(require,module,exports){ +},{"../../templates/components/footer.tpl":21}],5:[function(require,module,exports){ 'use strict'; module.exports = { @@ -298,7 +312,7 @@ module.exports = { } }; -},{"../../templates/components/heading.tpl":17}],5:[function(require,module,exports){ +},{"../../templates/components/heading.tpl":22}],6:[function(require,module,exports){ 'use strict'; module.exports = { @@ -309,10 +323,12 @@ module.exports = { select: require('./select'), submit: require('./submit'), text: require('./text'), - toggle: require('./toggle') + toggle: require('./toggle'), + radiogroup: require('./radiogroup'), + checkboxgroup: require('./checkboxgroup') }; -},{"./color":2,"./footer":3,"./heading":4,"./input":6,"./select":7,"./submit":8,"./text":9,"./toggle":10}],6:[function(require,module,exports){ +},{"./checkboxgroup":2,"./color":3,"./footer":4,"./heading":5,"./input":7,"./radiogroup":8,"./select":9,"./submit":10,"./text":11,"./toggle":12}],7:[function(require,module,exports){ 'use strict'; module.exports = { @@ -326,7 +342,21 @@ module.exports = { } }; -},{"../../styles/clay/components/input.scss":12,"../../templates/components/input.tpl":18}],7:[function(require,module,exports){ +},{"../../styles/clay/components/input.scss":15,"../../templates/components/input.tpl":23}],8:[function(require,module,exports){ +'use strict'; + +module.exports = { + name: 'radiogroup', + template: require('../../templates/components/radiogroup.tpl'), + style: require('../../styles/clay/components/radiogroup.scss'), + manipulator: 'radiogroup', + defaults: { + label: '', + options: [] + } +}; + +},{"../../styles/clay/components/radiogroup.scss":16,"../../templates/components/radiogroup.tpl":24}],9:[function(require,module,exports){ 'use strict'; module.exports = { @@ -350,7 +380,7 @@ module.exports = { } }; -},{"../../styles/clay/components/select.scss":13,"../../templates/components/select.tpl":19}],8:[function(require,module,exports){ +},{"../../styles/clay/components/select.scss":17,"../../templates/components/select.tpl":25}],10:[function(require,module,exports){ 'use strict'; module.exports = { @@ -363,7 +393,7 @@ module.exports = { } }; -},{"../../templates/components/submit.tpl":20}],9:[function(require,module,exports){ +},{"../../templates/components/submit.tpl":26}],11:[function(require,module,exports){ 'use strict'; module.exports = { @@ -375,7 +405,7 @@ module.exports = { } }; -},{"../../templates/components/text.tpl":21}],10:[function(require,module,exports){ +},{"../../templates/components/text.tpl":27}],12:[function(require,module,exports){ 'use strict'; module.exports = { @@ -389,44 +419,56 @@ module.exports = { } }; -},{"../../styles/clay/components/toggle.scss":14,"../../templates/components/toggle.tpl":22}],11:[function(require,module,exports){ -module.exports = ".component-color .value { width: 2.2652rem; height: 1.4rem; border-radius: 0.7rem; box-shadow: #2f2f2f 0 0.1rem 0.1rem; }\n\n.component-color input:disabled ~ .value, .component-color input:disabled ~ .label { opacity: 0.25; }\n\n.component-color .picker-wrap { left: 0; top: 0; top: 0; right: 0; bottom: 0; position: fixed; padding: 1rem; background: rgba(0, 0, 0, 0.7); opacity: 0; -webkit-transition: opacity 70ms ease-in 175ms; transition: opacity 70ms ease-in 175ms; pointer-events: none; z-index: 100; }\n\n.component-color .picker-wrap .picker { padding: 1rem; background: #f2f2f2; border-radius: 0.25rem; }\n\n.component-color .picker-wrap.show { -webkit-transition-delay: 0ms; transition-delay: 0ms; pointer-events: auto; opacity: 1; }\n\n.component-color .color-box-wrap { box-sizing: border-box; position: relative; height: 0; width: 100%; padding: 0 0 100% 0; margin: 0.6em 0 0em; }\n\n.component-color .color-box-wrap .color-box-container { position: absolute; height: 99.97%; width: 100%; left: 0; top: 0; }\n\n.component-color .color-box-wrap .color-box-container .color-box { float: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-tl { border-top-left-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-tr { border-top-right-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-bl { border-bottom-left-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-br { border-bottom-right-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.selected { -webkit-transform: scale(1.15); transform: scale(1.15); border-radius: 0.25rem; box-shadow: #111 0 0 0.24rem; position: relative; z-index: 100; }\n"; - -},{}],12:[function(require,module,exports){ -module.exports = ".component-input { display: block; }\n\n.component-input .label { padding-bottom: 0.7rem; }\n\n.component-input .input { position: relative; min-width: 100%; margin-top: 0.7rem; margin-left: 0; }\n\n.component-input input { display: block; width: 100%; background: #333333; border-radius: 0.25rem; padding: 0.35rem 0.375rem; border: none; vertical-align: baseline; color: #ffffff; font-size: inherit; }\n\n.component-input input::-webkit-input-placeholder { color: #858585; }\n\n.component-input input::-moz-placeholder { color: #858585; }\n\n.component-input input:-moz-placeholder { color: #858585; }\n\n.component-input input:-ms-input-placeholder { color: #858585; }\n\n.component-input input:focus { border: none; box-shadow: none; }\n\n.component-input input:focus::-webkit-input-placeholder { color: #666666; }\n\n.component-input input:focus::-moz-placeholder { color: #666666; }\n\n.component-input input:focus:-moz-placeholder { color: #666666; }\n\n.component-input input:focus:-ms-input-placeholder { color: #666666; }\n"; - -},{}],13:[function(require,module,exports){ -module.exports = ".component-select { position: relative; }\n\n.component-select .value { position: relative; padding-right: 1.1rem; }\n\n.component-select .value:after { content: \"\"; position: absolute; right: 0; top: 50%; margin-top: -0.1rem; height: 0; width: 0; border-left: 0.425rem solid transparent; border-right: 0.425rem solid transparent; border-top: 0.425rem solid #ececec; }\n\n.component-select select { opacity: 0; position: absolute; display: block; left: 0; right: 0; top: 0; bottom: 0; background: #000; width: 100%; border: none; margin: 0; padding: 0; }\n"; +},{"../../styles/clay/components/toggle.scss":18,"../../templates/components/toggle.tpl":28}],13:[function(require,module,exports){ +module.exports = ".component-checkbox { -webkit-tap-highlight-color: transparent; display: block; }\n\n.component-checkbox:active { background-color: transparent; }\n\n.component-checkbox > .label { display: block; padding-bottom: 0.35rem; }\n\n.component-checkbox .checkbox-group label { padding: 0.35rem 0; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1); }\n\n.component-checkbox .checkbox-group label:active { background-color: rgba(255, 255, 255, 0.1); }\n\n.component-checkbox .checkbox-group .label { font-size: 0.9em; padding: 0 0.375rem; }\n\n.component-checkbox .checkbox-group input { display: none; }\n\n.component-checkbox .checkbox-group i { display: block; position: relative; border-radius: 0.25rem; width: 1.4rem; height: 1.4rem; border: 0.11765rem solid #767676; -webkit-flex-shrink: 0; flex-shrink: 0; }\n\n.component-checkbox .checkbox-group input:checked ~ i { border-color: #ff4700; background: #ff4700; }\n\n.component-checkbox .checkbox-group input:checked ~ i:after { content: ''; box-sizing: border-box; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 0.35rem; top: -0.05rem; display: block; width: 0.5rem; height: 1rem; border: 0 solid #ffffff; border-right-width: 0.11765rem; border-bottom-width: 0.11765rem; }\n"; },{}],14:[function(require,module,exports){ -module.exports = ".component-toggle input { display: none; }\n\n.component-toggle .graphic { display: inline-block; position: relative; }\n\n.component-toggle .graphic .slide { display: block; border-radius: 1.05rem; height: 1.05rem; width: 2.2652rem; background: #2f2f2f; -webkit-transition: background-color 150ms linear; transition: background-color 150ms linear; }\n\n.component-toggle .graphic .marker { background: #ececec; width: 1.4rem; height: 1.4rem; border-radius: 1.4rem; position: absolute; left: 0; display: block; top: -0.175rem; -webkit-transition: -webkit-transform 150ms linear; transition: -webkit-transform 150ms linear; transition: transform 150ms linear; transition: transform 150ms linear, -webkit-transform 150ms linear; box-shadow: #2f2f2f 0 0.1rem 0.1rem; }\n\n.component-toggle input:checked + .graphic .slide { background: #993d19; }\n\n.component-toggle input:checked + .graphic .marker { background: #ff4700; -webkit-transform: translateX(0.8652rem); transform: translateX(0.8652rem); }\n"; +module.exports = ".component-color .value { width: 2.2652rem; height: 1.4rem; border-radius: 0.7rem; box-shadow: #2f2f2f 0 0.1rem 0.1rem; }\n\n.component-color input:disabled ~ .value, .component-color input:disabled ~ .label { opacity: 0.25; }\n\n.component-color .picker-wrap { left: 0; top: 0; top: 0; right: 0; bottom: 0; position: fixed; padding: 1rem; background: rgba(0, 0, 0, 0.7); opacity: 0; -webkit-transition: opacity 70ms ease-in 175ms; transition: opacity 70ms ease-in 175ms; pointer-events: none; z-index: 100; }\n\n.component-color .picker-wrap .picker { padding: 1rem; background: #f2f2f2; border-radius: 0.25rem; }\n\n.component-color .picker-wrap.show { -webkit-transition-delay: 0ms; transition-delay: 0ms; pointer-events: auto; opacity: 1; }\n\n.component-color .color-box-wrap { box-sizing: border-box; position: relative; height: 0; width: 100%; padding: 0 0 100% 0; margin: 0.6em 0 0em; }\n\n.component-color .color-box-wrap .color-box-container { position: absolute; height: 99.97%; width: 100%; left: 0; top: 0; }\n\n.component-color .color-box-wrap .color-box-container .color-box { float: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-tl { border-top-left-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-tr { border-top-right-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-bl { border-bottom-left-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.rounded-br { border-bottom-right-radius: 0.25rem; }\n\n.component-color .color-box-wrap .color-box-container .color-box.selected { -webkit-transform: scale(1.15); transform: scale(1.15); border-radius: 0.25rem; box-shadow: #111 0 0 0.24rem; position: relative; z-index: 100; }\n"; },{}],15:[function(require,module,exports){ -module.exports = "
\n \n
\n
\n
\n
\n
\n
\n
\n
\n"; +module.exports = ".component-input { display: block; }\n\n.component-input .label { padding-bottom: 0.7rem; }\n\n.component-input .input { position: relative; min-width: 100%; margin-top: 0.7rem; margin-left: 0; }\n\n.component-input input { display: block; width: 100%; background: #333333; border-radius: 0.25rem; padding: 0.35rem 0.375rem; border: none; vertical-align: baseline; color: #ffffff; font-size: inherit; }\n\n.component-input input::-webkit-input-placeholder { color: #858585; }\n\n.component-input input::-moz-placeholder { color: #858585; }\n\n.component-input input:-moz-placeholder { color: #858585; }\n\n.component-input input:-ms-input-placeholder { color: #858585; }\n\n.component-input input:focus { border: none; box-shadow: none; }\n\n.component-input input:focus::-webkit-input-placeholder { color: #666666; }\n\n.component-input input:focus::-moz-placeholder { color: #666666; }\n\n.component-input input:focus:-moz-placeholder { color: #666666; }\n\n.component-input input:focus:-ms-input-placeholder { color: #666666; }\n"; },{}],16:[function(require,module,exports){ -module.exports = "\n"; +module.exports = ".component-radio { -webkit-tap-highlight-color: transparent; display: block; }\n\n.component-radio:active { background-color: transparent; }\n\n.component-radio > .label { display: block; padding-bottom: 0.35rem; }\n\n.component-radio .radio-group label { padding: 0.35rem 0; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1); }\n\n.component-radio .radio-group label:active { background-color: rgba(255, 255, 255, 0.1); }\n\n.component-radio .radio-group .label { font-size: 0.9em; padding: 0 0.375rem; }\n\n.component-radio .radio-group input { display: none; }\n\n.component-radio .radio-group i { display: block; position: relative; border-radius: 1.4rem; width: 1.4rem; height: 1.4rem; border: 2px solid #767676; -webkit-flex-shrink: 0; flex-shrink: 0; }\n\n.component-radio .radio-group input:checked ~ i { border-color: #ff4700; }\n\n.component-radio .radio-group input:checked ~ i:after { content: ''; display: block; position: absolute; left: 15%; right: 15%; top: 15%; bottom: 15%; border-radius: 1.4rem; background: #ff4700; }\n"; },{}],17:[function(require,module,exports){ -module.exports = "
\n \n
\n"; +module.exports = ".component-select { position: relative; }\n\n.component-select .value { position: relative; padding-right: 1.1rem; }\n\n.component-select .value:after { content: \"\"; position: absolute; right: 0; top: 50%; margin-top: -0.1rem; height: 0; width: 0; border-left: 0.425rem solid transparent; border-right: 0.425rem solid transparent; border-top: 0.425rem solid #ececec; }\n\n.component-select select { opacity: 0; position: absolute; display: block; left: 0; right: 0; top: 0; bottom: 0; background: #000; width: 100%; border: none; margin: 0; padding: 0; }\n"; },{}],18:[function(require,module,exports){ -module.exports = "\n"; +module.exports = ".component-toggle input { display: none; }\n\n.component-toggle .graphic { display: inline-block; position: relative; }\n\n.component-toggle .graphic .slide { display: block; border-radius: 1.05rem; height: 1.05rem; width: 2.2652rem; background: #2f2f2f; -webkit-transition: background-color 150ms linear; transition: background-color 150ms linear; }\n\n.component-toggle .graphic .marker { background: #ececec; width: 1.4rem; height: 1.4rem; border-radius: 1.4rem; position: absolute; left: 0; display: block; top: -0.175rem; -webkit-transition: -webkit-transform 150ms linear; transition: -webkit-transform 150ms linear; transition: transform 150ms linear; transition: transform 150ms linear, -webkit-transform 150ms linear; box-shadow: #2f2f2f 0 0.1rem 0.1rem; }\n\n.component-toggle input:checked + .graphic .slide { background: #993d19; }\n\n.component-toggle input:checked + .graphic .marker { background: #ff4700; -webkit-transform: translateX(0.8652rem); transform: translateX(0.8652rem); }\n"; },{}],19:[function(require,module,exports){ -module.exports = "\n"; +module.exports = "
\n {{{label}}}\n
\n {{each options}}\n \n {{/each}}\n
\n
\n"; },{}],20:[function(require,module,exports){ -module.exports = "
\n \n {{{label}}}\n \n
\n"; +module.exports = "
\n \n
\n
\n
\n
\n
\n
\n
\n
\n"; },{}],21:[function(require,module,exports){ -module.exports = "
\n

\n
\n"; +module.exports = "\n"; },{}],22:[function(require,module,exports){ -module.exports = "\n"; +module.exports = "
\n \n
\n"; },{}],23:[function(require,module,exports){ -module.exports = "
"; +module.exports = "\n"; + +},{}],24:[function(require,module,exports){ +module.exports = "
\n {{{label}}}\n
\n {{each options}}\n \n {{/each}}\n
\n
\n"; + +},{}],25:[function(require,module,exports){ +module.exports = "\n"; + +},{}],26:[function(require,module,exports){ +module.exports = "
\n \n {{{label}}}\n \n
\n"; + +},{}],27:[function(require,module,exports){ +module.exports = "
\n

\n
\n"; + +},{}],28:[function(require,module,exports){ +module.exports = "\n"; + +},{}],29:[function(require,module,exports){ +module.exports = "
"; },{}],"pebble-clay":[function(require,module,exports){ 'use strict'; @@ -581,5 +623,5 @@ Clay.prototype.getSettings = function(response) { module.exports = Clay; -},{"./src/scripts/components":5,"./tmp/config-page.html":23,"tosource":1}]},{},["pebble-clay"])("pebble-clay") +},{"./src/scripts/components":6,"./tmp/config-page.html":29,"tosource":1}]},{},["pebble-clay"])("pebble-clay") }); \ No newline at end of file diff --git a/src/scripts/components/checkboxgroup.js b/src/scripts/components/checkboxgroup.js new file mode 100644 index 0000000..1baba23 --- /dev/null +++ b/src/scripts/components/checkboxgroup.js @@ -0,0 +1,12 @@ +'use strict'; + +module.exports = { + name: 'checkboxgroup', + template: require('../../templates/components/checkboxgroup.tpl'), + style: require('../../styles/clay/components/checkboxgroup.scss'), + manipulator: 'checkboxgroup', + defaults: { + label: '', + options: [] + } +}; diff --git a/src/scripts/components/index.js b/src/scripts/components/index.js index 25a6961..5b8741c 100644 --- a/src/scripts/components/index.js +++ b/src/scripts/components/index.js @@ -9,5 +9,6 @@ module.exports = { submit: require('./submit'), text: require('./text'), toggle: require('./toggle'), - radio: require('./radio') + radiogroup: require('./radiogroup'), + checkboxgroup: require('./checkboxgroup') }; diff --git a/src/scripts/components/radio.js b/src/scripts/components/radio.js deleted file mode 100644 index 81b1000..0000000 --- a/src/scripts/components/radio.js +++ /dev/null @@ -1,12 +0,0 @@ -'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/components/radiogroup.js b/src/scripts/components/radiogroup.js new file mode 100644 index 0000000..a82cf2f --- /dev/null +++ b/src/scripts/components/radiogroup.js @@ -0,0 +1,12 @@ +'use strict'; + +module.exports = { + name: 'radiogroup', + template: require('../../templates/components/radiogroup.tpl'), + style: require('../../styles/clay/components/radiogroup.scss'), + manipulator: 'radiogroup', + defaults: { + label: '', + options: [] + } +}; diff --git a/src/scripts/lib/manipulators.js b/src/scripts/lib/manipulators.js index 79ae87b..c68eab6 100755 --- a/src/scripts/lib/manipulators.js +++ b/src/scripts/lib/manipulators.js @@ -48,7 +48,7 @@ module.exports = { disable: disable, enable: enable }, - radio: { + radiogroup: { get: function() { return this.$element.select('input:checked').get('value'); }, @@ -61,6 +61,28 @@ module.exports = { disable: disable, enable: enable }, + checkboxgroup: { + get: function() { + var result = []; + this.$element.select('input:checked').each(function(item) { + result.push(item.value); + }); + return result; + }, + set: function(values) { + var self = this; + self.$element.select('input').set('checked', false); + values = values || []; + values.map(function(value) { + self.$element + .select('input[value="' + value.replace('"', '\\"') + '"]') + .set('checked', true); + }); + return self.trigger('change'); + }, + disable: disable, + enable: enable + }, color: { get: function() { return parseInt(this.$manipulatorTarget.get('value'), 16); diff --git a/src/styles/clay/components/checkboxgroup.scss b/src/styles/clay/components/checkboxgroup.scss new file mode 100644 index 0000000..84a873f --- /dev/null +++ b/src/styles/clay/components/checkboxgroup.scss @@ -0,0 +1,63 @@ +@import "bourbon"; +@import "clay"; + +.component-checkbox { + + @include tap-highlight(rgba(0,0,0,0)); + display: block; + + + > .label { + display: block; + padding-bottom: $item-spacing-v / 2; + } + + .checkbox-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: $border-radius; + width: $base-height; + height: $base-height; + border: rem(2px) solid $color-gray-7; + flex-shrink: 0; + } + + input:checked ~ i { + border-color: $color-orange; + background: $color-orange; + + &:after { + content: ''; + box-sizing: border-box; + transform: rotate(45deg); + position: absolute; + left: 0.35rem; + top: -0.05rem; + display: block; + width: 0.5rem; + height: 1rem; + border: 0 solid $color-white; + border-right-width: rem(2px); + border-bottom-width: rem(2px); + + } + } + + } +} diff --git a/src/styles/clay/components/radio.scss b/src/styles/clay/components/radiogroup.scss similarity index 100% rename from src/styles/clay/components/radio.scss rename to src/styles/clay/components/radiogroup.scss diff --git a/src/templates/components/checkboxgroup.tpl b/src/templates/components/checkboxgroup.tpl new file mode 100755 index 0000000..8e3c0d6 --- /dev/null +++ b/src/templates/components/checkboxgroup.tpl @@ -0,0 +1,17 @@ +
+ {{{label}}} +
+ {{each options}} + + {{/each}} +
+
diff --git a/src/templates/components/radio.tpl b/src/templates/components/radiogroup.tpl similarity index 100% rename from src/templates/components/radio.tpl rename to src/templates/components/radiogroup.tpl diff --git a/test/spec/lib/manipulators.js b/test/spec/lib/manipulators.js index c51d5fb..878e84b 100644 --- a/test/spec/lib/manipulators.js +++ b/test/spec/lib/manipulators.js @@ -23,7 +23,7 @@ describe('manipulators', function() { clayItem.on('change', handlerSpy); clayItem.set(value); - assert.strictEqual(clayItem.get(), expected); + assert.deepEqual(clayItem.get(), expected); assert.strictEqual(handlerSpy.callCount, 1, 'handler not called once'); assert(handlerSpy.calledOn(clayItem), 'handler not called on clayItem'); }); @@ -85,9 +85,9 @@ describe('manipulators', function() { testEnable('toggle'); }); - describe('radio', function() { + describe('radiogroup', function() { var item = { - type: 'radio', + type: 'radiogroup', clayId: 1, options: [ { label: '1', value: 'one' }, @@ -102,6 +102,24 @@ describe('manipulators', function() { testEnable(item); }); + describe('checkboxgroup', function() { + var item = { + type: 'checkboxgroup', + clayId: 1, + options: [ + { label: '1', value: 'one' }, + { label: '2', value: 'two' }, + { label: '3', value: 'three "quote' } + ] + }; + testSetGet(item, ['one', 'two']); + testSetGet(item, ['three "quote']); + testSetGet(item, []); + testSetGet(item, false, []); + testDisable(item); + testEnable(item); + }); + describe('color', function() { testSetGet('color', 'FF0000', 0xff0000); testSetGet('color', '#FF0000', 0xff0000);