YouTube playback, docs update

1 files changed, 128 insertions, 95 deletions

diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js
index 072a9236..df205260 100644
--- a/docs/src/js/docs.js
+++ b/docs/src/js/docs.js
@@ -14,6 +14,10 @@ plyr.setup({
 		defaultActive: true
 	},
 	onSetup: function() {
+		if(!("media" in this)) {
+			return;
+		}
+
 		var player 	= this,
 			type 	= player.media.tagName.toLowerCase(),
 			toggle 	= document.querySelector("[data-toggle='fullscreen']");
@@ -26,116 +30,145 @@ plyr.setup({
 	}
 });
 
-// Popup
-function popup(event) {
-	// Prevent the link opening
-	if(event.target.nodeName.toLowerCase() == "a") {
-		if(event.preventDefault) { 
-			event.preventDefault();
+// General functions
+(function() { 
+	// Popup
+	function popup(event) {
+		// Prevent the link opening
+		if(event.target.nodeName.toLowerCase() == "a") {
+			if(event.preventDefault) { 
+				event.preventDefault();
+			}
+			else {
+				event.returnValue = false;
+			}
+		}
+
+		var link 	= event.target,
+			url		= link.href,
+			width 	= link.getAttribute("data-window-width") || 600,
+			height 	= link.getAttribute("data-window-height") || 600,
+			name 	= link.getAttribute("data-window-name") || "popup";
+
+		// If window exists, just focus it
+		if(window["window-"+name] && !window["window-"+name].closed) {
+			window["window-"+name].focus();
 		}
 		else {
-			event.returnValue = false;
+			// Get position
+			var left = window.screenLeft !== undefined ? window.screenLeft : screen.left;
+			var top = window.screenTop !== undefined ? window.screenTop : screen.top;
+
+			// Open in the centre of the screen
+			var x = (screen.width / 2) - (width / 2) + left,
+				y = (screen.height / 2) - (height / 2) + top;
+
+			// Open that window
+			window["window-"+name] = window.open(url, name, "top=" + y +",left="+ x +",width=" + width + ",height=" + height);
+
+			// Focus new window
+			window["window-"+name].focus();
 		}
 	}
 
-	var link 	= event.target,
-		url		= link.href,
-		width 	= link.getAttribute("data-window-width") || 600,
-		height 	= link.getAttribute("data-window-height") || 600,
-		name 	= link.getAttribute("data-window-name") || "popup";
+	// Trigger popups
+	document.querySelector(".js-popup").addEventListener("click", popup);
+
+	// Get JSONP
+	function getJSONP(url, callback) {
+	    var name = "jsonp_callback_" + Math.round(100000 * Math.random());
+
+	    // Cleanup to prevent memory leaks and hit original callback
+	    window[name] = function(data) {
+	        delete window[name];
+	        document.body.removeChild(script);
+	        callback(data);
+	    };
+
+	    // Create a faux script
+	    var script = document.createElement("script");
+	    script.setAttribute("src", url + (url.indexOf("?") >= 0 ? "&" : "?") + "callback=" + name);
+
+	    // Inject to the body
+	    document.body.appendChild(script);
+	}
+
+	// Get star count
+	var storageSupported = ("sessionStorage" in window),
+		selectors = {
+			github: 	".js-stargazers-count",
+			twitter: 	".js-tweet-count"
+		};
 
-	// If window exists, just focus it
-	if(window["window-"+name] && !window["window-"+name].closed) {
-		window["window-"+name].focus();
+	// Display the count next to the button
+	function displayCount(selector, count) {
+		document.querySelector(selector).innerHTML = count;
+	}
+
+	// Add star
+	function formatGitHubCount(count) {
+		return "★ " + count;
+	}
+
+	// Check if it's in session storage first
+	if(storageSupported && "github_stargazers" in window.sessionStorage) {
+		displayCount(selectors.github, formatGitHubCount(window.sessionStorage.github_stargazers));
 	}
 	else {
-		// Get position
-		var left = window.screenLeft !== undefined ? window.screenLeft : screen.left;
-		var top = window.screenTop !== undefined ? window.screenTop : screen.top;
+		getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5", function (json) {
+			if (json && typeof json.data.stargazers_count !== "undefined") {
+				// Update UI 
+				displayCount(selectors.github, formatGitHubCount(json.data.stargazers_count));
+
+				// Store in session storage
+				window.sessionStorage.github_stargazers = json.data.stargazers_count;
+			}
+		});
+	}
 
-		// Open in the centre of the screen
-		var x = (screen.width / 2) - (width / 2) + left,
-			y = (screen.height / 2) - (height / 2) + top;
+	// Get tweet count
+	if(storageSupported && "tweets" in window.sessionStorage) {
+		displayCount(selectors.twitter, window.sessionStorage.tweets);
+	}
+	else {
+		getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io", function (json) {
+			if (json && typeof json.count !== "undefined") {
+				// Update UI 
+				displayCount(selectors.twitter, json.count);
+
+				// Store in session storage
+				window.sessionStorage.tweets = json.count;
+			}
+		});
+	}
 
-		// Open that window
-		window["window-"+name] = window.open(url, name, "top=" + y +",left="+ x +",width=" + width + ",height=" + height);
+	// Tabs
+	var tabs = document.querySelectorAll(".nav-panel a"),
+		panels = document.querySelectorAll(".panels > .panel"),
+		activeClass = "active";
 
-		// Focus new window
-		window["window-"+name].focus();
+	for (var i = tabs.length - 1; i >= 0; i--) {
+		tabs[i].addEventListener("click", togglePanel);
 	}
-}
-
-// Trigger popups
-document.querySelector(".js-popup").addEventListener("click", popup);
-
-// Get JSONP
-function getJSONP(url, callback) {
-    var name = "jsonp_callback_" + Math.round(100000 * Math.random());
-
-    // Cleanup to prevent memory leaks and hit original callback
-    window[name] = function(data) {
-        delete window[name];
-        document.body.removeChild(script);
-        callback(data);
-    };
-
-    // Create a faux script
-    var script = document.createElement("script");
-    script.setAttribute("src", url + (url.indexOf("?") >= 0 ? "&" : "?") + "callback=" + name);
-
-    // Inject to the body
-    document.body.appendChild(script);
-}
-
-// Get star count
-var storageSupported = ("sessionStorage" in window),
-	selectors = {
-		github: 	".js-stargazers-count",
-		twitter: 	".js-tweet-count"
-	};
-
-// Display the count next to the button
-function displayCount(selector, count) {
-	document.querySelector(selector).innerHTML = count;
-}
-
-// Add star
-function formatGitHubCount(count) {
-	return "★ " + count;
-}
-
-// Check if it's in session storage first
-if(storageSupported && "github_stargazers" in window.sessionStorage) {
-	displayCount(selectors.github, formatGitHubCount(window.sessionStorage.github_stargazers));
-}
-else {
-	getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5", function (json) {
-		if (json && typeof json.data.stargazers_count !== "undefined") {
-			// Update UI 
-			displayCount(selectors.github, formatGitHubCount(json.data.stargazers_count));
-
-			// Store in session storage
-			window.sessionStorage.github_stargazers = json.data.stargazers_count;
+
+	function togglePanel(event) {
+		event.preventDefault();
+
+		var tab = event.target,
+			panel = document.querySelector(tab.getAttribute("href"));
+
+		for (var i = panels.length - 1; i >= 0; i--) {
+			panels[i].classList.remove(activeClass);
 		}
-	});
-}
-
-// Get tweet count
-if(storageSupported && "tweets" in window.sessionStorage) {
-	displayCount(selectors.twitter, window.sessionStorage.tweets);
-}
-else {
-	getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io", function (json) {
-		if (json && typeof json.count !== "undefined") {
-			// Update UI 
-			displayCount(selectors.twitter, json.count);
-
-			// Store in session storage
-			window.sessionStorage.tweets = json.count;
+
+		for (var x = tabs.length - 1; x >= 0; x--) {
+			tabs[x].classList.remove(activeClass);
 		}
-	});
-}
 
+		panel.classList.add(activeClass);
+		event.target.classList.add(activeClass);
+	}
+})();
 
 // Google analytics 
 // For demo site (http://[www.]plyr.io) only