MediaWiki:Compare.js

/* 
 * Script for comparing two versions of the same work, side-by-side on two columns. 
 * Adds a link, shown as a double arrow (⇔), next to interwiki links. 
 * Click the arrow, the text linked by the interwiki is loaded in the column on the right.
 * The shortest column can be dragged up&down, to make the two texts match.
 *
 *
 * Script per il confronto tra due versioni dello stesso testo, su due colonne affiancate.
 * Aggiunge un link mostrato come doppia freccia (⇔), vicino ai link interwiki.
 * Cliccando la freccia il testo puntato dall'interwiki viene caricato nella colonna di destra.
 * La colonna più corta può essere trascinata su e giù, in modo da far corrispondere i due testi.
 *
 *
 * Requires the following message to be set in MediaWiki:Common.js:
 *
 * self.ws_messages = { 
 *      ......................
 *	'compare_with':  'Comparison with:',
 *	'compare_texts': 'Compare texts'
 * }
 *
 * This is intended as an alternative to the DoubleWiki extension, so if you want to install it on your subdomain, 
 * you should remove the BilingualLink() function from your MediaWiki:Common.js, if it's present
 *
 * This system can be applied to pages in the same subdomain: 
 * see on it.wikisource the Template:AltraVersione and the function interwikiExtra() in MediaWiki:Common.js
 *
 * originally written by User:Candalua for it.wikisource.org
 */

if(!self.ws_messages) self.ws_messages = {};
function ws_msg(name) {
   var m = self.ws_messages[name];
   if(m) return m; else return name;
}

compareScrollPosition = 0;

//dragging for right column
function compareDrag2(e) {
  if (!e) e = window.event;
  movement = e.pageY - compareScrollPosition;
  if (movement < 0) movement = 0;
  diff = $("#compare1").height() - $("#compare2").height();
  if (movement > diff) movement = diff;
  if (parseInt($("#compare2").css('top'), 10) != movement)
    $("#compare2").css('top', movement+'px');
}

//dragging for left column 
function compareDrag1(e) {
  if (!e) e = window.event;
  movement = e.pageY - compareScrollPosition;
  if (movement < 0) movement = 0;
  diff = $("#compare2").height() - $("#compare1").height();
  if (movement > diff) movement = diff;
  if (parseInt($("#compare1").css('top'), 10) != movement)
    $("#compare1").css('top', movement+'px');
}

title2 = null;
lang2 = null;

