From: Vincent Vanwaelscappel Date: Mon, 23 Nov 2020 12:48:56 +0000 (+0100) Subject: wait #4083 @3 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=dcbb0de5e7f2017769e0c811775f1d946768e679;p=fluidbook-html5.git wait #4083 @3 --- diff --git a/images/interface.svg b/images/interface.svg index 6f3521e0..99cce02b 100644 --- a/images/interface.svg +++ b/images/interface.svg @@ -357,4 +357,7 @@ + + + diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js index 618a1a2e..2be9dd06 100644 --- a/js/libs/fluidbook/fluidbook.menu.js +++ b/js/libs/fluidbook/fluidbook.menu.js @@ -313,7 +313,7 @@ FluidbookMenu.prototype = { // TODO: check which type should be passed to fluidbook.stats.track() ??? // this.fluidbook.stats.track(11); - this.fluidbook.slideshow.initPopupSlideshow('slideshow_' + slideshow); + this.fluidbook.slideshow.initPopupSlideshow($('#slideshow_' + slideshow)); // var $this = this; // var times = [250, 500, 750, 1000, 1250]; diff --git a/js/libs/fluidbook/slideshow/fluidbook.slideshow.vacheron.js b/js/libs/fluidbook/slideshow/fluidbook.slideshow.vacheron.js index eb8423b5..012a5083 100644 --- a/js/libs/fluidbook/slideshow/fluidbook.slideshow.vacheron.js +++ b/js/libs/fluidbook/slideshow/fluidbook.slideshow.vacheron.js @@ -1,8 +1,104 @@ function FluidbookVacheronSlideshow(fluidbook) { this.fluidbook = fluidbook; + this.initEvents(); } FluidbookVacheronSlideshow.prototype = { - initSlideshow: function (id) { + + initEvents: function () { + var $this = this; + $(document).on('click', '.fb-slideshow-wrapper.vacheron .fb-slideshow-nav-next', function () { + $this.gotoNextIndex($(this).closest('.fb-slideshow')); + return false; + }); + + $(document).on('click', '.fb-slideshow-wrapper.vacheron .fb-slideshow-nav-prev', function () { + $this.gotoPrevIndex($(this).closest('.fb-slideshow')); + return false; + }); + + $(document).on('click', '.fb-slideshow-wrapper.vacheron .fb-slideshow-nav-index', function () { + $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 nav = $(''); + var i = 0; + $(s).find('.fb-slideshow-slide').each(function () { + $(nav).append(''); + i++; + }); + $(nav).append(''+getSpriteIcon('chevron-bold')+''); + $(s).append(nav); + this.gotoIndex(0, $(s)); + }, + + normalizeIndex: function (i, nb) { + return (i + nb * 2) % nb; + }, + + gotoNextIndex: function (s) { + this.gotoIndex($(s).data('currentIndex') + 1, s); + }, + + gotoPrevIndex: function (s) { + this.gotoIndex($(s).data('currentIndex') - 1, s); + }, + + gotoIndex: function (i, s) { + var $this = this; + if ($(s).data('animating')) { + return; + } + i = this.normalizeIndex(i, $(s).data('nbslides')); + if (i === $(s).data('currentIndex')) { + return; + } + $(s).data('animating', true); + + var next = $(s).find('.fb-slideshow-slide:eq(' + i + ')'); + $(next).addClass('animating'); + var current = $(s).find('.fb-slideshow-slide.show'); + setTimeout(function () { + $(s).data('currentIndex', i); + $(s).find('[data-index]').removeClass('active'); + $(s).find('[data-index="' + i + '"]').addClass('active'); + $(next).one($this.fluidbook.support.getTransitionEndEvent(), function () { + $(next).removeClass('animating'); + $(current).removeClass('show'); + $(s).data('animating', false); + }).addClass('show'); + }, 10); + }, + + resize: function (ww, hh, m) { + var fullscreen = false; + var w, h; + var s = $(m).find('.fb-slideshow-wrapper'); + m.find('.caption, .back').addClass('nocaption'); + if (ww < 800) { + fullscreen = true; + w = ww; + h = hh; + } else { + var navheight = 75; + var meta = $(s).find('.fb-slideshow-slide:eq(0) img').data('meta'); + var scale = Math.min(((hh * 0.9) - navheight) / meta.height, (ww * 0.9) / meta.width); + w = meta.width * scale; + 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}; } }; diff --git a/style/fluidbook.less b/style/fluidbook.less index d06b86fa..c874551f 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -234,7 +234,7 @@ body, html { } } -[data-pseudolink-href]{ +[data-pseudolink-href] { cursor: pointer; } @@ -1819,6 +1819,11 @@ html.ios body.portrait #interface { height: 30px; } + &.nocaption { + padding: 0; + height: 0; + } + &.h0 { height: 0; padding: 0; @@ -1850,7 +1855,7 @@ html.ios body.portrait #interface { line-height: 1; z-index: 1; - &.small { + &.small, &.nocaption { width: 30px; height: 30px; padding: 10px; diff --git a/style/slideshow/vacheron.less b/style/slideshow/vacheron.less index 916afb4c..b7952050 100644 --- a/style/slideshow/vacheron.less +++ b/style/slideshow/vacheron.less @@ -1 +1,99 @@ -@import "../variables"; \ No newline at end of file +@import "../variables"; + +.mview[data-menu="slideshow"] a.back { + z-index: 3; +} + +.fb-slideshow-wrapper.vacheron { + background-color: #fff; + + .fb-slideshow-thumbnails { + display: none; + } + + .fb-slideshow { + width: 100%; + height: ~"calc(100% - 75px)"; + + .fb-slideshow-slide { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: ~"calc(100% - 75px)"; + z-index: 1; + opacity: 0; + + img { + object-fit: contain; + width: 100%; + height: 100%; + } + + &.animating { + z-index: 2; + opacity: 0; + transition: opacity 700ms; + } + + &.show { + opacity: 1; + } + } + + .fb-slideshow-nav { + position: absolute; + bottom: 15px; + + .fb-slideshow-nav-prev, .fb-slideshow-nav-next { + @w: 40px; + display: inline-block; + width: @w; + height: @w; + border-radius: 50%; + border: 1px solid #333; + margin: 0 10px; + color: #333; + font-size: 8px; + font-weight: bold; + padding: unit(@w/2, px); + line-height: 0; + vertical-align: bottom; + text-align: center; + + svg { + color: #333; + position: relative; + top: -3px; + left: -2px; + width: 5px; + } + } + + .fb-slideshow-nav-prev { + svg { + transform: rotate(180deg); + } + } + + .fb-slideshow-nav-index { + @w: 9px; + display: inline-block; + margin: 0 10px; + width: @w; + height: @w; + background-color: #888a8c; + border-radius: 50%; + position: relative; + top: -13px; + border: 3px solid #fff; + + &:hover, &.active { + background-color: #9a8155; + border-color: #9a8155; + } + } + } + + } +} \ No newline at end of file