Add a magnifier lens to the image.

experimental/webtry/js/webtry.js

 /**
  * Common JS that talks XHR back to the server and runs the code and receives
  * the results.
  */
 
 /**
  * A polyfill for HTML Templates.
  *
  * This just adds in the content attribute, it doesn't stop scripts
  * from running nor does it stop other side-effects.
  */
 (function polyfillTemplates() {
   if('content' in document.createElement('template')) {
     return false;
   }
 
   var templates = document.getElementsByTagName('template');
   for (var i=0; i<templates.length; i++) {
     var content = document.createDocumentFragment();
     while (templates[i].firstChild) {
      content.appendChild(templates[i].firstChild);
     }
     templates[i].content = content;
   }
 })();
 
 /**
+ * Enable zooming for any images with a class of 'zoom'.
+ */
+(function () {
+  var clientX      = 0;
+  var clientY      = 0;
+  var lastClientX  = 0;
+  var lastClientY  = 0;
+  var ctx          = null; // The 2D canvas context of the zoom.
+  var currentImage = null; // The img node we are zooming for, otherwise null.
+
+  function zoomMove(e) {
+    clientX = e.clientX;
+    clientY = e.clientY;
+  }
+
+  function zoomMouseDown(e) {
+    e.preventDefault();
+    // Only do zooming on the primary mouse button.
+    if (e.button != 0) {
+      return
+    }
+    currentImage = e.target;
+    clientX = e.clientX;
+    clientY = e.clientY;
+    lastClientX = clientX-1;
+    lastClientY = clientY-1;
+    document.body.style.cursor = 'crosshair';
+    canvas = document.createElement('canvas');
+    canvas.width=256;

[mtklein, 2014/04/28 19:53:17]

Can we grab the w/h from currentImage?

[jcgregorio, 2014/04/28 20:45:25]

These dimensions just need to be large enough that the squares representing
pixels show up as squares on the canvas, so it is independent of output image
size.

+    canvas.height=256;
+    canvas.classList.add('zoomCanvas');
+    ctx = canvas.getContext('2d');
+    ctx.imageSmoothingEnabled = false;
+    this.parentNode.insertBefore(canvas, this);
+
+    document.body.addEventListener('mousemove',  zoomMove,     true);
+    document.body.addEventListener('mouseup',    zoomFinished);
+    document.body.addEventListener('mouseleave', zoomFinished);
+
+    // Kick off the drawing.
+    setTimeout(drawZoom, 33);

[mtklein, 2014/04/28 19:53:17]

Tsk. Tsk.  Don't you know we're trying to make the world a beautiful 60Hz?

[jcgregorio, 2014/04/28 20:45:25]

I doubt it would be noticeable on the 32x32 grid. 

On 2014/04/28 19:53:17, mtklein wrote:

+  }
+
+  function drawZoom() {
+    if (currentImage) {
+      // Only draw if the mouse has moved from the last time we drew.
+      if (lastClientX != clientX || lastClientY != clientY) {
+        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+        ctx.drawImage(currentImage, clientX - currentImage.x, clientY - currentImage.y, 32, 32, 0, 0, ctx.canvas.width, ctx.canvas.height);

[mtklein, 2014/04/28 19:53:17]

Took me a while and a reference to parse this line.  Maybe

ctx.drawImage(currentImage,
              clientX - currentImage.x, clientY - currentImage.y,  // src zero
              32, 32,                                              // src
dimensions
              0,0,                                                 // dst zero
              ctx.canvas.width, ctx.canvas.height);                // dst
dimensions
?

[jcgregorio, 2014/04/28 20:45:25]

Done.

+        lastClientX = clientX;
+        lastClientY = clientY;
+      }
+      setTimeout(drawZoom, 33);
+    }
+  }
+
+  function zoomFinished() {
+    currentImage = null;
+    document.body.style.cursor = 'default';
+    ctx.canvas.parentNode.removeChild(ctx.canvas);
+    document.body.removeEventListener('mousemove',  zoomMove,     true);
+    document.body.removeEventListener('mouseup',    zoomFinished);
+    document.body.removeEventListener('mouseleave', zoomFinished);
+  }
+
+  this.addEventListener('DOMContentLoaded', function() {
+    var zoomables = document.body.querySelectorAll('.zoom');
+    for (var i=0; i<zoomables.length; i++) {
+      zoomables[i].addEventListener('mousedown', zoomMouseDown);
+    }
+  });
+})();
+
+
+/**
  * All the functionality is wrapped up in this anonymous closure, but we need
  * to be told if we are on the workspace page or a normal try page, so the
  * workspaceName is passed into the closure, it must be set in the global
  * namespace. If workspaceName is the empty string then we know we aren't
  * running on a workspace page.
  *
  * If we are on a workspace page we also look for a 'history'
  * variable in the global namespace which contains the list of tries
  * that are included in this workspace. That variable is used to
  * populate the history list.
@@ skipping 156 matching lines @@
 
 
     // Add the images to the history if we are on a workspace page.
     if (tryHistory && history) {
       for (var i=0; i<history.length; i++) {
         addToHistory(history[i].hash, '/i/'+history[i].hash+'.png');
       }
     }
 
 })(workspaceName);