MediaWiki:Common.js: Difference between revisions

Revision as of 09:59, 31 March 2012

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