Release 3.2.4

.sass-lint.yml

@@ -0,0 +1,13 @@
+rules:
+    property-sort-order: [0]
+    force-pseudo-nesting: [0]
+    force-element-nesting: [0]
+    force-attribute-nesting: [0]
+    no-important: [0]
+    no-qualifying-elements: [0]
+    no-transition-all: [0]
+    shorthand-values: [1, {allowed-shorthands: [1, 2, 4]}]
+
+files:
+  ignore:
+    - 'src/scss/_mixins.scss'

.travis.yml

@@ -2,8 +2,6 @@ language: node_js
 node_js:
   - "5"
 before_install:
-  - gem install sass
-  - gem install scss_lint -v 0.49.0
   - npm install -g grunt-cli
   - npm install -g bower
 before_script:

Gruntfile.js

@@ -1,7 +1,7 @@
 module.exports = function(grunt) {
   require('time-grunt')(grunt);
   require('jit-grunt')(grunt, {
-    scsslint: 'grunt-scss-lint',
+    sasslint: 'grunt-sass-lint',
     usebanner: 'grunt-banner'
   });
 
@@ -61,7 +61,7 @@ module.exports = function(grunt) {
     wrap: {
       dist: {
         src: 'dist/photo-sphere-viewer.js',
-        dest: '',
+        dest: 'dist/photo-sphere-viewer.js',
         options: {
           separator: '',
           wrapper: function() {
@@ -98,8 +98,8 @@ module.exports = function(grunt) {
      */
     sass: {
       options: {
-        sourcemap: 'none',
-        style: 'expanded'
+        sourceMap: false,
+        outputStyle: 'expanded'
       },
       lib: {
         src: 'src/scss/photo-sphere-viewer.scss',
@@ -150,10 +150,9 @@ module.exports = function(grunt) {
     /**
      * SCSSLint test on src files
      */
-    scsslint: {
+    sasslint: {
       options: {
-        colorizeOutput: true,
-        config: '.scss-lint.yml'
+        configFile: '.sass-lint.yml'
       },
       lib: {
         src: ['src/scss/**/*.scss']
@@ -297,7 +296,7 @@ module.exports = function(grunt) {
   grunt.registerTask('test', [
     'jshint',
     'jscs',
-    'scsslint',
+    'sasslint',
     'mochaTest'
   ]);
 

README.md

@@ -2,6 +2,7 @@
 
 [![Bower version](https://img.shields.io/bower/v/Photo-Sphere-Viewer.svg?style=flat-square)](http://photo-sphere-viewer.js.org)
 [![NPM version](https://img.shields.io/npm/v/photo-sphere-viewer.svg?style=flat-square)](https://www.npmjs.com/package/photo-sphere-viewer)
+[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/photo-sphere-viewer/badge)](https://www.jsdelivr.com/package/npm/photo-sphere-viewer)
 [![Build Status](https://img.shields.io/travis/mistic100/Photo-Sphere-Viewer/master.svg?style=flat-square)](https://travis-ci.org/mistic100/Photo-Sphere-Viewer)
 [![Dependencies Status](https://david-dm.org/mistic100/Photo-Sphere-Viewer/status.svg?style=flat-square)](https://david-dm.org/mistic100/Photo-Sphere-Viewer)
 
@@ -44,10 +45,8 @@ Photo Sphere Viewer is available on [jsDelivr](https://cdn.jsdelivr.net/npm/phot
 
 #### Prerequisites
  * NodeJS + NPM: `apt-get install nodejs-legacy npm`
- * Ruby Dev: `apt-get install ruby-dev`
  * Grunt CLI: `npm install -g grunt-cli`
  * Bower: `npm install -g bower`
- * SASS: `gem install sass`
 
 #### Run
 

dist/photo-sphere-viewer.css

@@ -1,7 +1,7 @@
 /*!
- * Photo Sphere Viewer 3.2.3
+ * Photo Sphere Viewer 3.2.4
  * Copyright (c) 2014-2015 Jérémy Heleine
- * Copyright (c) 2015-2017 Damien "Mistic" Sorel
+ * Copyright (c) 2015-2018 Damien "Mistic" Sorel
  * Licensed under MIT (http://opensource.org/licenses/MIT)
  */
 .psv-container {
@@ -10,7 +10,7 @@
   margin: 0;
   padding: 0;
   position: relative;
-  background: radial-gradient(#ffffff, #fdfdfd 16%, #fbfbfb 33%, #f8f8f8 49%, #efefef 66%, #dfdfdf 82%, #bfbfbf 100%);
+  background: radial-gradient(#fff 0%, #fdfdfd 16%, #fbfbfb 33%, #f8f8f8 49%, #efefef 66%, #dfdfdf 82%, #bfbfbf 100%);
   overflow: hidden;
 }
 
@@ -289,7 +289,7 @@
   font: 24px sans-serif;
   margin: 1em 0;
   text-align: center;
-  text-shadow: 2px 1px #000000;
+  text-shadow: 2px 1px #000;
 }
 
 .psv-markers-list {
@@ -414,7 +414,7 @@
   left: 4px;
   width: 15px;
   height: 1px;
-  background-color: #ffffff;
+  background-color: #fff;
   transition: .2s ease-in-out;
   transition-property: width, left, transform;
 }
@@ -452,7 +452,7 @@
   margin-top: -14.5px;
   width: 1px;
   height: 1px;
-  box-shadow: 1px 0 #ffffff, 3px 0px #ffffff, 5px 0px #ffffff, 1px 2px #ffffff, 3px 2px #ffffff, 5px 2px #ffffff, 1px 4px #ffffff, 3px 4px #ffffff, 5px 4px #ffffff, 1px 6px #ffffff, 3px 6px #ffffff, 5px 6px #ffffff, 1px 8px #ffffff, 3px 8px #ffffff, 5px 8px #ffffff, 1px 10px #ffffff, 3px 10px #ffffff, 5px 10px #ffffff, 1px 12px #ffffff, 3px 12px #ffffff, 5px 12px #ffffff, 1px 14px #ffffff, 3px 14px #ffffff, 5px 14px #ffffff, 1px 16px #ffffff, 3px 16px #ffffff, 5px 16px #ffffff, 1px 18px #ffffff, 3px 18px #ffffff, 5px 18px #ffffff, 1px 20px #ffffff, 3px 20px #ffffff, 5px 20px #ffffff, 1px 22px #ffffff, 3px 22px #ffffff, 5px 22px #ffffff, 1px 24px #ffffff, 3px 24px #ffffff, 5px 24px #ffffff, 1px 26px #ffffff, 3px 26px #ffffff, 5px 26px #ffffff, 1px 28px #ffffff, 3px 28px #ffffff, 5px 28px #ffffff;
+  box-shadow: 1px 0 #fff, 3px 0px #fff, 5px 0px #fff, 1px 2px #fff, 3px 2px #fff, 5px 2px #fff, 1px 4px #fff, 3px 4px #fff, 5px 4px #fff, 1px 6px #fff, 3px 6px #fff, 5px 6px #fff, 1px 8px #fff, 3px 8px #fff, 5px 8px #fff, 1px 10px #fff, 3px 10px #fff, 5px 10px #fff, 1px 12px #fff, 3px 12px #fff, 5px 12px #fff, 1px 14px #fff, 3px 14px #fff, 5px 14px #fff, 1px 16px #fff, 3px 16px #fff, 5px 16px #fff, 1px 18px #fff, 3px 18px #fff, 5px 18px #fff, 1px 20px #fff, 3px 20px #fff, 5px 20px #fff, 1px 22px #fff, 3px 22px #fff, 5px 22px #fff, 1px 24px #fff, 3px 24px #fff, 5px 24px #fff, 1px 26px #fff, 3px 26px #fff, 5px 26px #fff, 1px 28px #fff, 3px 28px #fff, 5px 28px #fff;
   background: transparent;
 }
 .psv-panel-content {
@@ -480,7 +480,8 @@
   opacity: 1;
   transition-duration: .2s;
 }
-.psv-panel--open .psv-panel-close-button, .psv-panel--open .psv-panel-resizer {
+.psv-panel--open .psv-panel-close-button,
+.psv-panel--open .psv-panel-resizer {
   display: block;
 }
 
@@ -500,7 +501,7 @@
 .psv-tooltip-content {
   color: white;
   font: 14px sans-serif;
-  text-shadow: 0 1px #000000;
+  text-shadow: 0 1px #000;
 }
 .psv-tooltip-arrow {
   position: absolute;

dist/photo-sphere-viewer.js

@@ -1,15 +1,15 @@
 /*!
- * Photo Sphere Viewer 3.2.3
+ * Photo Sphere Viewer 3.2.4
  * Copyright (c) 2014-2015 Jérémy Heleine
- * Copyright (c) 2015-2017 Damien "Mistic" Sorel
+ * Copyright (c) 2015-2018 Damien "Mistic" Sorel
  * Licensed under MIT (http://opensource.org/licenses/MIT)
  */
 (function(root, factory) {
   if (typeof define === 'function' && define.amd) {
-    define(['three', 'D.js', 'uevent', 'doT'], factory);
+    define(['three', 'd.js', 'uevent', 'dot/doT'], factory);
   }
   else if (typeof module === 'object' && module.exports) {
-    module.exports = factory(require('three'), require('d.js'), require('uevent'), require('dot'));
+    module.exports = factory(require('three'), require('d.js'), require('uevent'), require('dot/doT'));
   }
   else {
     root.PhotoSphereViewer = factory(root.THREE, root.D, root.uEvent, root.doT);
@@ -31,6 +31,13 @@
  * @property {int} height
  */
 
+/**
+ * @typedef {Object} PhotoSphereViewer.CssSize
+ * @summary Object defining a size in CSS (px, % or auto)
+ * @property {string} [width]
+ * @property {string} [height]
+ */
+
 /**
  * @typedef {Object} PhotoSphereViewer.Position
  * @summary Object defining a spherical position
@@ -179,17 +186,18 @@ function PhotoSphereViewer(options) {
   this.config.default_long = PSVUtils.parseAngle(this.config.default_long);
 
   // parse default_lat, is between -PI/2 and PI/2
-  this.config.default_lat = PSVUtils.parseAngle(this.config.default_lat, -Math.PI);
-  this.config.default_lat = PSVUtils.bound(this.config.default_lat, -PSVUtils.HalfPI, PSVUtils.HalfPI);
+  this.config.default_lat = PSVUtils.parseAngle(this.config.default_lat, true);
+
+  // parse panorama_roll, is between -PI/2 and PI/2
+  this.config.panorama_roll = PSVUtils.parseAngle(this.config.panorama_roll, true);
 
   // default anim_lat is default_lat
   if (this.config.anim_lat === null) {
     this.config.anim_lat = this.config.default_lat;
   }
   // parse anim_lat, is between -PI/2 and PI/2
   else {
-    this.config.anim_lat = PSVUtils.parseAngle(this.config.anim_lat, -Math.PI);
-    this.config.anim_lat = PSVUtils.bound(this.config.anim_lat, -PSVUtils.HalfPI, PSVUtils.HalfPI);
+    this.config.anim_lat = PSVUtils.parseAngle(this.config.anim_lat, true);
   }
 
   // parse longitude_range, between 0 and 2*PI
@@ -202,8 +210,7 @@ function PhotoSphereViewer(options) {
   // parse latitude_range, between -PI/2 and PI/2
   if (this.config.latitude_range) {
     this.config.latitude_range = this.config.latitude_range.map(function(angle) {
-      angle = PSVUtils.parseAngle(angle, -Math.PI);
-      return PSVUtils.bound(angle, -PSVUtils.HalfPI, PSVUtils.HalfPI);
+      return PSVUtils.parseAngle(angle, true);
     });
   }
 
@@ -1018,6 +1025,7 @@ PhotoSphereViewer.prototype._createSphere = function() {
 
   this.mesh = new THREE.Mesh(geometry, material);
   this.mesh.scale.x = -1;
+  this.mesh.rotation.z = this.config.panorama_roll;
 
   this.scene.add(this.mesh);
 };
@@ -1348,6 +1356,7 @@ PhotoSphereViewer.DEFAULTS = {
   default_fov: null,
   default_long: 0,
   default_lat: 0,
+  panorama_roll: 0,
   longitude_range: null,
   latitude_range: null,
   move_speed: 1,
@@ -2411,6 +2420,21 @@ PhotoSphereViewer.prototype.zoomOut = function() {
   }
 };
 
+/**
+ * @summary Resizes the viewer
+ * @param {PhotoSphereViewer.CssSize} size
+ */
+PhotoSphereViewer.prototype.resize = function(size) {
+  if (size.width) {
+    this.container.style.width = size.width;
+  }
+  if (size.height) {
+    this.container.style.height = size.height;
+  }
+
+  this._onResize();
+};
+
 /**
  * @summary Enters or exits the fullscreen mode
  */
@@ -2660,7 +2684,7 @@ PhotoSphereViewer.prototype.cleanPosition = function(position) {
   }
 
   position.longitude = PSVUtils.parseAngle(position.longitude);
-  position.latitude = PSVUtils.bound(PSVUtils.parseAngle(position.latitude, -Math.PI), -PSVUtils.HalfPI, PSVUtils.HalfPI);
+  position.latitude = PSVUtils.parseAngle(position.latitude, true);
 };
 
 /**
@@ -2707,8 +2731,8 @@ PhotoSphereViewer.prototype.applyRanges = function(position) {
     range = PSVUtils.clone(this.config.latitude_range);
     offset = THREE.Math.degToRad(this.prop.vFov) / 2;
 
-    range[0] = PSVUtils.parseAngle(Math.min(range[0] + offset, range[1]), -Math.PI);
-    range[1] = PSVUtils.parseAngle(Math.max(range[1] - offset, range[0]), -Math.PI);
+    range[0] = PSVUtils.parseAngle(Math.min(range[0] + offset, range[1]), true);
+    range[1] = PSVUtils.parseAngle(Math.max(range[1] - offset, range[0]), true);
 
     if (position.latitude < range[0]) {
       position.latitude = range[0];
@@ -2867,7 +2891,7 @@ function PSVHUD(psv) {
   this.prop = {
     panelOpened: false,
     panelOpening: false,
-    markersButton: this.psv.navbar.getNavbarButton('markers')
+    markersButton: this.psv.navbar.getNavbarButton('markers', true)
   };
 
   this.create();
@@ -3801,9 +3825,10 @@ PSVNavBar.prototype.destroy = function() {
 /**
  * @summary Returns a button by its identifier
  * @param {string} id
+ * @param {boolean} [silent=false]
  * @returns {module:components/buttons.PSVNavBarButton}
  */
-PSVNavBar.prototype.getNavbarButton = function(id) {
+PSVNavBar.prototype.getNavbarButton = function(id, silent) {
   var button = null;
 
   this.items.some(function(item) {
@@ -3813,7 +3838,7 @@ PSVNavBar.prototype.getNavbarButton = function(id) {
     }
   });
 
-  if (!button) {
+  if (!button && !silent) {
     console.warn('PhotoSphereViewer: button "' + id + '" not found in the navbar.');
   }
 
@@ -5663,7 +5688,7 @@ PSVMarker.prototype._updatePolygon = function() {
     this.polygon_rad = this.polygon_rad.map(function(coord) {
       return [
         PSVUtils.parseAngle(coord[0]),
-        PSVUtils.bound(PSVUtils.parseAngle(coord[1], -Math.PI), -PSVUtils.HalfPI, PSVUtils.HalfPI)
+        PSVUtils.parseAngle(coord[1], true)
       ];
     });
   }
@@ -6122,12 +6147,12 @@ PSVUtils.parseSpeed = function(speed) {
 /**
  * @summary Parses an angle value in radians or degrees and returns a normalized value in radians
  * @param {string|number} angle - eg: 3.14, 3.14rad, 180deg
- * @param {float|boolean} [reference=0] - base value for normalization, false to disable
+ * @param {boolean} [zeroCenter=false] - normalize between -Pi/2 - Pi/2 instead of 0 - 2*Pi
  * @returns {float}
  * @throws {PSVError} when the angle cannot be parsed
  */
-PSVUtils.parseAngle = function(angle, reference) {
-  if (typeof angle == 'string') {
+PSVUtils.parseAngle = function(angle, zeroCenter) {
+  if (typeof angle === 'string') {
     var match = angle.toLowerCase().trim().match(/^(-?[0-9]+(?:\.[0-9]*)?)(.*)$/);
 
     if (!match) {
@@ -6151,23 +6176,18 @@ PSVUtils.parseAngle = function(angle, reference) {
           throw new PSVError('unknown angle unit "' + unit + '"');
       }
     }
-  }
-
-  if (reference !== false) {
-    if (reference === undefined) {
-      reference = 0;
+    else {
+      angle = value;
     }
+  }
 
-    angle = (angle - reference) % PSVUtils.TwoPI;
-
-    if (angle < 0) {
-      angle = PSVUtils.TwoPI + angle;
-    }
+  angle = (zeroCenter ? angle + Math.PI : angle) % PSVUtils.TwoPI;
 
-    angle += reference;
+  if (angle < 0) {
+    angle = PSVUtils.TwoPI + angle;
   }
 
-  return angle;
+  return zeroCenter ? PSVUtils.bound(angle - Math.PI, -PSVUtils.HalfPI, PSVUtils.HalfPI) : angle;
 };
 
 /**