MediaWiki:Common.js: Difference between revisions

Latest revision as of 21:53, 16 October 2012

/* Any JavaScript here will be loaded for all users on every page load. */

/** Youtube Playlists *********************************************************
 *
 *  Description: Turns a list of youtube videos into a playlist thing
 *  Maintainers: [[User:t2t2]]
 */
function lookForPlaylist() {
	lists = getElementsByClassName(document, 'div', 'videoplaylist')
	if(lists.length > 0) {
		for(var i = 0; i < lists.length; i++) {
			container = lists[i]
			container.className = 'playlistplayer'
			container.getElementsByTagName('ul')[0].className = 'videolist'
			videoids = container.getElementsByTagName('a')
			for(var j = 0; j < videoids.length; j++) {
				if(videoids[j].href.indexOf('http://www.youtube.com/watch?v=') == 0) {
					videoid = videoids[j].href.split('').reverse().join('').match(/([a-zA-Z0-9_-])+(?==v\?)/g).toString().split('').reverse().join('')
					var prewimg = document.createElement('img')
					prewimg.src = 'http://img.youtube.com/vi/'+videoid+'/default.jpg'
					prewimg.className = 'youtube-prewimg'
					videoids[j].className += ' video-playinline'
					videoids[j].insertBefore(prewimg, videoids[j].firstChild)
					addClickHandler(videoids[j], playPlaylist)
				}
			}
			var playercontainer = document.createElement('div')
			playercontainer.className = 'playlist-container'
			container.insertBefore(playercontainer, container.getElementsByTagName('ul')[0])
			playPlaylist({target: videoids[0]})
		}
		appendCSS(
			'.playlistplayer {width: 825px; height: 370px; padding: 5px; margin: 5px auto; border: 1px solid #501E1E; clear: both;}'
		+ '.playlist-container {width: 600px; height: 370px; float: left;}'
		+ 'ul.videolist {width: 220px; height: 370px; overflow-y: scroll; margin: 0 0 0 5px; list-style: none; padding: 0; float: right;}'
		+ '.videolist li {clear: both; width: 200px; margin-bottom: 5px; font-size: 13px;}'
		+ '.videolist li a.video-playinline {display: block; min-height: 45px; background: transparent !important; padding-right: 0 !important;}'
		+ '.youtube-prewimg {height: 45px; width: 60px; border: none; margin-right: 5px; float: left;}'
		);
	}
}
function playPlaylist(e) {
	if (!e) var e = window.event
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	videoid = targ.href.split('').reverse().join('').match(/([a-zA-Z0-9_-])+(?==v\?)/g).toString().split('').reverse().join('')
	getElementsByClassName(targ.parentNode.parentNode.parentNode, 'div', 'playlist-container')[0].innerHTML = '<object width="600" height="370"><param name="movie" value="http://www.youtube.com/v/'+videoid+'"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/'+videoid+'" type="application/x-shockwave-flash" wmode="transparent" width="600" height="370"></embed></object>'
	if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } // Ahh IE, at least leaves a way for direct calling
}
addOnloadHook(lookForPlaylist);

/** Countdown *********************************************************
 *
 *  Description: Add countdowns! Loosely based on littlewebthings.com/projects/countdown/
 *  Usage: Add class="js-countdown" to any element, make text of the element in following format:
 *  Sun, 4 Sep 2011 20:30:00 GMT-0400 (Example is Dragon*Con 2 date)
 *  Maintainers: [[User:t2t2]]
 */
addOnloadHook(function() {
	var leadingZero = function(num, length) {
		if(!length) {
			length = 2
		}
		num = num.toString()
		while(num.length < length) {
			num = '0'+num
		}
		return num
	}
	var countDownTimer = function(el, diffSecs, targetTime) {
		if(Math.random() < 0.1) { // Resync time, 10% chance of every second to do this.
			var nowTime = new Date()
			
			diffSecs = Math.floor((targetTime.valueOf()-nowTime.valueOf())/1000)
		}
		var countdownText = leadingZero(Math.floor(diffSecs/60/60/24), 2) + ':' +
							leadingZero(Math.floor(diffSecs/60/60)%24) + ':' +
							leadingZero(Math.floor(diffSecs/60)%60) + ':' +
							leadingZero(Math.floor(diffSecs)%60)
		
		el.textContent = countdownText
		if(diffSecs > 0) {
			setTimeout(function() { countDownTimer(el, diffSecs-1, targetTime) }, 1000);
		} else {
			el.textContent = 'It\'s GO time!'
		}
	}

	var countDownEl = getElementsByClassName(document, '*', 'js-countdown')
	if(countDownEl.length > 0) {
		for(var i = 0; i < countDownEl.length; i++) {
			if(!countDownEl[i].title) {
				// Store it in title so when you hover over you can read it, trim edge spaces
				countDownEl[i].title = countDownEl[i].textContent.replace(/^\s+|\s+$/g,"")
			}
			var targetTime = new Date(countDownEl[i].textContent.replace(/^\s+|\s+$/g,""))
			var nowTime = new Date()
			
			var diffSecs = Math.floor((targetTime.valueOf()-nowTime.valueOf())/1000);
			countDownTimer(countDownEl[i], diffSecs, targetTime)
		}
	}
});