mirror of
https://github.com/pebble-dev/clay.git
synced 2026-10-27 06:59:59 -04:00
strip out components into separate repo
This commit is contained in:
Keegan committed
1 parent
66f2b05129
commit
80982c8e6d
31 files changed
+620
-589
No files matched your search
@@ -5,9 +5,7 @@
|
|||||||
"browser": true
|
"browser": true
|
||||||
},
|
},
|
||||||
"globals": {
|
"globals": {
|
||||||
"Pebble": true,
|
"Pebble": true
|
||||||
"$": true,
|
|
||||||
"t": true
|
|
||||||
},
|
},
|
||||||
"rules" : {
|
"rules" : {
|
||||||
"new-cap": [0],
|
"new-cap": [0],
|
||||||
|
|||||||
Vendored
+481
@@ -0,0 +1,481 @@
|
|||||||
|
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.clay = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||||
|
/* toSource by Marcello Bastea-Forte - zlib license */
|
||||||
|
module.exports = function (object, filter, indent, startingIndent) {
|
||||||
|
var seen = []
|
||||||
|
return walk(object, filter, indent === undefined ? ' ' : (indent || ''), startingIndent || '', seen)
|
||||||
|
|
||||||
|
function walk (object, filter, indent, currentIndent, seen) {
|
||||||
|
var nextIndent = currentIndent + indent
|
||||||
|
object = filter ? filter(object) : object
|
||||||
|
|
||||||
|
switch (typeof object) {
|
||||||
|
case 'string':
|
||||||
|
return JSON.stringify(object)
|
||||||
|
case 'boolean':
|
||||||
|
case 'number':
|
||||||
|
case 'undefined':
|
||||||
|
return '' + object
|
||||||
|
case 'function':
|
||||||
|
return object.toString()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (object === null) {
|
||||||
|
return 'null'
|
||||||
|
}
|
||||||
|
if (object instanceof RegExp) {
|
||||||
|
return stringifyRegExp(object)
|
||||||
|
}
|
||||||
|
if (object instanceof Date) {
|
||||||
|
return 'new Date(' + object.getTime() + ')'
|
||||||
|
}
|
||||||
|
|
||||||
|
var seenIndex = seen.indexOf(object) + 1
|
||||||
|
if (seenIndex > 0) {
|
||||||
|
return '{$circularReference:' + seenIndex + '}'
|
||||||
|
}
|
||||||
|
seen.push(object)
|
||||||
|
|
||||||
|
function join (elements) {
|
||||||
|
return indent.slice(1) + elements.join(',' + (indent && '\n') + nextIndent) + (indent ? ' ' : '')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(object)) {
|
||||||
|
return '[' + join(object.map(function (element) {
|
||||||
|
return walk(element, filter, indent, nextIndent, seen.slice())
|
||||||
|
})) + ']'
|
||||||
|
}
|
||||||
|
var keys = Object.keys(object)
|
||||||
|
return keys.length ? '{' + join(keys.map(function (key) {
|
||||||
|
return (legalKey(key) ? key : JSON.stringify(key)) + ':' + walk(object[key], filter, indent, nextIndent, seen.slice())
|
||||||
|
})) + '}' : '{}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var KEYWORD_REGEXP = /^(abstract|boolean|break|byte|case|catch|char|class|const|continue|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|long|native|new|null|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|undefined|var|void|volatile|while|with)$/
|
||||||
|
|
||||||
|
function legalKey (string) {
|
||||||
|
return /^[a-z_$][0-9a-z_$]*$/gi.test(string) && !KEYWORD_REGEXP.test(string)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Node.js 0.10 doesn't escape slashes in re.toString() or re.source
|
||||||
|
// when they were not escaped initially.
|
||||||
|
// Here we check if the workaround is needed once and for all,
|
||||||
|
// then apply it only for non-escaped slashes.
|
||||||
|
var isRegExpEscaped = (new RegExp('/')).source === '\\/'
|
||||||
|
|
||||||
|
function stringifyRegExp (re) {
|
||||||
|
if (isRegExpEscaped) {
|
||||||
|
return re.toString()
|
||||||
|
}
|
||||||
|
var source = re.source.replace(/\//g, function (found, offset, str) {
|
||||||
|
if (offset === 0 || str[offset - 1] !== '\\') {
|
||||||
|
return '\\/'
|
||||||
|
}
|
||||||
|
return '/'
|
||||||
|
})
|
||||||
|
var flags = (re.global && 'g' || '') + (re.ignoreCase && 'i' || '') + (re.multiline && 'm' || '')
|
||||||
|
return '/' + source + '/' + flags
|
||||||
|
}
|
||||||
|
|
||||||
|
},{}],2:[function(require,module,exports){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
name: 'color',
|
||||||
|
template: require('../../templates/components/color.tpl'),
|
||||||
|
style: require('../../styles/clay/components/color.scss'),
|
||||||
|
manipulator: 'val',
|
||||||
|
defaults: {
|
||||||
|
label: ''
|
||||||
|
},
|
||||||
|
initialize: function(minified) {
|
||||||
|
var HTML = minified.HTML;
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
/* eslint-disable comma-spacing, no-multi-spaces, max-len,
|
||||||
|
standard/array-bracket-even-spacing */
|
||||||
|
var layout = self.config.layout || [
|
||||||
|
[false , false , '#55FF00', '#AAFF55', false , '#FFFF55', '#FFFFAA', false , false ],
|
||||||
|
[false , '#AAFFAA', '#55FF55', '#00FF00', '#AAFF00', '#FFFF00', '#FFAA55', '#FFAAAA', false ],
|
||||||
|
['#55FFAA', '#00FF55', '#00AA00', '#55AA00', '#AAAA55', '#AAAA00', '#FFAA00', '#FF5500', '#FF5555'],
|
||||||
|
['#AAFFFF', '#00FFAA', '#00AA55', '#55AA55', '#005500', '#555500', '#AA5500', '#FF0000', '#FF0055'],
|
||||||
|
[false , '#55AAAA', '#00AAAA', '#005555', '#FFFFFF', '#000000', '#AA5555', '#AA0000', false ],
|
||||||
|
['#55FFFF', '#00FFFF', '#00AAFF', '#0055AA', '#AAAAAA', '#555555', '#550000', '#AA0055', '#FF55AA'],
|
||||||
|
['#55AAFF', '#0055FF', '#0000FF', '#0000AA', '#000055', '#550055', '#AA00AA', '#FF00AA', '#FFAAFF'],
|
||||||
|
[false , '#5555AA', '#5555FF', '#5500FF', '#5500AA', '#AA00FF', '#FF00FF', '#FF55FF', false ],
|
||||||
|
[false , false , false , '#AAAAFF', '#AA55FF', '#AA55AA', false , false , false ]
|
||||||
|
];
|
||||||
|
/* eslint-enable */
|
||||||
|
|
||||||
|
var grid = '';
|
||||||
|
var itemWidth = 100 / layout[0].length;
|
||||||
|
var itemHeight = 100 / layout.length;
|
||||||
|
var $elem = self.$element;
|
||||||
|
|
||||||
|
for (var i = 0; i < layout.length; i++) {
|
||||||
|
for (var j = 0; j < layout[i].length; j++) {
|
||||||
|
|
||||||
|
var color = layout[i][j] || 'transparent';
|
||||||
|
var selectable = (color !== 'transparent' ? ' selectable' : '');
|
||||||
|
|
||||||
|
var roundedTL = (i === 0 && j === 0) || i === 0 && !layout[i][j - 1] ||
|
||||||
|
!layout[i][j - 1] && !layout[i - 1][j] ?
|
||||||
|
' rounded-tl' :
|
||||||
|
'';
|
||||||
|
|
||||||
|
var roundedTR = i === 0 && !layout[i][j + 1] ||
|
||||||
|
!layout[i][j + 1] && !layout[i - 1][j] ?
|
||||||
|
' rounded-tr ' :
|
||||||
|
'';
|
||||||
|
|
||||||
|
var roundedBL = (i === layout.length - 1 && j === 0) ||
|
||||||
|
i === layout.length - 1 && !layout[i][j - 1] ||
|
||||||
|
!layout[i][j - 1] && !layout[i + 1][j] ?
|
||||||
|
' rounded-bl' :
|
||||||
|
'';
|
||||||
|
|
||||||
|
var roundedBR = i === layout.length - 1 && !layout[i][j + 1] ||
|
||||||
|
!layout[i][j + 1] && !layout[i + 1][j] ?
|
||||||
|
' rounded-br' :
|
||||||
|
'';
|
||||||
|
|
||||||
|
grid += '<i ' +
|
||||||
|
'class="color-box ' + selectable + roundedTL + roundedTR + roundedBL +
|
||||||
|
roundedBR + '" ' +
|
||||||
|
'data-value="' + color.replace(/^#/, '0x').toLowerCase() + '" ' +
|
||||||
|
'style="' +
|
||||||
|
'width:' + itemWidth + '%; ' +
|
||||||
|
'height:' + itemHeight + '%; ' +
|
||||||
|
'background:' + color + ';">' +
|
||||||
|
'</i>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$elem.select('.color-box-container').add(HTML(grid));
|
||||||
|
|
||||||
|
var $valueDisplay = $elem.select('.value');
|
||||||
|
var $picker = $elem.select('.picker-wrap');
|
||||||
|
var disabled = self.$manipulatorTarget.get('disabled');
|
||||||
|
|
||||||
|
$elem.select('label').on('click', function(ev) {
|
||||||
|
if (!disabled) {
|
||||||
|
$picker.set('show'); // toggle visibility
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
self.on('change', function() {
|
||||||
|
var value = self.get().replace(/^0x/, '').toLowerCase();
|
||||||
|
$valueDisplay.set('$background-color', '#' + value);
|
||||||
|
$elem.select('.color-box').set('-selected');
|
||||||
|
$elem.select('.color-box[data-value="0x' + value + '"]').set('+selected');
|
||||||
|
});
|
||||||
|
|
||||||
|
$elem.select('.color-box.selectable').on('touchend', function(ev) {
|
||||||
|
self.set(ev.target.dataset.value);
|
||||||
|
$picker.set('-show');
|
||||||
|
});
|
||||||
|
|
||||||
|
self.on('disabled', function() {
|
||||||
|
disabled = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
self.on('enabled', function() {
|
||||||
|
disabled = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
},{"../../styles/clay/components/color.scss":11,"../../templates/components/color.tpl":15}],3:[function(require,module,exports){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
name: 'footer',
|
||||||
|
template: require('../../templates/components/footer.tpl'),
|
||||||
|
manipulator: 'html',
|
||||||
|
defaults: {
|
||||||
|
attributes: {}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
},{"../../templates/components/footer.tpl":16}],4:[function(require,module,exports){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
name: 'heading',
|
||||||
|
template: require('../../templates/components/heading.tpl'),
|
||||||
|
manipulator: 'html',
|
||||||
|
defaults: {
|
||||||
|
attributes: {},
|
||||||
|
size: 4
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
},{"../../templates/components/heading.tpl":17}],5:[function(require,module,exports){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
color: require('./color'),
|
||||||
|
footer: require('./footer'),
|
||||||
|
heading: require('./heading'),
|
||||||
|
input: require('./input'),
|
||||||
|
select: require('./select'),
|
||||||
|
submit: require('./submit'),
|
||||||
|
text: require('./text'),
|
||||||
|
toggle: require('./toggle')
|
||||||
|
};
|
||||||
|
|
||||||
|
},{"./color":2,"./footer":3,"./heading":4,"./input":6,"./select":7,"./submit":8,"./text":9,"./toggle":10}],6:[function(require,module,exports){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
name: 'input',
|
||||||
|
template: require('../../templates/components/input.tpl'),
|
||||||
|
style: require('../../styles/clay/components/input.scss'),
|
||||||
|
manipulator: 'val',
|
||||||
|
defaults: {
|
||||||
|
label: '',
|
||||||
|
attributes: {}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
},{"../../styles/clay/components/input.scss":12,"../../templates/components/input.tpl":18}],7:[function(require,module,exports){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
name: 'select',
|
||||||
|
template: require('../../templates/components/select.tpl'),
|
||||||
|
style: require('../../styles/clay/components/select.scss'),
|
||||||
|
manipulator: 'val',
|
||||||
|
defaults: {
|
||||||
|
label: '',
|
||||||
|
options: []
|
||||||
|
},
|
||||||
|
initialize: function() {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
var $value = self.$element.select('.value');
|
||||||
|
|
||||||
|
self.on('change', function(ev) {
|
||||||
|
var value = self.$manipulatorTarget.select('option:checked').get('innerHTML');
|
||||||
|
$value.set('innerHTML', value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
},{"../../styles/clay/components/select.scss":13,"../../templates/components/select.tpl":19}],8:[function(require,module,exports){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
name: 'submit',
|
||||||
|
template: require('../../templates/components/submit.tpl'),
|
||||||
|
manipulator: 'val',
|
||||||
|
defaults: {
|
||||||
|
attributes: {}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
},{"../../templates/components/submit.tpl":20}],9:[function(require,module,exports){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
name: 'text',
|
||||||
|
template: require('../../templates/components/text.tpl'),
|
||||||
|
manipulator: 'html',
|
||||||
|
defaults: {
|
||||||
|
attributes: {}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
},{"../../templates/components/text.tpl":21}],10:[function(require,module,exports){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
name: 'toggle',
|
||||||
|
template: require('../../templates/components/toggle.tpl'),
|
||||||
|
style: require('../../styles/clay/components/toggle.scss'),
|
||||||
|
manipulator: 'checked',
|
||||||
|
defaults: {
|
||||||
|
attributes: {}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
},{"../../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";
|
||||||
|
|
||||||
|
},{}],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";
|
||||||
|
|
||||||
|
},{}],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";
|
||||||
|
|
||||||
|
},{}],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";
|
||||||
|
|
||||||
|
},{}],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";
|
||||||
|
|
||||||
|
},{}],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";
|
||||||
|
|
||||||
|
},{}],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";
|
||||||
|
|
||||||
|
},{}],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";
|
||||||
|
|
||||||
|
},{}],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";
|
||||||
|
|
||||||
|
},{}],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";
|
||||||
|
|
||||||
|
},{}],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
|
||||||
|
|
||||||
|
},{}],"pebble-clay":[function(require,module,exports){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var configPageHtml = require('./tmp/config-page.html');
|
||||||
|
var toSource = require('tosource');
|
||||||
|
var standardComponents = require('./src/scripts/components');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} input
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
function encodeDataUri(input) {
|
||||||
|
if (window.btoa) {
|
||||||
|
return 'data:text/html;base64,' + encodeURIComponent(window.btoa(input));
|
||||||
|
}
|
||||||
|
|
||||||
|
// iOS doesn't have a window so we need to polyfil window.btoa
|
||||||
|
// extracted from https://github.com/inexorabletash/polyfill
|
||||||
|
var B64_ALPHABET =
|
||||||
|
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
|
||||||
|
input = String(input);
|
||||||
|
var position = 0;
|
||||||
|
var out = [];
|
||||||
|
var o1;
|
||||||
|
var o2;
|
||||||
|
var o3;
|
||||||
|
var e1;
|
||||||
|
var e2;
|
||||||
|
var e3;
|
||||||
|
var e4;
|
||||||
|
|
||||||
|
if (/[^\x00-\xFF]/.test(input)) { throw Error('InvalidCharacterError'); }
|
||||||
|
|
||||||
|
while (position < input.length) {
|
||||||
|
o1 = input.charCodeAt(position++);
|
||||||
|
o2 = input.charCodeAt(position++);
|
||||||
|
o3 = input.charCodeAt(position++);
|
||||||
|
|
||||||
|
// 111111 112222 222233 333333
|
||||||
|
e1 = o1 >> 2;
|
||||||
|
e2 = ((o1 & 0x3) << 4) | (o2 >> 4);
|
||||||
|
e3 = ((o2 & 0xf) << 2) | (o3 >> 6);
|
||||||
|
e4 = o3 & 0x3f;
|
||||||
|
|
||||||
|
if (position === input.length + 2) {
|
||||||
|
e3 = 64;
|
||||||
|
e4 = 64;
|
||||||
|
} else if (position === input.length + 1) {
|
||||||
|
e4 = 64;
|
||||||
|
}
|
||||||
|
|
||||||
|
out.push(B64_ALPHABET.charAt(e1),
|
||||||
|
B64_ALPHABET.charAt(e2),
|
||||||
|
B64_ALPHABET.charAt(e3),
|
||||||
|
B64_ALPHABET.charAt(e4));
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'data:text/html;base64,' + encodeURIComponent(out.join(''));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Array} config - the Clay config
|
||||||
|
* @param {function} [customFn] - custom code to run from the config page.
|
||||||
|
* Will run with api as context
|
||||||
|
* @constructor
|
||||||
|
*/
|
||||||
|
function Clay(config, customFn) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
self.config = config;
|
||||||
|
self.customFn = customFn || function() {};
|
||||||
|
self.components = [];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @param {Clay~ConfigItem|Array} item
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
function _registerStandardComponents(item) {
|
||||||
|
if (Array.isArray(item)) {
|
||||||
|
item.forEach(function(item) {
|
||||||
|
_registerStandardComponents(item);
|
||||||
|
});
|
||||||
|
} else if (item.type === 'section') {
|
||||||
|
_registerStandardComponents(item.items);
|
||||||
|
} else if (standardComponents[item.type]) {
|
||||||
|
self.registerComponent(standardComponents[item.type]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_registerStandardComponents(self.config);
|
||||||
|
}
|
||||||
|
|
||||||
|
Clay.prototype.registerComponent = function(component) {
|
||||||
|
this.components.push(component);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate the Data URI used by the config Page with settings injected
|
||||||
|
* @param {string} returnTo - used while developing on desktop.
|
||||||
|
* @return {string}
|
||||||
|
*/
|
||||||
|
Clay.prototype.generateUrl = function(returnTo) {
|
||||||
|
var settings;
|
||||||
|
try {
|
||||||
|
settings = JSON.parse(localStorage.getItem('clay-settings')) || {};
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
settings = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show config page
|
||||||
|
return encodeDataUri(configPageHtml
|
||||||
|
.replace('$$CUSTOM_FN$$', toSource(this.customFn))
|
||||||
|
.replace('$$RETURN_TO$$', returnTo || 'pebblejs://close#')
|
||||||
|
.replace('$$CONFIG$$', toSource(this.config))
|
||||||
|
.replace('$$SETTINGS$$', toSource(settings))
|
||||||
|
.replace('$$COMPONENTS$$', toSource(this.components))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parse the response from the webviewclosed event data
|
||||||
|
* @param {string} response
|
||||||
|
* @returns {{}}
|
||||||
|
*/
|
||||||
|
Clay.prototype.getSettings = function(response) {
|
||||||
|
// Decode and parse config data as JSON
|
||||||
|
var settings = JSON.parse(decodeURIComponent(response));
|
||||||
|
// @todo get defaults in here
|
||||||
|
if (!settings) return {};
|
||||||
|
|
||||||
|
localStorage.setItem('clay-settings', JSON.stringify(settings));
|
||||||
|
return settings;
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = Clay;
|
||||||
|
|
||||||
|
},{"./src/scripts/components":5,"./tmp/config-page.html":23,"tosource":1}]},{},["pebble-clay"])("pebble-clay")
|
||||||
|
});
|
||||||
+6
-5
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "pebble-clay",
|
"name": "pebble-clay",
|
||||||
"version": "1.0.0",
|
"version": "0.1.0",
|
||||||
"description": "Pebble Config Framework",
|
"description": "Pebble Config Framework",
|
||||||
"main": "dist/clay.js",
|
"main": "dist/clay.js",
|
||||||
"directories": {
|
"directories": {
|
||||||
@@ -8,14 +8,14 @@
|
|||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test-travis": "./node_modules/.bin/karma start ./test/karma.conf.js --single-run --browsers chromeTravisCI && ./node_modules/.bin/eslint ./",
|
"test-travis": "./node_modules/.bin/karma start ./test/karma.conf.js --single-run --browsers chromeTravisCI && ./node_modules/.bin/eslint ./",
|
||||||
"test-debug": "export DEBUG=true; ./node_modules/.bin/karma start ./test/karma.conf.js --no-single-run",
|
"test-debug": "DEBUG=true && ./node_modules/.bin/karma start ./test/karma.conf.js --no-single-run",
|
||||||
"test": "./node_modules/.bin/karma start ./test/karma.conf.js --single-run",
|
"test": "./node_modules/.bin/karma start ./test/karma.conf.js --single-run",
|
||||||
"lint": "./node_modules/.bin/eslint ./",
|
"lint": "./node_modules/.bin/eslint ./",
|
||||||
"build": "gulp"
|
"build": "gulp"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/keegan-lillo/pebble-clay.git"
|
"url": "git+https://github.com/pebble/clay.git"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"Pebble",
|
"Pebble",
|
||||||
@@ -24,10 +24,11 @@
|
|||||||
"author": "Keegan Lillo",
|
"author": "Keegan Lillo",
|
||||||
"license": "GPL",
|
"license": "GPL",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/keegan-lillo/pebble-clay/issues"
|
"url": "https://github.com/pebble/clay/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/keegan-lillo/pebble-clay#readme",
|
"homepage": "https://github.com/pebble/clay#readme",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"pebble-clay-components": "git+https://github.com/pebble/clay-components.git#master",
|
||||||
"browserify": "^13.0.0",
|
"browserify": "^13.0.0",
|
||||||
"browserify-istanbul": "^0.2.1",
|
"browserify-istanbul": "^0.2.1",
|
||||||
"chai": "^3.4.1",
|
"chai": "^3.4.1",
|
||||||
|
|||||||
@@ -1,107 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
var HTML = require('../vendor/minified/minified').HTML;
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
name: 'color',
|
|
||||||
template: require('../../templates/components/color.tpl'),
|
|
||||||
manipulator: require('../lib/manipulators').val,
|
|
||||||
defaults: {
|
|
||||||
label: ''
|
|
||||||
},
|
|
||||||
initialize: function() {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
/* eslint-disable comma-spacing, no-multi-spaces, max-len,
|
|
||||||
standard/array-bracket-even-spacing */
|
|
||||||
var layout = self.config.layout || [
|
|
||||||
[false , false , '#55FF00', '#AAFF55', false , '#FFFF55', '#FFFFAA', false , false ],
|
|
||||||
[false , '#AAFFAA', '#55FF55', '#00FF00', '#AAFF00', '#FFFF00', '#FFAA55', '#FFAAAA', false ],
|
|
||||||
['#55FFAA', '#00FF55', '#00AA00', '#55AA00', '#AAAA55', '#AAAA00', '#FFAA00', '#FF5500', '#FF5555'],
|
|
||||||
['#AAFFFF', '#00FFAA', '#00AA55', '#55AA55', '#005500', '#555500', '#AA5500', '#FF0000', '#FF0055'],
|
|
||||||
[false , '#55AAAA', '#00AAAA', '#005555', '#FFFFFF', '#000000', '#AA5555', '#AA0000', false ],
|
|
||||||
['#55FFFF', '#00FFFF', '#00AAFF', '#0055AA', '#AAAAAA', '#555555', '#550000', '#AA0055', '#FF55AA'],
|
|
||||||
['#55AAFF', '#0055FF', '#0000FF', '#0000AA', '#000055', '#550055', '#AA00AA', '#FF00AA', '#FFAAFF'],
|
|
||||||
[false , '#5555AA', '#5555FF', '#5500FF', '#5500AA', '#AA00FF', '#FF00FF', '#FF55FF', false ],
|
|
||||||
[false , false , false , '#AAAAFF', '#AA55FF', '#AA55AA', false , false , false ]
|
|
||||||
];
|
|
||||||
/* eslint-enable */
|
|
||||||
|
|
||||||
var grid = '';
|
|
||||||
var itemWidth = 100 / layout[0].length;
|
|
||||||
var itemHeight = 100 / layout.length;
|
|
||||||
var $elem = self.$element;
|
|
||||||
|
|
||||||
for (var i = 0; i < layout.length; i++) {
|
|
||||||
for (var j = 0; j < layout[i].length; j++) {
|
|
||||||
|
|
||||||
var color = layout[i][j] || 'transparent';
|
|
||||||
var selectable = (color !== 'transparent' ? ' selectable' : '');
|
|
||||||
|
|
||||||
var roundedTL = (i === 0 && j === 0) || i === 0 && !layout[i][j - 1] ||
|
|
||||||
!layout[i][j - 1] && !layout[i - 1][j] ?
|
|
||||||
' rounded-tl' :
|
|
||||||
'';
|
|
||||||
|
|
||||||
var roundedTR = i === 0 && !layout[i][j + 1] ||
|
|
||||||
!layout[i][j + 1] && !layout[i - 1][j] ?
|
|
||||||
' rounded-tr ' :
|
|
||||||
'';
|
|
||||||
|
|
||||||
var roundedBL = (i === layout.length - 1 && j === 0) ||
|
|
||||||
i === layout.length - 1 && !layout[i][j - 1] ||
|
|
||||||
!layout[i][j - 1] && !layout[i + 1][j] ?
|
|
||||||
' rounded-bl' :
|
|
||||||
'';
|
|
||||||
|
|
||||||
var roundedBR = i === layout.length - 1 && !layout[i][j + 1] ||
|
|
||||||
!layout[i][j + 1] && !layout[i + 1][j] ?
|
|
||||||
' rounded-br' :
|
|
||||||
'';
|
|
||||||
|
|
||||||
grid += '<i ' +
|
|
||||||
'class="color-box ' + selectable + roundedTL + roundedTR + roundedBL +
|
|
||||||
roundedBR + '" ' +
|
|
||||||
'data-value="' + color.replace(/^#/, '0x').toLowerCase() + '" ' +
|
|
||||||
'style="' +
|
|
||||||
'width:' + itemWidth + '%; ' +
|
|
||||||
'height:' + itemHeight + '%; ' +
|
|
||||||
'background:' + color + ';">' +
|
|
||||||
'</i>';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$elem.select('.color-box-container').add(HTML(grid));
|
|
||||||
|
|
||||||
var $valueDisplay = $elem.select('.value');
|
|
||||||
var $picker = $elem.select('.picker-wrap');
|
|
||||||
var disabled = self.$manipulatorTarget.get('disabled');
|
|
||||||
|
|
||||||
$elem.on('click', function(ev) {
|
|
||||||
if (!disabled) {
|
|
||||||
$picker.set('show');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
self.on('change', function() {
|
|
||||||
var value = self.get().replace(/^0x/, '').toLowerCase();
|
|
||||||
$valueDisplay.set('$background-color', '#' + value);
|
|
||||||
$elem.select('.color-box').set('-selected');
|
|
||||||
$elem.select('.color-box[data-value="0x' + value + '"]').set('+selected');
|
|
||||||
});
|
|
||||||
|
|
||||||
$elem.select('.color-box.selectable').on('click', function(ev) {
|
|
||||||
self.set(ev.target.dataset.value);
|
|
||||||
$picker.set('-show');
|
|
||||||
});
|
|
||||||
|
|
||||||
self.on('disabled', function() {
|
|
||||||
disabled = true;
|
|
||||||
});
|
|
||||||
|
|
||||||
self.on('enabled', function() {
|
|
||||||
disabled = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
name: 'footer',
|
|
||||||
template: require('../../templates/components/footer.tpl'),
|
|
||||||
manipulator: require('../lib/manipulators').html,
|
|
||||||
defaults: {
|
|
||||||
attributes: {}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
name: 'heading',
|
|
||||||
template: require('../../templates/components/heading.tpl'),
|
|
||||||
manipulator: require('../lib/manipulators').html,
|
|
||||||
defaults: {
|
|
||||||
attributes: {},
|
|
||||||
size: 4
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
name: 'input',
|
|
||||||
template: require('../../templates/components/input.tpl'),
|
|
||||||
manipulator: require('../lib/manipulators').val,
|
|
||||||
defaults: {
|
|
||||||
label: '',
|
|
||||||
attributes: {}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
name: 'select',
|
|
||||||
template: require('../../templates/components/select.tpl'),
|
|
||||||
manipulator: require('../lib/manipulators').val,
|
|
||||||
defaults: {
|
|
||||||
label: '',
|
|
||||||
options: []
|
|
||||||
},
|
|
||||||
initialize: function() {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
var $value = self.$element.select('.value');
|
|
||||||
|
|
||||||
self.on('change', function(ev) {
|
|
||||||
var value = self.$manipulatorTarget.select('option:checked').get('innerHTML');
|
|
||||||
$value.set('innerHTML', value);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
name: 'submit',
|
|
||||||
template: require('../../templates/components/submit.tpl'),
|
|
||||||
manipulator: require('../lib/manipulators').val,
|
|
||||||
defaults: {
|
|
||||||
attributes: {}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
name: 'text',
|
|
||||||
template: require('../../templates/components/text.tpl'),
|
|
||||||
manipulator: require('../lib/manipulators').html,
|
|
||||||
defaults: {
|
|
||||||
attributes: {}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
name: 'toggle',
|
|
||||||
template: require('../../templates/components/toggle.tpl'),
|
|
||||||
manipulator: require('../lib/manipulators').checked,
|
|
||||||
defaults: {
|
|
||||||
attributes: {}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -15,14 +15,14 @@ var clayConfig = new ClayConfig(settings, config, $mainForm);
|
|||||||
clayConfig.on(clayConfig.EVENTS.BEFORE_BUILD, function() {
|
clayConfig.on(clayConfig.EVENTS.BEFORE_BUILD, function() {
|
||||||
|
|
||||||
// register components here
|
// register components here
|
||||||
this.registerComponent(require('./components/heading'));
|
this.registerComponent(require('pebble-clay-components/dist/components/heading'));
|
||||||
this.registerComponent(require('./components/text'));
|
this.registerComponent(require('pebble-clay-components/dist/components/text'));
|
||||||
this.registerComponent(require('./components/footer'));
|
this.registerComponent(require('pebble-clay-components/dist/components/footer'));
|
||||||
this.registerComponent(require('./components/input'));
|
this.registerComponent(require('pebble-clay-components/dist/components/input'));
|
||||||
this.registerComponent(require('./components/color'));
|
this.registerComponent(require('pebble-clay-components/dist/components/color'));
|
||||||
this.registerComponent(require('./components/select'));
|
this.registerComponent(require('pebble-clay-components/dist/components/select'));
|
||||||
this.registerComponent(require('./components/toggle'));
|
this.registerComponent(require('pebble-clay-components/dist/components/toggle'));
|
||||||
this.registerComponent(require('./components/submit'));
|
this.registerComponent(require('pebble-clay-components/dist/components/submit'));
|
||||||
});
|
});
|
||||||
|
|
||||||
clayConfig.on(clayConfig.EVENTS.AFTER_BUILD, function() {
|
clayConfig.on(clayConfig.EVENTS.AFTER_BUILD, function() {
|
||||||
|
|||||||
@@ -19,6 +19,7 @@ var ClayItem = require('./clay-item');
|
|||||||
var utils = require('../lib/utils');
|
var utils = require('../lib/utils');
|
||||||
var ClayEvents = require('./clay-events');
|
var ClayEvents = require('./clay-events');
|
||||||
var componentStore = require('./component-registry');
|
var componentStore = require('./component-registry');
|
||||||
|
var manipulators = require('./manipulators');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @extends ClayEvents
|
* @extends ClayEvents
|
||||||
@@ -154,20 +155,8 @@ function ClayConfig(settings, config, $rootContainer) {
|
|||||||
return _settings;
|
return _settings;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
// @todo maybe don't do this and force the static method
|
||||||
* Register a component to Clay. This must be called prior to .build();
|
self.registerComponent = ClayConfig.registerComponent;
|
||||||
* @param {{}} component - the clay component to register
|
|
||||||
* @param {string} component.name - the name of the component
|
|
||||||
* @param {string} component.template - HTML template to use for the component
|
|
||||||
* @param {{}} component.manipulator - methods to attach to the component
|
|
||||||
* @param {function} component.manipulator.set - set manipulator method
|
|
||||||
* @param {function} component.manipulator.get - get manipulator method
|
|
||||||
* @param {{}} component.defaults - template defaults
|
|
||||||
* @param {function} [component.initialize] - method to scaffold the component
|
|
||||||
*/
|
|
||||||
self.registerComponent = function(component) {
|
|
||||||
componentStore[component.name] = component;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Build the config page. This must be run before any of the get methods can be run
|
* Build the config page. This must be run before any of the get methods can be run
|
||||||
@@ -189,4 +178,23 @@ function ClayConfig(settings, config, $rootContainer) {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register a component to Clay. This must be called prior to .build();
|
||||||
|
* @param {{}} component - the clay component to register
|
||||||
|
* @param {string} component.name - the name of the component
|
||||||
|
* @param {string} component.template - HTML template to use for the component
|
||||||
|
* @param {string|{}} component.manipulator - methods to attach to the component
|
||||||
|
* @param {function} component.manipulator.set - set manipulator method
|
||||||
|
* @param {function} component.manipulator.get - get manipulator method
|
||||||
|
* @param {{}} component.defaults - template defaults
|
||||||
|
* @param {function} [component.initialize] - method to scaffold the component
|
||||||
|
*/
|
||||||
|
ClayConfig.registerComponent = function(component) {
|
||||||
|
var _component = _.copyObj(component);
|
||||||
|
if (typeof _component.manipulator === 'string') {
|
||||||
|
_component.manipulator = manipulators[component.manipulator];
|
||||||
|
}
|
||||||
|
componentStore[_component.name] = _component;
|
||||||
|
};
|
||||||
|
|
||||||
module.exports = ClayConfig;
|
module.exports = ClayConfig;
|
||||||
@@ -14,14 +14,14 @@ var ClayEvents = require('./clay-events');
|
|||||||
function ClayItem(config) {
|
function ClayItem(config) {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
var _itemType = componentRegistry[config.type];
|
var _component = componentRegistry[config.type];
|
||||||
|
|
||||||
if (!_itemType) {
|
if (!_component) {
|
||||||
throw new Error('the component: ' + config.type + ' is not registered. ' +
|
throw new Error('the component: ' + config.type + ' is not registered. ' +
|
||||||
'Make sure to register it with ClayConfig.registerComponent()');
|
'Make sure to register it with ClayConfig.registerComponent()');
|
||||||
}
|
}
|
||||||
|
|
||||||
var _templateData = _.extend({}, _itemType.defaults, config);
|
var _templateData = _.extend({}, _component.defaults, config);
|
||||||
|
|
||||||
/** @type {string|null} */
|
/** @type {string|null} */
|
||||||
self.id = config.id || null;
|
self.id = config.id || null;
|
||||||
@@ -33,7 +33,7 @@ function ClayItem(config) {
|
|||||||
self.config = config;
|
self.config = config;
|
||||||
|
|
||||||
/** @type {M} */
|
/** @type {M} */
|
||||||
self.$element = HTML(_.formatHtml(_itemType.template, _templateData));
|
self.$element = HTML(_.formatHtml(_component.template, _templateData));
|
||||||
|
|
||||||
/** @type {M} */
|
/** @type {M} */
|
||||||
self.$manipulatorTarget = self.$element.select('[data-manipulator-target]');
|
self.$manipulatorTarget = self.$element.select('[data-manipulator-target]');
|
||||||
@@ -48,8 +48,8 @@ function ClayItem(config) {
|
|||||||
* @returns {ClayItem}
|
* @returns {ClayItem}
|
||||||
*/
|
*/
|
||||||
self.initialize = function() {
|
self.initialize = function() {
|
||||||
if (typeof _itemType.initialize === 'function') {
|
if (typeof _component.initialize === 'function') {
|
||||||
_itemType.initialize.apply(self, arguments);
|
_component.initialize.apply(self, arguments);
|
||||||
}
|
}
|
||||||
return self;
|
return self;
|
||||||
};
|
};
|
||||||
@@ -58,7 +58,7 @@ function ClayItem(config) {
|
|||||||
ClayEvents.call(self, self.$manipulatorTarget);
|
ClayEvents.call(self, self.$manipulatorTarget);
|
||||||
|
|
||||||
// attach the manipulator methods to the clayItem
|
// attach the manipulator methods to the clayItem
|
||||||
_.eachObj(_itemType.manipulator, function(methodName, method) {
|
_.eachObj(_component.manipulator, function(methodName, method) {
|
||||||
self[methodName] = method.bind(self);
|
self[methodName] = method.bind(self);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -3,9 +3,3 @@
|
|||||||
@import "partials/reset";
|
@import "partials/reset";
|
||||||
@import "fonts";
|
@import "fonts";
|
||||||
@import "base";
|
@import "base";
|
||||||
|
|
||||||
@import "items/color";
|
|
||||||
@import "items/toggle";
|
|
||||||
@import "items/input";
|
|
||||||
@import "items/select";
|
|
||||||
@import "items/button";
|
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
@import "../partials/vars";
|
|
||||||
|
|
||||||
.item-button {
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
button,
|
|
||||||
.button {
|
|
||||||
@include font-pfdin(medium);
|
|
||||||
text-transform: uppercase;
|
|
||||||
background-color: $color-gray-4;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1;
|
|
||||||
border: none;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
color: $color-white;
|
|
||||||
min-width: 12rem;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
||||||
|
|
||||||
padding: $button-padding;
|
|
||||||
|
|
||||||
.platform-ios & {
|
|
||||||
padding: $button-padding-ios;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
background-color: $color-gray-3;
|
|
||||||
color: $color-gray-8;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:disabled):active {
|
|
||||||
background-color: $color-gray-8;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.orange, &[type="submit"] {
|
|
||||||
background-color: $color-orange;
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
background-color: $color-orange-dark;
|
|
||||||
color: $color-gray-3;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:disabled):active {
|
|
||||||
background-color: $color-red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.light-grey {
|
|
||||||
background-color: $color-gray-5;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
a.button {
|
|
||||||
text-decoration: none;
|
|
||||||
color: $color-white;
|
|
||||||
}
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
@import "../partials/vars";
|
|
||||||
|
|
||||||
.item-color {
|
|
||||||
|
|
||||||
.value {
|
|
||||||
width: $small-component-width;
|
|
||||||
height: $base-height;
|
|
||||||
border-radius: $base-height / 2;
|
|
||||||
box-shadow: $box-shadow-small-components;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:disabled ~ .value,
|
|
||||||
input:disabled ~ .label {
|
|
||||||
opacity: 0.25;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
transition: opacity 70ms ease-in 175ms;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 100;
|
|
||||||
|
|
||||||
.picker {
|
|
||||||
padding: 1rem;
|
|
||||||
background: $color-gray-11;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.show {
|
|
||||||
transition-delay: 0ms;
|
|
||||||
pointer-events: auto;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-box-wrap {
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
height: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 0 100% 0; // overridden with inline style
|
|
||||||
margin: 0.6em 0 0em;
|
|
||||||
|
|
||||||
.color-box-container {
|
|
||||||
position: absolute;
|
|
||||||
height: 99.97%;
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
.color-box {
|
|
||||||
float:left;
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
||||||
|
|
||||||
&.rounded-tl {
|
|
||||||
border-top-left-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.rounded-tr {
|
|
||||||
border-top-right-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.rounded-bl {
|
|
||||||
border-bottom-left-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.rounded-br {
|
|
||||||
border-bottom-right-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected {
|
|
||||||
transform: scale(1.15);
|
|
||||||
border-radius: $border-radius;
|
|
||||||
box-shadow: #111 0 0 0.24rem;
|
|
||||||
position: relative;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
@import "../partials/vars";
|
|
||||||
@import "../partials/mixins";
|
|
||||||
|
|
||||||
|
|
||||||
.item-input {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
padding-bottom: $item-spacing-v;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
position: relative;
|
|
||||||
min-width: 100%;
|
|
||||||
margin-top: $item-spacing-v;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
display:block;
|
|
||||||
width: 100%;
|
|
||||||
background: $color-gray-2;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
padding: $item-spacing-v / 2 $item-spacing-h / 2;
|
|
||||||
border: none;
|
|
||||||
vertical-align: baseline;
|
|
||||||
color: $color-white;
|
|
||||||
font-size: inherit;
|
|
||||||
|
|
||||||
@include placeholder {
|
|
||||||
color: $color-gray-8;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
@include placeholder {
|
|
||||||
color: $color-gray-6;
|
|
||||||
}
|
|
||||||
border: none;
|
|
||||||
box-shadow: none ;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
@import "../vendor/bourbon/bourbon";
|
|
||||||
@import "../partials/vars";
|
|
||||||
|
|
||||||
.item-select {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.value {
|
|
||||||
$triangle-size: 0.85rem;
|
|
||||||
position: relative;
|
|
||||||
padding-right: $triangle-size + 0.25rem;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -0.1rem;
|
|
||||||
@include triangle($triangle-size, $color-gray-10, down);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
@import "../partials/vars";
|
|
||||||
|
|
||||||
.item-toggle {
|
|
||||||
|
|
||||||
$slide-height: $base-height * 0.75;
|
|
||||||
$slide-width: $small-component-width;
|
|
||||||
$marker-diameter: $base-height;
|
|
||||||
|
|
||||||
input {
|
|
||||||
display: none; // @todo make sure this doesnt mess up interactivity on iOS
|
|
||||||
}
|
|
||||||
|
|
||||||
.graphic {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.slide {
|
|
||||||
display:block;
|
|
||||||
border-radius: $slide-height;
|
|
||||||
height: $slide-height;
|
|
||||||
width: $slide-width;
|
|
||||||
background: $color-gray-1;
|
|
||||||
transition: background-color 150ms linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.marker {
|
|
||||||
background: $color-gray-10;
|
|
||||||
width: $marker-diameter;
|
|
||||||
height: $marker-diameter;
|
|
||||||
border-radius: $marker-diameter;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
display: block;
|
|
||||||
top: ($marker-diameter - $slide-height) / 2 * -1;
|
|
||||||
transition: transform 150ms linear;
|
|
||||||
box-shadow: $box-shadow-small-components;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked + .graphic {
|
|
||||||
.slide {
|
|
||||||
background: $color-orange-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
.marker {
|
|
||||||
background: $color-orange;
|
|
||||||
transform: translateX($slide-width - $marker-diameter);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
<label class="item item-color">
|
|
||||||
<input
|
|
||||||
data-manipulator-target
|
|
||||||
type="hidden"
|
|
||||||
/>
|
|
||||||
<span class="label">{{{label}}}</span>
|
|
||||||
<span class="value"></span>
|
|
||||||
<div class="picker-wrap">
|
|
||||||
<div class="picker">
|
|
||||||
<div class="color-box-wrap">
|
|
||||||
<div class="color-box-container"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
<div
|
|
||||||
data-manipulator-target
|
|
||||||
class="item-container-footer"
|
|
||||||
{{each attributes}} {{this.key}}="{{this.value}}" {{/each}}
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<div class="item item-heading">
|
|
||||||
<h{{size}} data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></h{{size}}>
|
|
||||||
</div>
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
<label class="item item-input">
|
|
||||||
<span class="label">{{{label}}}</span>
|
|
||||||
<span class="input">
|
|
||||||
<input
|
|
||||||
data-manipulator-target
|
|
||||||
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
<label class="item item-select">
|
|
||||||
<span class="label">{{{label}}}</span>
|
|
||||||
<span class="value"></span>
|
|
||||||
<select data-manipulator-target>
|
|
||||||
{{each options}}
|
|
||||||
<option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
|
|
||||||
{{/each}}
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
<div class="item item-button">
|
|
||||||
<button
|
|
||||||
data-manipulator-target
|
|
||||||
type="submit"
|
|
||||||
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
|
|
||||||
>
|
|
||||||
{{{label}}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<div class="item item-text">
|
|
||||||
<p data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></p>
|
|
||||||
</div>
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
<label class="item item-toggle">
|
|
||||||
<span class="label">{{{label}}}</span>
|
|
||||||
<span class="input">
|
|
||||||
<input
|
|
||||||
data-manipulator-target
|
|
||||||
type="checkbox"
|
|
||||||
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
|
|
||||||
/>
|
|
||||||
<span class="graphic">
|
|
||||||
<span class="slide"></span>
|
|
||||||
<span class="marker"></span>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
+5
-5
@@ -10,11 +10,11 @@ var idCounter = 0;
|
|||||||
var componentRegistry = require('../src/scripts/lib/component-registry');
|
var componentRegistry = require('../src/scripts/lib/component-registry');
|
||||||
|
|
||||||
// add some components to the registry to test
|
// add some components to the registry to test
|
||||||
componentRegistry.text = require('../src/scripts/components/text');
|
ClayConfig.registerComponent(require('pebble-clay-components/dist/components/text'));
|
||||||
componentRegistry.input = require('../src/scripts/components/input');
|
ClayConfig.registerComponent(require('pebble-clay-components/dist/components/input'));
|
||||||
componentRegistry.toggle = require('../src/scripts/components/toggle');
|
ClayConfig.registerComponent(require('pebble-clay-components/dist/components/toggle'));
|
||||||
componentRegistry.footer = require('../src/scripts/components/footer');
|
ClayConfig.registerComponent(require('pebble-clay-components/dist/components/footer'));
|
||||||
componentRegistry.select = require('../src/scripts/components/select');
|
ClayConfig.registerComponent(require('pebble-clay-components/dist/components/select'));
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {string|{}} config
|
* @param {string|{}} config
|
||||||
|
|||||||
@@ -0,0 +1,87 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Karma configuration
|
||||||
|
// Generated on Mon Jan 25 2016 15:19:28 GMT-0800 (PST)
|
||||||
|
|
||||||
|
module.exports = function(config) {
|
||||||
|
config.set({
|
||||||
|
|
||||||
|
// base path that will be used to resolve all patterns (eg. files, exclude)
|
||||||
|
basePath: '..',
|
||||||
|
|
||||||
|
// frameworks to use
|
||||||
|
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
|
||||||
|
frameworks: ['browserify', 'mocha'],
|
||||||
|
|
||||||
|
browserify: {
|
||||||
|
debug: true,
|
||||||
|
plugin: [
|
||||||
|
[
|
||||||
|
'sourcemapify',
|
||||||
|
{ root: '/Users/keegan/eclipse_workspace/pebble-clay' }
|
||||||
|
]
|
||||||
|
],
|
||||||
|
transform: [
|
||||||
|
[
|
||||||
|
'stringify',
|
||||||
|
{ extensions: ['.html', '.tpl'] }
|
||||||
|
],
|
||||||
|
'deamdify'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// list of files / patterns to load in the browser
|
||||||
|
files: [
|
||||||
|
'test/spec/**/*.js'
|
||||||
|
],
|
||||||
|
|
||||||
|
// list of files to exclude
|
||||||
|
exclude: [],
|
||||||
|
|
||||||
|
// preprocess matching files before serving them to the browser
|
||||||
|
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
|
||||||
|
preprocessors: {
|
||||||
|
'test/spec/**/*.js': ['browserify']
|
||||||
|
},
|
||||||
|
|
||||||
|
// Which plugins to enable
|
||||||
|
plugins: [
|
||||||
|
'karma-chrome-launcher',
|
||||||
|
'karma-mocha',
|
||||||
|
'karma-mocha-reporter',
|
||||||
|
'karma-browserify'
|
||||||
|
],
|
||||||
|
|
||||||
|
// test results reporter to use
|
||||||
|
// possible values: 'dots', 'progress'
|
||||||
|
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
|
||||||
|
reporters: ['progress', 'mocha'],
|
||||||
|
|
||||||
|
// web server port
|
||||||
|
port: 9877,
|
||||||
|
|
||||||
|
// enable / disable colors in the output (reporters and logs)
|
||||||
|
colors: true,
|
||||||
|
|
||||||
|
// level of logging
|
||||||
|
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN
|
||||||
|
// || config.LOG_INFO || config.LOG_DEBUG
|
||||||
|
logLevel: config.LOG_INFO,
|
||||||
|
|
||||||
|
// enable / disable watching file and executing tests whenever any file changes
|
||||||
|
autoWatch: true,
|
||||||
|
|
||||||
|
// start these browsers
|
||||||
|
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
|
||||||
|
browsers: ['Chrome'],
|
||||||
|
|
||||||
|
// Continuous Integration mode
|
||||||
|
// if true, Karma captures browsers, runs the tests and exits
|
||||||
|
singleRun: true,
|
||||||
|
|
||||||
|
// Concurrency level
|
||||||
|
// how many browser should be started simultaneous
|
||||||
|
concurrency: Infinity
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
var assert = require('chai').assert;
|
var assert = require('chai').assert;
|
||||||
var sinon = require('sinon');
|
var sinon = require('sinon');
|
||||||
var textComponent = require('../../../src/scripts/components/text');
|
var textComponent = require('pebble-clay-components/dist/components/text');
|
||||||
var componentRegistry = require('../../../src/scripts/lib/component-registry');
|
var componentRegistry = require('../../../src/scripts/lib/component-registry');
|
||||||
var checkReadOnly = require('../../test-utils').checkReadOnly;
|
var checkReadOnly = require('../../test-utils').checkReadOnly;
|
||||||
var fixtures = require('../../fixture');
|
var fixtures = require('../../fixture');
|
||||||
@@ -128,6 +128,8 @@ describe('ClayConfig', function() {
|
|||||||
|
|
||||||
clayConfig.build();
|
clayConfig.build();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// @todo test for validation
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('.build()', function() {
|
describe('.build()', function() {
|
||||||
|
|||||||
Reference in new issue
Block a user