MediaWiki:Gadget-YouTubePopups.js

/****************************************************************************** * Shroom Youtube Popups                                                     * ******************************************************************************/

function shroomYoutubeController { var spans = document.getElementsByClassName("shroomYoutube");

if (spans.length == 0) { return; }

this.APIReady = false; this.APIContinue = function {}; onYouTubeIframeAPIReady = function { this.APIReady = true; this.APIContinue; }.bind(this); this.players = [];

var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

this.containerDiv = document.createElement("div"); this.containerDiv.className = "shroomYoutubeContainer"; var shadeDiv = document.createElement("div"); shadeDiv.className = "shroomYoutubeShade"; shadeDiv.onclick = this.hideContainer.bind(this); this.bgDiv = document.createElement("div"); this.bgDiv.className = "shroomYoutubeBg"; var throbber = document.createElement("div"); throbber.className = "shroomThrobber"; this.bgDiv.appendChild(throbber); var closeButton = document.createElement("div"); closeButton.className = "shroomYoutubeClose"; closeButton.onclick = this.hideContainer.bind(this); this.bgDiv.appendChild(closeButton); this.containerDiv.appendChild(shadeDiv); this.containerDiv.appendChild(this.bgDiv); document.body.appendChild(this.containerDiv);

for (var i = 0; i < spans.length; i++) { new shroomYoutubeInstance (this, spans[i]) } }

function shroomYoutubeInstance (parent, span) { this.parent = parent; this.span = span; this.link = this.span.getElementsByTagName("a")[0]; this.videoWrapper = document.createElement("div"); this.videoWrapper.class = "shroomYoutubeVideoWrapper"; parent.bgDiv.appendChild(this.videoWrapper); this.link.onclick = this.showWrapper.bind(this); }

shroomYoutubeInstance.prototype.showWrapper = function (e) { if (e.button == 0 &&     !e.ctrlKey &&      !e.altKey &&      !e.shiftKey) { if (!this.parent.APIReady) { this.parent.containerDiv.className="shroomYoutubeContainer visible"; this.parent.APIContinue = this.span.onclick; //should invoke this function again... return false; } else if (this.videoWrapper.firstChild == null) { this.videoWrapper.appendChild(document.createElement("div")); var player = new YT.Player(this.videoWrapper.firstChild, {       width: '420',        height: '315',        videoId: this.span.dataset.video,        events: {          'onReady': this.onPlayerReady.bind(this),          'onStateChange': this.onPlayerStateChange.bind(this)        }      }); this.parent.addPlayer(player); }   var visibles = this.parent.containerDiv.getElementsByClassName("visible"); while (visibles.length > 0) { visibles[0].className="shroomYoutubeVideoWrapper"; }   this.parent.containerDiv.className="shroomYoutubeContainer visible"; this.videoWrapper.className="shroomYoutubeVideoWrapper visible"; return false; } else { return true; } }

shroomYoutubeInstance.prototype.onPlayerStateChange = function (e) { switch (e.data) { case -1: case 0: case 5: this.span.className = "shroomYoutube stopState"; break; case 1: this.parent.pauseOthers(e); case 3: this.span.className = "shroomYoutube playState"; break; case 2: this.span.className = "shroomYoutube pauseState"; break; } }

shroomYoutubeInstance.prototype.onPlayerReady = function (e) { e.target.playVideo; }

shroomYoutubeController.prototype.pauseOthers = function(e) { for (var i = 0; i < this.players.length; i++) { if (this.players[i] != e.target) { this.players[i].pauseVideo; } } }

shroomYoutubeController.prototype.hideContainer = function { this.containerDiv.className="shroomYoutubeContainer"; }

shroomYoutubeController.prototype.addPlayer = function (player) { this.players.push(player); }

$(function {	new shroomYoutubeController ; });