diff --git a/example/cards/tutorial/ad_card.js b/example/cards/tutorial/ad_card.js
index 4f24c26..072ee45 100644
--- a/example/cards/tutorial/ad_card.js
+++ b/example/cards/tutorial/ad_card.js
@@ -1,8 +1,13 @@
+/*global Handlebars */
+
Conductor.require('/vendor/jquery.js');
+Conductor.require('/example/libs/handlebars-1.0.0-rc.3.js');
Conductor.requireCSS('/example/cards/tutorial/ad_card.css');
var RSVP = Conductor.Oasis.RSVP;
-var destinationUrl = window.location.protocol + "//" + window.location.hostname + ":" + (parseInt(window.location.port, 10) + 2);
+var crossOrigin = window.location.protocol + "//" + window.location.hostname + ":" + (parseInt(window.location.port, 10) + 2),
+ videoCardUrl = crossOrigin + '/example/cards/tutorial/youtube_card.html';
+var videoSelectTemplate = '
Load Video:
';
var card = Conductor.card({
videoIds: ['4d8ZDSyFS2g', 'EquPUW83D-Q'],
@@ -52,21 +57,23 @@ var card = Conductor.card({
},
childCards: [
- {url: destinationUrl + '/example/cards/tutorial/youtube_card.html', id: '1', options: { capabilities: ['video']}},
- {url: destinationUrl + '/example/cards/tutorial/survey_card.html', id: '1', options: { capabilities: ['survey']}}
+ {url: videoCardUrl, id: '1', options: { capabilities: ['video']}},
+ {url: crossOrigin + '/example/cards/tutorial/survey_card.html', id: '1', options: { capabilities: ['survey']}}
],
loadDataForChildCards: function(data) {
var videoCardOptions = this.childCards[0],
surveyCardOptions = this.childCards[1];
- videoCardOptions.data = { videoId: data.videoId };
+ this.videoId = this.videoIds[0];
+ videoCardOptions.data = { videoId: this.videoId };
},
- activate: function (data) {
+ activate: function () {
Conductor.Oasis.RSVP.EventTarget.mixin(this);
+ this.consumers.height.autoUpdate = false;
- this.videoId = data.videoId;
+ videoSelectTemplate = Handlebars.compile(videoSelectTemplate);
this.videoCard = this.childCards[0].card;
this.surveyCard = this.childCards[1].card;
},
@@ -107,8 +114,25 @@ var card = Conductor.card({
},
initializeDOM: function () {
- this.videoCard.appendTo(document.body);
- this.surveyCard.appendTo(document.body);
+ var card = this;
+
+ $(videoSelectTemplate(this)).appendTo('body');
+ $('#videoSelect').change(function () {
+ card.changeVideo($(this).val());
+ });
+
+ this.selectWrapperDiv = $('#selectWrapper');
+ this.cardWrapperDiv = $('');
+ this.cardWrapperDiv.appendTo('body');
+ this.videoCard.appendTo(this.cardWrapperDiv[0]);
+ this.surveyCard.appendTo(this.cardWrapperDiv[0]);
+ },
+
+ changeVideo: function (videoId) {
+ this.videoId = videoId;
+ console.log('Change the video to ' + videoId);
+ this.conductor.loadData(videoCardUrl, '1', { videoId: this.videoId });
+ this.render('video');
},
getDimensions: function () {
@@ -125,5 +149,7 @@ var card = Conductor.card({
width: window.innerWidth
};
}
+
+ this.cardWrapperDiv.height(this._dimensions.height - this.selectWrapperDiv.height());
}
});
diff --git a/example/playground/js/playground.js b/example/playground/js/playground.js
index 69928bb..ca3e489 100644
--- a/example/playground/js/playground.js
+++ b/example/playground/js/playground.js
@@ -37,11 +37,6 @@ window.Playground = {
this.cardTemplate = $('.card-wrapper').hide();
- this.conductor.loadData(
- Playground.crossOriginHtmlUrl('../cards/tutorial/ad_card.js'),
- '1',
- { videoId: '4d8ZDSyFS2g'}
- );
this.addCard('../cards/tutorial/ad_card.js', 1, ['video', 'survey']);
}
};