(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 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 += '' + ''; } } $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('click', 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 = "
\n \n
\n
\n
\n
\n
\n
\n
\n
\n"; },{}],16:[function(require,module,exports){ module.exports = "\n"; },{}],17:[function(require,module,exports){ module.exports = "
\n \n
\n"; },{}],18:[function(require,module,exports){ module.exports = "\n"; },{}],19:[function(require,module,exports){ module.exports = "\n"; },{}],20:[function(require,module,exports){ module.exports = "
\n \n {{{label}}}\n \n
\n"; },{}],21:[function(require,module,exports){ module.exports = "
\n

\n
\n"; },{}],22:[function(require,module,exports){ module.exports = "\n"; },{}],23:[function(require,module,exports){ module.exports = "
"; },{}],"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 * @param {string} [prefix] * @returns {string} */ function encodeDataUri(input, prefix) { prefix = typeof prefix !== 'undefined' ? prefix : 'data:text/html;base64,'; if (window.btoa) { return prefix + 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 prefix + 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 * @return {string} */ Clay.prototype.generateUrl = function() { var settings; var emulator = !Pebble || Pebble.platform === 'pypkjs'; var returnTo = emulator ? '$$$RETURN_TO$$$' : 'pebblejs://close#'; try { settings = JSON.parse(localStorage.getItem('clay-settings')) || {}; } catch (e) { console.error(e); settings = {}; } var compiledHtml = configPageHtml .replace('$$RETURN_TO$$', returnTo) .replace('$$CUSTOM_FN$$', toSource(this.customFn)) .replace('$$CONFIG$$', toSource(this.config)) .replace('$$SETTINGS$$', toSource(settings)) .replace('$$COMPONENTS$$', toSource(this.components)); if (emulator) { return encodeDataUri( compiledHtml, 'http://clay.pebble.com.s3-website-us-west-2.amazonaws.com/#' ); } return encodeDataUri(compiledHtml); }; /** * 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") });