wip #4083 @1.5

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index e95de568f7fc6fce93cca26fe44822248d422d8f..e13425a1dc1f5f4e28b4aad05227cb481e9bad2a 100644 (file)
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -744,18 +744,11 @@ FluidbookLinks.prototype = {
         if (this.fluidbook.slideshow) {
             this.fluidbook.slideshow.clear();
         }
-        $(".inlineslideshow").each(function () {
-            if ($(this).is(':visible')) {
-                $this.fluidbook.slideshow.initInlineSlideshow($(this));
-            } else {
-                var $s = $(this);
-                $(this).closest('.link').on('fluidbook.link.show', function () {
-                    if (!$s.data('init')) {
-                        $this.fluidbook.slideshow.initInlineSlideshow($s);
-                    }
-                });
-            }
+
+        $("#links .fb-slideshow").each(function () {
+            $this.fluidbook.slideshow.initInlineSlideshow(this);
         });
+        this.fluidbook.slideshow.resizeInline();
     },
 
     resize: function () {

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 39367ceeb3002652b9a4272b5d44719510c09937..c80b0961c72097a5aea1a36745f48c9c6c39b399 100644 (file)
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -675,6 +675,21 @@ FluidbookLoader.prototype = {
         }
         return res;
     },
+
+    callWhenLoaded: function (image, callback) {
+        $(image).one('load', function () {
+            callback();
+        });
+
+        $(image).one('error', function () {
+            callback();
+        });
+        var img = $(image).get(0);
+        if (img.complete || img.readyState === 'complete' || img.readyState === 4) {
+            callback();
+        }
+    },
+
     retryErrorImages: function () {
         $(this.imagesErrors).each(function () {
             $(this).attr('src', $(this).attr('src'));

diff --git a/js/libs/fluidbook/slideshow/fluidbook.slideshow.dummy.js b/js/libs/fluidbook/slideshow/fluidbook.slideshow.dummy.js
index 7273de15a950f6e000270bd3c80ae204e88e6262..11eff42e6a435f3168f36554593ecc61e988c8f7 100644 (file)
--- a/js/libs/fluidbook/slideshow/fluidbook.slideshow.dummy.js
+++ b/js/libs/fluidbook/slideshow/fluidbook.slideshow.dummy.js
@@ -43,4 +43,8 @@ FluidbookDummySlideshow.prototype = {
 
         }, parseFloat(this.fluidbook.settings.inlineSlideshowDuration) * 1000));
     },
+
+    resizeInline() {
+
+    },
 };

diff --git a/js/libs/fluidbook/slideshow/fluidbook.slideshow.js b/js/libs/fluidbook/slideshow/fluidbook.slideshow.js
index bc7de5a4ecedf55b8ab044d20483c887f1a4e761..a85e8881724dcf87d43ab5d60d4c16c4b1620fa6 100644 (file)
--- a/js/libs/fluidbook/slideshow/fluidbook.slideshow.js
+++ b/js/libs/fluidbook/slideshow/fluidbook.slideshow.js
@@ -1,19 +1,23 @@
 function FluidbookSlideshow(fluidbook) {
     this.fluidbook = fluidbook;
-    this.instances = {inline: null, popup: null};
+    this.instances = {};
+
 
     var $this = this;
 
-    $.each(this.instances, function (k, v) {
-        var s = (k === 'inline' ? $this.fluidbook.settings.inlineSlideshowLibrary : $this.fluidbook.settings.popupSlideshowLibrary);
+    $.each(['popup', 'inline'], function (k, v) {
+        var s = (v === 'inline' ? $this.fluidbook.settings.inlineSlideshowLibrary : $this.fluidbook.settings.popupSlideshowLibrary);
+        if ($this.instances[s] !== undefined) {
+            return;
+        }
         switch (s) {
             case 'dummy':
                 if (window.FluidbookDummySlideshow !== undefined) {
-                    $this.instances[k] = new FluidbookDummySlideshow($this.fluidbook);
+                    $this.instances[s] = new FluidbookDummySlideshow($this.fluidbook);
                 }
             case 'vacheron':
                 if (window.FluidbookVacheronSlideshow !== undefined) {
-                    $this.instances[k] = new FluidbookVacheronSlideshow($this.fluidbook);
+                    $this.instances[s] = new FluidbookVacheronSlideshow($this.fluidbook);
                 }
                 break;
             case undefined:
@@ -21,14 +25,14 @@ function FluidbookSlideshow(fluidbook) {
             case 'splide':
             default:
                 if (window.FluidbookSplideSlideshow !== undefined) {
-                    $this.instances[k] = new FluidbookSplideSlideshow($this.fluidbook);
+                    $this.instances[s] = new FluidbookSplideSlideshow($this.fluidbook);
                 }
                 break;
         }
     });
 
-    this.popupInstance = $this.instances['popup'];
-    this.inlineInstance = $this.instances['inline'];
+    this.popupInstance = $this.instances[$this.fluidbook.settings.popupSlideshowLibrary];
+    this.inlineInstance = $this.instances[$this.fluidbook.settings.inlineSlideshowLibrary];
 }
 
 FluidbookSlideshow.prototype = {
@@ -68,5 +72,9 @@ FluidbookSlideshow.prototype = {
         } else if (context === 'inline') {
             this.initInlineSlideshow(s);
         }
-    }
+    },
+
+    resizeInline: function () {
+        this.inlineInstance.resizeInline();
+    },
 };

diff --git a/js/libs/fluidbook/slideshow/fluidbook.slideshow.splide.js b/js/libs/fluidbook/slideshow/fluidbook.slideshow.splide.js
index a89dc2ca05396c4e8b8fed6a57049b8bbb21046b..37573f43f72804d5382917e4c4d662725de17ba2 100644 (file)
--- a/js/libs/fluidbook/slideshow/fluidbook.slideshow.splide.js
+++ b/js/libs/fluidbook/slideshow/fluidbook.slideshow.splide.js
@@ -207,5 +207,9 @@ FluidbookSplideSlideshow.prototype = {
 
         this.primarySlider.refresh();
         return {w: w, h: h, fullscreen: fullscreen};
-    }
+    },
+
+    resizeInline:function(){
+
+    },
 };

