commit 698fff028ab6e58c45c7356922beaa7c6a2e9006
author smain@google.com <smain@google.com> Thu Nov 20 20:39:33 2014 -0800
committer smain@google.com <smain@google.com> Fri Nov 21 09:56:42 2014 -0800
tree 24a90410118fd3df3fa59ac01e90c8d51b4a13ed
parent b87e300056f2141c80f0cf895af0c1bc708a3542

add style and script to play videos in a shadowbox
anytime that a link appears in the page with class "video-shadowbox-button"
the link must also have the youtube video set in the href with the ?v parameter

Change-Id: I4af84f003075b8d2c43acd3295ce3955b141cc97

tools/droiddoc/templates-sdk/assets/js/docs.js

diff --git a/tools/droiddoc/templates-sdk/assets/js/docs.js b/tools/droiddoc/templates-sdk/assets/js/docs.js
index a3c24f4..701870a 100644
--- a/tools/droiddoc/templates-sdk/assets/js/docs.js
+++ b/tools/droiddoc/templates-sdk/assets/js/docs.js
@@ -20,7 +20,7 @@
 /******  ON LOAD SET UP STUFF *********/
 
 $(document).ready(function() {
-  
+
   // show lang dialog if the URL includes /intl/
   //if (location.pathname.substring(0,6) == "/intl/") {
   //  var lang = location.pathname.split('/')[2];
@@ -558,10 +558,74 @@
     cookiePath = "distribute_";
   }
 
+
+  /* setup shadowbox for any videos that want it */
+  var $videoLinks = $("a.video-shadowbox-button");
+  if ($videoLinks.length) {
+    // if there's at least one, add the shadowbox HTML to the body
+    $('body').prepend(
+'<div id="video-container">'+
+  '<div id="video-frame">'+
+    '<div class="video-close">'+
+      '<span id="icon-video-close" onclick="closeVideo()">&nbsp;</span>'+
+    '</div>'+
+    '<div id="youTubePlayer"></div>'+
+  '</div>'+
+'</div>');
+
+    // loads the IFrame Player API code asynchronously.
+    $.getScript("https://www.youtube.com/iframe_api");
+
+    $videoLinks.each(function() {
+      var videoId = $(this).attr('href').split('?v=')[1];
+      $(this).click(function(event) {
+        event.preventDefault();
+        startYouTubePlayer(videoId);
+      });
+    });
+
+  }
+
 });
 // END of the onload event
 
 
+var youTubePlayer;
+function onYouTubeIframeAPIReady() {
+}
+
+function startYouTubePlayer(videoId) {
+  if (youTubePlayer == null) {
+    youTubePlayer = new YT.Player('youTubePlayer', {
+      height: '529',
+      width: '940',
+      videoId: videoId,
+      events: {
+        'onReady': onPlayerReady
+      }
+    });
+  } else {
+    youTubePlayer.playVideo();
+  }
+  $("#video-container").fadeIn(200, function(){$("#video-frame").show()});
+}
+
+function onPlayerReady(event) {
+  event.target.playVideo();
+}
+
+function closeVideo() {
+  try {
+    youTubePlayer.stopVideo();
+    $("#video-container").fadeOut(200);
+  } catch(e) {
+    console.log('Video not available');
+    $("#video-container").fadeOut(200);
+  }
+}
+
+
+
 function initExpandableNavItems(rootTag) {
   $(rootTag + ' li.nav-section .nav-section-header').click(function() {
     var section = $(this).closest('li.nav-section');