From fdbbe679dbaff7a94f0eefb18c310df6cd3f3bad Mon Sep 17 00:00:00 2001
From: Denis Borodin <borodindk@gmail.com>
Date: Fri, 26 Oct 2018 12:39:56 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE=D1=82?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=BD=D0=B0=20Gallery,=20=D0=B8=D1=81=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=BE=D1=88=D0=B8=D0=B1?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D0=BF=D1=80=D0=B8=20=D0=B8=D0=B7=D0=BC=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D0=B8=D0=B8=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5?=
 =?UTF-8?q?=D1=80=D0=B0=20=D0=BE=D0=BA=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/index.html         |  3 ++-
 example/manifest.json      |  8 ++++----
 src/css/gallery.styl       |  2 +-
 src/js/Tour.js             |  2 +-
 src/js/Tour/getPanorama.js | 10 ++++++++++
 src/js/Tour/history.js     |  2 +-
 src/js/Tour/init.js        |  2 +-
 src/js/Tour/render.js      |  2 +-
 src/js/Tour/resize.js      |  2 +-
 src/js/Tour/setGallery.js  | 35 +++++++++++++----------------------
 src/js/Tour/setMarkers.js  |  6 ++++--
 src/js/Tour/setPanorama.js |  9 +++++----
 src/js/Tour/view.js        | 19 ++++++++++++-------
 src/js/UI/Gallery.js       |  8 +++++---
 14 files changed, 61 insertions(+), 49 deletions(-)
 create mode 100644 src/js/Tour/getPanorama.js

diff --git a/example/index.html b/example/index.html
index 9de66c5..8e45b36 100644
--- a/example/index.html
+++ b/example/index.html
@@ -65,7 +65,8 @@ <h1>Lana Del Rey — Ultraviolence</h1>
         <script>
         Tour.init(false, {
             controlPanel: true,
-            gallery: true
+            gallery: true,
+            galleryVisible: false
         });
         Tour.on('load', function(data) {
             this.controls.autoRotate()
diff --git a/example/manifest.json b/example/manifest.json
index 4f3296a..b8aecd8 100644
--- a/example/manifest.json
+++ b/example/manifest.json
@@ -31,7 +31,7 @@
 					"lon": -90,
 					"lat": 16,
 					"icon": "info",
-					"title": "<a href=\"https://ru.wikipedia.org/wiki/Linkin_Park\" target=\"_blank\">Linkin Park</a> — A Thousand Suns", 
+					"title": "<a href=\"https://ru.wikipedia.org/wiki/Linkin_Park\" target=\"_blank\">Linkin Park</a> — A Thousand Suns",
 					"action": {
 						"type": "url",
 						"href": "https://ru.wikipedia.org/wiki/Linkin_Park"
@@ -65,7 +65,7 @@
 					"lon": 280,
 					"lat": 13.73,
 					"icon": "info",
-					"title": "Lana Del Rey — Born To Die: Paradise Edition", 
+					"title": "Lana Del Rey — Born To Die: Paradise Edition",
 					"action": {
 						"type": "popup",
 						"id": "lana-del-rey-born-to-die"
@@ -74,7 +74,7 @@
 					"lon": 292,
 					"lat": 3,
 					"icon": "info",
-					"title": "Lana Del Rey — Ultraviolence", 
+					"title": "Lana Del Rey — Ultraviolence",
 					"action": {
 						"type": "popup",
 						"id": "lana-del-rey-ultraviolence"
@@ -108,4 +108,4 @@
 			]
 		}
 	]
-}
\ No newline at end of file
+}
diff --git a/src/css/gallery.styl b/src/css/gallery.styl
index 9f46e21..743a4e2 100644
--- a/src/css/gallery.styl
+++ b/src/css/gallery.styl
@@ -79,7 +79,7 @@
                 margin 0
                 background linear-gradient(to top,rgba(0,0,0,0.5) 40%, transparent)
                 color white
-                padding 2em .8em .5em
+                padding 24px 10px 8px
                 white-space nowrap
                 overflow hidden
                 text-overflow ellipsis
diff --git a/src/js/Tour.js b/src/js/Tour.js
index 11abae9..42065ef 100644
--- a/src/js/Tour.js
+++ b/src/js/Tour.js
@@ -1,4 +1,4 @@
 var Tour = {};
 
 // Версия плеера