diff --git a/js/libs/fluidbook/slideshow/fluidbook.slideshow.vacheron.js b/js/libs/fluidbook/slideshow/fluidbook.slideshow.vacheron.js
index 012a5083de14a725902cf8f11ce8c7e4d44de423..337f15eda91161c821361a663eb6591b21c4a392 100644 (file)
--- a/js/libs/fluidbook/slideshow/fluidbook.slideshow.vacheron.js
+++ b/js/libs/fluidbook/slideshow/fluidbook.slideshow.vacheron.js
@@ -21,22 +21,33 @@ FluidbookVacheronSlideshow.prototype = {
             $this.gotoIndex($(this).data('index'), $(this).closest('.fb-slideshow'));
             return false;
         });
+
     },
 
     initSlideshow: function (s) {
-        $(s).closest('.fb-slideshow-wrapper').addClass('vacheron');
-
         $(s).data('nbslides', $(s).find('.fb-slideshow-slide').length);
+        var context = $(s).closest('.fb-slideshow-wrapper').hasClass('fb-slideshow-inline') ? 'inline' : 'popup';
+        $(s).data('context', context);
 
-        var nav = $('<nav class="fb-slideshow-nav"><a href="#" class="fb-slideshow-nav-prev">'+getSpriteIcon('chevron-bold')+'</a></nav>');
+        var nav = $('<nav class="fb-slideshow-nav"><a href="#" class="fb-slideshow-nav-prev">' + getSpriteIcon('chevron-bold') + '</a></nav>');
         var i = 0;
         $(s).find('.fb-slideshow-slide').each(function () {
             $(nav).append('<a href="#" class="fb-slideshow-nav-index" data-index="' + i + '"></a>');
             i++;
         });
-        $(nav).append('<a href="#" class="fb-slideshow-nav-next">'+getSpriteIcon('chevron-bold')+'</a>');
+        $(nav).append('<a href="#" class="fb-slideshow-nav-next">' + getSpriteIcon('chevron-bold') + '</a>');
         $(s).append(nav);
-        this.gotoIndex(0, $(s));
+        if (context === 'inline') {
+            $(s).data('currentIndex', 0);
+        } else {
+            this.gotoIndex(0, s);
+        }
+
+        this.fluidbook.loader.callWhenLoaded($(s).find('.fb-slideshow-slide:eq(1) img'), function () {
+            setTimeout(function () {
+                $(s).addClass('ready');
+            }, 100)
+        });
     },
 
     normalizeIndex: function (i, nb) {
@@ -52,12 +63,15 @@ FluidbookVacheronSlideshow.prototype = {
     },
 
     gotoIndex: function (i, s) {
+        console.log('gotoindex', i, s);
         var $this = this;
         if ($(s).data('animating')) {
+            console.log('already animating');
             return;
         }
         i = this.normalizeIndex(i, $(s).data('nbslides'));
         if (i === $(s).data('currentIndex')) {
+            console.log('already index');
             return;
         }
         $(s).data('animating', true);
@@ -74,6 +88,15 @@ FluidbookVacheronSlideshow.prototype = {
                 $(current).removeClass('show');
                 $(s).data('animating', false);
             }).addClass('show');
+
+            setTimeout(function () {
+                if ($(s).data('animating')) {
+                    $(next).removeClass('animating');
+                    $(current).removeClass('show');
+                    $(s).data('animating', false);
+                }
+            }, 800);
+
         }, 10);
     },
 
