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 ();
});