1/** 2 * Represents a navigation bar button. 3 * @class 4 * @param {PhotoSphereViewer} psv - A PhotoSphereViewer object 5 * @param {string} type - Type of button 6 * @param {object} style - Style of the navigation bar 7 **/ 8 9var PSVNavBarButton = function(psv, type, style) { 10 /** 11 * Attaches an event handler function to an elemnt. 12 * @private 13 * @param {HTMLElement} elt - The element 14 * @param {string} evt - The event name 15 * @param {Function} f - The handler function 16 * @return {void} 17 **/ 18 19 var addEvent = function(elt, evt, f) { 20 if (!!elt.addEventListener) 21 elt.addEventListener(evt, f, false); 22 else 23 elt.attachEvent('on' + evt, f); 24 }; 25 26 /** 27 * Creates the right button. 28 * @private 29 * @return {void} 30 **/ 31 32 var create = function() { 33 switch (type) { 34 case 'autorotate': 35 // Autorotate icon sizes 36 var autorotate_sphere_width = style.buttonsHeight - style.autorotateThickness * 2; 37 var autorotate_equator_height = autorotate_sphere_width / 10; 38 39 // Autorotate button 40 button = document.createElement('div'); 41 button.style.cssFloat = 'left'; 42 button.style.boxSizing = 'inherit'; 43 button.style.padding = '10px'; 44 button.style.width = style.buttonsHeight + 'px'; 45 button.style.height = style.buttonsHeight + 'px'; 46 button.style.backgroundColor = style.buttonsBackgroundColor; 47 button.style.position = 'relative'; 48 button.style.cursor = 'pointer'; 49 50 addEvent(button, 'click', function(){psv.toggleAutorotate();}); 51 52 var autorotate_sphere = document.createElement('div'); 53 autorotate_sphere.style.boxSizing = 'inherit'; 54 autorotate_sphere.style.width = autorotate_sphere_width + 'px'; 55 autorotate_sphere.style.height = autorotate_sphere_width + 'px'; 56 autorotate_sphere.style.borderRadius = '50%'; 57 autorotate_sphere.style.border = style.autorotateThickness + 'px solid ' + style.buttonsColor; 58 button.appendChild(autorotate_sphere); 59 60 var autorotate_equator = document.createElement('div'); 61 autorotate_equator.style.boxSizing = 'inherit'; 62 autorotate_equator.style.width = autorotate_sphere_width + 'px'; 63 autorotate_equator.style.height = autorotate_equator_height + 'px'; 64 autorotate_equator.style.borderRadius = '50%'; 65 autorotate_equator.style.border = style.autorotateThickness + 'px solid ' + style.buttonsColor; 66 autorotate_equator.style.position = 'absolute'; 67 autorotate_equator.style.top = '50%'; 68 autorotate_equator.style.marginTop = -(autorotate_equator_height / 2 + style.autorotateThickness) + 'px'; 69 button.appendChild(autorotate_equator); 70 71 // (In)active 72 psv.addAction('autorotate', toggleActive); 73 74 break; 75 76 case 'zoom': 77 // Zoom container 78 button = document.createElement('div'); 79 button.style.cssFloat = 'left'; 80 button.style.boxSizing = 'inherit'; 81 82 // Zoom "-" 83 var zoom_minus = document.createElement('div'); 84 zoom_minus.style.cssFloat = 'left'; 85 zoom_minus.style.boxSizing = 'inherit'; 86 zoom_minus.style.padding = '10px'; 87 zoom_minus.style.height = style.buttonsHeight + 'px'; 88 zoom_minus.style.backgroundColor = style.buttonsBackgroundColor; 89 zoom_minus.style.lineHeight = style.buttonsHeight + 'px'; 90 zoom_minus.style.color = style.buttonsColor; 91 zoom_minus.style.cursor = 'pointer'; 92 zoom_minus.textContent = '-'; 93 94 addEvent(zoom_minus, 'click', function(){psv.zoomOut();}); 95 button.appendChild(zoom_minus); 96 97 // Zoom range 98 zoom_range_bg = document.createElement('div'); 99 zoom_range_bg.style.cssFloat = 'left'; 100 zoom_range_bg.style.boxSizing = 'inherit'; 101 zoom_range_bg.style.padding = (10 + (style.buttonsHeight - style.zoomRangeThickness) / 2) + 'px 5px'; 102 zoom_range_bg.style.backgroundColor = style.buttonsBackgroun
102dColor; 103 zoom_range_bg.style.cursor = 'pointer'; 104 button.appendChild(zoom_range_bg); 105 106 zoom_range = document.createElement('div'); 107 zoom_range.style.boxSizing = 'inherit'; 108 zoom_range.style.width = style.zoomRangeWidth + 'px'; 109 zoom_range.style.height = style.zoomRangeThickness + 'px'; 110 zoom_range.style.backgroundColor = style.buttonsColor; 111 zoom_range.style.position = 'relative'; 112 zoom_range_bg.appendChild(zoom_range); 113 114 zoom_value = document.createElement('div'); 115 zoom_value.style.position = 'absolute'; 116 zoom_value.style.top = ((style.zoomRangeThickness - style.zoomRangeDisk) / 2) + 'px'; 117 zoom_value.style.left = -(style.zoomRangeDisk / 2) + 'px'; 118 zoom_value.style.boxSizing = 'inherit'; 119 zoom_value.style.width = style.zoomRangeDisk + 'px'; 120 zoom_value.style.height = style.zoomRangeDisk + 'px'; 121 zoom_value.style.borderRadius = '50%'; 122 zoom_value.style.backgroundColor = style.buttonsColor; 123 124 psv.addAction('zoom-updated', moveZoomValue); 125 addEvent(zoom_range_bg, 'mousedown', initZoomChangeWithMouse); 126 addEvent(zoom_range_bg, 'touchstart', initZoomChangeByTouch); 127 addEvent(document, 'mousemove', changeZoomWithMouse); 128 addEvent(document, 'touchmove', changeZoomByTouch); 129 addEvent(document, 'mouseup', stopZoomChange); 130 addEvent(document, 'touchend', stopZoomChange); 131 addEvent(zoom_range_bg, 'mousewheel', changeZoomOnMouseWheel); 132 addEvent(zoom_range_bg, 'DOMMouseScroll', changeZoomOnMouseWheel); 133 zoom_range.appendChild(zoom_value); 134 135 // Zoom "+" 136 var zoom_plus = document.createElement('div'); 137 zoom_plus.style.cssFloat = 'left'; 138 zoom_plus.style.boxSizing = 'inherit'; 139 zoom_plus.style.padding = '10px'; 140 zoom_plus.style.height = style.buttonsHeight + 'px'; 141 zoom_plus.style.backgroundColor = style.buttonsBackgroundColor; 142 zoom_plus.style.lineHeight = style.buttonsHeight + 'px'; 143 zoom_plus.style.color = style.buttonsColor; 144 zoom_plus.style.cursor = 'pointer'; 145 zoom_plus.textContent = '+'; 146 147 addEvent(zoom_plus, 'click', function(){psv.zoomIn();}); 148 button.appendChild(zoom_plus); 149 150 break; 151 152 case 'fullscreen': 153 // Fullscreen icon size 154 var fullscreen_width = style.buttonsHeight * style.fullscreenRatio; 155 156 var fullscreen_vertical_space = style.buttonsHeight * 0.3; 157 var fullscreen_vertical_border = (style.buttonsHeight - fullscreen_vertical_space) / 2; 158 159 var fullscreen_horizontal_space = fullscreen_width * 0.3; 160 var fullscreen_horizontal_border = (fullscreen_width - fullscreen_horizontal_space) / 2 - style.fullscreenThickness; 161 var fullscreen_vertical_int = style.buttonsHeight - style.fullscreenThickness * 2; 162 163 // Fullscreen button 164 button = document.createElement('div'); 165 button.style.cssFloat = 'right'; 166 button.style.boxSizing = 'inherit'; 167 button.style.padding = '10px'; 168 button.style.width = fullscreen_width + 'px'; 169 button.style.height = style.buttonsHeight + 'px'; 170 button.style.backgroundColor = style.buttonsBackgroundColor; 171 button.style.cursor = 'pointer'; 172 173 addEvent(button, 'click', function(){psv.toggleFullscreen();}); 174 175 // Fullscreen icon left side 176 var fullscreen_left = document.createElement('div'); 177 fullscreen_left.style.cssFloat = 'left'; 178 fullscreen_left.style.boxSizing = 'inherit'; 179 fullscreen_left.style.width = style.fullscreenThickness + 'px'; 180 fullscreen_left.style.height = fullscreen_vertical_space + 'px'; 181 fullscreen_left.style.borderStyle = 'solid'; 182 fullscreen_left.style.borderColor = style.buttonsColor + ' transparent'; 183 fullscreen_left.style.borderWidth = fullscreen_vertical_border + 'px 0'; 184 button.appendChild(fullscreen_left); 185 186 // Fullscreen icon top/bottom sides (first half) 187 var fullscreen_tb_1 = document.createElement('div'); 188 fullscreen_tb_1.style.cssFloat = 'left'; 189 fullscreen_tb_1.style.boxSizing = 'inherit'; 190 fullscreen_tb_1.style.width = fullscreen_horizontal_border + 'px'; 191 fullscreen_tb_1.style.height = fullscreen_vertical_int
191+ 'px'; 192 fullscreen_tb_1.style.borderStyle = 'solid'; 193 fullscreen_tb_1.style.borderColor = style.buttonsColor + ' transparent'; 194 fullscreen_tb_1.style.borderWidth = style.fullscreenThickness + 'px 0'; 195 button.appendChild(fullscreen_tb_1); 196 197 // Fullscreen icon top/bottom sides (second half) 198 var fullscreen_tb_2 = document.createElement('div'); 199 fullscreen_tb_2.style.cssFloat = 'left'; 200 fullscreen_tb_2.style.boxSizing = 'inherit'; 201 fullscreen_tb_2.style.marginLeft = fullscreen_horizontal_space + 'px'; 202 fullscreen_tb_2.style.width = fullscreen_horizontal_border + 'px'; 203 fullscreen_tb_2.style.height = fullscreen_vertical_int + 'px'; 204 fullscreen_tb_2.style.borderStyle = 'solid'; 205 fullscreen_tb_2.style.borderColor = style.buttonsColor + ' transparent'; 206 fullscreen_tb_2.style.borderWidth = style.fullscreenThickness + 'px 0'; 207 button.appendChild(fullscreen_tb_2); 208 209 // Fullscreen icon right side 210 var fullscreen_right = document.createElement('div'); 211 fullscreen_right.style.cssFloat = 'left'; 212 fullscreen_right.style.boxSizing = 'inherit'; 213 fullscreen_right.style.width = style.fullscreenThickness + 'px'; 214 fullscreen_right.style.height = fullscreen_vertical_space + 'px'; 215 fullscreen_right.style.borderStyle = 'solid'; 216 fullscreen_right.style.borderColor = style.buttonsColor + ' transparent'; 217 fullscreen_right.style.borderWidth = fullscreen_vertical_border + 'px 0'; 218 button.appendChild(fullscreen_right); 219 220 var fullscreen_clearer = document.createElement('div'); 221 fullscreen_clearer.style.clear = 'left'; 222 button.appendChild(fullscreen_clearer); 223 224 // (In)active 225 psv.addAction('fullscreen-mode', toggleActive); 226 227 break; 228 229 case 'orientation': 230 // Gyroscope icon sizes 231 var gyroscope_sphere_width = style.buttonsHeight - style.gyroscopeThickness * 2; 232 var gyroscope_ellipses_big_axis = gyroscope_sphere_width - style.gyroscopeThickness * 4; 233 var gyroscope_ellipses_little_axis = gyroscope_sphere_width / 10; 234 235 // Gyroscope button 236 button = document.createElement('div'); 237 button.style.cssFloat = 'right'; 238 button.style.boxSizing = 'inherit'; 239 button.style.padding = '10px'; 240 button.style.width = style.buttonsHeight + 'px'; 241 button.style.height = style.buttonsHeight + 'px'; 242 button.style.backgroundColor = style.buttonsBackgroundColor; 243 button.style.position = 'relative'; 244 button.style.cursor = 'pointer'; 245 246 addEvent(button, 'click', function(){psv.toggleDeviceOrientation();}); 247 248 var gyroscope_sphere = document.createElement('div'); 249 gyroscope_sphere.style.boxSizing = 'inherit'; 250 gyroscope_sphere.style.width = gyroscope_sphere_width + 'px'; 251 gyroscope_sphere.style.height = gyroscope_sphere_width + 'px'; 252 gyroscope_sphere.style.borderRadius = '50%'; 253 gyroscope_sphere.style.border = style.gyroscopeThickness + 'px solid ' + style.buttonsColor; 254 button.appendChild(gyroscope_sphere); 255 256 var gyroscope_hor_ellipsis = document.createElement('div'); 257 gyroscope_hor_ellipsis.style.boxSizing = 'inherit'; 258 gyroscope_hor_ellipsis.style.width = gyroscope_ellipses_big_axis + 'px'; 259 gyroscope_hor_ellipsis.style.height = gyroscope_ellipses_little_axis + 'px'; 260 gyroscope_hor_ellipsis.style.borderRadius = '50%'; 261 gyroscope_hor_ellipsis.style.border = style.gyroscopeThickness + 'px solid ' + style.buttonsColor; 262 gyroscope_hor_ellipsis.style.position = 'absolute'; 263 gyroscope_hor_ellipsis.style.top = '50%'; 264 gyroscope_hor_ellipsis.style.left = '50%'; 265 gyroscope_hor_ellipsis.style.marginTop = -(gyroscope_ellipses_little_axis / 2 + style.gyroscopeThickness) + 'px'; 266 gyroscope_hor_ellipsis.style.marginLeft = -(gyroscope_ellipses_big_axis / 2 + style.gyroscopeThickness) + 'px'; 267 button.appendChild(gyroscope_hor_ellipsis); 268 269 var gyroscope_ver_ellipsis = document.createElement('div'); 270 gyroscope_ver_ellipsis.style.boxSizing = 'inherit'; 271 gyroscope_ver_ellipsis.style.width = gyroscope_ellipses_little_axis + 'px'; 272 gyroscope_ver_ellipsis.style.height = gyroscope_ellipses_big_axis + 'px'; 273 gyroscope_ver_ellipsis.style.borderRadius = '50%'; 274 gyroscope_ver_ellipsis.style.border = style.gyroscopeThickness + 'px solid ' + style.buttonsColor; 275 gyroscope_ver_ellipsis.style.position = 'absolute'; 276 gyroscope_ver_ellipsis.style.top = '50%'; 277 gyroscope_ver_ellipsis.style.left = '50%'; 278 gyroscope_ver_ellipsis.style.marginTop = -(gyroscope_ellipses_big_axis / 2 + style.gyroscopeThickness) + 'px'; 279 gyroscope_ver_ellipsis.style.marginLeft = -(gyroscope_ellipses_little_axis / 2 + style.gyroscopeThickness) + 'px'; 280 button.appendChild(gyroscope_ver_ellipsis); 281 282 // (In)active 283 psv.addAction('device-orientation', toggleActive); 284 285 break; 286
287 case 'virtual-reality': 288 // Sizes 289 var vr_width = style.buttonsHeight * style.virtualRealityRatio; 290 291 var vr_eye_diameter = vr_width / 4; 292 var vr_eye_offset = vr_eye_diameter / 2; 293 294 // Button 295 button = document.createElement('div'); 296 button.style.cssFloat = 'right'; 297 button.style.position = 'relative'; 298 button.style.boxSizing = 'inherit'; 299 button.style.padding = '10px'; 300 button.style.width = vr_width + 'px'; 301 button.style.height = style.buttonsHeight + 'px'; 302 button.style.backgroundColor = style.buttonsBackgroundColor; 303 button.style.cursor = 'pointer'; 304 305 addEvent(button, 'click', function(){psv.toggleStereo();}); 306 307 // Icon 308 var vr_rect = document.createElement('div'); 309 vr_rect.style.boxSizing = 'inherit'; 310 vr_rect.style.width = vr_width + 'px'; 311 vr_rect.style.height = style.buttonsHeight + 'px'; 312 vr_rect.style.borderRadius = style.virtualRealityBorderRadius + 'px'; 313 vr_rect.style.backgroundColor = style.buttonsColor; 314 button.appendChild(vr_rect); 315 316 var left_eye = document.createElement('div'); 317 left_eye.style.boxSizing = 'inherit'; 318 left_eye.style.width = vr_eye_diameter + 'px'; 319 left_eye.style.height = vr_eye_diameter + 'px'; 320 left_eye.style.position = 'absolute'; 321 left_eye.style.top = (vr_eye_offset + 10) + 'px'; 322 left_eye.style.left = (vr_eye_offset + 10) + 'px'; 323 left_eye.style.borderRadius = '50%'; 324 left_eye.style.backgroundColor = style.backgroundColor; 325 button.appendChild(left_eye); 326 327 var right_eye = document.createElement('div'); 328 right_eye.style.boxSizing = 'inherit'; 329 right_eye.style.width = vr_eye_diameter + 'px'; 330 right_eye.style.height = vr_eye_diameter + 'px'; 331 right_eye.style.position = 'absolute'; 332 right_eye.style.top = (vr_eye_offset + 10) + 'px'; 333 right_eye.style.right = (vr_eye_offset + 10) + 'px'; 334 right_eye.style.borderRadius = '50%'; 335 right_eye.style.backgroundColor = style.backgroundColor; 336 button.appendChild(right_eye); 337 338 var nose = document.createElement('div'); 339 nose.style.boxSizing = 'inherit'; 340 nose.style.width = vr_eye_diameter + 'px'; 341 nose.style.height = (style.buttonsHeight / 2) + 'px'; 342 nose.style.position = 'absolute'; 343 nose.style.left = '50%'; 344 nose.style.bottom = '10px'; 345 nose.style.marginLeft = -(vr_eye_diameter / 2) + 'px'; 346 nose.style.borderTopLeftRadius = '50% 60%'; 347 nose.style.borderTopRightRadius = '50% 60%'; 348 nose.style.backgroundColor = style.backgroundColor; 349 button.appendChild(nose); 350 351 //(In)active 352 psv.addAction('stereo-effect', toggleActive); 353 354 break; 355 } 356 }; 357 358 /** 359 * Returns the button element. 360 * @public 361 * @return {HTMLElement} The button 362 **/ 363 364 this.getButton = function() { 365 return button; 366 }; 367 368 /** 369 * Changes the active state of the button. 370 * @private 371 * @param {boolean} active - `true` if the button should be active, `false` otherwise 372 * @return {void} 373 **/ 374 375 var toggleActive = function(active) { 376 if (active) 377 button.style.backgroundColor = style.activeButtonsBackgroundColor; 378 379 else 380 button.style.backgroundColor = style.buttonsBackgroundColor; 381 }; 382 383 /** 384 * Moves the zoom cursor. 385 * @private 386 * @param {integer} level - Zoom level (between 0 and 100) 387 * @return {void} 388 **/ 389 390 var moveZoomValue = function(level) { 391 zoom_value.style.left = (level / 100 * style.zoomRangeWidth - style.zoomRangeDisk / 2) + 'px'; 392 }; 393 394 /** 395 * The user wants to zoom. 396 * @private 397 * @param {Event} evt - The event 398 * @return {void} 399 **/ 400 401 var initZoomChangeWithMouse = function(evt) { 402 initZoomChange(parseInt(evt.clientX)); 403 }; 404 405 /** 406 * The user wants to zoom (mobile version). 407 * @private 408 * @param {Event} evt - The event 409 * @return {void} 410 **/ 411 412 var initZoomChangeByTouch = function(evt) { 413 var touch = evt.touches[0]; 414 if (touch.target == zoom_range_bg || touch.target == zoom_range || touch.target == zoom_value) 415 initZoomChange(parseInt(touch.clientX)); 416 }; 417 418 /** 419 * Initializes a zoom change. 420 * @private 421 * @param {integer} x - Horizontal coordinate 422 * @return {void} 423 **/ 424 425 var initZoomChange = function(x) { 426 mousedown = true; 427 changeZoom(x); 428 }; 429 430 /** 431 * The user wants to stop zooming. 432 * @private 433 * @param {Event} evt - The event 434 * @return {void} 435 **/ 436 437 var stopZoomChange = function(evt) { 438 mousedown = false; 439 }; 440 441 /** 442 * The user moves the zoom cursor. 443 * @private 444 * @param {Event} evt - The event 445 * @return {void} 446 **/ 447 448 var changeZoomWithMouse = function(evt) { 449 evt.preventDefault(); 450 changeZoom(parseInt(evt.clientX)); 451 }; 452 453 /** 454 * The user moves the zoom cursor (mobile version). 455 * @private 456 * @param {Event} evt - The event 457 * @return {void} 458 **/ 459 460 var changeZoomByTouch = function(evt) { 461 var touch = evt.touches[0]; 462 if (touch.target == zoom_range_bg || touch.target == zoom_range || touch.target == zoom_value) { 463 evt.preventDefault(); 464 changeZoom(parseInt(touch.clientX)); 465 } 466 }; 467 468 /** 469 * Zoom change. 470 * @private 471 * @param {integer} x - Horizontal coordinate 472 * @return {void} 473 **/ 474 475 var changeZoom = function(x) { 476 if (mousedown) { 477 var user_input = x - zoom_range.getBoundingClientRect().left; 478 var zoom_level = user_input / style.zoomRangeWidth * 100; 479 psv.zoom(zoom_level); 480 } 481 }; 482 483 /** 484 * Change zoom by scrolling. 485 * @private 486 * @param {Event} evt - The event 487 * @return {void} 488 **/ 489 490 var changeZoomOnMouseWheel = function(evt) { 491 psv.mouseWheel(evt); 492 }; 493 494 // Some useful attributes 495 var zoom_range_bg, zoom_range, zoom_value; 496 var mousedown = false; 497 498 // Create the button 499 var button; 500 create(); 501};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.