-Tour.version = [0, 5, 0];
+Tour.version = [2, 0, 0];
diff --git a/src/js/Tour/getPanorama.js b/src/js/Tour/getPanorama.js
new file mode 100644
index 0000000..b804ec7
--- /dev/null
+++ b/src/js/Tour/getPanorama.js
@@ -0,0 +1,10 @@
+/* globals Tour */
+
+/**
+ * Простая утилита для получения конкретной панорамы из масива
+ */
+Tour.getPanorama = function(key) {
+    return (Tour.data.panorams || []).filter(function(pano) {
+        return pano.id == (key || 0);
+    })[0] || Tour.data.panorams[0];
+};
diff --git a/src/js/Tour/history.js b/src/js/Tour/history.js
index b54e8a2..25d92da 100644
--- a/src/js/Tour/history.js
+++ b/src/js/Tour/history.js
@@ -9,7 +9,7 @@ Tour.history = {};
  */
 Tour.history.set = function(push) {
     var title = [Lang.translate(Tour.data.title) || Lang.get('virtual-tour'),
-    Lang.translate(Tour.data.panorams[Tour.view.id || 0].title)];
+    Lang.translate(Tour.getPanorama(Tour.view.id).title)];
 
     title = title.join(title[1] ? ' – ' : '');
 
diff --git a/src/js/Tour/init.js b/src/js/Tour/init.js
index 69fff48..2dfcf6a 100644
--- a/src/js/Tour/init.js
+++ b/src/js/Tour/init.js
@@ -18,7 +18,7 @@ Tour.init = function(data, options) {
         var query = Tour.query.get();
         query.id = query.id || data.start || 0;
         this.view.set(query, true);
-        this.setGallery(data);
+        this.setGallery(data, options.galleryVisible);
         this.addEventListeners();
         this.animate();
     }.bind(this));
diff --git a/src/js/Tour/render.js b/src/js/Tour/render.js
index 5cb5172..5809309 100644
--- a/src/js/Tour/render.js
+++ b/src/js/Tour/render.js
@@ -18,7 +18,7 @@ Tour.render = function() {
         Tour.emmit('render');
         this.needsUpdate = false;
     }
-    
+
     this.previousCamera = (new THREE.Vector4()).copy(this.camera.rotation);
     this.previousCamera.w = this.camera.fov;
 
diff --git a/src/js/Tour/resize.js b/src/js/Tour/resize.js
index 4620f2c..14f79d7 100644
--- a/src/js/Tour/resize.js
+++ b/src/js/Tour/resize.js
@@ -12,5 +12,5 @@ Tour.resize = function() {
     if (this.renderer.setPixelRatio) {
         this.renderer.setPixelRatio(window.devicePixelRatio);
     }
-    this.needUpdate = true;
+    this.needsUpdate = true;
 };
diff --git a/src/js/Tour/setGallery.js b/src/js/Tour/setGallery.js
index 3271715..2c59540 100644
--- a/src/js/Tour/setGallery.js
+++ b/src/js/Tour/setGallery.js
@@ -1,33 +1,24 @@
 /* globals UI, Tour, Lang */
