(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: 'color', defaults: { label: '' }, initialize: function(minified) { var HTML = minified.HTML; var self = this; var useSunlight = self.config.sunlight !== false; var sunlightColorMap = { '000000': '000000', '000055': '001e41', '0000aa': '004387', '0000ff': '0068ca', '005500': '2b4a2c', '005555': '27514f', '0055aa': '16638d', '0055ff': '007dce', '00aa00': '5e9860', '00aa55': '5c9b72', '00aaaa': '57a5a2', '00aaff': '4cb4db', '00ff00': '8ee391', '00ff55': '8ee69e', '00ffaa': '8aebc0', '00ffff': '84f5f1', '550000': '4a161b', '550055': '482748', '5500aa': '40488a', '5500ff': '2f6bcc', '555500': '564e36', '555555': '545454', '5555aa': '4f6790', '5555ff': '4180d0', '55aa00': '759a64', '55aa55': '759d76', '55aaaa': '71a6a4', '55aaff': '69b5dd', '55ff00': '9ee594', '55ff55': '9de7a0', '55ffaa': '9becc2', '55ffff': '95f6f2', 'aa0000': '99353f', 'aa0055': '983e5a', 'aa00aa': '955694', 'aa00ff': '8f74d2', 'aa5500': '9d5b4d', 'aa5555': '9d6064', 'aa55aa': '9a7099', 'aa55ff': '9587d5', 'aaaa00': 'afa072', 'aaaa55': 'aea382', 'aaaaaa': 'ababab', 'ffffff': 'ffffff', 'aaaaff': 'a7bae2', 'aaff00': 'c9e89d', 'aaff55': 'c9eaa7', 'aaffaa': 'c7f0c8', 'aaffff': 'c3f9f7', 'ff0000': 'e35462', 'ff0055': 'e25874', 'ff00aa': 'e16aa3', 'ff00ff': 'de83dc', 'ff5500': 'e66e6b', 'ff5555': 'e6727c', 'ff55aa': 'e37fa7', 'ff55ff': 'e194df', 'ffaa00': 'f1aa86', 'ffaa55': 'f1ad93', 'ffaaaa': 'efb5b8', 'ffaaff': 'ecc3eb', 'ffff00': 'ffeeab', 'ffff55': 'fff1b5', 'ffffaa': 'fff6d3' }; /** * @param {string|boolean|number} color * @returns {string} */ function cssColor(color) { if (color === false) { return 'transparent'; } if (typeof color === 'number') { color = color.toString(16); } while (color.length < 6) { color = '0' + color; } return '#' + (useSunlight ? sunlightColorMap[color] : color); } /* 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]; var selectable = (color ? ' 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(); $valueDisplay.set('$background-color', cssColor(value)); $elem.select('.color-box').set('-selected'); $elem.select('.color-box[data-value="' + value + '"]').set('+selected'); }); $elem.select('.color-box.selectable').on('click', function(ev) { self.set(parseInt(ev.target.dataset.value, 10)); $picker.set('-show'); }); $picker.on('click', function() { $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: { label: '', 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: { label: '', 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 we are in the emulator then we need to proxy the data via a webpage to // obtain the return_to. // @todo calculate this from the Pebble object or something 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") });