CriticalDepsMirror/clay
1
0
Fork 0
mirror of https://github.com/pebble-dev/clay.git synced 2026-08-28 04:46:57 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #19 from pebble/PBL-31966/include-user-and-watch-info

Browse Source 
Pbl 31966/include user and watch info
This commit is contained in:
keegan-lillo
2016-03-01 08:52:04 +11:00
parent 75aaa07048 7def2f741d
commit f7717dc781
9 changed files with 204 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+6 -2
View File
@@ -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
dist/clay.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
index.js
+25 -1
View File
@@ -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.
src/config-page.html
+1
View File
@@ -10,6 +10,7 @@
window.claySettings = $$SETTINGS$$;
window.customFn = $$CUSTOM_FN$$;
window.clayComponents = $$COMPONENTS$$;
window.clayMeta = $$META$$;
</script>
</head>
<body>
src/scripts/config-page.js
+2 -1
View File
@@ -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() {
src/scripts/lib/clay-config.js
+4 -2
View File
@@ -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;
}
/**
test/fixture.js
+25 -1
View File
@@ -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();
};
test/spec/index.js
+129 -13
View File
@@ -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() {
/**
test/spec/lib/clay-config.js
+9 -1
View File
@@ -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',