Difference between revisions of "MediaWiki:Common.js"

From Summertime Saga Wiki
Jump to: navigation, search
Line 4: Line 4:
 
$(function() {
 
$(function() {
 
// Click handler
 
// Click handler
$('#content').on('click', '.yt-embed', function(e) {
+
$('#content').on('click', '.vid-embed', function(e) {
 
e.preventDefault();
 
e.preventDefault();
  
Line 19: Line 19:
 
var parseTags = function() {
 
var parseTags = function() {
 
// Loop through our tags
 
// Loop through our tags
$('.yt').each(function(){
+
$('.vid').each(function(){
 
var elm = $(this);
 
var elm = $(this);
var ytId = elm.text();
+
var vidId = elm.data('link');
elm.replaceWith('<a class="yt-embed" href="https://youtube.com/watch?v=' + ytId + '" target="_blank" style="background-image:url(//i.ytimg.com/vi/' + ytId + '/maxresdefault.jpg)" data-ytt="' + ytId + '"></a>');
+
var title = elm.text();
 +
 
 +
elm.replaceWith('<a class="vid-embed" href="https://youtube.com/watch?v=' + vidId + '" target="_blank" style="background-image:url(//i.ytimg.com/vi/' + vidId + '/maxresdefault.jpg)">' + title + '</a>');
 
});
 
});
 
};
 
};
Line 35: Line 37:
  
 
// Add our own custom CSS, again temporary
 
// Add our own custom CSS, again temporary
headElm.append('<style type="text/css">.yt-embed { text-decoration: none; display: inline-block; width: 384px; height: 216px; margin-right: 10px; background-size: cover; 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; } .yt-embed:hover { border-color: #777; }</style>');
+
headElm.append('<style type="text/css">.vid-embed { text-decoration: none; display: inline-block; width: 384px; height: 216px; margin-right: 10px; background-size: cover; 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; } .vid-embed:hover { border-color: #777; }</style>');
  
 
// Run our main function
 
// Run our main function

Revision as of 11:42, 6 February 2017

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

// Test code for youtube embeds -sam9
$(function() {
	// 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
		$('.vid').each(function(){
			var elm = $(this);
			var vidId = elm.data('link');
			var title = elm.text();

			elm.replaceWith('<a class="vid-embed" href="https://youtube.com/watch?v=' + vidId + '" target="_blank" style="background-image:url(//i.ytimg.com/vi/' + vidId + '/maxresdefault.jpg)">' + title + '</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">.vid-embed { text-decoration: none; display: inline-block; width: 384px; height: 216px; margin-right: 10px; background-size: cover; 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; } .vid-embed:hover { border-color: #777; }</style>');

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