MediaWiki:Common.js: Difference between revisions

Revision as of 10:12, 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>
 */
$(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();
        }
      }
    });
  });
});