Side-By-Side Diff Bookmarklet

_side-by-side-diff.md

Side-By-Side Diff Bookmarklet

Currently hardcodes these domain pairs, tweak it for your use-case:

var urls = {prod: "http://www.mcgill.ca/study/2013-2014", dev: "http://amir-dev.tree.ewdev.ca"}; 

Activating the bookmarklet once on either site displays the same page side-by-side with its complement, as follows:

Activating the bookmarklet a second time redirects to the complementary page.

I use this bookmarklet as a http://backtick.io/ command, but you can simply paste the code into a bookmarklet.

command.js

var urls = {prod: "http://www.mcgill.ca/study/2013-2014", dev: "http://amir-dev.tree.ewdev.ca"}; 
var thisURL = window.location.href;
var otherURL = window.location.host.match(/mcgill.ca$/) ? 
  thisURL.replace(urls.prod, urls.dev) : 
  thisURL.replace(urls.dev, urls.prod);
if(!jQuery('body').hasClass('courseCal-split')) {
  jQuery('body').addClass('courseCal-split').empty();
  jQuery('<iframe/>').attr({width:'50%', height: '100%', src: thisURL}).appendTo('body');
  jQuery('<iframe/>').attr({width:'50%', height: '100%', src: otherURL}).appendTo('body');
} else {
  //on double click, simply redirect
  window.location.href = otherURL;
}

command.json

{
  "name": "SWAP-COURSECAL",
  "description": "Swaps domains: mcgill.ca/study/2013-14 and amir-dev.tree.ewdev.ca"
}

javascript:var urls = {prod: "http://www.mcgill.ca/study/2013-2014", dev: "http://amir-dev.tree.ewdev.ca"}; 
var thisURL = window.location.href;
var otherURL = window.location.host.match(/mcgill.ca$/) ? 
  thisURL.replace(urls.prod, urls.dev) : 
  thisURL.replace(urls.dev, urls.prod);
if(!jQuery('body').hasClass('courseCal-split')) {
  jQuery('body').addClass('courseCal-split').empty();
  jQuery('<iframe/>').attr({width:'50%', height: '100%', src: thisURL}).appendTo('body');
  jQuery('<iframe/>').attr({width:'50%', height: '100%', src: otherURL}).appendTo('body');
} else {
  window.location.href = otherURL;
}