Merge pull request #328 from Tour-360/v2.2.2

V2.2.2

bower.json

@@ -1,7 +1,7 @@
 {
     "name": "tour-player",
     "dependencies": {
-        "threejs": "r93"
+        "threejs": "r101"
     },
     "overrides": {
         "threejs": {

example/index.html

@@ -28,7 +28,7 @@
             <div class="popups">
                 <div class="close"></div>
                 <div class="popup" id="lana-del-rey-born-to-die">
-                    <img src="http://cdn1.umg3.net/89/files/2014/06/Lana-Del-Rey-Born-To-Die-Paradise-Edition-1500x1500-2012.png" alt="Lana Del Rey — Born To Die: Paradise Edition">
+                    <img data-src="http://cdn1.umg3.net/89/files/2014/06/Lana-Del-Rey-Born-To-Die-Paradise-Edition-1500x1500-2012.png" alt="Lana Del Rey — Born To Die: Paradise Edition">
                     <div class="content">
                         <h1>Lana Del Rey — Born To Die: Paradise Edition</h1>
                         <p>Другой альбом: <a href="#lana-del-rey-ultraviolence">Lana Del Rey — Ultraviolence</a></p>
@@ -53,7 +53,7 @@ <h1>Lana Del Rey — Born To Die: Paradise Edition</h1>
                     </div>
                 </div>
                 <div class="popup" id="lana-del-rey-ultraviolence">
-                    <img src="http://cdn1.umg3.net/89/files/2014/06/Lana-Del-Rey-Ultraviolence-2014-1500x1500.png" width="100" alt="Lana Del Rey — Ultraviolence">
+                    <img data-src="http://cdn1.umg3.net/89/files/2014/06/Lana-Del-Rey-Ultraviolence-2014-1500x1500.png" width="100" alt="Lana Del Rey — Ultraviolence">
                     <div class="content">
                         <h1>Lana Del Rey — Ultraviolence</h1>
                         <p>Другой альбом: <a href="#lana-del-rey-born-to-die">Lana Del Rey — Born To Die: Paradise Edition</a></p>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tour-player",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "",
   "repository": {
     "type": "git",

src/css/background-image.styl

@@ -1,5 +1,11 @@
+.background-image__wrapper
+    position absolute
+    overflow hidden
+    height 100%
+    width 100%
+
 #background-image
     position absolute
     z-index -1
     width 100%
-    height 100%
+    height 100%

src/css/control-panel.styl

@@ -2,22 +2,25 @@ $btn-size = 36px
 $progress-bar-height = 3px
 
 #control-panel
+    pointer-events none
     position absolute
     width 100%
-    height 0
     text-align center
     z-index 1
     opacity 0
     left 0
-    bottom - $btn-size
+    bottom 18px
     transition all.4s ease
     user-select none
     touch-action none
+    overflow hidden
 
     &.visible
-        bottom 18px + $btn-size
         opacity 1
 
+        .panel
+            pointer-events all
+
     .panel
         position relative
         display inline-block
@@ -100,5 +103,6 @@ body.fullscreen
 
 @supports (backdrop-filter: none)
     #control-panel
-        background rgba(100%, 100%, 100%, .6)
-        backdrop-filter brightness(1.5) blur(40px)
+        .panel
+            background rgba(255, 255, 255, .8)
+            backdrop-filter brightness(1.5) blur(40px)

src/css/gallery.styl

@@ -51,6 +51,20 @@
         will-change scroll-position
         -webkit-overflow-scrolling touch
 
+        &::-webkit-scrollbar
+            width 8px
+            background rgba(black, .5)
+
+        &::-webkit-scrollbar-thumb
+            background rgba(white, .8)
+            width 4px
+            margin 3px
+            border-radius 4px
+            transform scale(0.1)
+
+            &:hover
+                background white
+
         li
             box-sizing border-box
             background-size 100%

src/css/layout.styl

@@ -3,7 +3,7 @@ body, html
     overflow hidden
 
 body
-    position fixed
+    position relative
     width 100%
     margin 0
     overflow hidden

src/css/markers.styl

@@ -2,8 +2,8 @@ $marker-size = 32px
 $arrow-size = 8px
 
 #markers
-    overflow hidden
     position absolute
+    overflow hidden
     pointer-events none
     width 100%
     height 100%

src/css/mouse-menu.styl

@@ -42,3 +42,8 @@
         margin 5px 1px
         border none
         border-bottom 1px solid $light-gray
+
+@supports (backdrop-filter: none)
+    #mouse-menu
+        background rgba(255, 255, 255, .8)
+        backdrop-filter brightness(1.5) blur(40px)

src/css/transition.styl

@@ -1,11 +1,22 @@
+#renderer
+  will-change opacity
+
+#background-image
+  will-change transform
+
 body.transition
     #renderer,
     #markers
         opacity 0
 
 body:not(.transition)
     #renderer
-        transition opacity.3s linear
+        transition opacity .4s ease
+        transition-delay .1s
+
+    #background-image
+        transition transform .4s ease
+        transform scale(1.2)
 
 #markers
-    transition opacity.3s linear
+    transition opacity.4s ease

src/js/Tools/init.js

@@ -3,10 +3,6 @@
 Tools.init = function() {
     this.setPoint();
     window.addEventListener('keydown', function(event) {
-        if (event.keyCode == 13) { //Enter
-            Tools.copyMarker();
-        }
-
         switch (event.keyCode) {
             case 13:  Tools.copyMarker(); break;  // Enter
             case 49:  Tools.copyLon(); break;     // 1

src/js/Tour.js

@@ -1,4 +1,4 @@
 var Tour = {};
 
 // Версия плеера
-Tour.version = [2, 2, 0];
+Tour.version = [2, 2, 2];

src/js/Tour/Video.js

@@ -43,7 +43,7 @@ Tour.Video = function(options) {
     this.texture.needsUpdate = true;
     this.needsUpdate = false;
 
-    this.material = new THREE.MeshBasicMaterial({map: this.texture, overdraw: 0, transparent: true});
+    this.material = new THREE.MeshBasicMaterial({map: this.texture, transparent: true});
 };
 
 Tour.Video.prototype.draw = function() {

src/js/Tour/addEventListeners.js

@@ -1,15 +1,16 @@
 /* globals Tour*/
 
 Tour.addEventListeners = function() {
-    this.renderer.domElement.addEventListener('dblclick',  Tour.controls.fullscreen.bind(this));
-    this.renderer.domElement.addEventListener('mousedown', Tour.mouseEvents.down.bind(this));
-    this.renderer.domElement.addEventListener('touchstart', Tour.mouseEvents.down.bind(this));
+    var passive = { passive: true };
+    this.renderer.domElement.addEventListener('dblclick',  Tour.controls.fullscreen.bind(this), passive);
+    this.renderer.domElement.addEventListener('mousedown', Tour.mouseEvents.down.bind(this), passive);
+    this.renderer.domElement.addEventListener('touchstart', Tour.mouseEvents.down.bind(this), passive);
     this.renderer.domElement.addEventListener('mousewheel', Tour.mouseEvents.wheel.bind(this));
     this.renderer.domElement.addEventListener('wheel', Tour.mouseEvents.wheel.bind(this));
-    document.addEventListener('mousemove', Tour.mouseEvents.move.bind(this));
-    document.addEventListener('touchmove', Tour.mouseEvents.move.bind(this));
-    document.addEventListener('mouseup', Tour.mouseEvents.up.bind(this));
-    document.addEventListener('touchend', Tour.mouseEvents.up.bind(this));
+    document.addEventListener('mousemove', Tour.mouseEvents.move.bind(this), passive);
+    document.addEventListener('touchmove', Tour.mouseEvents.move.bind(this), passive);
+    document.addEventListener('mouseup', Tour.mouseEvents.up.bind(this), passive);
+    document.addEventListener('touchend', Tour.mouseEvents.up.bind(this), passive);
 
     document.addEventListener('fullscreenchange', Tour.fullscreenEvents.change);
     document.addEventListener('webkitfullscreenchange', Tour.fullscreenEvents.change);

src/js/Tour/animate.js

@@ -27,7 +27,7 @@ Tour.animate = function() {
     target.y = Math.cos(phi);
     target.z = Math.sin(phi) * Math.sin(theta);
 
-    if (this.orientationControls.controls.enabled) {
+    if (window.isSecureContext && this.orientationControls.controls.enabled) {
         this.orientationControls.controls.update();
     } else {
         this.camera.lookAt(target);

src/js/Tour/backgroundImage.js

@@ -3,9 +3,14 @@
 Tour.backgroundImage = {};
 
 Tour.backgroundImage.init = function() {
+    var wrapper = document.createElement('div');
+    wrapper.className = 'background-image__wrapper';
+
     this.domElement = new Image();
     this.domElement.id = 'background-image';
-    document.body.appendChild(this.domElement);
+
+    wrapper.appendChild(this.domElement);
+    document.body.appendChild(wrapper);
 };
 
 Tour.backgroundImage.set = function(url, color, callback) {

src/js/Tour/controls.js

@@ -9,6 +9,18 @@ Tour.controls = {
         window.history.forward();
     },
 
+    next: function() {
+        Tour.view.go(1);
+    },
+
+    previous: function() {
+        Tour.view.go(-1);
+    },
+
+    opennewtab: function() {
+        window.open(location.href,'_blank');
+    },
+
     fullscreen: function() {
         var e;
         if (document.fullscreenElement              ||
@@ -123,8 +135,10 @@ Tour.controls = {
     },
 
     toggleControls: function() {
-        var ctrl = Tour.orientationControls.controls;
-        ctrl.enabled ? ctrl.disconnect() : ctrl.connect();
+        if (window.isSecureContext) {
+            var ctrl = Tour.orientationControls.controls;
+            ctrl.enabled ? ctrl.disconnect() : ctrl.connect();
+        }
     },
 
     getCode: function() {

src/js/Tour/createScene.js

@@ -34,7 +34,7 @@ Tour.createScene = function() {
         var geometry = new THREE.BoxGeometry(-100, 100, 100, segments, segments, segments);
         var materials = [];
         for (var i = 0; i < 6; i++) {
-            materials.push(new THREE.MeshBasicMaterial({map: new THREE.Texture(), overdraw: true}));
+            materials.push(new THREE.MeshBasicMaterial({map: new THREE.Texture()}));
         }
         this.mesh = new THREE.Mesh(geometry, materials);
     }

src/js/Tour/dictionary.js

@@ -99,6 +99,13 @@ Tour.dictionary = {
         'de': 'Besuch',
         'zh': '访问网站'
     },
+    'mousemenu.newtab': {
+        'en': 'Open tour in new tabe',
+        'ru': 'Открыть тур в новой вкладке',
+        'uk': 'Відкрити тур в новій вкладці',
+        'de': 'Tour in neuem Tab öffnen',
+        'zh': '在新标签中打开游览'
+    },
 
     'key.left': {
         'en': 'Left Arrow',

src/js/Tour/keyEvents.js

@@ -19,6 +19,8 @@ Tour.keyEvents.down = function(event) {
         case 17: case 189: this.controls.zoomOut(); break;         // - Ctrl
         case 72: case 77:  this.controls.hideMenu(); break;        // H M
         case 82: case 32:  this.controls.autoRotate(); break;      // R Space
+        case 190:          this.controls.next(); break;            // >
+        case 188:          this.controls.previous(); break;        // <
         case 112:          this.controls.help(event); break;       // F1
         case 113:          this.controls.editor(); break;          // F2
         case 27:           this.controls.closeWindow(); break;     // Esc

src/js/Tour/lazyload.js

@@ -0,0 +1,25 @@
+document.addEventListener('DOMContentLoaded', function() {
+    var lazyImages = [].slice.call(document.querySelectorAll('img[data-src]'));
+
+    if ('IntersectionObserver' in window) {
+        var lazyImageObserver = new IntersectionObserver(function(entries) {
+            entries.forEach(function(entry) {
+                if (entry.isIntersecting) {
+                    var lazyImage = entry.target;
+                    lazyImage.src = lazyImage.dataset.src;
+                    delete lazyImage.dataset.src;
+                    lazyImageObserver.unobserve(lazyImage);
+                }
+            });
+        });
+
+        lazyImages.forEach(function(lazyImage) {
+            lazyImageObserver.observe(lazyImage);
+        });
+    } else {
+        lazyImages.forEach(function(lazyImage) {
+            lazyImage.src = lazyImage.dataset.src;
+            delete lazyImage.dataset.src;
+        });
+    }
+});

src/js/Tour/mouseEvents.js

@@ -20,7 +20,10 @@ Tour.mouseEvents._touches2mouse = function(event) {
     if (event.touches  && event.touches.length) {
         event.clientX = event.touches[0].pageX * window.devicePixelRatio;
         event.clientY = event.touches[0].pageY * window.devicePixelRatio;
-        event.preventDefault();
+
+        if (event.defaultPrevented) {
+            event.preventDefault();
+        }
     }
 };
 
@@ -39,10 +42,13 @@ Tour.mouseEvents.wheel = function(event) {
     // }
     if (this.options.scaleControl && event.composed && event.deltaY) {
         this.controls.autoRotate(false);
-        event.preventDefault();
+        if (event.defaultPrevented) {
+            event.preventDefault();
+        }
         this.view.fov.move(event.deltaY * (event.deltaMode ? 10 / 3 : 0.1));
 
         clearTimeout(this.mouseEvents.zoomTimeout);
+
         this.mouseEvents.zoomTimeout = setTimeout(function() {
             Tour.history.set();
         }, 300);
@@ -78,6 +84,11 @@ Tour.mouseEvents.move = function(event) {
 
 Tour.mouseEvents.up = function(event) {
     if (this.mouseEvents.drag) {
+        var alpha = Date.now() - this.mouseEvents.lastclick;
+        if (this.mouseEvents.lastclick && alpha > 30 && alpha < 300) {
+            this.controls.fullscreen();
+        }
+        this.mouseEvents.lastclick = Date.now();
         this.mouseEvents._touches2mouse(event);
         this.mouseEvents._setCinetic(event);
 
@@ -87,5 +98,6 @@ Tour.mouseEvents.up = function(event) {
         this.history.set();
     }
 
+    this.mouseEvents.cineticLon = this.mouseEvents.cineticLat = 0;
     this.mouseEvents.drag = false;
 };

src/js/Tour/orientationControls.js

@@ -2,9 +2,11 @@
 
 Tour.orientationControls = {
     init: function() {
-        this.controls = new THREE.DeviceOrientationControls(Tour.camera);
-        this.controls.disconnect();
-        window.addEventListener('deviceorientation', this.detectDevice);
+        if (window.isSecureContext) {
+            this.controls = new THREE.DeviceOrientationControls(Tour.camera);
+            this.controls.disconnect();
+            window.addEventListener('deviceorientation', this.detectDevice);
+        }
     },
     detectDevice: function(event) {
         if (event.alpha) {

src/js/Tour/render.js

@@ -9,7 +9,9 @@ Tour.render = function() {
         this.previousCamera.w != this.camera.fov
     ) {
         this.renderer.render(this.scene, this.camera);
-        UI.controlPanel.setOrientation(Math.floor(THREE.Math.radToDeg(Tour.camera.rotation.z)));
+        if (window.isSecureContext) {
+            UI.controlPanel.setOrientation(Math.floor(THREE.Math.radToDeg(Tour.camera.rotation.z)));
+        }
         if (this.markers) {
             this.markers.forEach(function(marker) {
                 marker.draw();