@@ -11,6 +11,16 @@ Fired when a scene change is initiated. A `load` event will be fired when the | |||||
new scene finishes loading. Passes scene ID string to handler. | new scene finishes loading. Passes scene ID string to handler. | ||||
## `fullscreenchange` | |||||
Fired when browser fullscreen status changed. Passes status boolean to handler. | |||||
## `zoomchange` | |||||
Fired when scene hfov update. Passes new HFOV value to handler. | |||||
## `scenechangefadedone` | ## `scenechangefadedone` | ||||
If a scene transition fade interval is specified, this event is fired when the | If a scene transition fade interval is specified, this event is fired when the | ||||
@@ -46,3 +56,4 @@ Fired when a touch starts. Passes `TouchEvent` to handler. | |||||
## `touchend` | ## `touchend` | ||||
Fired when a touch ends. Passes `TouchEvent` to handler. | Fired when a touch ends. Passes `TouchEvent` to handler. | ||||
@@ -151,7 +151,16 @@ Defaults to `undefined`, so the viewer center can reach `-90` / `90`. | |||||
### `minHfov` and `maxHfov` (number) | ### `minHfov` and `maxHfov` (number) | ||||
Sets the minimum / maximum horizontal field of view, in degrees, that the | Sets the minimum / maximum horizontal field of view, in degrees, that the | ||||
viewer can be set to. Defaults to `50` / `120`. | |||||
viewer can be set to. Defaults to `50` / `120`. Unless the `multiResMinHfov` | |||||
parameter is set to `true`, the `minHfov` parameter is ignored for | |||||
`multires` panoramas. | |||||
### `multiResMinHfov` (boolean) | |||||
When set to `false`, the `minHfov` parameter is ignored for `multires` | |||||
panoramas; an automatically calculated minimum horizontal field of view is used | |||||
instead. Defaults to `false`. | |||||
### `compass` (boolean) | ### `compass` (boolean) | ||||
@@ -209,9 +218,9 @@ This specifies the type of CORS request used and can be set to either | |||||
`anonymous` or `use-credentials`. Defaults to `anonymous`. | `anonymous` or `use-credentials`. Defaults to `anonymous`. | ||||
### `hotSpots` (array) | |||||
### `hotSpots` (object) | |||||
This specifies an array of hot spots that can be links to other scenes, | |||||
This specifies a dictionary of hot spots that can be links to other scenes, | |||||
information, or external links. Each array element has the following properties. | information, or external links. Each array element has the following properties. | ||||
@@ -241,6 +250,11 @@ spot. | |||||
If specified for an `info` hot spot, the hot spot links to the specified URL. | If specified for an `info` hot spot, the hot spot links to the specified URL. | ||||
Not applicable for `scene` hot spots. | Not applicable for `scene` hot spots. | ||||
#### `attributes` (dict) | |||||
Specifies URL's link attributes. If not set, the `target` attribute is set to | |||||
`_blank`, to open link in new tab to avoid opening in viewer frame / page. | |||||
#### `sceneId` (string) | #### `sceneId` (string) | ||||
Specifies the ID of the scene to link to for `scene` hot spots. Not applicable | Specifies the ID of the scene to link to for `scene` hot spots. Not applicable | ||||
@@ -72,6 +72,7 @@ var config, | |||||
var defaultConfig = { | var defaultConfig = { | ||||
hfov: 100, | hfov: 100, | ||||
minHfov: 50, | minHfov: 50, | ||||
multiResMinHfov: false, | |||||
maxHfov: 120, | maxHfov: 120, | ||||
pitch: 0, | pitch: 0, | ||||
minPitch: undefined, | minPitch: undefined, | ||||
@@ -999,7 +1000,6 @@ function onDocumentMouseWheel(event) { | |||||
setHfov(config.hfov + event.detail * 1.5); | setHfov(config.hfov + event.detail * 1.5); | ||||
speed.hfov = event.detail > 0 ? 1 : -1; | speed.hfov = event.detail > 0 ? 1 : -1; | ||||
} | } | ||||
animateInit(); | animateInit(); | ||||
} | } | ||||
@@ -1707,7 +1707,13 @@ function createHotSpot(hs) { | |||||
} else if (hs.URL) { | } else if (hs.URL) { | ||||
a = document.createElement('a'); | a = document.createElement('a'); | ||||
a.href = sanitizeURL(hs.URL); | a.href = sanitizeURL(hs.URL); | ||||
a.target = '_blank'; | |||||
if (hs.attributes) { | |||||
for (var key in hs.attributes) { | |||||
a.setAttribute(key, hs.attributes[key]); | |||||
} | |||||
} else { | |||||
a.target = '_blank'; | |||||
} | |||||
renderContainer.appendChild(a); | renderContainer.appendChild(a); | ||||
div.className += ' pnlm-pointer'; | div.className += ' pnlm-pointer'; | ||||
span.className += ' pnlm-pointer'; | span.className += ' pnlm-pointer'; | ||||
@@ -2106,7 +2112,7 @@ function onFullScreenChange() { | |||||
controls.fullscreen.classList.remove('pnlm-fullscreen-toggle-button-active'); | controls.fullscreen.classList.remove('pnlm-fullscreen-toggle-button-active'); | ||||
fullscreenActive = false; | fullscreenActive = false; | ||||
} | } | ||||
fireEvent('fullscreenchange', fullscreenActive); | |||||
// Resize renderer (deal with browser quirks and fixes #155) | // Resize renderer (deal with browser quirks and fixes #155) | ||||
renderer.resize(); | renderer.resize(); | ||||
setHfov(config.hfov); | setHfov(config.hfov); | ||||
@@ -2144,7 +2150,7 @@ function zoomOut() { | |||||
function constrainHfov(hfov) { | function constrainHfov(hfov) { | ||||
// Keep field of view within bounds | // Keep field of view within bounds | ||||
var minHfov = config.minHfov; | var minHfov = config.minHfov; | ||||
if (config.type == 'multires' && renderer) { | |||||
if (config.type == 'multires' && renderer && config.multiResMinHfov) { | |||||
minHfov = Math.min(minHfov, renderer.getCanvas().width / (config.multiRes.cubeResolution / 90 * 0.9)); | minHfov = Math.min(minHfov, renderer.getCanvas().width / (config.multiRes.cubeResolution / 90 * 0.9)); | ||||
} | } | ||||
if (minHfov > config.maxHfov) { | if (minHfov > config.maxHfov) { | ||||
@@ -2178,6 +2184,7 @@ function constrainHfov(hfov) { | |||||
*/ | */ | ||||
function setHfov(hfov) { | function setHfov(hfov) { | ||||
config.hfov = constrainHfov(hfov); | config.hfov = constrainHfov(hfov); | ||||
fireEvent('zoomchange', config.hfov); | |||||
} | } | ||||
/** | /** | ||||
@@ -2882,7 +2889,8 @@ this.removeHotSpot = function(hotSpotId, sceneId) { | |||||
* @instance | * @instance | ||||
*/ | */ | ||||
this.resize = function() { | this.resize = function() { | ||||
onDocumentResize(); | |||||
if (renderer) | |||||
onDocumentResize(); | |||||
} | } | ||||
/** | /** | ||||
@@ -7,12 +7,14 @@ | |||||
(function(document, videojs, pannellum) { | (function(document, videojs, pannellum) { | ||||
'use strict'; | 'use strict'; | ||||
videojs.plugin('pannellum', function(config) { | |||||
var registerPlugin = videojs.registerPlugin || videojs.plugin; // Use registerPlugin for Video.js >= 6 | |||||
registerPlugin('pannellum', function(config) { | |||||
// Create Pannellum instance | // Create Pannellum instance | ||||
var player = this; | var player = this; | ||||
var container = player.el(); | var container = player.el(); | ||||
var vid = container.getElementsByTagName('video')[0], | var vid = container.getElementsByTagName('video')[0], | ||||
pnlmContainer = document.createElement('div'); | pnlmContainer = document.createElement('div'); | ||||
pnlmContainer.style.zIndex = '0'; | |||||
config = config || {}; | config = config || {}; | ||||
config.type = 'equirectangular'; | config.type = 'equirectangular'; | ||||
config.dynamic = true; | config.dynamic = true; | ||||