Add polyfill for pointer events, change code to handle both mouse and pointer events equalls.

experimental/webtry/res/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.
@@ skipping 55 matching lines @@
     // Copy the image over to a canvas so we can read RGBA values for each point.
     if (hex) {
       canvasCopy = document.createElement('canvas');
       canvasCopy.width = currentImage.width;
       canvasCopy.height = currentImage.height;
       canvasCopy.id = 'zoomCopy';
       canvasCopy.getContext('2d').drawImage(currentImage, 0, 0, currentImage.width, currentImage.height);
       this.parentNode.insertBefore(canvasCopy, this);
     }
 
-    document.body.addEventListener('mousemove',  zoomMove,     true);
-    document.body.addEventListener('mouseup',    zoomFinished);
-    document.body.addEventListener('mouseleave', zoomFinished);
+    document.body.addEventListener('pointermove',   zoomMove,     true);
+    document.body.addEventListener('pointerup',     zoomFinished);
+    document.body.addEventListener('pointerleave',  zoomFinished);
 
     // Kick off the drawing.
     setTimeout(drawZoom, 1);
   }
 
   function hexify(i) {
     var s = i.toString(16).toUpperCase();
     // Pad out to two hex digits if necessary.
     if (s.length < 2) {
       s = '0' + s;
@@ skipping 45 matching lines @@
   }
 
   function zoomFinished() {
     currentImage = null;
     if (hex) {
       hex.textContent = '';
     }
     document.body.style.cursor = 'default';
     ctx.canvas.parentNode.removeChild(ctx.canvas);
     canvasCopy.parentNode.removeChild(canvasCopy);
-    document.body.removeEventListener('mousemove',  zoomMove,     true);
-    document.body.removeEventListener('mouseup',    zoomFinished);
-    document.body.removeEventListener('mouseleave', zoomFinished);
+    document.body.removeEventListener('pointermove',  zoomMove,     true);
+    document.body.removeEventListener('pointerup',    zoomFinished);
+    document.body.removeEventListener('pointerleave', zoomFinished);
   }
 
   this.addEventListener('DOMContentLoaded', function() {
     var zoomables = document.body.querySelectorAll('.zoom');
     for (var i=0; i<zoomables.length; i++) {
-      zoomables[i].addEventListener('mousedown', zoomMouseDown);
+      zoomables[i].addEventListener('pointerdown', 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
@@ skipping 174 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);