var card = Conductor.card({
consumers: {
'oauth': Conductor.Oasis.Consumer.extend({
getAccessTokenPromise: function(){
var now = +new Date();
var accessToken = card.data.paneTypeUserEntries.stackOverflowAccessToken;
var expiresAt = card.data.paneTypeUserEntries.stackOverflowAccessTokenExpiresAt;
if (accessToken && expiresAt && expiresAt > now) {
return RSVP.resolve(accessToken);
}
var url = 'https://stackexchange.com/oauth/dialog';
return this.request('authorize', {
authorizeUrl: url
}).then(function(data) {
var accessToken = data.access_token;
var expires = data.expires; // seconds
var expiresMs = expires * 1000;
var expiresAt = now + expiresMs;
var paneTypeUserStorage = card.consumers.paneTypeUserStorage;
paneTypeUserStorage.request(
'setItem', 'stackOverflowAccessToken', accessToken
).then(undefined, Conductor.error);
paneTypeUserStorage.request(
'setItem', 'stackOverflowAccessTokenExpiresAt', expiresAt
).then(undefined, Conductor.error);
// TODO: this should happen automatically when we setItem above
card.data.paneTypeUserEntries.stackOverflowAccessToken = accessToken;
card.data.paneTypeUserEntries.stackOverflowAccessTokenExpiresAt = expiresAt;
console.log('stackOverflowAccessTokenExpiresAt', expiresAt);
return data;
});
}
}),
'fullXhr': Conductor.Oasis.Consumer,
'authenticatedStackoverflowApi': AuthenticatedStackoverflowApiConsumer,
'paneTypeUserStorage': Conductor.Oasis.Consumer
},
metadata: {
document: function() {
return {};
},
card: function() {
return {};
}
}
});
var card = Conductor.card({
/* uncomment or add needed services here */
consumers: {
//'fullXhr': Conductor.Oasis.Consumer,
//'paneUserStorage': Conductor.Oasis.Consumer,
//'authenticatedGithubApi': Conductor.Oasis.Consumer,
//'unauthenticatedGithubApi': Conductor.Oasis.Consumer,
'test': TestConsumer
},
defaultContentDiv: "<div id=\"card\"></div>",
bootstrapDiv: "<div id=\"card\">Hello New Card!! (remove me from /card.js)</div>",
render: function (intent, dimensions) {
document.body.innerHTML = this.bootstrapDiv; //this.defaultContentDiv
/*
After verifying card bootstrapped, replace this.bootstrapDiv with
this.defaultContentDiv and you can delete the bootstrapDiv property
If using Ember, the App.rootElement is set to '#card', so you will need
it in your DOM as below.
*/
/* Remove this line if not using Ember.js in your card */
//todo make this a try/catch with appropriate msg if can't find ember
Ember.run(this.App, 'advanceReadiness');
},
activate: function() {
this.App = require('app/application');
},
metadata: {
document: function(promise) {
promise.resolve({
title: "Give this card a proper title in card.js card.metadata"
});
}
}
});
var card = Conductor.card({
consumers: {
'fullXhr': Conductor.Oasis.Consumer,
'repository': Conductor.Oasis.Consumer,
'test': TestConsumer
},
defaultContentDiv: "<div id=\"card\"></div>",
activate: function(initialData) {
this._deferBinLoading();
this.assistantConductor = new Conductor();
this.outputCardDeferral = RSVP.defer();
this.whenOutputCardLoaded = this.outputCardDeferral.promise;
this.App = requireModule('app/application');
this.loadBin(initialData.id);
},
initializeDOM: function () {
document.body.innerHTML = this.defaultContentDiv;
// uncomment for testing
// this.App.LOG_TRANSITIONS = this.App.LOG_TRANSITIONS_INTERNAL = true;
Ember.run(this.App, 'advanceReadiness');
Ember.run(function () {
card.applicationController = card.App.__container__.lookup('controller:application');
});
},
render: function (intent, dimensions) {
this._renderPaneVisibility(intent);
},
/**
Hook invoked by conductor to indicate data has changed from the environment.
*/
didUpdateData: function (bucket, data) {
this.loadBin(data.id);
},
/**
Hook invoked by the ember app to indicate the data has changed client side.
*/
dataDidChange: function (data) {
this._updateData(data.html, data.css, data.js);
},
loadBin: function (binId) {
var card = this,
url = 'http://jsbin.com/api/' + binId;
this.consumers.fullXhr.request('ajax', {
url: url,
accept: {
json: 'application/json'
}
}).then(function (response) {
card._updateData(response.html, response.css, response.javascript);
card._deferBinLoading();
}, function (error) {
console.assert(false, "TODO: error handling", error);
});
},
createOutputSandbox: function (parentElement) {
this.outputCard = this.assistantConductor.load(OutputCardURL, 1);
this.outputCard.appendTo(parentElement);
this.outputCardDeferral.resolve();
},
_updateData: function (html, css, js) {
this.data.html = html;
this.data.css = css;
this.data.js = js;
this.assistantConductor.loadData(OutputCardURL, 1, {
html: html,
css: css,
js: js
});
},
_deferBinLoading: function () {
var completedDeferral = this.binLoadDeferral;
this.binLoadDeferral = RSVP.defer();
this.whenBinLoaded = card.binLoadDeferral.promise;
if (completedDeferral) {
completedDeferral.resolve();
}
},
panelProperties: {
html: 'HTMLVisible',
css: 'CSSVisible',
js: 'JSVisible',
output: 'outputVisible'
},
_renderPaneVisibility: function (intent) {
var applicationController = this.applicationController,
panelVisibilityProperty;
if (!intent) {
intent = ['html', 'js', 'output'];
}
for (var prop in this.panelProperties) {
if ( ! this.panelProperties.hasOwnProperty(prop)) { continue; }
panelVisibilityProperty = card.panelProperties[prop];
applicationController.set(panelVisibilityProperty, false);
}
intent.forEach(function (panel) {
panelVisibilityProperty = card.panelProperties[panel];
if (panelVisibilityProperty) {
applicationController.set(panelVisibilityProperty, true);
}
if (panel === 'output') {
card.whenOutputCardLoaded.then(function () {
var $sandbox = $(card.outputCard.sandbox.el),
$parent = $sandbox.parent(),
dims = { width: $parent.width(), height: $parent.height() };
card.outputCard.render(null, dims);
$sandbox.css(dims);
});
}
});
}
});