[795] | 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 |
|
---|