From b77301ca36c2b891d8d64adf6df2e3a427b990f9 Mon Sep 17 00:00:00 2001 From: Ekoo20 Date: Wed, 13 Apr 2016 11:21:39 -0500 Subject: [PATCH] Orientationchange instance DeviceOrientationEvent --- src/js/pannellum.js | 202 ++++++++++++++++++++++++++-------------------------- 1 file changed, 101 insertions(+), 101 deletions(-) diff --git a/src/js/pannellum.js b/src/js/pannellum.js index c216432..8257569 100644 --- a/src/js/pannellum.js +++ b/src/js/pannellum.js @@ -1,17 +1,17 @@ /* * Pannellum - An HTML5 based Panorama Viewer * Copyright (c) 2011-2016 Matthew Petroff - * + * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: - * + * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. - * + * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE @@ -179,12 +179,12 @@ if (document.fullscreenEnabled || document.mozFullScreenEnabled || document.webk // Device orientation toggle controls.orientation = document.createElement('div'); controls.orientation.addEventListener('click', function(e) { - window.addEventListener('deviceorientation', orientationListener); + window.addEventListener('orientationchange', orientationListener); }); controls.orientation.className = 'pnlm-orientation-button pnlm-sprite pnlm-controls pnlm-control'; if (window.DeviceOrientationEvent) { - window.addEventListener('deviceorientation', function(e) { - window.removeEventListener('deviceorientation', this); + window.addEventListener('orientationchange', function(e) { + window.removeEventListener('orientationchange', this); if (e) controls.container.appendChild(controls.orientation); }); @@ -221,9 +221,9 @@ function init() { anError(); return; } - + var i, p; - + if (config.type == 'cubemap') { panoImage = []; for (i = 0; i < 6; i++) { @@ -256,21 +256,21 @@ function init() { if (config.type == 'cubemap') { // Quick loading counter for synchronous loading var itemsToLoad = 6; - + var onLoad = function() { itemsToLoad--; if (itemsToLoad === 0) { onImageLoad(); } }; - + var onError = function(e) { var a = document.createElement('a'); a.href = e.target.src; a.innerHTML = a.href; anError('The file ' + a.outerHTML + ' could not be accessed.'); }; - + for (i = 0; i < panoImage.length; i++) { panoImage[i].onload = onLoad; panoImage[i].onerror = onError; @@ -287,16 +287,16 @@ function init() { if (config.basePath) { p = config.basePath; } - + if (config.dynamic !== true) { // Still image p = absoluteURL(config.panorama) ? config.panorama : p + config.panorama; - + panoImage.onload = function() { window.URL.revokeObjectURL(this.src); // Clean up onImageLoad(); }; - + var xhr = new XMLHttpRequest(); xhr.onloadend = function() { if (xhr.status != 200) { @@ -347,7 +347,7 @@ function init() { xhr.send(); } } - + container.classList.add('pnlm-grab'); container.classList.remove('pnlm-grabbing'); } @@ -433,7 +433,7 @@ function parseGPanoXMP(image) { var start = img.indexOf(' -1 && config.ignoreGPanoXMP !== true) { var xmpData = img.substring(start, img.indexOf('') + 12); - + // Extract the requested tag from the XMP data var getTag = function(tag) { var result; @@ -449,7 +449,7 @@ function parseGPanoXMP(image) { } return null; }; - + // Relevant XMP data var xmp = { fullWidth: getTag('GPano:FullPanoWidthPixels'), @@ -461,11 +461,11 @@ function parseGPanoXMP(image) { horizonPitch: getTag('GPano:PosePitchDegrees'), horizonRoll: getTag('GPano:PoseRollDegrees') }; - + if (xmp.fullWidth !== null && xmp.croppedWidth !== null && xmp.fullHeight !== null && xmp.croppedHeight !== null && xmp.topPixels !== null) { - + // Set up viewer using GPano XMP data config.haov = xmp.croppedWidth / xmp.fullWidth * 360; config.vaov = xmp.croppedHeight / xmp.fullHeight * 180; @@ -481,11 +481,11 @@ function parseGPanoXMP(image) { panoImage.horizonPitch = xmp.horizonPitch / 180 * Math.PI; panoImage.horizonRoll = xmp.horizonRoll / 180 * Math.PI; } - + // TODO: add support for initial view settings } } - + // Load panorama panoImage.src = window.URL.createObjectURL(image); }); @@ -567,12 +567,12 @@ function onDocumentMouseDown(event) { event.preventDefault(); // But not all of it container.focus(); - + // Only do something if the panorama is loaded if (!loaded) { return; } - + // Calculate mouse position relative to top left of viewer container var pos = mousePosition(event); @@ -582,25 +582,25 @@ function onDocumentMouseDown(event) { console.log('Pitch: ' + coords[0] + ', Yaw: ' + coords[1] + ', Center Pitch: ' + config.pitch + ', Center Yaw: ' + config.yaw + ', HFOV: ' + config.hfov); } - + // Turn off auto-rotation if enabled config.autoRotate = false; - window.removeEventListener('deviceorientation', orientationListener); + window.removeEventListener('orientationchange', orientationListener); config.roll = 0; - + isUserInteracting = true; latestInteraction = Date.now(); - + onPointerDownPointerX = pos.x; onPointerDownPointerY = pos.y; - + onPointerDownYaw = config.yaw; onPointerDownPitch = config.pitch; - + container.classList.add('pnlm-grabbing'); container.classList.remove('pnlm-grab'); - + animateInit(); } @@ -639,9 +639,9 @@ function onDocumentMouseMove(event) { var yaw = ((Math.atan(onPointerDownPointerX / canvas.width * 2 - 1) - Math.atan(pos.x / canvas.width * 2 - 1)) * 180 / Math.PI * config.hfov / 90) + onPointerDownYaw; yawSpeed = (yaw - config.yaw) % 360 * 0.2; config.yaw = yaw; - + var vfov = 2 * Math.atan(Math.tan(config.hfov/360*Math.PI) * canvas.height / canvas.width) * 180 / Math.PI; - + var pitch = ((Math.atan(pos.y / canvas.height * 2 - 1) - Math.atan(onPointerDownPointerY / canvas.height * 2 - 1)) * 180 / Math.PI * vfov / 90) + onPointerDownPitch; pitchSpeed = (pitch - config.pitch) * 0.2; config.pitch = pitch; @@ -681,7 +681,7 @@ function onDocumentTouchStart(event) { // Turn off auto-rotation if enabled config.autoRotate = false; - window.removeEventListener('deviceorientation', orientationListener); + window.removeEventListener('orientationchange', orientationListener); config.roll = 0; // Calculate touch position relative to top left of viewer container @@ -689,7 +689,7 @@ function onDocumentTouchStart(event) { onPointerDownPointerX = pos0.x; onPointerDownPointerY = pos0.y; - + if (event.targetTouches.length == 2) { // Down pointer is the center of the two fingers var pos1 = mousePosition(event.targetTouches[1]); @@ -700,7 +700,7 @@ function onDocumentTouchStart(event) { } isUserInteracting = true; latestInteraction = Date.now(); - + onPointerDownYaw = config.yaw; onPointerDownPitch = config.pitch; @@ -723,7 +723,7 @@ function onDocumentTouchMove(event) { var pos0 = mousePosition(event.targetTouches[0]); var clientX = pos0.x; var clientY = pos0.y; - + if (event.targetTouches.length == 2 && onPointerDownPointerDist != -1) { var pos1 = mousePosition(event.targetTouches[1]); clientX += (pos1.x - pos0.x) * 0.5; @@ -733,11 +733,11 @@ function onDocumentTouchMove(event) { setHfov(config.hfov + (onPointerDownPointerDist - clientDist) * 0.1); onPointerDownPointerDist = clientDist; } - + var yaw = (onPointerDownPointerX - clientX) * 0.1 + onPointerDownYaw; yawSpeed = (yaw - config.yaw) % 360 * 0.2; config.yaw = yaw; - + var pitch = (clientY - onPointerDownPointerY) * 0.1 + onPointerDownPitch; pitchSpeed = (pitch - config.pitch) * 0.2; config.pitch = pitch; @@ -771,7 +771,7 @@ function onDocumentPointerDown(event) { onDocumentTouchStart(event); event.preventDefault(); - window.removeEventListener('deviceorientation', orientationListener); + window.removeEventListener('orientationchange', orientationListener); config.roll = 0; } } @@ -825,7 +825,7 @@ function onDocumentPointerUp(event) { */ function onDocumentMouseWheel(event) { event.preventDefault(); - + // Only do something if the panorama is loaded if (!loaded) { return; @@ -845,7 +845,7 @@ function onDocumentMouseWheel(event) { setHfov(config.hfov + event.detail * 1.5); zoomSpeed = event.detail > 0 ? 1 : -1; } - + animateInit(); } @@ -857,11 +857,11 @@ function onDocumentMouseWheel(event) { function onDocumentKeyPress(event) { // Override default action event.preventDefault(); - + // Turn off auto-rotation if enabled config.autoRotate = false; - window.removeEventListener('deviceorientation', orientationListener); + window.removeEventListener('orientationchange', orientationListener); config.roll = 0; // Record key pressed @@ -869,7 +869,7 @@ function onDocumentKeyPress(event) { if (event.which) { keynumber = event.which; } - + // If escape key is pressed if (keynumber == 27) { // If in fullscreen mode @@ -900,13 +900,13 @@ function clearKeys() { function onDocumentKeyUp(event) { // Override default action event.preventDefault(); - + // Record key released var keynumber = event.keycode; if (event.which) { keynumber = event.which; } - + // Change key changeKey(keynumber, false); } @@ -924,53 +924,53 @@ function changeKey(keynumber, value) { case 109: case 189: case 17: if (keysDown[0] != value) { keyChanged = true; } keysDown[0] = value; break; - + // If plus key is released case 107: case 187: case 16: if (keysDown[1] != value) { keyChanged = true; } keysDown[1] = value; break; - + // If up arrow is released case 38: if (keysDown[2] != value) { keyChanged = true; } keysDown[2] = value; break; - + // If "w" is released case 87: if (keysDown[6] != value) { keyChanged = true; } keysDown[6] = value; break; - + // If down arrow is released case 40: if (keysDown[3] != value) { keyChanged = true; } keysDown[3] = value; break; - + // If "s" is released case 83: if (keysDown[7] != value) { keyChanged = true; } keysDown[7] = value; break; - + // If left arrow is released case 37: if (keysDown[4] != value) { keyChanged = true; } keysDown[4] = value; break; - + // If "a" is released case 65: if (keysDown[8] != value) { keyChanged = true; } keysDown[8] = value; break; - + // If right arrow is released case 39: if (keysDown[5] != value) { keyChanged = true; } keysDown[5] = value; break; - + // If "d" is released case 68: if (keysDown[9] != value) { keyChanged = true; } keysDown[9] = value; } - + if (keyChanged && value) { if (typeof performance !== 'undefined' && performance.now()) { prevTime = performance.now(); @@ -991,11 +991,11 @@ function keyRepeat() { if (!loaded) { return; } - + var prevPitch = config.pitch; var prevYaw = config.yaw; var prevZoom = config.hfov; - + var newTime; if (typeof performance !== 'undefined' && performance.now()) { newTime = performance.now(); @@ -1007,41 +1007,41 @@ function keyRepeat() { } var diff = (newTime - prevTime) * config.hfov / 1700; diff = Math.min(diff, 1.0); - + // If minus key is down if (keysDown[0] && config.keyboardZoom === true) { setHfov(config.hfov + (zoomSpeed * 0.8 + 0.5) * diff); } - + // If plus key is down if (keysDown[1] && config.keyboardZoom === true) { setHfov(config.hfov + (zoomSpeed * 0.8 - 0.2) * diff); } - + // If up arrow or "w" is down if (keysDown[2] || keysDown[6]) { // Pan up config.pitch += (pitchSpeed * 0.8 + 0.2) * diff; } - + // If down arrow or "s" is down if (keysDown[3] || keysDown[7]) { // Pan down config.pitch += (pitchSpeed * 0.8 - 0.2) * diff; } - + // If left arrow or "a" is down if (keysDown[4] || keysDown[8]) { // Pan left config.yaw += (yawSpeed * 0.8 - 0.2) * diff; } - + // If right arrow or "d" is down if (keysDown[5] || keysDown[9]) { // Pan right config.yaw += (yawSpeed * 0.8 + 0.2) * diff; } - + // If auto-rotate var inactivityInterval = Date.now() - latestInteraction; if (config.autoRotate && inactivityInterval > config.autoRotateInactivityDelay && @@ -1050,7 +1050,7 @@ function keyRepeat() { if (diff > 0.000001) { config.yaw -= config.autoRotate / 60 * diff; } - + // Deal with stopping auto rotation after a set delay if (config.autoRotateStopDelay) { config.autoRotateStopDelay -= newTime - prevTime; @@ -1064,7 +1064,7 @@ function keyRepeat() { if (diff > 0) { // "Friction" var friction = 0.85; - + // Yaw if (!keysDown[4] && !keysDown[5] && !keysDown[8] && !keysDown[9]) { config.yaw += yawSpeed * diff * friction; @@ -1084,14 +1084,14 @@ function keyRepeat() { yawSpeed = yawSpeed * 0.8 + (config.yaw - prevYaw) / diff * 0.2; pitchSpeed = pitchSpeed * 0.8 + (config.pitch - prevPitch) / diff * 0.2; zoomSpeed = zoomSpeed * 0.8 + (config.hfov - prevZoom) / diff * 0.2; - + // Limit speed var maxSpeed = 5; yawSpeed = Math.min(maxSpeed, Math.max(yawSpeed, -maxSpeed)); pitchSpeed = Math.min(maxSpeed, Math.max(pitchSpeed, -maxSpeed)); zoomSpeed = Math.min(maxSpeed, Math.max(zoomSpeed, -maxSpeed)); } - + // Stop movement if opposite controls are pressed if (keysDown[0] && keysDown[0]) { zoomSpeed = 0; @@ -1112,7 +1112,7 @@ function onDocumentResize() { // Resize panorama renderer renderer.resize(); animateInit(); - + // Kludge to deal with WebKit regression: https://bugs.webkit.org/show_bug.cgi?id=93525 onFullScreenChange(); } @@ -1171,7 +1171,7 @@ function render() { // Ensure the yaw is within min and max allowed config.yaw = Math.max(config.minYaw, Math.min(config.maxYaw, config.yaw)); - + // Check if we autoRotate in a limited by min and max yaw // If so reverse direction if (config.autoRotate !== false && tmpyaw != config.yaw) { @@ -1180,11 +1180,11 @@ function render() { // Ensure the calculated pitch is within min and max allowed config.pitch = Math.max(config.minPitch, Math.min(config.maxPitch, config.pitch)); - + renderer.render(config.pitch * Math.PI / 180, config.yaw * Math.PI / 180, config.hfov * Math.PI / 180, {roll: config.roll * Math.PI / 180}); - + renderHotSpots(); - + // Update compass if (config.compass) { compass.style.transform = 'rotate(' + (-config.yaw - config.northOffset) + 'deg)'; @@ -1297,7 +1297,7 @@ function renderInit() { renderer.init(config.haov * Math.PI / 180, config.vaov * Math.PI / 180, config.vOffset * Math.PI / 180, renderInitCallback); } catch(event) { // Panorama not loaded - + // Display error if there is a bad texture if (event.type == 'webgl error' || event.type == 'no webgl') { anError(); @@ -1319,7 +1319,7 @@ function renderInit() { function renderInitCallback() { if (oldRenderer !== undefined) { oldRenderer.destroy(); - + // Fade if specified if (config.sceneFadeDuration && oldRenderer.fadeImg !== undefined) { oldRenderer.fadeImg.style.opacity = 0; @@ -1331,17 +1331,17 @@ function renderInitCallback() { }, config.sceneFadeDuration); } } - + // Show compass if applicable if (config.compass) { compass.style.display = 'inline'; } else { compass.style.display = 'none'; } - + // Show hotspots createHotSpots(); - + // Hide loading display infoDisplay.load.box.style.display = 'none'; if (preview !== undefined) { @@ -1349,7 +1349,7 @@ function renderInitCallback() { preview = undefined; } loaded = true; - + animateInit(); } @@ -1359,7 +1359,7 @@ function renderInitCallback() { */ function createHotSpots() { if (hotspotsCreated) return; - + if (!config.hotSpots) { config.hotSpots = []; } else { @@ -1370,11 +1370,11 @@ function createHotSpots() { config.hotSpots.forEach(function(hs) { var div = document.createElement('div'); div.className = 'pnlm-hotspot pnlm-tooltip pnlm-sprite pnlm-' + escapeHTML(hs.type); - + var span = document.createElement('span'); if (hs.text) span.innerHTML = escapeHTML(hs.text); - + var a; if (hs.video) { var video = document.createElement('video'), @@ -1424,7 +1424,7 @@ function createHotSpots() { } renderContainer.appendChild(div); } - + div.appendChild(span); span.style.width = span.scrollWidth - 20 + 'px'; span.style.marginLeft = -(span.scrollWidth - 26) / 2 + 'px'; @@ -1500,14 +1500,14 @@ function mergeConfig(sceneId) { config = {}; var k; var photoSphereExcludes = ['haov', 'vaov', 'vOffset', 'northOffset']; - + // Merge default config for (k in defaultConfig) { if (defaultConfig.hasOwnProperty(k)) { config[k] = defaultConfig[k]; } } - + // Merge default scene config for (k in initialConfig.default) { if (initialConfig.default.hasOwnProperty(k)) { @@ -1517,7 +1517,7 @@ function mergeConfig(sceneId) { } } } - + // Merge current scene config if ((sceneId !== null) && (sceneId !== '') && (initialConfig.scenes) && (initialConfig.scenes[sceneId])) { var scene = initialConfig.scenes[sceneId]; @@ -1531,7 +1531,7 @@ function mergeConfig(sceneId) { } config.scene = sceneId; } - + // Merge initial config for (k in initialConfig) { if (initialConfig.hasOwnProperty(k)) { @@ -1561,7 +1561,7 @@ function processOptions() { preview.style.backgroundImage = "url('" + encodeURI(p) + "')"; renderContainer.appendChild(preview); } - + // Process other options for (var key in config) { if (config.hasOwnProperty(key)) { @@ -1570,25 +1570,25 @@ function processOptions() { infoDisplay.title.innerHTML = escapeHTML(config[key]); infoDisplay.container.style.display = 'inline'; break; - + case 'author': infoDisplay.author.innerHTML = 'by ' + escapeHTML(config[key]); infoDisplay.container.style.display = 'inline'; break; - + case 'fallback': infoDisplay.errorMsg.innerHTML = '

Your browser does not support WebGL.
Click here to view this panorama in an alternative viewer.

'; break; - + case 'hfov': setHfov(Number(config[key])); break; - + case 'pitch': // Keep pitch within bounds config.pitch = Math.max(config.minPitch, Math.min(config.maxPitch, config.pitch)); break; - + case 'autoLoad': if (config[key] === true && oldRenderer === undefined) { // Show loading box @@ -1599,7 +1599,7 @@ function processOptions() { init(); } break; - + case 'showZoomCtrl': if (config[key]) { // Show zoom controls @@ -1613,7 +1613,7 @@ function processOptions() { case 'showFullscreenCtrl': if (config[key] && ('fullscreen' in document || 'mozFullScreen' in document || 'webkitIsFullScreen' in document || 'msFullscreenElement' in document)) { - + // Show fullscreen control controls.fullscreen.style.display = 'block'; } else { @@ -1744,7 +1744,7 @@ function load() { function loadScene(sceneId, targetPitch, targetYaw, targetHfov) { loaded = false; oldRenderer = renderer; - + // Set up fade if specified var fadeImg, workingPitch, workingYaw, workingHfov; if (config.sceneFadeDuration) { @@ -1760,7 +1760,7 @@ function loadScene(sceneId, targetPitch, targetYaw, targetHfov) { renderContainer.appendChild(fadeImg); oldRenderer.fadeImg = fadeImg; } - + // Set new pointing if (targetPitch === 'same') { workingPitch = config.pitch; @@ -1779,13 +1779,13 @@ function loadScene(sceneId, targetPitch, targetYaw, targetHfov) { } else { workingHfov = targetHfov; } - + // Destroy hot spots from previous scene destroyHotSpots(); - + // Create the new config for the scene mergeConfig(sceneId); - + // Reload scene processOptions(); if (workingPitch) {