MediaWiki:Gadget-Modal.js

/*  _____________________________________________________________________________
 * |                                                                             |
 * |                    === WARNING: GLOBAL GADGET FILE ===                      |
 * |                  Changes to this page affect many users.                    |
 * |           Please discuss changes on the talk page before editing.           |
 * |_____________________________________________________________________________|
 */
 
(function (mw, $) {
  var imgMap = {};
  
  var displayModal = function (magLink, imgInfo) {
    // display the modal
    $('#dw-img-modal').css('display', 'block');

    // set wrapper div width
    $('#dw-img-modal-wrapper').css('width', imgInfo['thumbwidth'] + 'px');

    // set hyperlink to description page
    $('#dw-img-modal-link').attr('href', imgInfo['descriptionurl']);
    
    // set image properties
    var modalImg = $('#dw-img-modal-img');
    modalImg.attr('src', imgInfo['thumburl']);
    
    // set the caption
    var caption = $('#dw-img-modal-caption');
    var captionContents = magLink.parent().contents().filter(function () {
      return !$(this).hasClass('magnify');
    });
    caption.empty();
    caption.append(captionContents.clone());
  };
  
  // Query MediaWiki for a suitable maximally sized thumbnail - it will return the
  // main image URL if the size asked for is larger than the actual image itself, so
  // no special cases are required for handling that. Once the data is obtained, the
  // lightbox modal will be displayed.
  var doImageQuery = function (magLink, pageName, width) {
    (new mw.Api()).get({
      action:     'query',
      prop:       'imageinfo',
      titles:     pageName,
      iiprop:     'url',
      iiurlwidth: width
    }).done(function (data) {
      var infoKey = pageName + '_' + width;
      try {
        var pages = data.query.pages; // NB: this is an object, NOT an array.
        for(var page in pages) {
          if(pages.hasOwnProperty(page)) {
            imgMap[infoKey] = pages[page].imageinfo[0];
          }
        }
      } catch(ex) {
        // oops!?
        console.log('Warning: could not get imageinfo API information for ' + pageName);
      }
      
      // if the imageinfo is now available, display the modal
      if(imgMap.hasOwnProperty(infoKey)) {
        displayModal(magLink, imgMap[infoKey]);
      }
    });
  };
  
  // Returns the File article title given the href from its article link
  // NB: probably not generic enough to work on all wikis
  var urlToTitle = function (url) {
    return decodeURIComponent(url.substring(url.lastIndexOf('/') + 1));
  };

  // Handler for magnify links
  var onClickMagnify = function (event) {
    var magLink  = $(this);
    var width    = (0.8 * $(document).width()) ^ 0;
    var imgTitle = urlToTitle(magLink.children()[0].href);
    var infoKey  = imgTitle + '_' + width;


    // if the imageinfo is already cached, display the modal immediately;
    // otherwise, query for the info
    if(imgMap.hasOwnProperty(infoKey)) {
      displayModal(magLink, imgMap[infoKey]);
    } else {
      doImageQuery(magLink, imgTitle, width);
    }
    
    event.preventDefault();
    event.stopPropagation();
    return false;
  };
  
  // Create the singleton modal lightbox div on the page
  var createModal = function () {
    $('body').append(
      '<div id="dw-img-modal" class="dw-img-modal">\n' +
      '  <span class="dw-img-modal-close">&times;</span>\n' +
      '  <div id="dw-img-modal-wrapper">\n' +
      '    <a class="image" id="dw-img-modal-link"><img class="dw-img-modal-content" id="dw-img-modal-img"></a>\n' +
      '  </div>\n' +
      '  <div id="dw-img-modal-caption"></div>\n' +
      '</div>\n'
    );
    
    // add on-click handler to the close button
    $('.dw-img-modal-close').on('click', function () {
      // hide the modal
      $('.dw-img-modal').css('display', 'none');
    });

    // add an on-key-down handler to close on escape
    $(document).on('keydown', function (event) { 
      var modal = $('.dw-img-modal');
      if(event.which == 27 && modal.css('display') == 'block') {
        modal.css('display', 'none'); 
      }
    });
  };
  
  // Change the existing MediaWiki magnify links to activate the lightbox
  var createLightboxLinks = function () {
    $('.magnify').on('click', onClickMagnify);
  };
  
  // On ready
  $(function () {
    createModal();
    createLightboxLinks();
  });
})(mediaWiki, jQuery);