wait #4083 @3

diff --git a/images/interface.svg b/images/interface.svg
index 6f3521e09c3fd0354d2bc4e696c73ab57706c960..99cce02bf61f3b13c83240e8243ffba0776edda2 100644 (file)
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -357,4 +357,7 @@
         <path d="M20.8,8.5c-0.9,0-1.6-0.7-1.6-1.6s0.7-1.6,1.6-1.6s1.6,0.7,1.6,1.6S21.7,8.5,20.8,8.5z M20.8,6.6
                c-0.1,0-0.2,0.1-0.2,0.2c0,0.2,0.4,0.2,0.4,0C21,6.7,20.9,6.6,20.8,6.6z"/>
     </symbol>
+    <symbol id="chevron-bold" viewBox="0 0 2.5 3.5">
+        <polygon points="0.7,0 2.5,1.8 0.7,3.5 0,2.8 1.1,1.8 0,0.7"/>
+    </symbol>
 </svg>

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 618a1a2ea3c9879c4babaa6e47f7e98b2a6779d4..2be9dd0612308232a4a4d17af799a38c7067f92a 100644 (file)
--- 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 eb8423b55301550e1da28b2704a48737092991a8..012a5083de14a725902cf8f11ce8c7e4d44de423 100644 (file)
--- 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 = $('<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>');
+        $(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 d06b86fac8e825aa74ee6c2c536447dff4fc7366..c874551fc3f3c8dd1efa6f8383f448f4aa2c61db 100644 (file)
--- 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 916afb4c45e0b689db8602e1da77b33cf714f8cd..b7952050653e94bd932b79fbe6ce88f8ea3d9bd1 100644 (file)
--- 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