diff --git a/dev/custom-fn.js b/dev/custom-fn.js index 58df1a4..a6e8444 100644 --- a/dev/custom-fn.js +++ b/dev/custom-fn.js @@ -5,21 +5,7 @@ module.exports = function() { /** @type {ClayConfig} */ var Clay = window.Clay = this; - Clay.on(Clay.EVENTS.BEFORE_BUILD, function() { - - // register components here - this.registerComponent(require('pebble-clay-components').heading); - this.registerComponent(require('pebble-clay-components').text); - this.registerComponent(require('pebble-clay-components').footer); - this.registerComponent(require('pebble-clay-components').input); - this.registerComponent(require('pebble-clay-components').color); - this.registerComponent(require('pebble-clay-components').select); - this.registerComponent(require('pebble-clay-components').toggle); - this.registerComponent(require('pebble-clay-components').submit); - }); - Clay.on(Clay.EVENTS.AFTER_BUILD, function() { - console.debug('KEEGAN: AFTER_BUILD', this); Clay.getItemByAppKey('cool_stuff').on('change', function() { if (this.get()) { Clay.getItemByAppKey('background').enable(); diff --git a/dev/emulator.html b/dev/emulator.html new file mode 100644 index 0000000..0e05135 --- /dev/null +++ b/dev/emulator.html @@ -0,0 +1,30 @@ + + + + + Config Page Emulator + + + + + diff --git a/dist/clay.js b/dist/clay.js index 657f6e8..f832ff6 100644 --- a/dist/clay.js +++ b/dist/clay.js @@ -348,11 +348,14 @@ var standardComponents = require('./src/scripts/components'); /** * @param {string} input + * @param {string} [prefix] * @returns {string} */ -function encodeDataUri(input) { +function encodeDataUri(input, prefix) { + prefix = typeof prefix !== 'undefined' ? prefix : 'data:text/html;base64,'; + if (window.btoa) { - return 'data:text/html;base64,' + encodeURIComponent(window.btoa(input)); + return prefix + encodeURIComponent(window.btoa(input)); } // iOS doesn't have a window so we need to polyfil window.btoa @@ -396,7 +399,7 @@ function encodeDataUri(input) { B64_ALPHABET.charAt(e4)); } - return 'data:text/html;base64,' + encodeURIComponent(out.join('')); + return prefix + encodeURIComponent(out.join('')); } /** @@ -438,11 +441,13 @@ Clay.prototype.registerComponent = function(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) { +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) { @@ -450,14 +455,21 @@ Clay.prototype.generateUrl = function(returnTo) { settings = {}; } - // Show config page - return encodeDataUri(configPageHtml + var compiledHtml = configPageHtml + .replace('$$RETURN_TO$$', returnTo) .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)) - ); + .replace('$$COMPONENTS$$', toSource(this.components)); + + if (emulator) { + return encodeDataUri( + compiledHtml, + 'http://clay.pebble.com.s3-website-us-west-2.amazonaws.com/#' + ); + } + + return encodeDataUri(compiledHtml); }; /** diff --git a/index.js b/index.js index 2509fa6..39e474c 100755 --- a/index.js +++ b/index.js @@ -6,11 +6,14 @@ var standardComponents = require('./src/scripts/components'); /** * @param {string} input + * @param {string} [prefix] * @returns {string} */ -function encodeDataUri(input) { +function encodeDataUri(input, prefix) { + prefix = typeof prefix !== 'undefined' ? prefix : 'data:text/html;base64,'; + if (window.btoa) { - return 'data:text/html;base64,' + encodeURIComponent(window.btoa(input)); + return prefix + encodeURIComponent(window.btoa(input)); } // iOS doesn't have a window so we need to polyfil window.btoa @@ -54,7 +57,7 @@ function encodeDataUri(input) { B64_ALPHABET.charAt(e4)); } - return 'data:text/html;base64,' + encodeURIComponent(out.join('')); + return prefix + encodeURIComponent(out.join('')); } /** @@ -96,11 +99,13 @@ Clay.prototype.registerComponent = function(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) { +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) { @@ -108,14 +113,24 @@ Clay.prototype.generateUrl = function(returnTo) { settings = {}; } - // Show config page - return encodeDataUri(configPageHtml + var compiledHtml = configPageHtml + .replace('$$RETURN_TO$$', returnTo) .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)) - ); + .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); }; /**