info343/homework/diffhtml.js

document.observe("dom:loaded", function() {
   // $("output2").hide();
   $("maximizelink").href = "#";
   $("maximizelink").style.position = "absolute";
   $("maximizelink").style.right = "8px";
   $("maximizelink").style.top = "8px";
   $("maximizelink").observe("click", function() {
      this.siblings().each(function(el) {
         el.toggle();
      });
   });

   $("compareform").observe("submit", stopEvent);
   $("compare").observe("click", compareClick);
   $("page1").observe("change", compareClick);
   $("page1suggest").observe("change", page1SuggestChange);
   $("page2").observe("change", compareClick);
   $("show1").observe("click", updateOpacity);
   $("show2").observe("click", updateOpacity);
   $("mix12").observe("click", updateOpacity);
   $("output2").observe("load", updateSize);

   if ($("page1").scrollWidth != $("page1suggest").scrollWidth) {
      $("page1suggest").style.width = $("page1").scrollWidth + "px";
   }

   Cookies.makeTextBoxStateful("page1");
   Cookies.makeSelectStateful("page1suggest");
   Cookies.makeTextBoxStateful("page2");
   Cookies.makeTextBoxStateful("uwnetid");
   Cookies.makeRadioButtonStateful("show1");
   Cookies.makeRadioButtonStateful("show2");
   Cookies.makeRadioButtonStateful("mix12");
   
   doEnabling();
   
   // show message for Chrome users
   if (navigator.userAgent.match(/Chrome/)) {
      browserSecurityError();
   }
});

// if the browser is not able to do cross-domain iframes
function browserSecurityError() {
   $("browsermessagearea").className = "error";
   $("browsermessagearea").innerHTML = "NOTE: This tool does not work in your particular web browser, because it considers its code to be unsafe.  Please try a different browser.  Sorry.";
   $("compareform").style.top = "40px";
}

function page1SuggestChange(event) {
   stopEvent(event);

   $("page1").value = this.value;
   Cookies.statefulSelectChange("page1");
   
   var opt = $("page1suggest").options[$("page1suggest").selectedIndex];
   if (!opt || !opt.title) {
      return;
   }

   var page2url = "https://info343.ischool.uw.edu/USERNAME/" + opt.title;
   var uwnetid = $("uwnetid").value.strip();
   if (uwnetid && uwnetid.match(/[a-zA-Z0-9_]{1,8}/)) {
      page2url = page2url.replace(/USERNAME/, uwnetid);
   }

   $("page2").value = page2url;
   Cookies.statefulSelectChange("page2");
   compareClick(event);

   return stopEvent(event);
}

function updateOpacity(event) {
   // stopEvent(event);

   if ($("show1").checked) {
      $("output1").show();
      $("output1").setOpacity(1.0);
      $("output2").hide();
      $("output2").setOpacity(0.0);
   } else if ($("show2").checked) {
      $("output1").hide();
      $("output1").setOpacity(0.0);
      $("output2").show();
      $("output2").setOpacity(1.0);
      updateSize();
   } else {
      // blend
      $("output1").show();
      $("output1").setOpacity(1.0);
      $("output2").show();
      $("output2").setOpacity(0.5);
      updateSize();
   }
   // return stopEvent(event);
}

function doEnabling() {
   var disable = !!(!$("page1").value || !$("page2").value);
   $("show1").disabled = disable;
   $("show2").disabled = disable;
   $("mix12").disabled = disable;
   return !disable;
}

function updateImgWidth() {
   $("output1").width = $("output1").naturalWidth;
}

function compareClick(event) {
   stopEvent(event);
   if (!doEnabling()) {
      return false;
   }

   try {
      $("output1").src = $("page1").value;
      $("output1").observe('load', updateImgWidth)
      $("output1").alt = "Image file not found: " + $("page1").value;
   } catch (e) {
      browserSecurityError();
   }

   // target the iframe at their page.
   // hack: append a query parameter to it so that it will not cache the
   // page and will instead re-fetch it fresh every time they click Compare
   var page2url = $("page2").value;
   if (page2url.indexOf("?") >= 0) {
      page2url += "&";
   } else {
      page2url += "?";
   }
   page2url += "dontcacheme1=" + new Date().getTime() + "&dontcacheme2=" + Math.random();
   
   try {
      $("output2").src = page2url;
   } catch (e) {
      browserSecurityError();
   }

   updateOpacity();
   updateSize();
   return stopEvent(event);
}

// make iframe height match document's actual height
function updateSize(event) {
   stopEvent(event);
   
   // update width
   if ($("output1") && $("output1").naturalWidth) {
      $("output2").style.width = $("output1").naturalWidth + "px";
      console.log("Updating output2 width: " + $("output1").naturalWidth + "px");
   }

   // update height
   try {
      if (!$("output2")
            || !$("output2").contentWindow
            || !$("output2").contentWindow.document
            || !$("output2").contentWindow.document.body) {
         return;
      }

      var height = $("output2").contentWindow.document.body.scrollHeight;
      $("output2").style.height = (height + 0) + "px";
      if ($("output1").height) {
         // if page taller than image, put padding under image so bottoms match
         // var heightDiff = ((height + 0) - $("output1").height);
         // if (heightDiff >= 0) {
         //    $("output1").style.paddingBottom = heightDiff + "px";
         // }
      }
   } catch (e) {
      $("output2").style.height = "2200px";
      $("errors").update("Unable to display page at " + $("page2").value + "<br />\n" + e);
      $("errors").show();
      if ($("output1").height && $("output1").height >= 200) {
         $("output2").style.height = $("output1").height + 0 + "px";
      }
   }

   return stopEvent(event);
}

function stopEvent(event) {
   if (event) {
      event.stop();
   }
   return false;
}