Merge remote-tracking branch 'origin/master' into #6/show-hide-items

# Conflicts: # dev/custom-fn.js # src/styles/clay/_base.scss
2026-10-27 06:59:59 -04:00 · 2016-03-02 10:54:20 +11:00
commit 011f40ea0d
@@ -607,7 +607,11 @@ This is the main way of talking to your generated config page.
 |----------|------|-------------|
 | `.EVENTS.BEFORE_BUILD` | String | Dispatched prior to building the page. |
 | `.EVENTS.AFTER_BUILD` | String | Dispatched after building the page. |
-| `.config` | Array | Reference to the config passed to the constructer and used for generating the page. |
+| `.config` | Array | Reference to the config passed to the constructor and used for generating the page. |
+| `.meta` | Object | Contains information about the current user and watch |
+| `.meta.activeWatchInfo` | watchinfo\|null | An object containing information on the currently connected Pebble smartwatch or null if unavailable. Read more [here](https://developer.pebble.com/docs/js/Pebble/#getActiveWatchInfo). |
+| `.meta.accountToken` | String | A unique account token that is associated with the Pebble account of the current user. Read more [here](https://developer.pebble.com/docs/js/Pebble/#getAccountToken). |
+| `.meta.watchToken` | String | A unique token that can be used to identify a Pebble device. Read more [here](https://developer.pebble.com/docs/js/Pebble/#getWatchToken). |


 #### Methods
@@ -637,7 +641,7 @@ This is the main way of talking to your generated config page.
 | `.appKey` | String | The ID of the item if provided in the config. |
 | `.config` | Object | Reference to the config passed to the constructer. |
 | `$element` | $Minified | A Minified list representing the root HTML element of the config item. |
-| `$manipulatorTarget` | A Minified list representing the HTML element with **data-manipulator-target** set. This is generally pointing to the main `<input>` element and will be used for binding events. |
+| `$manipulatorTarget` | $Minified | A Minified list representing the HTML element with **data-manipulator-target** set. This is generally pointing to the main `<input>` element and will be used for binding events. |


 #### Methods
@@ -10,9 +10,9 @@ module.exports = function() {
   */
  function toggleBackground() {
    if (this.get()) {
-      Clay.getItemByAppKey('colorTest').show();
+      Clay.getItemByAppKey('colorTest').enable();
    } else {
-      Clay.getItemByAppKey('colorTest').hide();
+      Clay.getItemByAppKey('colorTest').disable();
    }
  }

@@ -1,3 +1,3 @@
-/* Clay - https://github.com/pebble/clay - Version: 0.1.0 - Build Date: 2016-02-24T03:25:39.111Z */
-!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.clay=t()}}(function(){return function t(e,n,o){function r(a,c){if(!n[a]){if(!e[a]){var s="function"==typeof require&&require;if(!c&&s)return s(a,!0);if(i)return i(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var u=n[a]={exports:{}};e[a][0].call(u.exports,function(t){var n=e[a][1][t];return r(n?n:t)},u,u.exports,t,e,n,o)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a<o.length;a++)r(o[a]);return r}({1:[function(t,e,n){function o(t){return/^[a-z_$][0-9a-z_$]*$/gi.test(t)&&!i.test(t)}function r(t){if(a)return t.toString();var e=t.source.replace(/\//g,function(t,e,n){return 0===e||"\\"!==n[e-1]?"\\/":"/"}),n=(t.global&&"g"||"")+(t.ignoreCase&&"i"||"")+(t.multiline&&"m"||"");return"/"+e+"/"+n}e.exports=function(t,e,n,i){function a(t,e,n,i,c){function s(t){return n.slice(1)+t.join(","+(n&&"\n")+l)+(n?" ":"")}var l=i+n;switch(t=e?e(t):t,typeof t){case"string":return JSON.stringify(t);case"boolean":case"number":case"undefined":return""+t;case"function":return t.toString()}if(null===t)return"null";if(t instanceof RegExp)return r(t);if(t instanceof Date)return"new Date("+t.getTime()+")";var u=c.indexOf(t)+1;if(u>0)return"{$circularReference:"+u+"}";if(c.push(t),Array.isArray(t))return"["+s(t.map(function(t){return a(t,e,n,l,c.slice())}))+"]";var f=Object.keys(t);return f.length?"{"+s(f.map(function(r){return(o(r)?r:JSON.stringify(r))+":"+a(t[r],e,n,l,c.slice())}))+"}":"{}"}var c=[];return a(t,e,void 0===n?"  ":n||"",i||"",c)};var i=/^(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)$/,a="\\/"===new RegExp("/").source},{}],2:[function(t,e,n){"use strict";e.exports={name:"checkboxgroup",template:t("../../templates/components/checkboxgroup.tpl"),style:t("../../styles/clay/components/checkboxgroup.scss"),manipulator:"checkboxgroup",defaults:{label:"",options:[],attributes:{}}}},{"../../styles/clay/components/checkboxgroup.scss":13,"../../templates/components/checkboxgroup.tpl":19}],3:[function(t,e,n){"use strict";e.exports={name:"color",template:t("../../templates/components/color.tpl"),style:t("../../styles/clay/components/color.scss"),manipulator:"color",defaults:{label:""},initialize:function(t){function e(t){if(t===!1)return"transparent";for("number"==typeof t&&(t=t.toString(16));t.length<6;)t="0"+t;return"#"+(r?i[t]:t)}for(var n=t.HTML,o=this,r=o.config.sunlight!==!1,i={"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"},a=o.config.layout||[[!1,!1,"55ff00","aaff55",!1,"ffff55","ffffaa",!1,!1],[!1,"aaffaa","55ff55","00ff00","aaff00","ffff00","ffaa55","ffaaaa",!1],["55ffaa","00ff55","00aa00","55aa00","aaaa55","aaaa00","ffaa00","ff5500","ff5555"],["aaffff","00ffaa","00aa55","55aa55","005500","555500","aa5500","ff0000","ff0055"],[!1,"55aaaa","00aaaa","005555","ffffff","000000","aa5555","aa0000",!1],["55ffff","00ffff","00aaff","0055aa","aaaaaa","555555","550000","aa0055","ff55aa"],["55aaff","0055ff","0000ff","0000aa","000055","550055","aa00aa","ff00aa","ffaaff"],[!1,"5555aa","5555ff","5500ff","5500aa","aa00ff","ff00ff","ff55ff",!1],[!1,!1,!1,"aaaaff","aa55ff","aa55aa",!1,!1,!1]],c="",s=100/a[0].length,l=100/a.length,u=o.$element,f=0;f<a.length;f++)for(var p=0;p<a[f].length;p++){var d=a[f][p],m=d?" selectable":"",b=0===f&&0===p||0===f&&!a[f][p-1]||!a[f][p-1]&&!a[f-1][p]?" rounded-tl":"",g=0===f&&!a[f][p+1]||!a[f][p+1]&&!a[f-1][p]?" rounded-tr 
Line truncated
-},{}],"pebble-clay":[function(t,e,n){"use strict";function o(t,e,n){function o(t){Array.isArray(t)?t.forEach(function(t){o(t)}):"section"===t.type?o(t.items):a[t.type]&&r.registerComponent(a[t.type])}var r=this;if(!Array.isArray(t))throw new Error("config must be an Array");if(e&&"function"!=typeof e)throw new Error('customFn must be a function or "null"');n=n||{},r.config=t,r.customFn=e||function(){},r.components={},n.autoHandleEvents!==!1&&"undefined"!=typeof Pebble&&(Pebble.addEventListener("showConfiguration",function(){Pebble.openURL(r.generateUrl())}),Pebble.addEventListener("webviewclosed",function(t){t&&t.response&&Pebble.sendAppMessage(r.getSettings(t.response),function(){console.log("Sent config data to Pebble")},function(t){console.log("Failed to send config data!"),console.log(JSON.stringify(t))})})),o(r.config)}var r=t("./tmp/config-page.html"),i=t("tosource"),a=t("./src/scripts/components");o.prototype.registerComponent=function(t){this.components[t.name]=t},o.prototype.generateUrl=function(){var t={},e=!Pebble||"pypkjs"===Pebble.platform,n=e?"$$$RETURN_TO$$$":"pebblejs://close#";try{t=JSON.parse(localStorage.getItem("clay-settings"))||{}}catch(a){console.error(a.toString())}var c=r.replace("$$RETURN_TO$$",n).replace("$$CUSTOM_FN$$",i(this.customFn)).replace("$$CONFIG$$",i(this.config)).replace("$$SETTINGS$$",i(t)).replace("$$COMPONENTS$$",i(this.components));return e?o.encodeDataUri(c,"http://clay.pebble.com.s3-website-us-west-2.amazonaws.com/#"):o.encodeDataUri(c)},o.prototype.getSettings=function(t){var e={};try{e=JSON.parse(decodeURIComponent(t))}catch(n){throw new Error("The provided response was not valid JSON")}return localStorage.setItem("clay-settings",JSON.stringify(e)),e},o.encodeDataUri=function(t,e){if(e="undefined"!=typeof e?e:"data:text/html;base64,",window.btoa)return e+encodeURIComponent(window.btoa(t));var n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";t=String(t);var o,r,i,a,c,s,l,u=0,f=[];if(/[^\x00-\xFF]/.test(t))throw Error("InvalidCharacterError");for(;u<t.length;)o=t.charCodeAt(u++),r=t.charCodeAt(u++),i=t.charCodeAt(u++),a=o>>2,c=(3&o)<<4|r>>4,s=(15&r)<<2|i>>6,l=63&i,u===t.length+2?(s=64,l=64):u===t.length+1&&(l=64),f.push(n.charAt(a),n.charAt(c),n.charAt(s),n.charAt(l));return e+encodeURIComponent(f.join(""))},e.exports=o},{"./src/scripts/components":6,"./tmp/config-page.html":29,tosource:1}]},{},["pebble-clay"])("pebble-clay")});
+/* Clay - https://github.com/pebble/clay - Version: 0.1.0 - Build Date: 2016-02-29T01:15:16.630Z */
+!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.clay=t()}}(function(){return function t(e,n,o){function r(a,c){if(!n[a]){if(!e[a]){var s="function"==typeof require&&require;if(!c&&s)return s(a,!0);if(i)return i(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var u=n[a]={exports:{}};e[a][0].call(u.exports,function(t){var n=e[a][1][t];return r(n?n:t)},u,u.exports,t,e,n,o)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a<o.length;a++)r(o[a]);return r}({1:[function(t,e,n){function o(t){return/^[a-z_$][0-9a-z_$]*$/gi.test(t)&&!i.test(t)}function r(t){if(a)return t.toString();var e=t.source.replace(/\//g,function(t,e,n){return 0===e||"\\"!==n[e-1]?"\\/":"/"}),n=(t.global&&"g"||"")+(t.ignoreCase&&"i"||"")+(t.multiline&&"m"||"");return"/"+e+"/"+n}e.exports=function(t,e,n,i){function a(t,e,n,i,c){function s(t){return n.slice(1)+t.join(","+(n&&"\n")+l)+(n?" ":"")}var l=i+n;switch(t=e?e(t):t,typeof t){case"string":return JSON.stringify(t);case"boolean":case"number":case"undefined":return""+t;case"function":return t.toString()}if(null===t)return"null";if(t instanceof RegExp)return r(t);if(t instanceof Date)return"new Date("+t.getTime()+")";var u=c.indexOf(t)+1;if(u>0)return"{$circularReference:"+u+"}";if(c.push(t),Array.isArray(t))return"["+s(t.map(function(t){return a(t,e,n,l,c.slice())}))+"]";var f=Object.keys(t);return f.length?"{"+s(f.map(function(r){return(o(r)?r:JSON.stringify(r))+":"+a(t[r],e,n,l,c.slice())}))+"}":"{}"}var c=[];return a(t,e,void 0===n?"  ":n||"",i||"",c)};var i=/^(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)$/,a="\\/"===new RegExp("/").source},{}],2:[function(t,e,n){"use strict";e.exports={name:"checkboxgroup",template:t("../../templates/components/checkboxgroup.tpl"),style:t("../../styles/clay/components/checkboxgroup.scss"),manipulator:"checkboxgroup",defaults:{label:"",options:[],attributes:{}}}},{"../../styles/clay/components/checkboxgroup.scss":13,"../../templates/components/checkboxgroup.tpl":19}],3:[function(t,e,n){"use strict";e.exports={name:"color",template:t("../../templates/components/color.tpl"),style:t("../../styles/clay/components/color.scss"),manipulator:"color",defaults:{label:""},initialize:function(t){function e(t){if(t===!1)return"transparent";for("number"==typeof t&&(t=t.toString(16));t.length<6;)t="0"+t;return"#"+(r?i[t]:t)}for(var n=t.HTML,o=this,r=o.config.sunlight!==!1,i={"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"},a=o.config.layout||[[!1,!1,"55ff00","aaff55",!1,"ffff55","ffffaa",!1,!1],[!1,"aaffaa","55ff55","00ff00","aaff00","ffff00","ffaa55","ffaaaa",!1],["55ffaa","00ff55","00aa00","55aa00","aaaa55","aaaa00","ffaa00","ff5500","ff5555"],["aaffff","00ffaa","00aa55","55aa55","005500","555500","aa5500","ff0000","ff0055"],[!1,"55aaaa","00aaaa","005555","ffffff","000000","aa5555","aa0000",!1],["55ffff","00ffff","00aaff","0055aa","aaaaaa","555555","550000","aa0055","ff55aa"],["55aaff","0055ff","0000ff","0000aa","000055","550055","aa00aa","ff00aa","ffaaff"],[!1,"5555aa","5555ff","5500ff","5500aa","aa00ff","ff00ff","ff55ff",!1],[!1,!1,!1,"aaaaff","aa55ff","aa55aa",!1,!1,!1]],c="",s=100/a[0].length,l=100/a.length,u=o.$element,f=0;f<a.length;f++)for(var p=0;p<a[f].length;p++){var d=a[f][p],m=d?" selectable":"",b=0===f&&0===p||0===f&&!a[f][p-1]||!a[f][p-1]&&!a[f-1][p]?" rounded-tl":"",g=0===f&&!a[f][p+1]||!a[f][p+1]&&!a[f-1][p]?" rounded-tr 
Line truncated
+},{}],"pebble-clay":[function(t,e,n){"use strict";function o(t,e,n){function o(){i.meta={activeWatchInfo:Pebble.getActiveWatchInfo&&Pebble.getActiveWatchInfo(),accountToken:Pebble.getAccountToken(),watchToken:Pebble.getWatchToken()}}function r(t){Array.isArray(t)?t.forEach(function(t){r(t)}):"section"===t.type?r(t.items):a[t.type]&&i.registerComponent(a[t.type])}var i=this;if(!Array.isArray(t))throw new Error("config must be an Array");if(e&&"function"!=typeof e)throw new Error('customFn must be a function or "null"');n=n||{},i.config=t,i.customFn=e||function(){},i.components={},i.meta={activeWatchInfo:null,accountToken:"",watchToken:""},n.autoHandleEvents!==!1&&"undefined"!=typeof Pebble?(Pebble.addEventListener("showConfiguration",function(){o(),Pebble.openURL(i.generateUrl())}),Pebble.addEventListener("webviewclosed",function(t){t&&t.response&&Pebble.sendAppMessage(i.getSettings(t.response),function(){console.log("Sent config data to Pebble")},function(t){console.log("Failed to send config data!"),console.log(JSON.stringify(t))})})):"undefined"!=typeof Pebble&&Pebble.addEventListener("ready",function(){o()}),r(i.config)}var r=t("./tmp/config-page.html"),i=t("tosource"),a=t("./src/scripts/components");o.prototype.registerComponent=function(t){this.components[t.name]=t},o.prototype.generateUrl=function(){var t={},e=!Pebble||"pypkjs"===Pebble.platform,n=e?"$$$RETURN_TO$$$":"pebblejs://close#";try{t=JSON.parse(localStorage.getItem("clay-settings"))||{}}catch(a){console.error(a.toString())}var c=r.replace("$$RETURN_TO$$",n).replace("$$CUSTOM_FN$$",i(this.customFn)).replace("$$CONFIG$$",i(this.config)).replace("$$SETTINGS$$",i(t)).replace("$$COMPONENTS$$",i(this.components)).replace("$$META$$",i(this.meta));return e?o.encodeDataUri(c,"http://clay.pebble.com.s3-website-us-west-2.amazonaws.com/#"):o.encodeDataUri(c)},o.prototype.getSettings=function(t){var e={};try{e=JSON.parse(decodeURIComponent(t))}catch(n){throw new Error("The provided response was not valid JSON")}return localStorage.setItem("clay-settings",JSON.stringify(e)),e},o.encodeDataUri=function(t,e){if(e="undefined"!=typeof e?e:"data:text/html;base64,",window.btoa)return e+encodeURIComponent(window.btoa(t));var n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";t=String(t);var o,r,i,a,c,s,l,u=0,f=[];if(/[^\x00-\xFF]/.test(t))throw Error("InvalidCharacterError");for(;u<t.length;)o=t.charCodeAt(u++),r=t.charCodeAt(u++),i=t.charCodeAt(u++),a=o>>2,c=(3&o)<<4|r>>4,s=(15&r)<<2|i>>6,l=63&i,u===t.length+2?(s=64,l=64):u===t.length+1&&(l=64),f.push(n.charAt(a),n.charAt(c),n.charAt(s),n.charAt(l));return e+encodeURIComponent(f.join(""))},e.exports=o},{"./src/scripts/components":6,"./tmp/config-page.html":29,tosource:1}]},{},["pebble-clay"])("pebble-clay")});
@@ -103,6 +103,7 @@ gulp.task('dev-js', ['js', 'sass'], function() {
    .transform(stringify(stringifyOptions))
    .transform('deamdify')
    .transform(sassify, sassifyOptions)
+    .transform(autoprefixify, autoprefixerOptions)
    .bundle()
    .pipe(source('dev.js'))
    .pipe(gulp.dest('./tmp/'));
@@ -29,11 +29,17 @@ function Clay(config, customFn, options) {
  self.config = config;
  self.customFn = customFn || function() {};
  self.components = {};
+  self.meta = {
+    activeWatchInfo: null,
+    accountToken: '',
+    watchToken: ''
+  };

  // Let Clay handle all the magic
  if (options.autoHandleEvents !== false && typeof Pebble !== 'undefined') {

    Pebble.addEventListener('showConfiguration', function() {
+      _populateMeta();
      Pebble.openURL(self.generateUrl());
    });

@@ -49,6 +55,23 @@ function Clay(config, customFn, options) {
        console.log(JSON.stringify(error));
      });
    });
+  } else if (typeof Pebble !== 'undefined') {
+    Pebble.addEventListener('ready', function() {
+      _populateMeta();
+    });
+  }
+
+  /**
+   * Populate the meta with data from the Pebble object. Make sure to run this inside
+   * either the "showConfiguration" or "ready" event handler
+   * @return {void}
+   */
+  function _populateMeta() {
+    self.meta = {
+      activeWatchInfo: Pebble.getActiveWatchInfo && Pebble.getActiveWatchInfo(),
+      accountToken: Pebble.getAccountToken(),
+      watchToken: Pebble.getWatchToken()
+    };
  }

  /**
@@ -107,7 +130,8 @@ Clay.prototype.generateUrl = function() {
    .replace('$$CUSTOM_FN$$', toSource(this.customFn))
    .replace('$$CONFIG$$', toSource(this.config))
    .replace('$$SETTINGS$$', toSource(settings))
-    .replace('$$COMPONENTS$$', toSource(this.components));
+    .replace('$$COMPONENTS$$', toSource(this.components))
+    .replace('$$META$$', toSource(this.meta));

  // if we are in the emulator then we need to proxy the data via a webpage to
  // obtain the return_to.
@@ -10,6 +10,7 @@
      window.claySettings = $$SETTINGS$$;
      window.customFn = $$CUSTOM_FN$$;
      window.clayComponents = $$COMPONENTS$$;
+      window.clayMeta = $$META$$;
    </script>
  </head>
  <body>
@@ -15,8 +15,10 @@ module.exports = {

    var $value = self.$element.select('.value');

-    self.on('change', function(ev) {
-      var value = self.$manipulatorTarget.select('option:checked').get('innerHTML');
+    self.on('change', function() {
+      var selectedIndex = self.$manipulatorTarget.get('selectedIndex');
+      var $options = self.$manipulatorTarget.select('option');
+      var value = $options[selectedIndex] && $options[selectedIndex].innerHTML;
      $value.set('innerHTML', value);
    });
  }
@@ -3,6 +3,7 @@
 module.exports = {
  name: 'submit',
  template: require('../../templates/components/submit.tpl'),
+  style: require('../../styles/clay/components/submit.scss'),
  manipulator: 'html',
  defaults: {
    attributes: {}
@@ -11,6 +11,7 @@ var settings = _.extend({}, window.claySettings || {});
 var returnTo = window.returnTo || 'pebblejs://close#';
 var customFn = window.customFn || function() {};
 var clayComponents = window.clayComponents || {};
+var clayMeta = window.clayMeta || {};

 var platform = window.navigator.userAgent.match(/android/i) ? 'android' : 'ios';
 document.documentElement.classList.add('platform-' + platform);
@@ -21,7 +22,7 @@ _.eachObj(clayComponents, function(key, component) {
 });

 var $mainForm = $('#main-form');
-var clayConfig = new ClayConfig(settings, config, $mainForm);
+var clayConfig = new ClayConfig(settings, config, $mainForm, clayMeta);

 // add listeners here
 $mainForm.on('submit', function() {
@@ -26,9 +26,10 @@ var manipulators = require('./manipulators');
 * @param {Object} settings - setting that were set from a previous session
 * @param {Array|Object} config
 * @param {M} $rootContainer
+ * @param {Object} meta
 * @constructor
 */
-function ClayConfig(settings, config, $rootContainer) {
+function ClayConfig(settings, config, $rootContainer, meta) {
  var self = this;

  var _settings = _.copyObj(settings);
@@ -95,6 +96,8 @@ function ClayConfig(settings, config, $rootContainer) {
    return true;
  }

+  self.meta = meta;
+
  self.EVENTS = {
    /**
     * Called before framework has initialized. This is when you would attach your
@@ -183,7 +186,6 @@ function ClayConfig(settings, config, $rootContainer) {

  // expose the config to allow developers to update it before the build is run
  self.config = config;
-
 }

 /**
@@ -100,6 +100,10 @@ label {
  display: none;
 }

+.tap-highlight {
+  @include tap-highlight();
+}
+
 .component {
  padding-bottom: $item-spacing-v;

@@ -124,10 +128,10 @@ label {
    &:last-child,
    &:first-child {
      padding-bottom: $item-spacing-v;
+    }

-      &:after {
-        display: none;
-      }
+    &:last-child:after {
+      display: none;
    }

    &:after {
@@ -146,6 +150,10 @@ label {
  .component-heading:first-child {
    background: $color-gray-3;
    border-radius: $border-radius $border-radius 0 0;
+
+    &:after {
+      display: none;
+    }
  }

 }
@@ -3,10 +3,8 @@

 .component-checkbox {

-  @include tap-highlight(rgba(0,0,0,0));
  display: block;

-
  > .label {
    display: block;
    padding-bottom: $item-spacing-v / 2;
@@ -16,7 +14,6 @@

    label {
      padding: $item-spacing-v / 2 0;
-      @include tap-highlight();
    }

    .label {
@@ -39,7 +36,7 @@
      flex-shrink: 0;
    }

-    input:checked ~ i {
+    input:checked + i {
      border-color: $color-orange;
      background: $color-orange;
      
@@ -7,6 +7,7 @@
    height: $base-height;
    border-radius: $base-height / 2;
    box-shadow: $box-shadow-small-components;
+    display: block;
  }

  .picker-wrap {
@@ -3,10 +3,8 @@

 .component-radio {

-  @include tap-highlight(rgba(0,0,0,0));
  display: block;

-
  > .label {
    display: block;
    padding-bottom: $item-spacing-v / 2;
@@ -16,7 +14,6 @@

    label {
      padding: $item-spacing-v / 2 0;
-      @include tap-highlight();
    }

    .label {
@@ -39,7 +36,7 @@
      flex-shrink: 0;
    }

-    input:checked ~ i {
+    input:checked + i {
      border-color: $color-orange;
      
      &:after {
@@ -8,6 +8,7 @@
    $triangle-size: 0.85rem;
    position: relative;
    padding-right: $triangle-size + 0.25rem;
+    display: block;

    &:after {
      content: "";
@@ -0,0 +1,3 @@
+.component-submit {
+  text-align: center;
+}
@@ -9,7 +9,7 @@ button,
  font-size: 1rem;
  line-height: 1;
  border: none;
-  display: block;
+  display: inline-block;

  color: $color-white;
  min-width: 12rem;
@@ -2,7 +2,7 @@
  <span class="label">{{{label}}}</span>
  <div class="checkbox-group">
    {{each options}}
-      <label>
+      <label class="tap-highlight">
        <span class="label">{{{this.label}}}</span>
        <input
          type="checkbox"
@@ -1,4 +1,4 @@
-<div class="component component-color">
+<div class="component component-color tap-highlight">
  <label>
    <input
      data-manipulator-target
@@ -1,4 +1,4 @@
-<label class="component component-input">
+<label class="component component-input tap-highlight">
  <span class="label">{{{label}}}</span>
  <span class="input">
    <input
@@ -2,7 +2,7 @@
  <span class="label">{{{label}}}</span>
  <div class="radio-group">
    {{each options}}
-      <label>
+      <label class="tap-highlight">
        <span class="label">{{{this.label}}}</span>
        <input
          type="radio"
@@ -1,4 +1,4 @@
-<label class="component component-select">
+<label class="component component-select tap-highlight">
  <span class="label">{{{label}}}</span>
  <span class="value"></span>
  <select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>
@@ -1,4 +1,4 @@
-<div class="component component-button">
+<div class="component component-submit">
  <button
    data-manipulator-target
    type="submit"
@@ -1,4 +1,4 @@
-<label class="component component-toggle">
+<label class="component component-toggle tap-highlight">
  <span class="label">{{{label}}}</span>
  <span class="input">
    <input
@@ -10,6 +10,29 @@ var components = require('../src/scripts/components');
 var componentRegistry = require('../src/scripts/lib/component-registry');
 var idCounter = 0;

+/**
+ * @returns {{accountToken: string, watchToken: string, activeWatchInfo: {platform:
+ *   string, model: string, language: string, firmware: {major: number, minor:
+ *   number, patch: number, suffix: string}}}}
+ */
+module.exports.meta = function() {
+  return {
+    accountToken: '0123456789abcdef0123456789abcdef',
+    watchToken: '0123456789abcdef0123456789abcdef',
+    activeWatchInfo: {
+      platform: 'chalk',
+      model: 'qemu_platform_chalk',
+      language: 'en_US',
+      firmware: {
+        major: 3,
+        minor: 3,
+        patch: 2,
+        suffix: ''
+      }
+    }
+  };
+};
+
 /**
 * @param {string|Object} config
 * @param {boolean} [autoRegister=true]
@@ -70,7 +93,8 @@ module.exports.clayConfig = function(types, build, autoRegister, settings) {
  var clayConfig = new ClayConfig(
    settings || {},
    module.exports.config(types, autoRegister),
-    $(HTML('<div>'))
+    $(HTML('<div>')),
+    module.exports.meta()
  );
  return build === false ? clayConfig : clayConfig.build();
 };
@@ -5,6 +5,21 @@ var Clay = require('../../index');
 var assert = require('chai').assert;
 var standardComponents = require('../../src/scripts/components');
 var sinon = require('sinon');
+var toSource = require('tosource');
+
+var accountToken = '0123456789abcdef0123456789abcdef';
+var watchToken = '0123456789abcdef0123456789abcdef';
+var activeWatchInfo = {
+  platform: 'chalk',
+  model: 'qemu_platform_chalk',
+  language: 'en_US',
+  firmware: {
+    major: 3,
+    minor: 3,
+    patch: 2,
+    suffix: ''
+  }
+};

 /**
 * @return {void}
@@ -13,7 +28,10 @@ function stubPebble() {
  global.Pebble = {
    addEventListener: sinon.stub(),
    openURL: sinon.stub(),
-    sendAppMessage: sinon.stub()
+    sendAppMessage: sinon.stub(),
+    getActiveWatchInfo: sinon.stub().returns(activeWatchInfo),
+    getAccountToken: sinon.stub().returns(accountToken),
+    getWatchToken: sinon.stub().returns(watchToken)
  };
 }

@@ -56,6 +74,8 @@ describe('Clay', function() {

    it('handles the "showConfiguration" event if autoHandleEvents is not false',
    function() {
+      this.timeout(10000); // 10 seconds
+
      stubPebble();
      var clay = fixture.clay([]);

@@ -104,7 +124,14 @@ describe('Clay', function() {
       'if autoHandleEvents is false', function() {
      stubPebble();
      fixture.clay([], null, { autoHandleEvents: false });
-      assert.strictEqual(Pebble.addEventListener.called, false);
+      assert.strictEqual(
+        Pebble.addEventListener.withArgs('webviewclosed').called,
+        false
+      );
+      assert.strictEqual(
+        Pebble.addEventListener.withArgs('showConfiguration').called,
+        false
+      );
    });
  });

@@ -123,23 +150,66 @@ describe('Clay', function() {

  describe('.generateUrl()', function() {

-    // @todo this test becomes redundant with the work in 94428b1
-    it('Replaces $$RETURN_TO$$ if in not in the emulator', function() {
-      var clay = fixture.clay([]);
-      stubPebble();
-      Pebble.platform = 'ios';
-      var decodedUrl =
-        atob(decodeURIComponent(clay.generateUrl().replace(/^.*?,/, '')));
-      assert.match(decodedUrl, /pebblejs:\/\/close#/);
+    /**
+     * Decode the generated data URI into just the HTML portion
+     * @param {string} url
+     * @returns {string}
+     */
+    function decodeUrl(url) {
+      return atob(decodeURIComponent(url.replace(/^.*?[#,]/, '')));
+    }
+
+    describe('string substitutions', function() {
+      var customFn = function() { this.getAllItems(); };
+      var config = fixture.config(['input', 'color']);
+      var settings = { appKey: 'value' };
+      var clay;
+      var html;
+
+      before(function() {
+        stubPebble();
+        clay = fixture.clay(config, customFn);
+        Pebble.addEventListener.withArgs('showConfiguration').callArg(1);
+        localStorage.setItem('clay-settings', JSON.stringify(settings));
+        html = decodeUrl(clay.generateUrl());
+      });
+
+      it('Substitutes $$RETURN_TO$$ with the pebblejs://close#', function() {
+        assert.notInclude(html, '$$RETURN_TO$$');
+        assert.include(html, 'window.returnTo="pebblejs://close#"');
+      });
+
+      it('Substitutes $$CUSTOM_FN$$ with the customFn', function() {
+        assert.notInclude(html, '$$CUSTOM_FN$$');
+        assert.include(html, 'window.customFn=' + toSource(customFn));
+      });
+
+      it('Substitutes $$CONFIG$$ with the config', function() {
+        assert.notInclude(html, '$$CONFIG$$');
+        assert.include(html, 'window.clayConfig=' + toSource(config));
+      });
+
+      it('Substitutes $$SETTINGS$$ with the config', function() {
+        assert.notInclude(html, '$$SETTINGS$$');
+        assert.include(html, 'window.claySettings=' + toSource(settings));
+      });
+
+      it('Substitutes $$COMPONENTS$$ with the config', function() {
+        assert.notInclude(html, '$$COMPONENTS$$');
+        assert.include(html, 'window.clayComponents=' + toSource(clay.components));
+      });
+
+      it('Substitutes $$META$$ with the config', function() {
+        assert.notInclude(html, '$$META$$');
+        assert.include(html, 'window.clayMeta=' + toSource(clay.meta));
+      });
    });

    it('does not replace $$RETURN_TO$$ if in the emulator', function() {
      var clay = fixture.clay([]);
      stubPebble();
      Pebble.platform = 'pypkjs';
-      var decodedUrl =
-        atob(decodeURIComponent(clay.generateUrl().replace(/^.*?#/, '')));
-      assert.match(decodedUrl, /\$\$RETURN_TO\$\$/);
+      assert.match(decodeUrl(clay.generateUrl()), /\$\$RETURN_TO\$\$/);
    });

    it('returns the emulator URL if inside emulator', function() {
@@ -186,6 +256,52 @@ describe('Clay', function() {
    });
  });

+  describe('.meta', function() {
+    var emptyMeta = {
+      activeWatchInfo: null,
+      accountToken: '',
+      watchToken: ''
+    };
+
+    it('populates the meta in the showConfiguration handler', function() {
+      stubPebble();
+      var clay = fixture.clay([]);
+
+      // meta only gets populated after showConfiguration happens
+      assert.deepEqual(clay.meta, emptyMeta);
+      Pebble.addEventListener.withArgs('showConfiguration').callArg(1);
+
+      assert.deepEqual(clay.meta, {
+        activeWatchInfo: activeWatchInfo,
+        accountToken: accountToken,
+        watchToken: watchToken
+      });
+    });
+
+    it('populates the meta in the ready handler', function() {
+      stubPebble();
+      var clay = fixture.clay([], null, {autoHandleEvents: false});
+
+      // meta only gets populated after ready happens
+      assert.deepEqual(clay.meta, emptyMeta);
+      Pebble.addEventListener.withArgs('ready').callArg(1);
+
+      assert.deepEqual(clay.meta, {
+        activeWatchInfo: activeWatchInfo,
+        accountToken: accountToken,
+        watchToken: watchToken
+      });
+    });
+
+    it('populates the meta with with empty values when there is no Pebble global',
+    function() {
+      delete global.Pebble;
+      var clay = fixture.clay([], null, {autoHandleEvents: false});
+
+      assert.deepEqual(clay.meta, emptyMeta);
+    });
+  });
+
  describe('Clay.encodeDataUri()', function() {

    /**
@@ -20,12 +20,20 @@ describe('ClayConfig', function() {
      'build',
      'on',
      'off',
-      'trigger'
+      'trigger',
+      'meta'
    ];
    var clayConfig = fixtures.clayConfig(['input']);
    checkReadOnly(clayConfig, properties);
  });

+  describe('.meta', function() {
+    it('populates meta', function() {
+      var clayConfig = fixtures.clayConfig(['input']);
+      assert.deepEqual(clayConfig.meta, fixtures.meta());
+    });
+  });
+
  describe('throws when trying to run methods before being built', function() {
    [
      'getItemByAppKey',