1 | /* -------------------------------------------------------------------------- *
|
---|
2 | * Experience Javascript Library (version 1.0b)
|
---|
3 | * (c) 2007 Ahmed Saad <ahmeds@users.sourceforge.net>
|
---|
4 | *
|
---|
5 | * Experience is freely distributable under the terms of an MIT-style license.
|
---|
6 | * For details, see project website at http://experience.sf.net
|
---|
7 | * -------------------------------------------------------------------------- */
|
---|
8 |
|
---|
9 | // Panorama component
|
---|
10 | experience.panorama = {
|
---|
11 |
|
---|
12 | Version : '0.2',
|
---|
13 |
|
---|
14 | //// MNEMONICS ////////////////////////////////////////////
|
---|
15 |
|
---|
16 | ZOOM_IN : 1,
|
---|
17 | ZOOM_OUT : -1,
|
---|
18 | ZOOM_RESTORE_SIZE : 0,
|
---|
19 | MOVE_DOWN : 1,
|
---|
20 | MOVE_UP : 2,
|
---|
21 | MOVE_RIGHT : 3,
|
---|
22 | MOVE_LEFT : 4,
|
---|
23 |
|
---|
24 | Viewer : function(userParams) {
|
---|
25 |
|
---|
26 | //// PRIVATE FIELDS //////////////////////////////////////
|
---|
27 |
|
---|
28 | this.Params = $H({
|
---|
29 | ZoomFactor : 0.05, // %
|
---|
30 | MoveBy : 2, // px
|
---|
31 | MoveRate : 15, // ms
|
---|
32 | ReversePanning : false,
|
---|
33 | ReverseScrolling : true,
|
---|
34 | InnerUpperOffset : 40, // px
|
---|
35 | ShowStatus : true,
|
---|
36 | ShowNavigator : true,
|
---|
37 | ShowZoomSelectBox : true,
|
---|
38 | IconDirectory : 'icons',
|
---|
39 | IconExtension : '.gif',
|
---|
40 | RenderIn: null // an element or an id
|
---|
41 | }),
|
---|
42 |
|
---|
43 | this.isBeingDragged = false;
|
---|
44 | this.lastLeft = this.lastTop = this.lastX = this.lastY = null;
|
---|
45 | this.originalWidth = this.originalHeight = null;
|
---|
46 | this.timeOutId = null;
|
---|
47 | this.isMaximizedInstance = false;
|
---|
48 | this.onFullWindowListeners = [];
|
---|
49 | this.onUnFullWindowListeners = [];
|
---|
50 |
|
---|
51 | //// PUBLIC METHODS //////////////////////////////////////////////////////
|
---|
52 |
|
---|
53 | this.show = experience.panorama.show;
|
---|
54 | this.hide = experience.panorama.hide;
|
---|
55 | this.setImage = experience.panorama.setImage;
|
---|
56 | this.getImage = experience.panorama.getImage;
|
---|
57 | this.addOnFullWindowListener = experience.panorama.addOnFullWindowListener;
|
---|
58 | this.removeOnFullWindowListener = experience.panorama.removeOnFullWindowListener;
|
---|
59 | this.addOnUnFullWindowListener = experience.panorama.addOnUnFullWindowListener;
|
---|
60 | this.removeOnUnFullWindowListener = experience.panorama.removeOnUnFullWindowListener;
|
---|
61 |
|
---|
62 | //// PRIVATE METHODS /////////////////////////////////////////////////////
|
---|
63 |
|
---|
64 | this.getImageResource = experience.panorama.getImageResource;
|
---|
65 | this.positionImage = experience.panorama.positionImage;
|
---|
66 | this.positionCanvas = experience.panorama.positionCanvas;
|
---|
67 | this.setStatus = experience.panorama.setStatus;
|
---|
68 | this.fireListeners = experience.panorama.fireListeners;
|
---|
69 |
|
---|
70 | //// VALIDATION //////////////////////////////////////////////////////////
|
---|
71 |
|
---|
72 | if (
|
---|
73 | typeof(userParams['ImageURL']) != 'undefined' &&
|
---|
74 | (
|
---|
75 | typeof(userParams['ImageWidth']) == 'undefined' ||
|
---|
76 | typeof(userParams['ImageHeight']) == 'undefined'
|
---|
77 | )
|
---|
78 | )
|
---|
79 | {
|
---|
80 | throw new Error("Experience::Panorama: You have to specify ImageWidth and ImageHeight when calling " +
|
---|
81 | "initialize() passing an ImageURL");
|
---|
82 | }
|
---|
83 |
|
---|
84 | //// INITIALIZATION /////////////////////////////////////////////
|
---|
85 |
|
---|
86 | this.Params.merge(userParams);
|
---|
87 |
|
---|
88 | // construct canvas and all
|
---|
89 | this.canvas = document.createElement('div');
|
---|
90 | this.canvas.className = "panoramaCanvas";
|
---|
91 | this.canvas.style.cursor = experience.panorama.getGrabCursor();
|
---|
92 | this.positionCanvas(this.Params.RenderIn != null);
|
---|
93 |
|
---|
94 | // A queue for childern to be added to the canvas
|
---|
95 | var childernQueue = [];
|
---|
96 |
|
---|
97 |
|
---|
98 | var closeImg = this.closeImg = document.createElement('img');
|
---|
99 | closeImg.className = 'panoramaCloseIcon';
|
---|
100 | closeImg.title = experience.tr("Close", experience.panorama.Locales);
|
---|
101 |
|
---|
102 | if (this.Params.RenderIn){
|
---|
103 | Event.observe(closeImg, 'click', experience.panorama.toggleFullWindow.bindAsEventListener(this));
|
---|
104 | closeImg.src = this.getImageResource('go_fullwindow');
|
---|
105 | closeImg.title = closeImg.alt = experience.tr("Go Full-Window", experience.panorama.Locales);
|
---|
106 | } else {
|
---|
107 | Event.observe(closeImg, 'click', experience.panorama.hide.bindAsEventListener(this));
|
---|
108 | closeImg.src = this.getImageResource('close');
|
---|
109 | closeImg.title = closeImg.alt = experience.tr("Close", experience.panorama.Locales);
|
---|
110 | }
|
---|
111 |
|
---|
112 | childernQueue.push(closeImg);
|
---|
113 |
|
---|
114 | var aboutIcon = document.createElement('img');
|
---|
115 | aboutIcon.className = 'panoramaAboutIcon';
|
---|
116 | aboutIcon.src = this.getImageResource('about');
|
---|
117 | aboutIcon.title = aboutIcon.alt = experience.tr("Help", experience.panorama.Locales);
|
---|
118 | Event.observe(aboutIcon, 'click', experience.panorama.showHelp.bindAsEventListener(this));
|
---|
119 | childernQueue.push(aboutIcon);
|
---|
120 |
|
---|
121 |
|
---|
122 | var zoomInIcon = document.createElement('img');
|
---|
123 | zoomInIcon.className = 'panoramaZoomInIcon';
|
---|
124 | zoomInIcon.src = this.getImageResource('zoom_in');
|
---|
125 | zoomInIcon.title = zoomInIcon.alt = experience.tr("Zoom In", experience.panorama.Locales);
|
---|
126 | Event.observe(zoomInIcon, 'click',
|
---|
127 | experience.panorama.zoom.bindAsEventListener(this, experience.panorama.ZOOM_IN));
|
---|
128 | childernQueue.push(zoomInIcon);
|
---|
129 |
|
---|
130 |
|
---|
131 | var zoomOutIcon = document.createElement('img');
|
---|
132 | zoomOutIcon.className = 'panoramaZoomOutIcon';
|
---|
133 | zoomOutIcon.src = this.getImageResource('zoom_out');;
|
---|
134 | zoomOutIcon.title = zoomOutIcon.alt = experience.tr("Zoom Out", experience.panorama.Locales);
|
---|
135 | Event.observe(zoomOutIcon, 'click',
|
---|
136 | experience.panorama.zoom.bindAsEventListener(this, experience.panorama.ZOOM_OUT));
|
---|
137 | childernQueue.push(zoomOutIcon);
|
---|
138 |
|
---|
139 |
|
---|
140 | var restoreSizeIcon = document.createElement('img');
|
---|
141 | restoreSizeIcon.className = 'panoramaRestoreSizeIcon';
|
---|
142 | restoreSizeIcon.src = this.getImageResource('restore_size');;
|
---|
143 | restoreSizeIcon.title = restoreSizeIcon.alt =
|
---|
144 | experience.tr("Restore Original Size", experience.panorama.Locales);
|
---|
145 | Event.observe(restoreSizeIcon, 'click',
|
---|
146 | experience.panorama.zoom.bindAsEventListener(this, experience.panorama.ZOOM_RESTORE_SIZE));
|
---|
147 | childernQueue.push(restoreSizeIcon);
|
---|
148 |
|
---|
149 |
|
---|
150 |
|
---|
151 | var restorePositionIcon = document.createElement('img');
|
---|
152 | restorePositionIcon.className = 'panoramaRestorePositionIcon';
|
---|
153 | restorePositionIcon.src = this.getImageResource('restore_position');
|
---|
154 | restorePositionIcon.title = restorePositionIcon.alt =
|
---|
155 | experience.tr("Restore Original Position", experience.panorama.Locales);
|
---|
156 | Event.observe(restorePositionIcon, 'click',
|
---|
157 | experience.panorama.positionImage.bindAsEventListener(this));
|
---|
158 | childernQueue.push(restorePositionIcon);
|
---|
159 |
|
---|
160 |
|
---|
161 | if (this.Params.ShowNavigator){
|
---|
162 |
|
---|
163 | var goDownIcon = document.createElement('img');
|
---|
164 | goDownIcon.className = 'panoramaGoDownIcon';
|
---|
165 | goDownIcon.src = this.getImageResource('go_down');
|
---|
166 | goDownIcon.title = goDownIcon.alt =
|
---|
167 | experience.tr("Scrolling .. ", experience.panorama.Locales);
|
---|
168 | Event.observe(goDownIcon, 'mouseover',
|
---|
169 | experience.panorama.move.bindAsEventListener(this,
|
---|
170 | this.Params.ReverseScrolling? experience.panorama.MOVE_UP : experience.panorama.MOVE_DOWN));
|
---|
171 | Event.observe(goDownIcon, 'mouseout',
|
---|
172 | experience.panorama.clearMoveTimeout.bindAsEventListener(this));
|
---|
173 | childernQueue.push(goDownIcon);
|
---|
174 |
|
---|
175 | var goUpIcon = document.createElement('img');
|
---|
176 | goUpIcon.className = 'panoramaGoUpIcon';
|
---|
177 | goUpIcon.src = this.getImageResource('go_up');
|
---|
178 | goUpIcon.title = goUpIcon.alt =
|
---|
179 | experience.tr("Scrolling .. ", experience.panorama.Locales);
|
---|
180 | Event.observe(goUpIcon, 'mouseover',
|
---|
181 | experience.panorama.move.bindAsEventListener(this,
|
---|
182 | this.Params.ReverseScrolling? experience.panorama.MOVE_DOWN : experience.panorama.MOVE_UP));
|
---|
183 | Event.observe(goUpIcon, 'mouseout',
|
---|
184 | experience.panorama.clearMoveTimeout.bindAsEventListener(this));
|
---|
185 | childernQueue.push(goUpIcon);
|
---|
186 |
|
---|
187 |
|
---|
188 | var goRightIcon = document.createElement('img');
|
---|
189 | goRightIcon.className = 'panoramaGoRightIcon';
|
---|
190 | goRightIcon.src = this.getImageResource('go_right');
|
---|
191 | goRightIcon.title = goRightIcon.alt = experience.tr("Scrolling .. ", experience.panorama.Locales);
|
---|
192 | Event.observe(goRightIcon, 'mouseover', experience.panorama.move.bindAsEventListener(this,
|
---|
193 | this.Params.ReverseScrolling? experience.panorama.MOVE_LEFT : experience.panorama.MOVE_RIGHT));
|
---|
194 | Event.observe(goRightIcon, 'mouseout',
|
---|
195 | experience.panorama.clearMoveTimeout.bindAsEventListener(this));
|
---|
196 | childernQueue.push(goRightIcon);
|
---|
197 |
|
---|
198 |
|
---|
199 | var goLeftIcon = document.createElement('img');
|
---|
200 | goLeftIcon.className = 'panoramaGoLeftIcon';
|
---|
201 | goLeftIcon.src = this.getImageResource('go_left');
|
---|
202 | goLeftIcon.title = goLeftIcon.alt =
|
---|
203 | experience.tr("Scrolling .. ", experience.panorama.Locales);
|
---|
204 | Event.observe(goLeftIcon, 'mouseover',
|
---|
205 | experience.panorama.move.bindAsEventListener(this,
|
---|
206 | this.Params.ReverseScrolling? experience.panorama.MOVE_RIGHT : experience.panorama.LEFT));
|
---|
207 | Event.observe(goLeftIcon, 'mouseout',
|
---|
208 | experience.panorama.clearMoveTimeout.bindAsEventListener(this));
|
---|
209 | childernQueue.push(goLeftIcon);
|
---|
210 | }
|
---|
211 |
|
---|
212 | if (this.Params.ShowZoomSelectBox){
|
---|
213 | var zoomDropDown = document.createElement('select');
|
---|
214 | zoomDropDown.className = 'panoramaZoomDropdown';
|
---|
215 | this.indicatorOption = document.createElement('option');
|
---|
216 | this.indicatorOption.className = 'panoramaIndicator';
|
---|
217 | this.indicatorOption.innerHTML = '% 100';
|
---|
218 | this.indicatorOption.value = '#';
|
---|
219 | this.indicatorOption.selected = true;
|
---|
220 | zoomDropDown.appendChild(this.indicatorOption);
|
---|
221 | var zoomPercentages = [5, 10, 15, 25, 50, 75, 90, 100, 200, 400];
|
---|
222 | for(var x = 0; x < zoomPercentages.length; x++){
|
---|
223 | var opt = document.createElement('option');
|
---|
224 | opt.innerHTML = zoomPercentages[x];
|
---|
225 | opt.value = zoomPercentages[x]/100;
|
---|
226 | zoomDropDown.appendChild(opt);
|
---|
227 | }
|
---|
228 | Event.observe(zoomDropDown, 'change',
|
---|
229 | experience.panorama.handleZoomPercentageChange.bindAsEventListener(this));
|
---|
230 | childernQueue.push(zoomDropDown);
|
---|
231 | }
|
---|
232 |
|
---|
233 | if (this.Params.ShowStatus){
|
---|
234 | this.status = document.createElement('span');
|
---|
235 | this.status.className = "panoramaStatus";
|
---|
236 | childernQueue.push(this.status);
|
---|
237 | this.setStatus(null, "<img src='" + this.getImageResource('loading') + "' />");
|
---|
238 | }
|
---|
239 |
|
---|
240 | this.image = document.createElement('img');
|
---|
241 | this.image.className = "panoramaImage";
|
---|
242 | this.image.src = this.Params.ImageURL;
|
---|
243 | this.image.alt = this.Params.ImageURL;
|
---|
244 | this.image.style.position = "relative";
|
---|
245 | this.image.style.width = this.Params.ImageWidth + "px";
|
---|
246 | this.image.style.height = this.Params.ImageHeight + "px";
|
---|
247 | this.positionImage();
|
---|
248 | childernQueue.push(this.image);
|
---|
249 |
|
---|
250 | Event.observe(this.image, 'load', experience.panorama.setStatus.bindAsEventListener(this, ""));
|
---|
251 | Event.observe(this.image, 'error',
|
---|
252 | experience.panorama.setStatus.bindAsEventListener(this,
|
---|
253 | experience.tr("Could not load image.", experience.panorama.Locales)));
|
---|
254 |
|
---|
255 | // Misc. handlers ..
|
---|
256 | Event.observe(this.canvas, 'mousedown',
|
---|
257 | experience.panorama.handleMouseDown.bindAsEventListener(this));
|
---|
258 | Event.observe(this.canvas, 'mousemove',
|
---|
259 | experience.panorama.handleMouseMove.bindAsEventListener(this));
|
---|
260 | Event.observe(document, 'mouseup',
|
---|
261 | experience.panorama.handleMouseUp.bindAsEventListener(this));
|
---|
262 |
|
---|
263 | var wheelHandler = experience.panorama.handleMouseWheel.bindAsEventListener(this);
|
---|
264 | Event.observe(this.canvas, "DOMMouseScroll", wheelHandler, false); // Mozilla
|
---|
265 | Event.observe(this.canvas, "mousewheel", wheelHandler, false);
|
---|
266 |
|
---|
267 | // add elements to the canvas (in reverse for proper z-Index ordering)
|
---|
268 | for(var i = childernQueue.length - 1; i >= 0; i--){
|
---|
269 | this.canvas.appendChild(childernQueue[i]);
|
---|
270 | }
|
---|
271 |
|
---|
272 | },
|
---|
273 |
|
---|
274 | //// PUBLIC METHODS ///////////////////////////////////////////////////////
|
---|
275 |
|
---|
276 | show : function(){
|
---|
277 | if(!this.Params.RenderIn){
|
---|
278 | this.fireListeners(this.onFullWindowListeners);
|
---|
279 | }
|
---|
280 |
|
---|
281 | this.canvas.style.visibility = 'visible';
|
---|
282 | },
|
---|
283 |
|
---|
284 | hide : function(){
|
---|
285 | if(!this.Params.RenderIn){
|
---|
286 | this.fireListeners(this.onUnFullWindowListeners);
|
---|
287 | }
|
---|
288 |
|
---|
289 | this.canvas.style.visibility = 'hidden';
|
---|
290 | },
|
---|
291 |
|
---|
292 | toggleFullWindow : function(e){
|
---|
293 | //experience.Console.log(this.isMaximizedInstance);
|
---|
294 |
|
---|
295 | if (this.isMaximizedInstance){ // minimize
|
---|
296 | this.closeImg.src = this.getImageResource('go_fullwindow');
|
---|
297 | this.closeImg.title = this.closeImg.alt = experience.tr("Go Full-Window", experience.panorama.Locales);
|
---|
298 |
|
---|
299 | this.positionCanvas(true);
|
---|
300 | this.isMaximizedInstance = false;
|
---|
301 | } else { // maximize
|
---|
302 | this.closeImg.src = this.getImageResource('unfullwindow');
|
---|
303 | this.closeImg.title = this.closeImg.alt = experience.tr("Restore", experience.panorama.Locales);
|
---|
304 |
|
---|
305 | this.positionCanvas(false);
|
---|
306 | this.isMaximizedInstance = true;
|
---|
307 | }
|
---|
308 | },
|
---|
309 |
|
---|
310 | getImage : function (){
|
---|
311 | return [this.Params.ImageURL, this.Params.ImageWidth, this.Params.ImageHeight];
|
---|
312 | },
|
---|
313 |
|
---|
314 | setImage : function(url, width, height){
|
---|
315 | this.image.src = this.Params.ImageURL = url;
|
---|
316 | this.image.style.width = this.Params.ImageWidth = width + "px";
|
---|
317 | this.image.style.height = this.Params.ImageHeight = height + "px";
|
---|
318 | this.positionImage();
|
---|
319 | },
|
---|
320 |
|
---|
321 | addOnFullWindowListener : function(listener){
|
---|
322 | this.onFullWindowListeners[this.onFullWindowListeners.length] = listener;
|
---|
323 | },
|
---|
324 |
|
---|
325 | removeOnFullWindowListener : function(listener){
|
---|
326 | if (this.onFullWindowListeners.include(listener)){
|
---|
327 | this.onFullWindowListeners.splice(this.onFullWindowListeners.indexOf(listener), 1);
|
---|
328 | }
|
---|
329 | },
|
---|
330 |
|
---|
331 | addOnUnFullWindowListener : function(listener){
|
---|
332 | this.onUnFullWindowListeners[this.onUnFullWindowListeners.length] = listener;
|
---|
333 | },
|
---|
334 |
|
---|
335 | removeOnUnFullWindowListener : function(listener){
|
---|
336 | if (this.onUnFullWindowListeners.include(listener)){
|
---|
337 | this.onUnFullWindowListeners.splice(this.onUnFullWindowListeners.indexOf(listener), 1);
|
---|
338 | }
|
---|
339 | },
|
---|
340 |
|
---|
341 | //// PRIVATE METHODS ///////////////////////////////////////////////////////
|
---|
342 |
|
---|
343 | fireListeners : function(listeners){
|
---|
344 | for(var i =0; i < listeners.length; i++){
|
---|
345 | listeners[i]();
|
---|
346 | }
|
---|
347 | },
|
---|
348 |
|
---|
349 | setStatus : function(e, html){
|
---|
350 | if (this.Params.ShowStatus){
|
---|
351 | this.status.innerHTML = html;
|
---|
352 | }
|
---|
353 | },
|
---|
354 |
|
---|
355 | showHelp : function(e){
|
---|
356 | alert(experience.tr("HelpText", experience.panorama.Locales));
|
---|
357 | },
|
---|
358 |
|
---|
359 | positionImage : function (e){
|
---|
360 | var image = this.image;
|
---|
361 |
|
---|
362 | // detecting canvas width and height doesn't work in KHTML (and WebKit?)
|
---|
363 | if (experience.detectEngine() == "khtml"){
|
---|
364 | image.style.top = image.style.left = this.Params.InnerUpperOffset + "px";
|
---|
365 | return;
|
---|
366 | }
|
---|
367 |
|
---|
368 | var canvasWidth = Element.getWidth(this.canvas);
|
---|
369 | var canvasHeight = Element.getHeight(this.canvas);
|
---|
370 |
|
---|
371 | // center if it doesn't fill
|
---|
372 | if (parseFloat(image.style.width) > canvasWidth){
|
---|
373 | image.style.left = this.Params.InnerUpperOffset + "px";
|
---|
374 | } else {
|
---|
375 | image.style.left = (canvasWidth / 2) - (parseFloat(image.style.width) / 2) + "px";
|
---|
376 | }
|
---|
377 |
|
---|
378 | if (parseFloat(image.style.height) > canvasHeight){
|
---|
379 | image.style.top = this.Params.InnerUpperOffset + "px";
|
---|
380 | } else {
|
---|
381 | image.style.top = (canvasHeight / 2) - (parseFloat(image.style.height) / 2) + "px";
|
---|
382 | }
|
---|
383 | },
|
---|
384 |
|
---|
385 | positionCanvas : function (isRenderIn){
|
---|
386 |
|
---|
387 | if(this.canvas.parentNode){
|
---|
388 | this.canvas.parentNode.removeChild(this.canvas);
|
---|
389 | }
|
---|
390 |
|
---|
391 | if(isRenderIn){
|
---|
392 | if(this.isMaximizedInstance){
|
---|
393 | this.fireListeners(this.onUnFullWindowListeners);
|
---|
394 | }
|
---|
395 |
|
---|
396 | $(this.Params.RenderIn).style.position = "relative";
|
---|
397 | this.canvas.style.position = "absolute";
|
---|
398 | this.canvas.style.left =
|
---|
399 | this.canvas.style.right =
|
---|
400 | this.canvas.style.top =
|
---|
401 | this.canvas.style.bottom = "0px";
|
---|
402 | this.canvas.style.height = this.canvas.style.width = "100%";
|
---|
403 | this.canvas.style.visibility = 'visible';
|
---|
404 |
|
---|
405 | $(this.Params.RenderIn).appendChild(this.canvas);
|
---|
406 | } else {
|
---|
407 | if(this.Params.RenderIn){
|
---|
408 | this.fireListeners(this.onFullWindowListeners);
|
---|
409 | }
|
---|
410 |
|
---|
411 | document.getElementsByTagName('body')[0].appendChild(this.canvas);
|
---|
412 |
|
---|
413 | if (experience.detectBrowser() == "ie5" || experience.detectBrowser() == "ie6"){
|
---|
414 | this.canvas.style.position = "absolute";
|
---|
415 | this.canvas.style.setExpression("top",
|
---|
416 | "(ignoreMe = document.documentElement.scrollTop? " +
|
---|
417 | "document.documentElement.scrollTop : document.body.scrollTop) + 'px'");
|
---|
418 | this.canvas.style.setExpression("height",
|
---|
419 | "experience.panorama.getInnerWindowDimensions()['height']");
|
---|
420 | this.canvas.style.setExpression("width",
|
---|
421 | "experience.panorama.getInnerWindowDimensions()['width']");
|
---|
422 | } else {
|
---|
423 | this.canvas.style.position = "fixed"
|
---|
424 | }
|
---|
425 | }
|
---|
426 |
|
---|
427 | //experience.Console.log(this.canvas.parentNode.tagName + "," + isRenderIn);
|
---|
428 | },
|
---|
429 |
|
---|
430 | /**
|
---|
431 | * Thanks to http://www.quirksmode.org/viewport/compatibility.html
|
---|
432 | */
|
---|
433 | getInnerWindowDimensions: function (){
|
---|
434 | var x,y;
|
---|
435 | if (self.innerHeight) // all except Explorer
|
---|
436 | {
|
---|
437 | x = self.innerWidth;
|
---|
438 | y = self.innerHeight;
|
---|
439 | }
|
---|
440 | else if (document.documentElement && document.documentElement.clientHeight)
|
---|
441 | // Explorer 6 Strict Mode
|
---|
442 | {
|
---|
443 | x = document.documentElement.clientWidth;
|
---|
444 | y = document.documentElement.clientHeight;
|
---|
445 | }
|
---|
446 | else if (document.body) // other Explorers
|
---|
447 | {
|
---|
448 | x = document.body.clientWidth;
|
---|
449 | y = document.body.clientHeight;
|
---|
450 | }
|
---|
451 |
|
---|
452 | return {width: x, height: y};
|
---|
453 | },
|
---|
454 |
|
---|
455 | zoom : function(e, delta){
|
---|
456 |
|
---|
457 | var zoomFactor = this.Params.ZoomFactor;
|
---|
458 | var newWidth, newHeight, newLeft, newTop = null;
|
---|
459 |
|
---|
460 | // parse current pixel dimensions to floats
|
---|
461 | var pWidth = parseFloat(this.image.style.width);
|
---|
462 | var pHeight = parseFloat(this.image.style.height);
|
---|
463 |
|
---|
464 | if (0 == delta){ // restore original size
|
---|
465 | newWidth = this.Params.ImageWidth;
|
---|
466 | newHeight = this.Params.ImageHeight;
|
---|
467 |
|
---|
468 | // distribute size change
|
---|
469 | newLeft = (parseFloat(this.image.style.left) - ((newWidth - pWidth) / 2));
|
---|
470 | newTop = (parseFloat(this.image.style.top) - ((newHeight - pHeight) / 2));
|
---|
471 | } else if (delta > 0){ // zoom in
|
---|
472 | newWidth = (pWidth + (pWidth * zoomFactor));
|
---|
473 | newHeight = (pHeight + (pHeight * zoomFactor));
|
---|
474 |
|
---|
475 | // distribute size change
|
---|
476 | newLeft = (parseFloat(this.image.style.left) - ((pWidth * zoomFactor) / 2));
|
---|
477 | newTop = (parseFloat(this.image.style.top) - ((pHeight * zoomFactor) / 2));
|
---|
478 | } else if (delta < 0){ // zoom out
|
---|
479 | newWidth = (pWidth - (pWidth * zoomFactor));
|
---|
480 | newHeight = (pHeight - (pHeight * zoomFactor));
|
---|
481 |
|
---|
482 | // distribute size change
|
---|
483 | newLeft = (parseFloat(this.image.style.left) + ((pWidth * zoomFactor) / 2));
|
---|
484 | newTop = (parseFloat(this.image.style.top) + ((pHeight * zoomFactor) / 2));
|
---|
485 | } else {
|
---|
486 | alert("Invalid delta value:" + delta);
|
---|
487 | return;
|
---|
488 | }
|
---|
489 |
|
---|
490 | var percentage = (newWidth/this.Params.ImageWidth).toFixed(3);
|
---|
491 | this.indicatorOption.innerHTML = "% " + (percentage * 100).toFixed(1);
|
---|
492 |
|
---|
493 | this.image.style.width = newWidth + "px";
|
---|
494 | this.image.style.height = newHeight + "px";
|
---|
495 | this.image.style.left = newLeft + "px";
|
---|
496 | this.image.style.top = newTop + "px";
|
---|
497 |
|
---|
498 | },
|
---|
499 |
|
---|
500 | move : function (e, toWhere){
|
---|
501 | if (!this.isBeingDragged){
|
---|
502 | var MOVE_BY = this.Params.MoveBy;
|
---|
503 |
|
---|
504 | switch(toWhere){
|
---|
505 | case experience.panorama.MOVE_DOWN:
|
---|
506 | this.image.style.top = (parseFloat(this.image.style.top) + MOVE_BY) + "px";
|
---|
507 | break;
|
---|
508 | case experience.panorama.MOVE_UP:
|
---|
509 | this.image.style.top = (parseFloat(this.image.style.top) - MOVE_BY) + "px";
|
---|
510 | break;
|
---|
511 | case experience.panorama.MOVE_RIGHT:
|
---|
512 | this.image.style.left = (parseFloat(this.image.style.left) + MOVE_BY) + "px";
|
---|
513 | break;
|
---|
514 | case experience.panorama.MOVE_LEFT:
|
---|
515 | this.image.style.left = (parseFloat(this.image.style.left) - MOVE_BY) + "px";
|
---|
516 | break;
|
---|
517 | default:
|
---|
518 | experience.Console.log("Unrecognized 'toWhere' value '" + toWhere + "'");
|
---|
519 | return;
|
---|
520 | }
|
---|
521 |
|
---|
522 | this.timeOutId =
|
---|
523 | setTimeout(experience.panorama.move.bind(this, null, toWhere), this.Params.MoveRate);
|
---|
524 | }
|
---|
525 | },
|
---|
526 |
|
---|
527 | clearMoveTimeout : function (e){
|
---|
528 | clearTimeout(this.timeOutId);
|
---|
529 | },
|
---|
530 |
|
---|
531 | handleZoomPercentageChange : function(e){
|
---|
532 | var percentage = Event.element(e).value;
|
---|
533 |
|
---|
534 | if (percentage != '#'){
|
---|
535 | var newWidth, newHeight, newLeft, newTop;
|
---|
536 |
|
---|
537 | newWidth = this.Params.ImageWidth * percentage;
|
---|
538 | newHeight = this.Params.ImageHeight * percentage;
|
---|
539 |
|
---|
540 | // distribute size change
|
---|
541 | newLeft = parseFloat(this.image.style.left) -
|
---|
542 | ((newWidth - parseFloat(this.image.style.width)) / 2);
|
---|
543 | newTop = parseFloat(this.image.style.top) -
|
---|
544 | ((newHeight - parseFloat(this.image.style.height)) / 2);
|
---|
545 |
|
---|
546 | // apply new size
|
---|
547 | this.image.style.width = newWidth + "px";
|
---|
548 | this.image.style.height = newHeight + "px";
|
---|
549 | this.image.style.left = newLeft + "px";
|
---|
550 | this.image.style.top = newTop + "px";
|
---|
551 |
|
---|
552 | Event.element(e).selectedIndex = 0;
|
---|
553 | Event.element(e).options[0].innerHTML = "% " + (percentage * 100);
|
---|
554 | }
|
---|
555 | },
|
---|
556 |
|
---|
557 | handleMouseDown : function(e){
|
---|
558 | if (
|
---|
559 | (
|
---|
560 | Event.element(e) == this.canvas ||
|
---|
561 | Event.element(e) == this.image
|
---|
562 | ) && Event.isLeftClick(e)
|
---|
563 | ){
|
---|
564 |
|
---|
565 | this.isBeingDragged = true;
|
---|
566 | this.canvas.style.cursor = experience.panorama.getGrabbingCursor();
|
---|
567 | this.lastLeft = parseFloat(this.image.style.left);
|
---|
568 | this.lastTop = parseFloat(this.image.style.top);
|
---|
569 | this.lastX = Event.pointerX(e);
|
---|
570 | this.lastY = Event.pointerY(e);
|
---|
571 |
|
---|
572 | // I love Prototype!
|
---|
573 | Event.stop(e);
|
---|
574 | }
|
---|
575 | },
|
---|
576 |
|
---|
577 | handleMouseMove : function (e){
|
---|
578 | if (
|
---|
579 | Event.element(e) == this.canvas ||
|
---|
580 | Event.element(e) == this.image
|
---|
581 | ){
|
---|
582 | var sign = this.Params.ReversePanning? -1 : 1;
|
---|
583 | if (this.isBeingDragged){
|
---|
584 | this.image.style.left = this.lastLeft + (sign * (Event.pointerX(e) - this.lastX)) + "px";
|
---|
585 | this.image.style.top = this.lastTop + (sign * (Event.pointerY(e) - this.lastY)) + "px";
|
---|
586 | }
|
---|
587 |
|
---|
588 | Event.stop(e);
|
---|
589 | }
|
---|
590 | },
|
---|
591 |
|
---|
592 | handleMouseUp : function(e){
|
---|
593 | this.isBeingDragged = false;
|
---|
594 | this.canvas.style.cursor = experience.panorama.getGrabCursor();
|
---|
595 | },
|
---|
596 |
|
---|
597 | getGrabCursor : function(e) {
|
---|
598 | if(experience.detectEngine() == "gecko"){
|
---|
599 | return '-moz-grab';
|
---|
600 | } else {
|
---|
601 | return 'move';
|
---|
602 | }
|
---|
603 | },
|
---|
604 |
|
---|
605 | getGrabbingCursor : function(e){
|
---|
606 | if(experience.detectEngine() == "gecko"){
|
---|
607 | return '-moz-grabbing';
|
---|
608 | } else {
|
---|
609 | return 'move';
|
---|
610 | }
|
---|
611 | },
|
---|
612 |
|
---|
613 | /**
|
---|
614 | * See also
|
---|
615 | * http://adomas.org/javascript-mouse-wheel/
|
---|
616 | * http://www.ogonek.net/mousewheel/demo.html
|
---|
617 | */
|
---|
618 | handleMouseWheel: function(event){
|
---|
619 | var delta = 0;
|
---|
620 |
|
---|
621 | if (event.wheelDelta) { // IE/Opera.
|
---|
622 | delta = event.wheelDelta/120;
|
---|
623 | //In Opera 9, delta differs in sign as compared to IE.
|
---|
624 | if (window.opera)
|
---|
625 | delta = -delta;
|
---|
626 | } else if (event.detail) { // Mozilla case.
|
---|
627 | // In Mozilla, sign of delta is different than in IE.
|
---|
628 | // Also, delta is multiple of 3.
|
---|
629 | delta = -event.detail/3;
|
---|
630 | }
|
---|
631 |
|
---|
632 | delta = Math.round(delta); //Safari Round
|
---|
633 |
|
---|
634 | // If delta is nonzero, handle it.
|
---|
635 | // Basically, delta is now positive if wheel was scrolled up,
|
---|
636 | // and negative, if wheel was scrolled down.
|
---|
637 | if (delta){
|
---|
638 | experience.panorama.zoom.bindAsEventListener(this, delta)();
|
---|
639 | }
|
---|
640 |
|
---|
641 | Event.stop(event);
|
---|
642 | },
|
---|
643 |
|
---|
644 | getImageResource : function (resource){
|
---|
645 | return this.Params.IconDirectory + "/" + resource
|
---|
646 | + this.Params.IconExtension;
|
---|
647 | },
|
---|
648 |
|
---|
649 |
|
---|
650 | Locales : $H({
|
---|
651 | 'en_US' : {
|
---|
652 | 'HelpText' : "Grab (click and drag) the image to move it around. Use your mouse wheel to zoom in and out the image or, if you don't have one, use the zoom icons in the toolbar. If you hover with your mouse pointer over any of the navigator arrow in the bottom right corner, the image will starting moving in that direction (automatic scrolling.)\n\nPanorama is part of the Experience JavaScript Library.\nFor details, see project website at http://experience.sf.net\n"
|
---|
653 | },
|
---|
654 |
|
---|
655 | 'ar' : {
|
---|
656 | 'Zoom In' : 'تÙØšÙر',
|
---|
657 | 'Zoom Out' : 'تصغÙر',
|
---|
658 | 'Restore Original Size' : 'استعادة اÙØجÙ
اÙأصÙÙ',
|
---|
659 | 'Restore Original Position' : 'استعادة اÙÙ
ÙÙع اÙأصÙÙ',
|
---|
660 | 'Close' : 'إغÙاÙ',
|
---|
661 | 'Scrolling .. ' : 'جار٠اÙتØرÙÙ ...',
|
---|
662 | 'Help': 'Ù
ساعدة',
|
---|
663 | 'HelpText' : 'أجذؚ (Ø£ÙÙر ٠جر) اÙصÙرة Ù٠تØرÙÙا. استخدÙ
عجÙØ© اÙÙأرة ÙتÙØšÙر أ٠تصغÙر اÙصÙرة. إذا ÙÙ
ÙÙÙ ÙدÙÙ ÙاØØ¯Ø©Ø ÙاستخدÙ
اÙØ£ÙÙÙÙات اÙت٠عÙ٠؎رÙØ· اÙأدÙات. إذا ØرÙت Ù
؀؎ر اÙÙأرة ÙÙ٠أØد٠أسÙÙ
اÙÙÙا٠Ù٠اÙجاÙØš اÙØ£ÙÙ
٠اÙسÙÙÙØ ÙسÙ٠تتØر٠اÙصÙرة ÙÙ ÙÙ Ø°Ù٠اÙإتجا٠(تØرÙ٠تÙÙا؊Ù). \n\n ؚاÙÙراÙ
ا Ù٠جزء Ù
Ù Ù
Ùتؚة Ø¥ÙسؚرÙؚس اÙؚرÙ
جÙØ© ÙجاÙاسÙرؚت. \n ÙÙ
زÙد Ù
٠اÙتÙاصÙÙØ Ùرج٠زÙارة Ù
ÙÙع اÙÙ
؎رÙع ÙÙ \n http://experience.sf.net',
|
---|
664 | 'Could not load image' : 'خطأ أثÙاء تØÙ
Ù٠اÙصÙرة',
|
---|
665 | 'Go Full-Window' : 'Ø¥Ù
ÙØ¡ اÙÙاÙذة ؚأÙÙ
ÙÙا',
|
---|
666 | 'Restore' : 'استرجاع'
|
---|
667 | },
|
---|
668 | 'pt_BR' : {
|
---|
669 | 'Zoom In' : 'Aproximar',
|
---|
670 | 'Zoom Out' : 'Afastar',
|
---|
671 | 'Restore Original Size' : 'Restaurar para o tamanho original',
|
---|
672 | 'Restore Original Position' : 'Restaurar para a posição original',
|
---|
673 | 'Close' : 'Fechar',
|
---|
674 | 'Scrolling .. ' : 'Deslizando ..',
|
---|
675 | 'Help': 'Ajuda',
|
---|
676 | 'HelpText' : 'Segure (clique e arraste) a imagem para movê-la. Use a roda do mouse para aproximar ou afastar a imagem ou, se você não a possui, use os ícones de zoom na barra de ferramentas. Se você passar o cursor sobre as setas de navegação, no canto inferior direito, a imagem se moverá na direção selecionada (rolagem automática).\n\nPanorama é parte da Experience JavaScript Library.\nPara detalhes, veja o website do projeto em http://experience.sf.net\n',
|
---|
677 | 'Could not load image' : 'Não foi possível carregar a imagem',
|
---|
678 | 'Go Full-Window' : 'Ir para tela cheia',
|
---|
679 | 'Restore' : 'Restaurar'
|
---|
680 | }
|
---|
681 | })
|
---|
682 | }
|
---|
683 |
|
---|