//function to be called on return from ajax call
function compare_callback(res) {

    //show error on page not found
    if (res.error) {
        $("#compare2").html('<div style="text-align:center; padding-top:20px; font-size:150%; color:red">' + res.error.info + '</div>');
        return;
    }

    //in the original text, change all internal links from relative to absolute, so that they still point to the right place
    data = res.parse.text['*'].replace(/href="\/wiki/g, 'href="//' + lang2 + '.wikisource.org/wiki');
    text2 = $(data);

    //remove some things that could give trouble
    text2.find("span.interwiki-info").remove();

    //special formatting for it.wikisource
    text2.find("span.AltraVersione").remove();
    text2.find("table#barra_navigazione").clone().attr('id', 'barra_navigazione_sotto').appendTo( text2.find("table#barra_navigazione").parent());

    //fill right column with content
    $("#compare2").html(text2);

    //the shortest column can be dragged up&down
    if ($("#compare2").height() < $("#compare1").height()) {
       $("#compare2").css('cursor', 'move');
       $("#compare2").mousedown( function(e) {
           compareScrollPosition = e.pageY - parseInt($("#compare2").css('top'), 10);
           $(document).mousemove(compareDrag2);
       });
     }
     else {
          $("#compare1").css('cursor', 'move');
          $("#compare1").mousedown( function(e) {
              compareScrollPosition = e.pageY - parseInt($("#compare1").css('top'), 10);
           $(document).mousemove(compareDrag1);
          });
     }
     $(document).mouseup( function(e) {
          $(document).off('mousemove');
     });

     if (iw_pages) $(document).ready(iw_pages);
     if (iw_trans) $(document).ready(iw_trans);
}

//prepare the layout and do the ajax call to retrieve content
function compare_ajax(lang2_, title2_) {
    lang2 = lang2_;
    title2 = title2_;

   //the first time we build the layout with two columns
   if ($("#compare2").length === 0) {

        //reach the beginning of the text 
        textBegin = $('#bodyContent').children(':first');
        while (textBegin.next().attr('id') == 'siteSub' 
            || textBegin.next().attr('id') == 'contentSub'
            || textBegin.next().attr('id') == 'jump-to-nav') textBegin = textBegin.next();

        textBegin.after('<div id="compareContainer" style="position:relative"></div>');
        $("#compareContainer").append('<div id="compare1" style="width:50%; float:left;  position:relative; top:0px"></div>');
        $("#compareContainer").append('<div id="compare2" style="width:49%; float:right; position:relative; top:0px"></div>');
        $("#compareContainer").nextUntil("#printfooter, #catlinks").appendTo($("#compare1"));
    }
    //the other times we just clean the layout that already exists
    else {
        compareScrollPosition = 0;
        $("#compare1").off('mousedown');
        $("#compare2").off('mousedown');
        $("#compare1").css('top', '0px');
        $("#compare2").css('top', '0px');
        $("#compare1").css('cursor', 'auto');
        $("#compare2").css('cursor', 'auto');
        $("#compareTitle").remove();
    }

    //show ajax loader image
    $("#compare2").html('<div style="text-align:center"><img width="32" height="32" src="//upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif" alt="Ajax-loader.gif" /></div>');

    //set a title of the right column
    div = '<div id="compareTitle" style="width:51%;float:right">' + ws_msg('compare_with') + ' <a href="//' + lang2 + '.wikisource.org/wiki/'+title2+'" ';

    // look at the URL of the current page to see in which subdomain we are
    // (probably there's a better way to do this)
    site = document.URL;
    site = site.substring(site.indexOf("//")+2, site.indexOf("."));

    //if we're loading a page from a different subdomain, load also its stylesheet
    if (lang2 != site ) {
      //we place it at the beginning of head, so that the other stylesheets are evaluated after and they "win" in case of name conflicts
      //first we remove other stylesheets from previous calls
      $('head link.styleForCompare').remove();

      //using vector by default
      $('head').prepend('<link class="styleForCompare" rel="stylesheet" href="https://' +  lang2 + '.wikisource.org/w/load.php?debug=false&amp;lang=' + lang2 + '&amp;modules=site&amp;only=styles&amp;skin=vector" type="text/css" media="all" />');
    }

    //do not show language in title when we're comparing two local pages
    langLabel = lang2;
    if (lang2 == site ) langLabel = '';
    else langLabel += ':';

    div += ' title="' + langLabel + title2 + '">' + langLabel + title2 + '</a></div>';
    $("#contentSub").append(div);

    url = '//' + lang2 + '.wikisource.org/w/api.php?format=json&requestid=' + title2 + Math.random() + '&action=parse&prop=text&callback=compare_callback&page=' + title2;
    mw.loader.load(url); 
}

//add the link to call the compare on interwiki links. This is shown as ⇔.
$( function() {
  if ((mw.config.get('wgNamespaceNumber') === 0) && !mw.config.get('wgIsMainPage')) {
    $('li.interlanguage-link').each(function(index) {
      lang2_ = $(this).find("a").attr('lang');
      title2_ = decodeURIComponent($(this).find("a").attr("href"))
                     .replace(/.*wikisource.org\/wiki\//, "")
                     .replace(/\'/g, "\\'")
                     .replace(/_/g, " ")
                     .replace(/#.*/, "");
      $(this).append('<a href="javascript:void(0)" onclick="compare_ajax(\'' + lang2_ + '\', \'' + title2_ + '\')" title="' + ws_msg('compare_texts') + '">&nbsp;⇔</a>');
    });
  }
});