Difference between revisions of "MediaWiki:Common.js"

Revision as of 04:24, 11 February 2017

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

// Google Analytics -Filip
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-19057746-5', 'auto');
ga('send', 'pageview');
ga('set', 'contentGroup1', 'wiki'); 

// Wait for document ready
$(function() {
	// Set progress bar
	var issueProgress = $('.issue-progress');
	if (issueProgress.length !== 0) {
		issueProgress.html('<img src="http://summertimesaga.com/api/build/progress/img.png?width=500&color=eaeced&nc=' + Math.random() + '" alt="" border="0"/>');
	}

	// Test code for youtube embeds -sam9
	// Example tag: <span class="vid" data-id="YT_ID">VID_TITLE</span>
	var vidTags = $('.vid');

	// Check to make sure vid tags exist
	if (vidTags.length !== 0) {
		// Click handler
		$('#content').on('click', '.vid-embed', function(e) {
			e.preventDefault();

			var elm = $(this);
			$.magnificPopup.open({
				items: {
					src : elm.attr('href'),
					type : 'iframe'
				}
			});
		});

		// Main parsing function
		var parseTags = function() {
			// Loop through our tags
			vidTags.each(function() {
				var elm = $(this);
				var vidId = elm.data('id');
				var title = elm.text();

//				i.ytimg.com/vi/' + vidId + '/maxresdefault.jpg
				elm.replaceWith('<a class="vid-embed" href="https://youtube.com/watch?v=' + vidId + '" target="_blank" title="' + title + '" style="background-image:url(//img.youtube.com/vi/' + vidId + '/mqdefault.jpg)"><div class="vid-mask"><span class="vid-embed-title">' + title + '</span><div class="vid-play"></div></div></a>');
			});
		};

		// Load magnificPopup if it isn't already
		if (typeof $.magnificPopup === 'undefined') {
			// Temporary work around due to lack of server access
			$.getScript('//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', function() {
				var headElm = $('head');
				// Load magnificPopup CSS
				headElm.append('<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"/>');

				// Add our own custom CSS, again temporary
				headElm.append('<style type="text/css"> a.vid-embed { position: relative; text-decoration: none; display: inline-block; width: 384px; height: 216px; margin: 0 10px 10px 0; background-size: cover; background-color: #000; background-position: center center; border: 1px solid #000; transition: border-color 0.15s ease-in-out; box-shadow: 0 0 10px 3px #191B26; border-radius: 2px; overflow: hidden; } a.vid-embed:hover { border-color: #777; text-decoration: none; } a.vid-embed:hover div.vid-mask { background: rgba(0, 0, 0, 0); } a.vid-embed:hover div.vid-play { border-left: 28px solid rgba(255, 255, 255, 0.9); } a.vid-embed:focus { outline: 0; } span.vid-embed-title { text-shadow: 0px 0px 5px #000; color: #cecece; text-align: left; margin: 8px 8px 0 12px; font-size: 16px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } div.vid-mask { background: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: background 0.15s ease-in-out; } div.vid-play { width: 0; height: 0; border-top: 16px solid transparent; border-left: 28px solid rgba(255, 255, 255, 0.7); border-bottom: 16px solid transparent; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: border-left 0.15s ease-in-out; } </style>');

				// Run our main function
				parseTags();
			});
		} else {
			// Run our main function
			parseTags();
		}
	}
}());