From 6c44c86d97faf5148c40d70cb9ed5e04f11e330f Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Mon, 23 Nov 2020 16:45:39 +0100 Subject: [PATCH] wip #4083 @1.5 --- js/libs/fluidbook/fluidbook.links.js | 15 ++----- js/libs/fluidbook/fluidbook.loader.js | 15 +++++++ .../slideshow/fluidbook.slideshow.dummy.js | 4 ++ .../slideshow/fluidbook.slideshow.js | 26 +++++++---- .../slideshow/fluidbook.slideshow.splide.js | 6 ++- .../slideshow/fluidbook.slideshow.vacheron.js | 45 ++++++++++++++++--- style/slideshow/vacheron.less | 29 ++++++++++++ 7 files changed, 112 insertions(+), 28 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index e95de568..e13425a1 100644 --- 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 39367cee..c80b0961 100644 --- 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 7273de15..11eff42e 100644 --- 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 bc7de5a4..a85e8881 100644 --- 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 a89dc2ca..37573f43 100644 --- 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 012a5083..337f15ed 100644 --- 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 = $(''); + var nav = $(''); var i = 0; $(s).find('.fb-slideshow-slide').each(function () { $(nav).append(''); i++; }); - $(nav).append(''+getSpriteIcon('chevron-bold')+''); + $(nav).append('' + getSpriteIcon('chevron-bold') + ''); $(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 b7952050..6d6b764a 100644 --- 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; -- 2.39.5