OLD | NEW |
1 /** | 1 /** |
2 * Common JS that talks XHR back to the server and runs the code and receives | 2 * Common JS that talks XHR back to the server and runs the code and receives |
3 * the results. | 3 * the results. |
4 */ | 4 */ |
5 | 5 |
6 /** | 6 /** |
7 * A polyfill for HTML Templates. | 7 * A polyfill for HTML Templates. |
8 * | 8 * |
9 * This just adds in the content attribute, it doesn't stop scripts | 9 * This just adds in the content attribute, it doesn't stop scripts |
10 * from running nor does it stop other side-effects. | 10 * from running nor does it stop other side-effects. |
(...skipping 10 matching lines...) Expand all Loading... |
21 content.appendChild(templates[i].firstChild); | 21 content.appendChild(templates[i].firstChild); |
22 } | 22 } |
23 templates[i].content = content; | 23 templates[i].content = content; |
24 } | 24 } |
25 })(); | 25 })(); |
26 | 26 |
27 /** | 27 /** |
28 * Enable zooming for any images with a class of 'zoom'. | 28 * Enable zooming for any images with a class of 'zoom'. |
29 */ | 29 */ |
30 (function () { | 30 (function () { |
| 31 var PIXELS = 20; // The number of pixels in width and height in a zoom. |
31 var clientX = 0; | 32 var clientX = 0; |
32 var clientY = 0; | 33 var clientY = 0; |
33 var lastClientX = 0; | 34 var lastClientX = 0; |
34 var lastClientY = 0; | 35 var lastClientY = 0; |
35 var ctx = null; // The 2D canvas context of the zoom. | 36 var ctx = null; // The 2D canvas context of the zoom. |
36 var currentImage = null; // The img node we are zooming for, otherwise null. | 37 var currentImage = null; // The img node we are zooming for, otherwise null. |
| 38 var hex = document.getElementById('zoomHex'); |
| 39 var canvasCopy = null; |
37 | 40 |
38 function zoomMove(e) { | 41 function zoomMove(e) { |
39 clientX = e.clientX; | 42 clientX = e.clientX; |
40 clientY = e.clientY; | 43 clientY = e.clientY; |
41 } | 44 } |
42 | 45 |
43 function zoomMouseDown(e) { | 46 function zoomMouseDown(e) { |
44 e.preventDefault(); | 47 e.preventDefault(); |
45 // Only do zooming on the primary mouse button. | 48 // Only do zooming on the primary mouse button. |
46 if (e.button != 0) { | 49 if (e.button != 0) { |
47 return | 50 return |
48 } | 51 } |
49 currentImage = e.target; | 52 currentImage = e.target; |
50 clientX = e.clientX; | 53 clientX = e.clientX; |
51 clientY = e.clientY; | 54 clientY = e.clientY; |
52 lastClientX = clientX-1; | 55 lastClientX = clientX-1; |
53 lastClientY = clientY-1; | 56 lastClientY = clientY-1; |
54 document.body.style.cursor = 'crosshair'; | 57 document.body.style.cursor = 'crosshair'; |
55 canvas = document.createElement('canvas'); | 58 canvas = document.createElement('canvas'); |
56 canvas.width=256; | 59 canvas.width = 1024; |
57 canvas.height=256; | 60 canvas.height = 1024; |
58 canvas.classList.add('zoomCanvas'); | 61 canvas.classList.add('zoomCanvas'); |
59 ctx = canvas.getContext('2d'); | 62 ctx = canvas.getContext('2d'); |
60 ctx.imageSmoothingEnabled = false; | 63 ctx.imageSmoothingEnabled = false; |
61 this.parentNode.insertBefore(canvas, this); | 64 this.parentNode.insertBefore(canvas, this); |
62 | 65 |
| 66 // Copy the image over to a canvas so we can read RGBA values for each point
. |
| 67 if (hex) { |
| 68 canvasCopy = document.createElement('canvas'); |
| 69 canvasCopy.width = currentImage.width; |
| 70 canvasCopy.height = currentImage.height; |
| 71 canvasCopy.id = 'zoomCopy'; |
| 72 canvasCopy.getContext('2d').drawImage(currentImage, 0, 0, currentImage.wid
th, currentImage.height); |
| 73 this.parentNode.insertBefore(canvasCopy, this); |
| 74 } |
| 75 |
63 document.body.addEventListener('mousemove', zoomMove, true); | 76 document.body.addEventListener('mousemove', zoomMove, true); |
64 document.body.addEventListener('mouseup', zoomFinished); | 77 document.body.addEventListener('mouseup', zoomFinished); |
65 document.body.addEventListener('mouseleave', zoomFinished); | 78 document.body.addEventListener('mouseleave', zoomFinished); |
66 | 79 |
67 // Kick off the drawing. | 80 // Kick off the drawing. |
68 setTimeout(drawZoom, 1); | 81 setTimeout(drawZoom, 1); |
69 } | 82 } |
70 | 83 |
| 84 function hexify(i) { |
| 85 var s = i.toString(16).toUpperCase(); |
| 86 // Pad out to two hex digits if necessary. |
| 87 if (s.length < 2) { |
| 88 s = '0' + s; |
| 89 } |
| 90 return s; |
| 91 } |
| 92 |
71 function drawZoom() { | 93 function drawZoom() { |
72 if (currentImage) { | 94 if (currentImage) { |
73 // Only draw if the mouse has moved from the last time we drew. | 95 // Only draw if the mouse has moved from the last time we drew. |
74 if (lastClientX != clientX || lastClientY != clientY) { | 96 if (lastClientX != clientX || lastClientY != clientY) { |
75 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); | 97 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); |
| 98 var x = clientX - currentImage.x; |
| 99 var y = clientY - currentImage.y; |
76 ctx.drawImage(currentImage, | 100 ctx.drawImage(currentImage, |
77 clientX - currentImage.x, clientY - currentImage.y, // src zero | 101 x, y, // src zero |
78 32, 32, // src dimensio
ns | 102 PIXELS, PIXELS, // src dimensions |
79 0, 0, // dst zero | 103 0, 0, // dst zero |
80 ctx.canvas.width, ctx.canvas.height); // dst dimensio
ns | 104 ctx.canvas.width, ctx.canvas.height); // dst dimensions |
81 lastClientX = clientX; | 105 lastClientX = clientX; |
82 lastClientY = clientY; | 106 lastClientY = clientY; |
| 107 // Box and label one selected pixel with its rgba values. |
| 108 if (hex) { |
| 109 ctx.lineWidth = 1; |
| 110 ctx.strokeStyle = '#000'; |
| 111 var dx = ctx.canvas.width/PIXELS; |
| 112 var dy = ctx.canvas.height/PIXELS; |
| 113 ctx.strokeRect((PIXELS/2)*dx, (PIXELS/2)*dy, dx, dy); |
| 114 var p = canvasCopy.getContext('2d').getImageData(x+PIXELS/2, y+PIXELS/
2, 1, 1).data; |
| 115 hex.textContent = 'rgba(' |
| 116 + p[0] + ', ' |
| 117 + p[1] + ', ' |
| 118 + p[2] + ', ' |
| 119 + p[3] + ') ' |
| 120 + hexify(p[0]) |
| 121 + hexify(p[1]) |
| 122 + hexify(p[2]) |
| 123 + hexify(p[3]); |
| 124 } |
83 } | 125 } |
84 setTimeout(drawZoom, 1000/30); | 126 setTimeout(drawZoom, 1000/30); |
85 } | 127 } |
86 } | 128 } |
87 | 129 |
88 function zoomFinished() { | 130 function zoomFinished() { |
89 currentImage = null; | 131 currentImage = null; |
| 132 if (hex) { |
| 133 hex.textContent = ''; |
| 134 } |
90 document.body.style.cursor = 'default'; | 135 document.body.style.cursor = 'default'; |
91 ctx.canvas.parentNode.removeChild(ctx.canvas); | 136 ctx.canvas.parentNode.removeChild(ctx.canvas); |
| 137 canvasCopy.parentNode.removeChild(canvasCopy); |
92 document.body.removeEventListener('mousemove', zoomMove, true); | 138 document.body.removeEventListener('mousemove', zoomMove, true); |
93 document.body.removeEventListener('mouseup', zoomFinished); | 139 document.body.removeEventListener('mouseup', zoomFinished); |
94 document.body.removeEventListener('mouseleave', zoomFinished); | 140 document.body.removeEventListener('mouseleave', zoomFinished); |
95 } | 141 } |
96 | 142 |
97 this.addEventListener('DOMContentLoaded', function() { | 143 this.addEventListener('DOMContentLoaded', function() { |
98 var zoomables = document.body.querySelectorAll('.zoom'); | 144 var zoomables = document.body.querySelectorAll('.zoom'); |
99 for (var i=0; i<zoomables.length; i++) { | 145 for (var i=0; i<zoomables.length; i++) { |
100 zoomables[i].addEventListener('mousedown', zoomMouseDown); | 146 zoomables[i].addEventListener('mousedown', zoomMouseDown); |
101 } | 147 } |
(...skipping 171 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
273 | 319 |
274 | 320 |
275 // Add the images to the history if we are on a workspace page. | 321 // Add the images to the history if we are on a workspace page. |
276 if (tryHistory && history) { | 322 if (tryHistory && history) { |
277 for (var i=0; i<history.length; i++) { | 323 for (var i=0; i<history.length; i++) { |
278 addToHistory(history[i].hash, '/i/'+history[i].hash+'.png'); | 324 addToHistory(history[i].hash, '/i/'+history[i].hash+'.png'); |
279 } | 325 } |
280 } | 326 } |
281 | 327 |
282 })(workspaceName); | 328 })(workspaceName); |
OLD | NEW |