From: Stephen Cameron <stephen@cubedesigners.com>
Date: Mon, 28 Sep 2020 10:18:42 +0000 (+0200)
Subject: WIP #3881 @3.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=9aec753f8cb5bbb9b392f4f2ac563a3935cf80ab;p=fluidbook-html5.git

WIP #3881 @3.5
---

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 6a1a688e..141afc0f 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -861,10 +861,20 @@ FluidbookMenu.prototype = {
                 // The slideshow should scale to the optimium size: no larger than 80% of screen width or height
                 // but also only as large as necessary for the included images (which are scaled to fit the screen ratio)
 
+                // When the resize function fires, the slideshow might not yet be fully ready so the heights
+                // can be zero or negative. This causes an ugly jump with the thumbnails and a content redraw
+                // so we make it invisible until it is ready (resize function runs more than once)
+                if (fluidbook.slideshow.$wrapper.height() <= 0) {
+                    fluidbook.slideshow.$wrapper.css('opacity', 0);
+                } else {
+                    fluidbook.slideshow.$wrapper.css('opacity', 1);
+                }
+
                 var horizontalPadding = fluidbook.slideshow.$slideshow.outerWidth() - fluidbook.slideshow.$slideshow.width();
-                var verticalPadding = fluidbook.slideshow.$slideshow.outerHeight() - fluidbook.slideshow.$slideshow.height();
+                var verticalPadding = fluidbook.slideshow.$wrapper.outerHeight() - fluidbook.slideshow.$wrapper.height();
 
                 // var lcss = 'color:#fff;padding:0.5em;background:';
+                // console.log('%cWRAPPER: '+ fluidbook.slideshow.$wrapper.height() +' | ' + fluidbook.slideshow.$wrapper.outerHeight(), lcss+'dodgerblue');
                 // console.log('%cVPad: '+ verticalPadding + ' | HPad: '+ horizontalPadding, lcss+'green');
 
                 var headerHeight = m.find('.caption').outerHeight(); // Height of title section that also contains close button
@@ -881,10 +891,10 @@ FluidbookMenu.prototype = {
                 if (optimizeHeight) {
                     fluidbook.slideshow.$thumbnails.hide();
                     thumbnailsHeight = 0;
-                    m.find('.caption, .back').addClass('small');
+                    m.find('.caption, .back, .fb-slideshow-wrapper').addClass('small');
                 } else {
                     fluidbook.slideshow.$thumbnails.show();
-                    m.find('.caption, .back').removeClass('small');
+                    m.find('.caption, .back, .fb-slideshow-wrapper').removeClass('small');
                 }
 
                 // Default on larger screens is for modal to cover 80% of area but only if image is large enough
@@ -913,8 +923,7 @@ FluidbookMenu.prototype = {
                 var slideMaxHeight = h - headerHeight - thumbnailsHeight - verticalPadding; // Remaining height that main image + caption has to fit into
 
                 // console.log('%cslideMaxHeight: '+ slideMaxHeight +' %cheaderHeight: '+ headerHeight +' %cthumbnailsHeight: '+thumbnailsHeight, lcss+'teal', lcss+'blueviolet', lcss+'crimson');
-
-                // console.log('%cMain slideshow height: '+ $('.fb-slideshow').height(), lcss+'chocolate');
+                // console.log('%cMain slideshow height: '+ $('.fb-slideshow').height(), lcss+'hotpink');
 
                 // Process each slide and calculate optimal height for image and slide container
                 fluidbook.slideshow.$slideshow.find('.fb-slideshow-slide').each(function () {
diff --git a/js/libs/fluidbook/fluidbook.slideshow.js b/js/libs/fluidbook/fluidbook.slideshow.js
index 622ce0bb..fa8b1511 100644
--- a/js/libs/fluidbook/fluidbook.slideshow.js
+++ b/js/libs/fluidbook/fluidbook.slideshow.js
@@ -8,6 +8,7 @@ FluidbookSlideshow.prototype = {
         var $this = this;
         this.slideshowID = '#' + id;
         this.$slideshow = $(this.slideshowID);
+        this.$wrapper = this.$slideshow.parent();
         this.thumbnailsID = this.slideshowID + '_thumbnails';
         this.$thumbnails = $(this.thumbnailsID);
         this.showThumbnails = this.$slideshow.attr('data-thumbnails') === '1';
@@ -38,7 +39,7 @@ FluidbookSlideshow.prototype = {
         });
 
         // Height and width are set by fluidbook.menu resize function
-        // ToDo: see if it's better setting these options as a data attribute from the PHP side? Then certain options like type / start could be set from PHP directly.
+        // Note: certain settings are set via the data-splide attribute, generated on the server-side
         var slideshowSettings = {
             type       : 'loop', // slide | loop | fade
             start      : openIndex,
diff --git a/style/fluidbook.slideshow.less b/style/fluidbook.slideshow.less
index cb7d60e4..75eba7b5 100644
--- a/style/fluidbook.slideshow.less
+++ b/style/fluidbook.slideshow.less
@@ -328,10 +328,18 @@
 
 
 // Slideshow Module
+.fb-slideshow-wrapper {
+  padding-bottom: 60px;
+  transition: opacity 0.15s;
+
+  &.small {
+    padding-bottom: 30px;
+  }
+}
 
 .fb-slideshow {
   position: relative;
-  padding: 0 60px 20px;
+  padding: 0 60px;
 
   &.fb-slideshow-fullscreen {
     padding-left: 0;
@@ -364,7 +372,7 @@
   }
 
   &-thumbnails {
-    padding: 0 60px 20px;
+    padding: 20px 60px 0;
 
     &.fb-slideshow-fullscreen {
       padding-left: 10px;
@@ -375,46 +383,13 @@
       display: none;
     }
 
+    .fb-slideshow-slide:last-child {
+      margin-right: 0 !important;
+    }
+
     img {
       cursor: pointer;
     }
   }
 
 }
-
-//--- Slick slider overrides
-
-/*
-.slick-slider * {
-
-}
-
-.slick-disabled {
-  opacity: 0.25; // Applied to arrows when not clickable
-}
-
-.slick-arrow {
-  display: inline-block;
-  content: '';
-  width: 25px;
-  height: 25px;
-  border-style: solid;
-  border-color: #fff;
-  border-width: 0 3px 3px 0;
-  z-index: 2;
-
-  &:before {
-    display: none;
-  }
-}
-
-.slick-next {
-  transform: rotate(-45deg);
-  right: 20px;
-}
-
-.slick-prev {
-  transform: rotate(135deg);
-  left: 20px;
-}
-*/