Merge pull request #280 from Tour-360/dev

Обновление v2.1.1
Tour-360 · Dec 3, 2018 · 504474f · 504474f
2 parents 199484c + 94cec47
commit 504474f
Show file tree

Hide file tree

Showing 14 changed files with 107 additions and 128 deletions.
diff --git a/build/tour-player.css b/build/tour-player.css
diff --git a/build/tour-player.js b/build/tour-player.js
diff --git a/example/gallery.html b/example/gallery.html
diff --git a/example/iframe.html b/example/iframe.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>iFrame</title>
+    <style>
+        html, body {
+            min-height: 100%;
+        }
+        body {
+            max-width: 800px;
+            margin: 50px auto;
+            font-size: 21px;
+            line-height: 1.9;
+        }
+        iframe {
+            border: none;
+            display: block;
+            width: 100%;
+            height: 500px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Virtual tour in iFrame tag</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus eaque, veritatis dolore dolorum quaerat. Deserunt officia mollitia, harum fugiat praesentium ipsum ratione optio nam alias earum architecto tenetur quaerat id excepturi hic sit libero debitis soluta ex animi dolorem deleniti repellat aliquid a. Quod mollitia culpa libero. Dolores, et numquam harum. Fugit, exercitationem aliquid voluptates dicta soluta pariatur deserunt numquam.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus sint voluptas nisi ut et pariatur quibusdam esse fuga eum, omnis quisquam praesentium deleniti vero, id dolore placeat sed alias, dolorem ducimus voluptatem quae. Eum molestias itaque numquam sunt nulla iure necessitatibus mollitia recusandae facere incidunt! Expedita autem harum, reiciendis fugiat dolores modi doloremque recusandae optio, ipsam veritatis voluptate mollitia nam quam provident velit consequuntur nulla, ullam laudantium rerum accusamus error illo suscipit iste temporibus ex. Eaque qui, accusantium ad nulla ex aspernatur, expedita officiis recusandae illo illum, facilis magni molestiae. Vel in atque accusamus beatae amet quo sint debitis voluptatem voluptatum minima itaque aperiam ad ipsum neque consectetur accusantium dolor officia aspernatur architecto fuga quis velit, esse soluta! Voluptate error nisi molestiae, iure quaerat eaque. Consectetur debitis a quis. Soluta.</p>
+    <iframe src="http://localhost:3000/example/index.html"></iframe>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A eveniet accusamus debitis consectetur odio illum in, earum ipsum quas dolores molestiae quibusdam vero ducimus ea reprehenderit ratione provident eum perferendis sint quo at adipisci. Nobis corrupti porro animi eaque laudantium accusamus debitis reiciendis, qui, rem iure fugiat consequatur saepe fugit.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, quam! Suscipit doloribus consequatur ratione obcaecati, reiciendis natus itaque in quasi!</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus nemo dolore assumenda, nostrum alias reiciendis consequuntur laudantium quasi ullam, rem corrupti? Hic ipsam voluptas pariatur officia accusamus, dolores, quasi saepe vero obcaecati rem, sunt! Harum ad quo ipsum dignissimos. Nesciunt itaque, maiores doloribus ipsam laborum unde asperiores exercitationem velit rerum, inventore porro hic perferendis vitae molestiae commodi sapiente veritatis rem quaerat iure molestias, fugit incidunt error. Animi quibusdam, eum quaerat facere inventore itaque iste tempore impedit blanditiis magni, molestias consectetur amet aspernatur nemo quos provident pariatur alias, libero minima unde laboriosam veniam velit porro voluptatem. Minima similique architecto voluptatem inventore.</p>
+</body>
+</html>
diff --git a/example/index.html b/example/index.html
@@ -1,28 +1,28 @@
 <!doctype html>
-<html>
+<html lang="ru">
 <head>
     <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-        <link rel="stylesheet" href="../build/tour-player.css">
-        <script src="../build/tour-player.js"></script>
-        <title>Example Tour-360 player</title>
-        <style>
-            /* Цвет всех маркеров */
-            #markers .button {
-                background-color: rgba(0,0,0,.8);
-            }
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <link rel="stylesheet" href="../build/tour-player.css">
+    <script src="../build/tour-player.js"></script>
+    <title>Example Tour-360 player</title>
+    <style>
+        /* Цвет всех маркеров */
+        #markers .button {
+            background-color: rgba(0,0,0,.8);
+        }
 
-            /* Цвет информационных маркеров */
-            #markers .button.info{
-                background-color: #ed1c24;
-            }
+        /* Цвет информационных маркеров */
+        #markers .button.info{
+            background-color: #ed1c24;
+        }
 
-            /* Цвет полосы загрузки */
-            #control-panel .progress-bar .value {
-                background: #ed1c24;
-            }
-        </style>
-    </head>
+        /* Цвет полосы загрузки */
+        #control-panel .progress-bar .value {
+            background: #ed1c24;
+        }
+    </style>
+</head>
     <body>
         <div class="popup-layout">
             <div class="popups">
@@ -63,14 +63,14 @@ <h1>Lana Del Rey — Ultraviolence</h1>
         </div>
 
         <script>
-        Tour.init(false, {
-            controlPanel: true,
-            gallery: true,
-            galleryVisible: false
-        });
-        Tour.on('load', function(data) {
-            this.controls.autoRotate()
-        })
+            Tour.init(false, {
+                controlPanel: true,
+                gallery: true,
+                galleryVisible: false
+            });
+            Tour.on('load', function(data) {
+                this.controls.autoRotate()
+            })
         </script>
     </body>
 </html>
