MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
(new countdown JS that doesn't broke the whole wiki) |
No edit summary |
||
(4 intermediate revisions by the same user not shown) | |||
Line 34: | Line 34: | ||
}); | }); | ||
})($('.countdown')); | })($('.countdown')); | ||
/* Restore collapsible state for any element with "pm-persist" class | |||
* This method extends $.makeCollapsible adding ability to persist elements | |||
* collapsible state based on first headline ID. | |||
* Written by Maru <maru@puella-magi.net>. Released under public domain. | |||
* | |||
* <div class="mw-collapsible pm-persist"> | |||
* ... | |||
* </div> | |||
*/ | |||
$(window).ready(function(){ | |||
mw.loader.using(['jquery.cookie', 'jquery.makeCollapsible'], function(){ | |||
function cookieName(container) { | |||
var section = container.find('.mw-headline').prop('id'); | |||
if (section) { | |||
return 'pm-collapse-' + section; | |||
} | |||
} | |||
// Flag default state for collapsible element. | |||
$('.pm-persist .mw-collapsible-toggle a').click(function(e){ | |||
var container = $(this).parents('.mw-collapsible'); | |||
var idName = cookieName(container); | |||
if (idName) { | |||
// Note that the state is reversed; false means collapsed | |||
// and true means expanded. This is because the click event | |||
// is run before makeCollapsible is run. | |||
$.cookie(idName, container.hasClass('mw-collapsed')); | |||
} | |||
}); | |||
// Restore default state on page load. | |||
$('.pm-persist').each(function(i, elem){ | |||
var container = $(this), idName = cookieName(container); | |||
var expanded = $.cookie(idName); | |||
if (expanded === "true") { | |||
if (container.hasClass('mw-collapsed')) { | |||
container.find('.mw-collapsible-toggle a').click(); | |||
} | |||
} else if (expanded === "false") { | |||
if (!container.hasClass('mw-collapsed')) { | |||
container.find('.mw-collapsible-toggle a').click(); | |||
} | |||
} | |||
}); | |||
}); | |||
}); | |||
/* Makes sure the 1st tab is hilited if and only if no other tabs are. | |||
* Written by Celtic Minstrel | |||
*/ | |||
function checkTabsOnHashChange(evt) { | |||
$("div.tabs > div:first-child").each(function() { | |||
if($(this).siblings(":target").length == 0) { | |||
$(this).addClass("default") | |||
} else { | |||
$(this).removeClass("default") | |||
} | |||
}) | |||
} | |||
$(window).ready(checkTabsOnHashChange).bind('hashchange', checkTabsOnHashChange); | |||
/* Make tab content scrollable. | |||
* Written by Celtic Minstrel | |||
*/ | |||
$(window).ready(function() { | |||
$("div.tabs > .tab-nav ~ div > a")[0].style.marginLeft = "1.6em"; | |||
$("div.tabs > .tab-nav.left").each(function() { | |||
var interval; | |||
var self = this | |||
$(this).on('mousedown', function(evt) { | |||
interval = setInterval(function() { | |||
var tabs = $(self).nextAll().children("a"); | |||
if(tabs.last().position().left <= 200) return; | |||
tabs.offset(function(i, coords){ | |||
coords.left -= 5; | |||
return coords; | |||
}); | |||
}, 10); | |||
}); | |||
$(this).on('mouseup', function(evt) { | |||
clearInterval(interval); | |||
}); | |||
}); | |||
$("div.tabs > .tab-nav.right").each(function() { | |||
var interval; | |||
var self = this | |||
$(this).on('mousedown', function(evt) { | |||
interval = setInterval(function() { | |||
var tabs = $(self).nextAll().children("a"); | |||
if(tabs.first().position().left >= 0) return; | |||
tabs.offset(function(i, coords){ | |||
coords.left += 5; | |||
return coords; | |||
}); | |||
}, 10); | |||
}); | |||
$(this).on('mouseup', function(evt) { | |||
clearInterval(interval); | |||
}); | |||
}); | |||
}); |
Latest revision as of 08:31, 10 September 2023
/* Any JavaScript here will be loaded for all users on every page load. */ $.fx.off = true; /* Super simple HTML countdown timer. Seriously, it couldn't get any simpler. * Written by Maru <maru@puella-magi.net>. Released under public domain. * Requires jQuery. * * <span class="countdown" data-until="2012/12/25 00:00:00"> * {DAY} days {HOUR} hours {MINUTE} minutes {SECOND} seconds * </span> */ (function(self){ $.each(self, function(i, elem){ var elem = $(elem); var targetDate = new Date(elem.data('until')); var template = elem.html(); var counter = function(){ var text = template; var dateDiff = Math.floor((targetDate - new Date()) / 1000); $.each({ day: (Math.floor(dateDiff/86400) % 100000), hour: (Math.floor(dateDiff/3600) % 24), minute: (Math.floor(dateDiff/60) % 60), second: (Math.floor(dateDiff) % 60) }, function(k, v){ text = text.replace("{" + k.toUpperCase() + "}", v); }); elem.html(text); setTimeout(counter, 1000); } counter(); }); })($('.countdown')); /* Restore collapsible state for any element with "pm-persist" class * This method extends $.makeCollapsible adding ability to persist elements * collapsible state based on first headline ID. * Written by Maru <maru@puella-magi.net>. Released under public domain. * * <div class="mw-collapsible pm-persist"> * ... * </div> */ $(window).ready(function(){ mw.loader.using(['jquery.cookie', 'jquery.makeCollapsible'], function(){ function cookieName(container) { var section = container.find('.mw-headline').prop('id'); if (section) { return 'pm-collapse-' + section; } } // Flag default state for collapsible element. $('.pm-persist .mw-collapsible-toggle a').click(function(e){ var container = $(this).parents('.mw-collapsible'); var idName = cookieName(container); if (idName) { // Note that the state is reversed; false means collapsed // and true means expanded. This is because the click event // is run before makeCollapsible is run. $.cookie(idName, container.hasClass('mw-collapsed')); } }); // Restore default state on page load. $('.pm-persist').each(function(i, elem){ var container = $(this), idName = cookieName(container); var expanded = $.cookie(idName); if (expanded === "true") { if (container.hasClass('mw-collapsed')) { container.find('.mw-collapsible-toggle a').click(); } } else if (expanded === "false") { if (!container.hasClass('mw-collapsed')) { container.find('.mw-collapsible-toggle a').click(); } } }); }); }); /* Makes sure the 1st tab is hilited if and only if no other tabs are. * Written by Celtic Minstrel */ function checkTabsOnHashChange(evt) { $("div.tabs > div:first-child").each(function() { if($(this).siblings(":target").length == 0) { $(this).addClass("default") } else { $(this).removeClass("default") } }) } $(window).ready(checkTabsOnHashChange).bind('hashchange', checkTabsOnHashChange); /* Make tab content scrollable. * Written by Celtic Minstrel */ $(window).ready(function() { $("div.tabs > .tab-nav ~ div > a")[0].style.marginLeft = "1.6em"; $("div.tabs > .tab-nav.left").each(function() { var interval; var self = this $(this).on('mousedown', function(evt) { interval = setInterval(function() { var tabs = $(self).nextAll().children("a"); if(tabs.last().position().left <= 200) return; tabs.offset(function(i, coords){ coords.left -= 5; return coords; }); }, 10); }); $(this).on('mouseup', function(evt) { clearInterval(interval); }); }); $("div.tabs > .tab-nav.right").each(function() { var interval; var self = this $(this).on('mousedown', function(evt) { interval = setInterval(function() { var tabs = $(self).nextAll().children("a"); if(tabs.first().position().left >= 0) return; tabs.offset(function(i, coords){ coords.left += 5; return coords; }); }, 10); }); $(this).on('mouseup', function(evt) { clearInterval(interval); }); }); });