Tutorial: Child cards.

hjdivad · cyril-sf · commit 087e4d327258 · 2013-12-13T14:07:02.000-08:00
```js
Playground.conductor.cards['../cards/tutorial/ad_card.js'][1][0].sandbox.videoPort.send('play');

// we add videoPort to window for convenience in the tutorial
window.videoPort.send('play');
```
diff --git a/example/cards/tutorial/ad_card.html b/example/cards/tutorial/ad_card.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="/conductor-0.3.0.js" ></script>
+  <script src="ad_card.js" ></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/example/cards/tutorial/ad_card.js b/example/cards/tutorial/ad_card.js
@@ -1,11 +1,8 @@
-/*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 videoSelectTemplate = '<div id="selectWrapper">Load Video: <select id="videoSelect">{{#each videoIds}}<option value="{{this}}">{{this}}</option>{{/each}}</select></div>';
+var destinationUrl = window.location.protocol + "//" + window.location.hostname + ":" + (parseInt(window.location.port, 10) + 2);
 
 var card = Conductor.card({
   videoIds: ['4d8ZDSyFS2g', 'EquPUW83D-Q'],
@@ -55,23 +52,21 @@ var card = Conductor.card({
   },
 
   childCards: [
-    {url: '../cards/tutorial/youtube_card.js', id: '1', options: { capabilities: ['video']}},
-    {url: '../cards/tutorial/survey_card.js', id: '1',  options: { capabilities: ['survey']}}
+    {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']}}
   ],
 
   loadDataForChildCards: function(data) {
     var videoCardOptions = this.childCards[0],
         surveyCardOptions = this.childCards[1];
 
-    this.videoId = this.videoIds[0];
-    videoCardOptions.data = { videoId: this.videoId };
+    videoCardOptions.data = { videoId: data.videoId };
   },
 
-  activate: function () {
+  activate: function (data) {
     Conductor.Oasis.RSVP.EventTarget.mixin(this);
-    this.consumers.height.autoUpdate = false;
 
-    videoSelectTemplate = Handlebars.compile(videoSelectTemplate);
+    this.videoId = data.videoId;
     this.videoCard = this.childCards[0].card;
     this.surveyCard = this.childCards[1].card;
   },
@@ -112,25 +107,8 @@ var card = Conductor.card({
   },
 
   initializeDOM: function () {
-    var card = this;
-
-    $(videoSelectTemplate(this)).appendTo('body');
-    $('#videoSelect').change(function () {
-      card.changeVideo($(this).val());
-    });
-
-    this.selectWrapperDiv = $('#selectWrapper');
-    this.cardWrapperDiv = $('<div id="cardWrapper"></div>');
-    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('../cards/tutorial/youtube_card.js', '1', { videoId: this.videoId });
-    this.render('video');
+    this.videoCard.appendTo(document.body);
+    this.surveyCard.appendTo(document.body);
   },
 
   getDimensions: function () {
@@ -147,7 +125,5 @@ 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
@@ -38,12 +38,11 @@ window.Playground = {
     this.cardTemplate = $('.card-wrapper').hide();
 
     this.conductor.loadData(
-      Playground.crossOriginHtmlUrl('../cards/tutorial/youtube_card.js'),
+      Playground.crossOriginHtmlUrl('../cards/tutorial/ad_card.js'),
       '1',
       { videoId: '4d8ZDSyFS2g'}
     );
-    this.addCard('../cards/tutorial/youtube_card.js', 1, []);
-    this.addCard('../cards/tutorial/youtube_card.js', 1, ['video']);
+    this.addCard('../cards/tutorial/ad_card.js', 1, ['video', 'survey']);
   }
 };
 