diff --git a/gulpfile.js b/gulpfile.js
@@ -34,7 +34,7 @@ gulp.task('scripts', function() {
     return gulp.src([
         'src/js/*.js',
         'src/js/UI/*.js',
-        'src/js/**/*.js', 
+        'src/js/**/*.js',
         'src/lib/three.js',
         'src/lib/*.js'])
     .pipe(sourcemaps.init())
@@ -114,17 +114,17 @@ gulp.task('serve', ['build'], function() {
 
 //Публикация на сайте tour-360.ru по FTP
 gulp.task('deploy', function() {
-    gulp.src(['build/**/*', '!build/**/*.map'])
+    gulp.src(['build/**/*'])
         .pipe(sftp({
             host: 'tour-360.ru',
-            auth: 'beta',
-            remotePath: 'public_html/tour-player/latest'
+            auth: 'admin',
+            remotePath: '/var/www/tour-360.ru/tour-player/latest'
         }));
-    gulp.src(['build/**/*', '!build/**/*.map'])
+    gulp.src(['build/**/*'])
         .pipe(sftp({
             host: 'tour-360.ru',
-            auth: 'beta',
-            remotePath: 'public_html/tour-player/' + pjson.version
+            auth: 'admin',
+            remotePath: '/var/www/tour-360.ru/tour-player/' + pjson.version
         }));
 });
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tour-player",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "",
   "repository": {
     "type": "git",

diff --git a/src/css/gallery.styl b/src/css/gallery.styl
@@ -47,6 +47,9 @@
         overflow hidden
         overflow-y scroll
         box-sizing border-box
+        transform translateZ(0px)
+        will-change scroll-position
+        -webkit-overflow-scrolling touch
 
         li
             box-sizing border-box

diff --git a/src/css/layout.styl b/src/css/layout.styl
@@ -1,7 +1,10 @@
 body, html
     height 100%
+    overflow hidden
 
 body
+    position fixed
+    width 100%
     margin 0
     overflow hidden
     font $font-size 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif

diff --git a/src/js/Tour.js b/src/js/Tour.js
@@ -1,4 +1,4 @@
 var Tour = {};
 
 // Версия плеера
-Tour.version = [2, 1, 0];
+Tour.version = [2, 1, 1];
diff --git a/src/js/Tour/init.js b/src/js/Tour/init.js
@@ -1,6 +1,7 @@
 /* globals Tour, Lang, BrouserInfo, UI*/
 
 Tour.init = function(data, options) {
+    this.sentry();
     console.info('Tour-player', 'v' + this.version.join('.'), 'by http://Tour-360.ru');
     BrouserInfo();
     this.options.set(this.defaultOption);

diff --git a/src/js/Tour/setGallery.js b/src/js/Tour/setGallery.js
@@ -17,7 +17,6 @@ Tour.setGallery = function(data, visible) {
             }
         });
 
-
         UI.gallery.setActive(Tour.view.id);
 
         Tour.on('changeView', function(view){

diff --git a/src/js/UI/Gallery.js b/src/js/UI/Gallery.js
@@ -14,7 +14,7 @@ UI.gallery = {
         this.domElement.appendChild(this.ul);
         document.body.appendChild(this.domElement);
 
-        this.items = [];
+        this.items = {};
 
         this.display(visible);
     },
@@ -47,13 +47,19 @@ UI.gallery = {
     },
 
     setActive: function(id){
-        this.items.forEach(function(item){
-            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) {
+        for (var k in this.items){
+            this.items[k].classList.remove('active');
+        }
+
+        if(this.items[id]) {
+            this.items[id].classList.add('active');
 
+            var itemRect = this.items[id].getBoundingClientRect();
+            var ulRect = this.ul.getBoundingClientRect();
+
+            if ((ulRect.height - itemRect.top) < 0 || (itemRect.top + itemRect.height) < 0) {
+                this.ul.scrollTo(0, this.ul.scrollTop + this.items[id].getBoundingClientRect().y - this.borderHoverSize);
+            }
+        }
     }
 };
diff --git a/src/js/UI/popUp.js b/src/js/UI/popUp.js
@@ -16,16 +16,24 @@ UI.popUp = {
         }
     },
     set: function(id) {
-        var scrollY = window.parent.scrollY;
-        var scrollTop = window.parent.document.body.scrollTop;
+
+        var canAccessIFrame = !!~Object.keys(window.parent.location).indexOf('host')
+        if(canAccessIFrame){
+            var scrollY = window.parent.scrollY;
+            var scrollX = window.parent.scrollX;
+        }
 
         window.location.hash = id || '';
 
-        window.parent.scrollY = scrollY;
-        window.parent.document.body.scrollTop = scrollTop; // issues #250
+        if(canAccessIFrame){
+            window.parent.scrollTo(scrollX, scrollY);
+        }
 
-        setTimeout(function() {window.scroll(0,0);}, 0); // issues #226
+        setTimeout(function() {
+            window.scroll(0,0);
+        }, 0); // issues #226
     },
+
     popstate: function() {
         this.domElement.classList[window.location.hash ? 'add' : 'remove']('visible');
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,7 +17,6 @@ Tour.setGallery = function(data, visible) { @@
                 }
             });
             UI.gallery.setActive(Tour.view.id);
             Tour.on('changeView', function(view){
@@ Expand Down @@