| Index: experimental/webtry/res/imp/zoom.html
|
| diff --git a/experimental/webtry/res/imp/zoom.html b/experimental/webtry/res/imp/zoom.html
|
| deleted file mode 100644
|
| index 33aab9b44c2705e10ff9980228ec1262dca45619..0000000000000000000000000000000000000000
|
| --- a/experimental/webtry/res/imp/zoom.html
|
| +++ /dev/null
|
| @@ -1,169 +0,0 @@
|
| -<script type="text/javascript" charset="utf-8">
|
| - /**
|
| - * A reusable HTML Import to enable zooming on images.
|
| - *
|
| - * To use, simply include this HTML Import and add the class 'zoom' to any
|
| - * images you want zoomable.
|
| - *
|
| - * <link rel='import' type='text/html' href='/res/imp/zoom.html'>
|
| - *
|
| - * <img src="http://..." class="zoom"/>
|
| - *
|
| - * Any number of images on a page can be zoomable.
|
| - *
|
| - * If you want to display the rgb colors of the pixel at the center of the
|
| - * zoom then add an id of 'zoomHex' to any element that supports
|
| - * textContent, such as a div, p, span, etc.
|
| - *
|
| - * <p id=zoomHex></p>
|
| - *
|
| - * Note that HTML Imports need to be polyfilled in the near term.
|
| - */
|
| - (function () {
|
| - function onLoad() {
|
| - var PIXELS = 20; // The number of pixels in width and height in a zoom.
|
| - 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.
|
| - var hex = document.getElementById('zoomHex');
|
| - var canvasCopy = 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 = 1024;
|
| - canvas.height = 1024;
|
| - canvas.classList.add('zoomCanvas');
|
| - ctx = canvas.getContext('2d');
|
| - ctx.imageSmoothingEnabled = false;
|
| - this.parentNode.insertBefore(canvas, this);
|
| - // 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('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;
|
| - }
|
| - return s;
|
| - }
|
| - 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);
|
| - var x = clientX - currentImage.x;
|
| - var y = clientY - currentImage.y;
|
| - var dx = Math.floor(ctx.canvas.width/PIXELS);
|
| - var dy = Math.floor(ctx.canvas.height/PIXELS);
|
| - ctx.lineWidth = 1;
|
| - ctx.strokeStyle = '#000';
|
| - // Draw out each pixel as a rect on the target canvas, as this works around
|
| - // FireFox doing a blur as it copies from one canvas to another.
|
| - var colors = canvasCopy.getContext('2d').getImageData(x, y, PIXELS, PIXELS).data;
|
| - for (var i=0; i<PIXELS; i++) {
|
| - for (var j=0; j<PIXELS; j++) {
|
| - var offset = (j*PIXELS+i)*4; // Offset into the colors array.
|
| - ctx.fillStyle = 'rgba(' + colors[offset] + ', ' + colors[offset+1] + ', ' + colors[offset+2] + ', ' + colors[offset+3]/255.0 + ')';
|
| - ctx.fillRect(i*dx, j*dy, dx-1, dy-1);
|
| - // Box and label one selected pixel with its rgba values.
|
| - if (hex && i==PIXELS/2 && j == PIXELS/2) {
|
| - ctx.strokeRect(i*dx, j*dy, dx-1, dy-1);
|
| - hex.textContent = 'rgba('
|
| - + colors[offset] + ', '
|
| - + colors[offset+1] + ', '
|
| - + colors[offset+2] + ', '
|
| - + colors[offset+3] + ') '
|
| - + hexify(colors[offset])
|
| - + hexify(colors[offset+1])
|
| - + hexify(colors[offset+2])
|
| - + hexify(colors[offset+3]);
|
| - }
|
| - }
|
| - }
|
| - lastClientX = clientX;
|
| - lastClientY = clientY;
|
| - }
|
| - setTimeout(drawZoom, 1000/30);
|
| - }
|
| - }
|
| - 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('pointermove', zoomMove, true);
|
| - document.body.removeEventListener('pointerup', zoomFinished);
|
| - document.body.removeEventListener('pointerleave', zoomFinished);
|
| - }
|
| -
|
| - var zoomables = document.body.querySelectorAll('.zoom');
|
| - for (var i=0; i<zoomables.length; i++) {
|
| - zoomables[i].addEventListener('pointerdown', zoomMouseDown);
|
| - }
|
| - }
|
| -
|
| - // If loaded via HTML Imports then DOMContentLoaded will be long done.
|
| - if (document.readyState != "loading") {
|
| - onLoad();
|
| - } else {
|
| - this.addEventListener('DOMContentLoaded', onLoad);
|
| - }
|
| - })();
|
| -</script>
|
| -
|
| -<style type="text/css" media="screen">
|
| - .zoom {
|
| - cursor: crosshair;
|
| - }
|
| -
|
| - .zoomCanvas {
|
| - position: absolute;
|
| - width: vmin;
|
| - height: vmin;
|
| - top: 3em;
|
| - right: 1em;
|
| - z-index: -1;
|
| - }
|
| -
|
| - #zoomCopy {
|
| - display: none;
|
| - }
|
| -
|
| - #zoomHex {
|
| - text-shadow: 1px 1px #eee;
|
| - }
|
| -</style>
|
| -
|
|
|