lightboxModal.js

(function (mw, $) {
  var imgMap  = [];
  
  var displayModal = function (magLink, imgInfo) {
    // display the modal
    $('.dw-img-modal').css('display', 'block');
    
    // set image properties
    var modalImg = $('.dw-img-modal-img');
    modalImg.attr('src',    imgInfo['thumburl'   ]);
    modalImg.attr('width',  imgInfo['thumbwidth' ]);
    modalImg.attr('height', imgInfo['thumbheight']);
    
    // 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) {
      try {
        var pages = data.query.pages; // NB: this is an object, NOT an array.
        for(var page in pages) {
          if(pages.hasOwnProperty(page)) {
            imgMap[pageName] = 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(pageName)) {
        displayModal(magLink, imgMap[pageName]);
      }
    });
  };
  
  // 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));
  };
  
  // Kick off a query for a particular image's information
  var getImageInfo = function (magLink) {
    var imgTitle = urlToTitle(magLink.children()[0].href);
    var width    = (0.8 * $(document).width()) ^ 0;
    doImageQuery(magLink, imgTitle, width);
  };
 
  // Handler for magnify links
  var onClickMagnify = function (event) {
    var magLink = $(this);

    // if the imageinfo is already cached, display the modal immediately;
    // otherwise, query for the info
    if(imgMap.hasOwnProperty(imgTitle)) {
      displayModal(magLink, imgMap[imgTitle]);
    } else {
      getImageInfo(magLink);
    }
    
    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' +
      '  <img class="dw-img-modal-content" id="dw-img-modal-img">\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');
    });
  };
  
  // Change the existing MediaWiki magnify links to activate the lightbox
  var createLightboxLinks = function () {
    $('.magnify').on("click", onClickMagnify);
  };
  
  // On ready
  $(function () {
    createModal();
    createLightboxLinks();
  });
})(mediaWiki, jQuery);