-Tour.setGallery = function(data) {
+Tour.setGallery = function(data, visible) {
     if (this.options.gallery) {
-    	UI.gallery.init();
+        UI.gallery.init(visible);
 
-        var panorams = data.panorams.map(function(n){
-            n.listNumber = n.listNumber===undefined ? Infinity : n.listNumber;
-            return n;
-        }).sort(function(a, b){
-            return a.listNumber - b.listNumber || a.id - b.id;
-        })
 
-    	for(var i=0; i<panorams.length; i++){
-            var pano = panorams[i];
-            if(pano.listNumber !== 0){
+        data.panorams.map(function(pano){
+            if (pano.listNumber !== 0) {
                 UI.gallery.addItem({
                     id: pano.id,
                     image: 'panorams/'+pano.id+'/thumbnail/mini.jpg',
-                    title: Lang.translate(panorams[i].title),
-                    onclick: function(pano){
-                        this.view.set({
-                            id: pano.id,
-                            lat: data.panorams[pano.id].lat || 0,
-                            lon: data.panorams[pano.id].lon || 0,
-                            fov: data.panorams[pano.id].fov || Tour.options.fov
-                        })
-                    }.bind(this, pano)
-                })
+                    title: Lang.translate(pano.title),
+                    onclick: function(){
+                        Tour.view.set(pano);
+                    }
+                });
             }
-        }
+        });
+
+
+        UI.gallery.setActive(Tour.view.id);
 
         Tour.on('changeView', function(view){
             UI.gallery.setActive(view.id)
diff --git a/src/js/Tour/setMarkers.js b/src/js/Tour/setMarkers.js
index 0efe463..2df9d30 100644
--- a/src/js/Tour/setMarkers.js
+++ b/src/js/Tour/setMarkers.js
@@ -8,7 +8,8 @@ Tour.setMarkers = function(id) {
     }
 
     this.markers = [];
-    var markers = this.data.panorams && this.data.panorams[id] && this.data.panorams[id].markers;
+    var pano = this.getPanorama(id);
+    var markers = pano && pano.markers;
 
     if (markers) {
         /* Типы действий
@@ -32,6 +33,7 @@ Tour.setMarkers = function(id) {
                 for(var k in this.planes) {
                     var planeId = this.planes[k][this.click % this.planes[k].length];
                     var imgeURL = Tour.options.path + id + '/' + Tour.options.imageType + '/' + planeId+ '.jpg';
+
                     Tour.setPlane(k, imgeURL, manager);
                 }
             }
@@ -41,7 +43,7 @@ Tour.setMarkers = function(id) {
             var marker = new this.Marker(markers[i].lat, markers[i].lon, action.bind(markers[i].action));
 
             var title = markers[i].title ||
-            (markers[i].action.type == 'panorama' && this.data.panorams[markers[i].action.id].title);
+            (markers[i].action.type == 'panorama' && this.getPanorama(markers[i].action.id).title);
 
             marker.setTitle(Lang.translate(title));
             marker.setIcon(markers[i].icon || (markers[i].action && markers[i].action.type == 'panorama' ? 'up' : 'info'));
diff --git a/src/js/Tour/setPanorama.js b/src/js/Tour/setPanorama.js
index f6d5b2a..5f0eaa8 100644
--- a/src/js/Tour/setPanorama.js
+++ b/src/js/Tour/setPanorama.js
@@ -10,10 +10,11 @@ Tour.setPanorama = function(id) {
     var change = function(id) {
         this.setTexture(id);
         this.setMarkers(id);
-        this.view.rotation.auto = this.data.panorams[id].autorotation !== false &&
-            (this.data.panorams[id].autorotation || this.data.autorotation);
+        var panorama = this.getPanorama(id);
+        this.view.rotation.auto = panorama.autorotation !== false &&
+            (panorama.autorotation || this.data.autorotation);
     };
-    
+
 
     if (this.options.rendererType != 'css' && this.options.transition) {
 
@@ -24,7 +25,7 @@ Tour.setPanorama = function(id) {
             imageUrl,
             this.data.backgroundColor,
             function() {
-                Tour.mesh.rotation.set(0, Math.PI/2-((this.data.panorams[id].heading || 0) / 180 * Math.PI), 0);
+                Tour.mesh.rotation.set(0, Math.PI/2-((this.getPanorama(id).heading || 0) / 180 * Math.PI), 0);
                 this.data.backgroundImage = false;
                 document.body.classList.add('transition');
                 change.call(this, id);
diff --git a/src/js/Tour/view.js b/src/js/Tour/view.js
index f6f7db5..f2acee8 100644
--- a/src/js/Tour/view.js
+++ b/src/js/Tour/view.js
@@ -8,6 +8,7 @@
 Tour.view = {};
 
 Tour.view.set = function(options, replaceHistory) {
+
     options = options || {};
 
     this.fov = new Tour.Transition(options.fov || this.fov || Tour.options.fov, Tour.options.limit.fov);
@@ -25,13 +26,17 @@ Tour.view.set = function(options, replaceHistory) {
     }
     Tour.history.set(!replaceHistory);
 
-    for (var k in this) {if (k != 'id') {
-        this[k].setOptions(
-            (Tour.data.panorams[this.id] && Tour.data.panorams[this.id].limit && Tour.data.panorams[this.id].limit[k]) ||
-            (Tour.data.limit && Tour.data.limit[k]) ||
-            Tour.options.limit[k]
-        );
-    }}
+    var panorama;
+    for (var k in this) {
+        if (k != 'id') {
+            panorama = Tour.getPanorama(this.id);
+            this[k].setOptions(
+                (panorama && panorama.limit && panorama.limit[k]) ||
+                (Tour.data.limit && Tour.data.limit[k]) ||
+                Tour.options.limit[k]
+            );
+        }
+    }
     Tour.emmit('changeView', Tour.view.get());
 };
 
diff --git a/src/js/UI/Gallery.js b/src/js/UI/Gallery.js
index 7442e32..dd23bb9 100644
--- a/src/js/UI/Gallery.js
+++ b/src/js/UI/Gallery.js
@@ -1,8 +1,9 @@
 /* globals UI */
 
 UI.gallery = {
-    init: function() {
-        this.visible = false;
+    borderHoverSize: 5,
+    init: function(visible) {
+        this.visible = visible;
         this.domElement = document.createElement('div');
         this.domElement.id = 'gallery';
         this.ul = document.createElement('ul');
@@ -15,7 +16,7 @@ UI.gallery = {
 
         this.items = [];
 
-        this.display(true);
+        this.display(visible);
     },
     toggle: function(){
         this.display(!this.visible);
@@ -50,6 +51,7 @@ UI.gallery = {
             item.classList.remove('active');
         });
         this.items[id].classList.add('active');
+        this.ul.scrollTo(0, this.ul.scrollTop + this.items[id].getBoundingClientRect().y - this.borderHoverSize);
     },
     setVisible: function(type) {