From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 3 Apr 2018 16:11:25 +0000 (+0200)
Subject: WIP #1945 @3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c27e2c997bbeb67c856b71fc4115793d5d0187f0;p=fluidbook-html5.git

WIP #1945 @3
---

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index c86c7a45..c4d5ca3a 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -589,9 +589,36 @@ FluidbookMenu.prototype = {
                 m.find('.multimediaScale').css({width: nw, height: nh, overflow: 'hidden'}).transform({scale: [s, s], origin: [0, 0]}).css('text-align', 'left');
                 break;
           case 'slideshow':
-                    // ToDo: resize slideshow to fit inside view, accounting for image, caption and thumbnail grid
-                    // w contains max width of popup
-                    // h contains max height of popup
+
+                    // When resizing the slideshow, the goal is to fit it into the maximum modal height (stored in 'h').
+                    // The thumbnails and caption can't be scaled so we must scale the height of the main image
+                    // (it is already scaled for max-width via CSS)
+
+                    var headerHeight = m.find('.caption').outerHeight(), // Height of title section that also contains close button
+                        thumbnailsHeight = m.find('.fb-slideshow-thumbnails').outerHeight(), // Thumbnail slider height
+                        slideMaxHeight = h - headerHeight - thumbnailsHeight; // Remaining height that main image + caption has to fit into
+
+                    // Process each slide and calculate optimal height for image and slide container
+                    m.find('.fb-slideshow-slide').each(function() {
+
+                        // Set the height on this container so flexbox can vertically center
+                        // the contents when they don't take up the full height available
+                        $(this).css('height', slideMaxHeight);
+
+                        var captionHeight = $(this).find('.fb-slideshow-slide-caption').outerHeight() || 0;
+
+                        // Allow image to take up whatever height is left after accounting for the caption
+                        // This is only the max-height so the image might not end up being this tall...
+                        $(this).find('.fb-slideshow-slide-image').css({
+                            'max-height': slideMaxHeight - captionHeight
+                        });
+                    });
+
+                    // setTimeout(function() {
+                    //   var slideshowID = m.find('.fb-slideshow').attr('id');
+                    //   $('#' + slideshowID).find('.fb-slideshow-slide').css('visibility', 'visible');
+                    // }, 100)
+
                 break;
             default:
                 break;
diff --git a/style/fluidbook.slideshow.less b/style/fluidbook.slideshow.less
index c48f0018..b0328bbd 100644
--- a/style/fluidbook.slideshow.less
+++ b/style/fluidbook.slideshow.less
@@ -11,12 +11,19 @@
   }
 
   &-slide {
-    height: 610px;
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
     text-align: center;
-    img {
-      max-height: 550px;
+    //visibility: hidden; // Hide until JS can resize the images to avoid flicker
+
+    &-image {
       margin: 0 auto;
     }
+
+    &-caption {
+      padding: 1em 0;
+    }
   }
 
   &-thumbnails {