MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* 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);
    });
  });
});