Difference between revisions of "MediaWiki:Common.js"
From Summertime Saga Wiki
Line 4: | Line 4: | ||
$(function() { | $(function() { | ||
// Click handler | // Click handler | ||
− | $('#content').on('click', '. | + | $('#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 | ||
− | $('. | + | $('.vid').each(function(){ |
var elm = $(this); | var elm = $(this); | ||
− | var | + | var vidId = elm.data('link'); |
− | elm.replaceWith('<a class=" | + | 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">. | + | 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 10: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(); } }());