OLD | NEW |
| (Empty) |
1 /* | |
2 * Copyright (C) 2011 Google Inc. All rights reserved. | |
3 * | |
4 * Redistribution and use in source and binary forms, with or without | |
5 * modification, are permitted provided that the following conditions | |
6 * are met: | |
7 * 1. Redistributions of source code must retain the above copyright | |
8 * notice, this list of conditions and the following disclaimer. | |
9 * 2. Redistributions in binary form must reproduce the above copyright | |
10 * notice, this list of conditions and the following disclaimer in the | |
11 * documentation and/or other materials provided with the distribution. | |
12 * | |
13 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS'' | |
14 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, | |
15 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR | |
16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS | |
17 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR | |
18 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF | |
19 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS | |
20 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN | |
21 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) | |
22 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF | |
23 * THE POSSIBILITY OF SUCH DAMAGE. | |
24 */ | |
25 | |
26 // pixelzoomer is shared with LayoutTests/fast/harness/results.html | |
27 // Unfortuantely, there's no good way to share code between these two uses. | |
28 | |
29 var pixelzoomer = pixelzoomer || {}; | |
30 | |
31 (function() { | |
32 | |
33 var kZoomFactor = 6; | |
34 var kDelayTimeoutMS = 400; | |
35 | |
36 var kResultWidth = 800; | |
37 var kResultHeight = 600; | |
38 | |
39 var kZoomedResultWidth = kResultWidth * kZoomFactor; | |
40 var kZoomedResultHeight = kResultHeight * kZoomFactor; | |
41 | |
42 function matchesSelector(node, selector) | |
43 { | |
44 if (node.webkitMatchesSelector) | |
45 return node.webkitMatchesSelector(selector); | |
46 | |
47 if (node.mozMatchesSelector) | |
48 return node.mozMatchesSelector(selector); | |
49 } | |
50 | |
51 function parentOfType(node, selector) | |
52 { | |
53 while (node = node.parentNode) { | |
54 if (matchesSelector(node, selector)) | |
55 return node; | |
56 } | |
57 return null; | |
58 } | |
59 | |
60 function zoomImageContainer(url) | |
61 { | |
62 var container = document.createElement('div'); | |
63 container.className = 'zoom-image-container'; | |
64 | |
65 var title = url.match(/\-([^\-]*)\.png/)[1]; | |
66 | |
67 var label = document.createElement('div'); | |
68 label.className = 'label'; | |
69 label.appendChild(document.createTextNode(title)); | |
70 container.appendChild(label); | |
71 | |
72 var imageContainer = document.createElement('div'); | |
73 imageContainer.className = 'scaled-image-container'; | |
74 | |
75 var image = new Image(); | |
76 image.src = url; | |
77 image.style.width = kZoomedResultWidth + 'px'; | |
78 image.style.height = kZoomedResultHeight + 'px'; | |
79 image.style.border = '1px solid black'; | |
80 imageContainer.appendChild(image); | |
81 container.appendChild(imageContainer); | |
82 | |
83 return container; | |
84 } | |
85 | |
86 function createContainer(e) | |
87 { | |
88 var tbody = parentOfType(e.target, 'tbody'); | |
89 var row = tbody.querySelector('tr'); | |
90 var images = row.querySelectorAll('img[src$=".png"]'); | |
91 | |
92 var container = document.createElement('div'); | |
93 container.className = 'pixel-zoom-container'; | |
94 | |
95 for (var i = 0; i < images.length; i++) | |
96 container.appendChild(zoomImageContainer(images[i].src)); | |
97 | |
98 document.body.appendChild(container); | |
99 drawAll(); | |
100 } | |
101 | |
102 function draw(imageContainer) | |
103 { | |
104 var image = imageContainer.querySelector('img'); | |
105 var containerBounds = imageContainer.getBoundingClientRect(); | |
106 image.style.left = (containerBounds.width / 2 - pixelzoomer._percentX * kZoo
medResultWidth) + 'px'; | |
107 image.style.top = (containerBounds.height / 2 - pixelzoomer._percentY * kZoo
medResultHeight) + 'px'; | |
108 } | |
109 | |
110 function drawAll() | |
111 { | |
112 Array.prototype.forEach.call(document.querySelectorAll('.pixel-zoom-containe
r .scaled-image-container'), draw); | |
113 } | |
114 | |
115 function handleMouseOut(e) | |
116 { | |
117 if (e.relatedTarget && e.relatedTarget.tagName != 'IFRAME') | |
118 return; | |
119 | |
120 // If e.relatedTarget is null, we've moused out of the document. | |
121 $('pixel-zoom-container').detach(); | |
122 } | |
123 | |
124 function handleMouseMove(e) | |
125 { | |
126 if (pixelzoomer._mouseMoveTimeout) | |
127 clearTimeout(pixelzoomer._mouseMoveTimeout); | |
128 | |
129 if (parentOfType(e.target, '.pixel-zoom-container')) | |
130 return; | |
131 | |
132 var container = document.querySelector('.pixel-zoom-container'); | |
133 | |
134 var resultContainer = (e.target.className == 'result-container') ? | |
135 e.target : parentOfType(e.target, '.result-container'); | |
136 if (!resultContainer || !resultContainer.querySelector('img')) { | |
137 $(container).detach(); | |
138 return; | |
139 } | |
140 | |
141 var targetLocation = e.target.getBoundingClientRect(); | |
142 pixelzoomer._percentX = (e.clientX - targetLocation.left) / targetLocation.w
idth; | |
143 pixelzoomer._percentY = (e.clientY - targetLocation.top) / targetLocation.he
ight; | |
144 | |
145 if (!container) { | |
146 if (pixelzoomer.showOnDelay) { | |
147 pixelzoomer._mouseMoveTimeout = setTimeout(function() { | |
148 createContainer(e); | |
149 }, kDelayTimeoutMS); | |
150 return; | |
151 } | |
152 | |
153 createContainer(e); | |
154 return; | |
155 } | |
156 | |
157 drawAll(); | |
158 } | |
159 | |
160 pixelzoomer.showOnDelay = true; | |
161 | |
162 pixelzoomer.installEventListeners = function() | |
163 { | |
164 document.addEventListener('mousemove', handleMouseMove, false); | |
165 document.addEventListener('mouseout', handleMouseOut, false); | |
166 }; | |
167 | |
168 })(); | |
OLD | NEW |