MediaWiki:Gadget-Lightbox.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 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, imgTitle) {    var width    = (0.8 * $(document).width) ^ 0;    doImageQuery(magLink, imgTitle, width);  };

// Handler for magnify links var onClickMagnify = function (event) { var magLink = $(this); var imgTitle = urlToTitle(magLink.children[0].href);

// 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, imgTitle); }   event.preventDefault; event.stopPropagation; return false; }; // Create the singleton modal lightbox div on the page var createModal = function { $('body').append(     ' \n' +      '  &times; \n' +      '  \n' +      '  \n' +      ' \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);