]> _ Git - fluidbook-html5.git/commitdiff
fix #1696 @1.5
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Tue, 26 Sep 2017 13:58:37 +0000 (15:58 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Tue, 26 Sep 2017 13:58:37 +0000 (15:58 +0200)
js/libs/fluidbook/fluidbook.menu.js
style/fluidbook.less

index 0148bfbe6d5338b7252558cfb4db04b1efbd0103..3237594d16790db137cc22958fe8eeaf36c71459 100644 (file)
@@ -105,33 +105,37 @@ FluidbookMenu.prototype = {
         }
     },
     openingView: function (callback) {
-        this.showOverlay();
         var $this = this;
         this.fluidbook.resize.resizeView();
         this.fluidbook.tooltip.hideTooltip();
         var mview = $('#view .mview:last');
 
-        $(mview).show();
         if (!Modernizr.ftouch) {
             $(mview).find('.content').perfectScrollbar();
         } else {
             $(mview).find('.content').css({overflowY: 'auto'});
         }
 
-        var from = {y: -200, opacity: 0};
-        var to = {
-            y: 0, opacity: 1, onComplete: function () {
-                if (callback != undefined) {
-                    callback();
-                }
-                $this.fluidbook.hideLoader();
-                resize();
-            }
-        };
+        var from = {y: "-200px", opacity: 0};
+        var to = {y: "0px", opacity: 1};
         if (mview.hasClass('fs')) {
-            from.y = 0;
+            from.y = "0px";
+        } else {
+            this.showOverlay();
         }
-        TweenMax.fromTo($(mview), 0.5, from, to);
+
+        $(mview).addClass('notransition').css({opacity: from.opacity}).transform({translateY: from.y}).show().removeClass('notransition');
+        setTimeout(function () {
+            $(mview).css({opacity: to.opacity}).transform({translateY: to.y});
+        }, 20);
+
+        setTimeout(function () {
+            if (callback != undefined) {
+                callback();
+            }
+            $this.fluidbook.hideLoader();
+            resize();
+        }, 420);
     },
 
     displayResults: function (data, group, callback) {
@@ -329,7 +333,7 @@ FluidbookMenu.prototype = {
     }
     ,
     openShare: function (p1, p2, callback) {
-        this.fluidbook.share.openShare(p1,p2,callback);
+        this.fluidbook.share.openShare(p1, p2, callback);
     },
     openBookmark: function (p1, p2, callback) {
         var view = this.fluidbook.bookmarks.getView();
@@ -418,13 +422,12 @@ FluidbookMenu.prototype = {
         }
 
         if (mview.length > 0) {
-            TweenMax.to(mview, 0.25, {
-                autoAlpha: 0, onComplete: function () {
-                    $this.fluidbook.video.killVideosIn(mview);
-                    mview.remove();
-                    callback();
-                }
-            });
+            $(mview).css('opacity', 0);
+            setTimeout(function () {
+                $this.fluidbook.video.killVideosIn(mview);
+                mview.remove();
+                callback();
+            }, 420);
         }
 
         if (all) {
index ed855d83e58b190c569c41ad44c32ff896a291cb..cdb902df3f150173609e4c5727e5224ebd399ac8 100644 (file)
@@ -1,5 +1,14 @@
 @import "00-import";
 
+.notransition {
+
+       -moz-transition: none !important;
+       -webkit-transition: none !important;
+       -ms-transition: none !important;
+       -o-transition: none !important;
+       transition: none !important;
+}
+
 /* Screenshot */
 .screenshot .mview {
        overflow-y: hidden;
@@ -1074,6 +1083,14 @@ html.ios body.portrait #interface {
        max-width: 600px;
        width: 100%;
 
+       @menutransition:400ms;
+
+       -webkit-transition: all @menutransition;
+       -moz-transition: all @menutransition;
+       -ms-transition: all @menutransition;
+       -o-transition: all @menutransition;
+       transition: all @menutransition;
+
        &[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"] {
                .caption {
                        height: 0;
@@ -1609,37 +1626,36 @@ ul.chapters.shareList a.level0 img {
 
 /* multimedia */
 
-.mview .multimediaContainer {
-       padding: 0;
-       position: relative;
-       &:after {
-               content: '';
-               position: absolute;
-               z-index: 2;
+.mview {
+       .multimediaContainer {
+               padding: 0;
+               position: relative;
+               &:after {
+                       content: '';
+                       position: absolute;
+                       z-index: 2;
+                       width: 100%;
+                       height: 100%;
+                       top: 0;
+                       left: 0;
+                       pointer-events: auto;
+               }
+       }
+       img.multimedia {
+               position: relative;
+               z-index: 1;
                width: 100%;
-               height: 100%;
-               top: 0;
-               left: 0;
-               pointer-events: auto;
+               height: auto;
+               display: block;
+       }
+       .text {
+               padding: 20px;
+               white-space: pre-line;
+               text-align: left;
        }
 }
 
-.mview img.multimedia {
-       position: relative;
-       z-index: 1;
-       width: 100%;
-       height: auto;
-       display: block;
-}
-
-/* texts */
-.mview .text {
-       padding: 20px;
-       white-space: pre-line;
-       text-align: left;
-}
-
-/* Chapters */
+// Chapters
 
 ul.chapters {
        list-style: none;