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

add checkboxgroup and rename radio to radiogroup

Browse Source
This commit is contained in:
Keegan committed 2016-02-14 15:22:36 -08:00
1 parent 9c929a2e43
commit 1180bf2abc
12 files changed
+235 -47
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

dev/config.js
+15 -2
View File
@@ -62,8 +62,8 @@ module.exports = [
"defaultValue": "More Settings" "defaultValue": "More Settings"
}, },
{ {
"type": "radio", "type": "radiogroup",
"appKey": "radio-test", "appKey": "radiogroup-test",
"defaultValue": "quote' \"test", "defaultValue": "quote' \"test",
"label": "Radio test", "label": "Radio test",
"options": [ "options": [
@@ -74,6 +74,19 @@ module.exports = [
{ "label": "Final thing", "value": "three" } { "label": "Final thing", "value": "three" }
] ]
}, },
{
"type": "checkboxgroup",
"appKey": "checkboxgroup-test",
"defaultValue": ["quote' \"test", "two"],
"label": "Checkbox test",
"options": [
{ "label": "Test <strong>thing</strong> 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", "type": "input",
"appKey": "date", "appKey": "date",
dist/clay.js
Vendored
+70 -28
View File
@@ -80,6 +80,20 @@ function stringifyRegExp (re) {
},{}],2:[function(require,module,exports){ },{}],2:[function(require,module,exports){
'use strict'; '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 = { module.exports = {
name: 'color', name: 'color',
template: require('../../templates/components/color.tpl'), 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'; 'use strict';
module.exports = { 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'; 'use strict';
module.exports = { 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'; 'use strict';
module.exports = { module.exports = {
@@ -309,10 +323,12 @@ module.exports = {
select: require('./select'), select: require('./select'),
submit: require('./submit'), submit: require('./submit'),
text: require('./text'), 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'; 'use strict';
module.exports = { 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'; 'use strict';
module.exports = { 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'; 'use strict';
module.exports = { 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'; 'use strict';
module.exports = { 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'; 'use strict';
module.exports = { module.exports = {
@@ -389,44 +419,56 @@ module.exports = {
} }
}; };
},{"../../styles/clay/components/toggle.scss":14,"../../templates/components/toggle.tpl":22}],11:[function(require,module,exports){ },{"../../styles/clay/components/toggle.scss":18,"../../templates/components/toggle.tpl":28}],13:[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"; 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";
},{}],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";
},{}],14:[function(require,module,exports){ },{}],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){ },{}],15:[function(require,module,exports){
module.exports = "<div class=\"component-color\">\n <label class=\"component\">\n <input\n data-manipulator-target\n type=\"hidden\"\n />\n <span class=\"label\">{{{label}}}</span>\n <span class=\"value\"></span>\n </label>\n <div class=\"picker-wrap\">\n <div class=\"picker\">\n <div class=\"color-box-wrap\">\n <div class=\"color-box-container\"></div>\n </div>\n </div>\n </div>\n</div>\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){ },{}],16:[function(require,module,exports){
module.exports = "<div\n data-manipulator-target\n class=\"item-container-footer\"\n {{each attributes}} {{this.key}}=\"{{this.value}}\" {{/each}}\n></div>\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){ },{}],17:[function(require,module,exports){
module.exports = "<div class=\"component component-heading\">\n <h{{size}} data-manipulator-target {{each key: attributes}}{{key}}=\"{{this}}\"{{/each}}></h{{size}}>\n</div>\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){ },{}],18:[function(require,module,exports){
module.exports = "<label class=\"component component-input\">\n <span class=\"label\">{{{label}}}</span>\n <span class=\"input\">\n <input\n data-manipulator-target\n {{each key: attributes}}{{key}}=\"{{this}}\"{{/each}}\n />\n </span>\n</label>\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){ },{}],19:[function(require,module,exports){
module.exports = "<label class=\"component component-select\">\n <span class=\"label\">{{{label}}}</span>\n <span class=\"value\"></span>\n <select data-manipulator-target>\n {{each options}}\n <option value=\"{{this.value}}\" class=\"item-select-option\">{{this.label}}</option>\n {{/each}}\n </select>\n</label>\n"; module.exports = "<div class=\"component component-checkbox\">\n <span class=\"label\">{{{label}}}</span>\n <div class=\"checkbox-group\">\n {{each options}}\n <label>\n <span class=\"label\">{{{this.label}}}</span>\n <input\n type=\"checkbox\"\n value=\"{{this.value}}\"\n name=\"clay-{{clayId}}\"\n data-manipulator-target\n />\n <i></i>\n </label>\n {{/each}}\n </div>\n</div>\n";
},{}],20:[function(require,module,exports){ },{}],20:[function(require,module,exports){
module.exports = "<div class=\"component component-button\">\n <button\n data-manipulator-target\n type=\"submit\"\n {{each key: attributes}}{{key}}=\"{{this}}\"{{/each}}\n >\n {{{label}}}\n </button>\n</div>\n"; module.exports = "<div class=\"component component-color\">\n <label>\n <input\n data-manipulator-target\n type=\"hidden\"\n />\n <span class=\"label\">{{{label}}}</span>\n <span class=\"value\"></span>\n </label>\n <div class=\"picker-wrap\">\n <div class=\"picker\">\n <div class=\"color-box-wrap\">\n <div class=\"color-box-container\"></div>\n </div>\n </div>\n </div>\n</div>\n";
},{}],21:[function(require,module,exports){ },{}],21:[function(require,module,exports){
module.exports = "<div class=\"component component-text\">\n <p data-manipulator-target {{each key: attributes}}{{key}}=\"{{this}}\"{{/each}}></p>\n</div>\n"; module.exports = "<div\n data-manipulator-target\n class=\"item-container-footer\"\n {{each attributes}} {{this.key}}=\"{{this.value}}\" {{/each}}\n></div>\n";
},{}],22:[function(require,module,exports){ },{}],22:[function(require,module,exports){
module.exports = "<label class=\"component component-toggle\">\n <span class=\"label\">{{{label}}}</span>\n <span class=\"input\">\n <input\n data-manipulator-target\n type=\"checkbox\"\n {{each key: attributes}}{{key}}=\"{{this}}\"{{/each}}\n />\n <span class=\"graphic\">\n <span class=\"slide\"></span>\n <span class=\"marker\"></span>\n </span>\n </span>\n</label>\n"; module.exports = "<div class=\"component component-heading\">\n <h{{size}} data-manipulator-target {{each key: attributes}}{{key}}=\"{{this}}\"{{/each}}></h{{size}}>\n</div>\n";
},{}],23:[function(require,module,exports){ },{}],23:[function(require,module,exports){
module.exports = "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><style>@font-face{font-family:PFDinDisplayProRegularWebfont;src:url(data:application/font-woff;charset=utf-8;base64,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 Line truncated module.exports = "<label class=\"component component-input\">\n <span class=\"label\">{{{label}}}</span>\n <span class=\"input\">\n <input\n data-manipulator-target\n {{each key: attributes}}{{key}}=\"{{this}}\"{{/each}}\n />\n </span>\n</label>\n";
},{}],24:[function(require,module,exports){
module.exports = "<div class=\"component component-radio\">\n <span class=\"label\">{{{label}}}</span>\n <div class=\"radio-group\">\n {{each options}}\n <label>\n <span class=\"label\">{{{this.label}}}</span>\n <input\n type=\"radio\"\n value=\"{{this.value}}\"\n name=\"clay-{{clayId}}\"\n data-manipulator-target\n />\n <i></i>\n </label>\n {{/each}}\n </div>\n</div>\n";
},{}],25:[function(require,module,exports){
module.exports = "<label class=\"component component-select\">\n <span class=\"label\">{{{label}}}</span>\n <span class=\"value\"></span>\n <select data-manipulator-target>\n {{each options}}\n <option value=\"{{this.value}}\" class=\"item-select-option\">{{this.label}}</option>\n {{/each}}\n </select>\n</label>\n";
},{}],26:[function(require,module,exports){
module.exports = "<div class=\"component component-button\">\n <button\n data-manipulator-target\n type=\"submit\"\n {{each key: attributes}}{{key}}=\"{{this}}\"{{/each}}\n >\n {{{label}}}\n </button>\n</div>\n";
},{}],27:[function(require,module,exports){
module.exports = "<div class=\"component component-text\">\n <p data-manipulator-target {{each key: attributes}}{{key}}=\"{{this}}\"{{/each}}></p>\n</div>\n";
},{}],28:[function(require,module,exports){
module.exports = "<label class=\"component component-toggle\">\n <span class=\"label\">{{{label}}}</span>\n <span class=\"input\">\n <input\n data-manipulator-target\n type=\"checkbox\"\n {{each key: attributes}}{{key}}=\"{{this}}\"{{/each}}\n />\n <span class=\"graphic\">\n <span class=\"slide\"></span>\n <span class=\"marker\"></span>\n </span>\n </span>\n</label>\n";
},{}],29:[function(require,module,exports){
module.exports = "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><style>@font-face{font-family:PFDinDisplayProRegularWebfont;src:url(data:application/font-woff;charset=utf-8;base64,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 Line truncated
},{}],"pebble-clay":[function(require,module,exports){ },{}],"pebble-clay":[function(require,module,exports){
'use strict'; 'use strict';
@@ -581,5 +623,5 @@ Clay.prototype.getSettings = function(response) {
module.exports = Clay; 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")
}); });
src/scripts/components/checkboxgroup.js
+12
View File
@@ -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: []
}
};
src/scripts/components/index.js
+2 -1
View File
@@ -9,5 +9,6 @@ module.exports = {
submit: require('./submit'), submit: require('./submit'),
text: require('./text'), text: require('./text'),
toggle: require('./toggle'), toggle: require('./toggle'),
radio: require('./radio') radiogroup: require('./radiogroup'),
checkboxgroup: require('./checkboxgroup')
}; };
src/scripts/components/radio.js
-12
View File
@@ -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: []
}
};
src/scripts/components/radiogroup.js
+12
View File
@@ -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: []
}
};
src/scripts/lib/manipulators.js
+23 -1
View File
@@ -48,7 +48,7 @@ module.exports = {
disable: disable, disable: disable,
enable: enable enable: enable
}, },
radio: { radiogroup: {
get: function() { get: function() {
return this.$element.select('input:checked').get('value'); return this.$element.select('input:checked').get('value');
}, },
@@ -61,6 +61,28 @@ module.exports = {
disable: disable, disable: disable,
enable: enable 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: { color: {
get: function() { get: function() {
return parseInt(this.$manipulatorTarget.get('value'), 16); return parseInt(this.$manipulatorTarget.get('value'), 16);
src/styles/clay/components/checkboxgroup.scss
+63
View File
@@ -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);
}
}
}
}
src/styles/clay/components/radio.scss → src/styles/clay/components/radiogroup.scss
View File
File renamed without changes.
src/templates/components/checkboxgroup.tpl
Executable
+17
View File
@@ -0,0 +1,17 @@
<div class="component component-checkbox">
<span class="label">{{{label}}}</span>
<div class="checkbox-group">
{{each options}}
<label>
<span class="label">{{{this.label}}}</span>
<input
type="checkbox"
value="{{this.value}}"
name="clay-{{clayId}}"
data-manipulator-target
/>
<i></i>
</label>
{{/each}}
</div>
</div>
src/templates/components/radio.tpl → src/templates/components/radiogroup.tpl
View File
File renamed without changes.
test/spec/lib/manipulators.js
+21 -3
View File
@@ -23,7 +23,7 @@ describe('manipulators', function() {
clayItem.on('change', handlerSpy); clayItem.on('change', handlerSpy);
clayItem.set(value); clayItem.set(value);
assert.strictEqual(clayItem.get(), expected); assert.deepEqual(clayItem.get(), expected);
assert.strictEqual(handlerSpy.callCount, 1, 'handler not called once'); assert.strictEqual(handlerSpy.callCount, 1, 'handler not called once');
assert(handlerSpy.calledOn(clayItem), 'handler not called on clayItem'); assert(handlerSpy.calledOn(clayItem), 'handler not called on clayItem');
}); });
@@ -85,9 +85,9 @@ describe('manipulators', function() {
testEnable('toggle'); testEnable('toggle');
}); });
describe('radio', function() { describe('radiogroup', function() {
var item = { var item = {
type: 'radio', type: 'radiogroup',
clayId: 1, clayId: 1,
options: [ options: [
{ label: '1', value: 'one' }, { label: '1', value: 'one' },
@@ -102,6 +102,24 @@ describe('manipulators', function() {
testEnable(item); 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() { describe('color', function() {
testSetGet('color', 'FF0000', 0xff0000); testSetGet('color', 'FF0000', 0xff0000);
testSetGet('color', '#FF0000', 0xff0000); testSetGet('color', '#FF0000', 0xff0000);