@@ -94,11 +117,19 @@ FluidbookVacheronSlideshow.prototype = {
             h = navheight + (meta.height * scale);
         }
 
-
         $(s).css({width: w, height: h});
         var nav = $(s).find('.fb-slideshow-nav');
         $(nav).css('left', (w - $(nav).outerWidth()) / 2);
 
         return {w: w, h: h, fullscreen: fullscreen};
-    }
+    },
+
+    resizeInline: function () {
+        $('.fb-slideshow-wrapper.vacheron .fb-slideshow').each(function () {
+            $(this).closest('.link').css('pointer-events', 'none');
+            var s = $(this);
+            var nav = $(s).find('.fb-slideshow-nav');
+            $(nav).css('left', ($(s).closest('.link').outerWidth() - $(nav).outerWidth()) / 2);
+        });
+    },
 };

diff --git a/style/slideshow/vacheron.less b/style/slideshow/vacheron.less
index b7952050653e94bd932b79fbe6ce88f8ea3d9bd1..6d6b764a3519a5f14f77f1a8fb11e800475fb87f 100644 (file)
--- a/style/slideshow/vacheron.less
+++ b/style/slideshow/vacheron.less
@@ -4,6 +4,30 @@
   z-index: 3;
 }
 
+#links {
+  .fb-slideshow-wrapper.vacheron {
+    .fb-slideshow {
+      height: 100%;
+      opacity: 0;
+      transition: opacity 300ms;
+
+      &.ready {
+        opacity: 1;
+      }
+
+      .fb-slideshow-slide {
+        height: 100%;
+      }
+    }
+
+    .fb-slideshow-nav {
+      transform: scale(2);
+      transform-origin: 50% 50%;
+      bottom: -100px;
+    }
+  }
+}
+
 .fb-slideshow-wrapper.vacheron {
   background-color: #fff;
 
@@ -12,10 +36,12 @@
   }
 
   .fb-slideshow {
+
     width: 100%;
     height: ~"calc(100% - 75px)";
 
     .fb-slideshow-slide {
+      pointer-events: none;
       position: absolute;
       top: 0;
       left: 0;
@@ -23,8 +49,10 @@
       height: ~"calc(100% - 75px)";
       z-index: 1;
       opacity: 0;
+      list-style: none;
 
       img {
+        pointer-events: none;
         object-fit: contain;
         width: 100%;
         height: 100%;
@@ -42,6 +70,7 @@
     }
 
     .fb-slideshow-nav {
+      pointer-events: auto;
       position: absolute;
       bottom: 15px;