From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 27 Jun 2018 15:29:22 +0000 (+0200)
Subject: wip #2119 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=7cf7fae27d91a0ea4e488ded9fc1a547fba21443;p=fluidbook-html5.git

wip #2119 @2
---

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index fdcf3f54..d6c52cb9 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -636,39 +636,67 @@ FluidbookMenu.prototype = {
                     scale: [s, s],
                     origin: [0, 0]
                 }).css('text-align', 'left');
-                m.find('.multimediaScale').css({width: nw, height: nh, overflow: 'hidden'}).transform({scale: [s, s], origin: [0, 0]}).css('text-align', 'left');
+                m.find('.multimediaScale').css({width: nw, height: nh, overflow: 'hidden'}).transform({
+                    scale: [s, s],
+                    origin: [0, 0]
+                }).css('text-align', 'left');
                 break;
-          case 'slideshow':
+            case 'slideshow':
+                var w = Math.max(ww * 0.8);
+                var h = Math.max(hh * 0.8);
+                if (ww < 800) {
+                    w = ww;
+                    h = hh;
+                    fullscreen = true;
+                    $(".fb-slideshow").addClass('fb-slideshow-fullscreen');
+                } else {
+                    $(".fb-slideshow").removeClass('fb-slideshow-fullscreen');
+                }
 
-                    // 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 optimizeHeight = (h < 600);
+                if (optimizeHeight) {
+                    $(".fb-slideshow-thumbnails").addClass('fb-slideshow-nothumbs');
+                    m.find('.back').addClass('small');
+                } else {
+                    $(".fb-slideshow-thumbnails").removeClass('fb-slideshow-nothumbs');
+                    m.find('.back').removeClass('small');
+                }
+
+                // 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
+                var headerHeight = m.find('.caption').outerHeight(); // Height of title section that also contains close button
+                var thumbnailsHeight = m.find('.fb-slideshow-thumbnails').outerHeight(); // Thumbnail slider height
+                var offset = 0;
 
-                    // Process each slide and calculate optimal height for image and slide container
-                    m.find('.fb-slideshow-slide').each(function() {
+                if (optimizeHeight) {
+                    offset = -headerHeight;
+                    headerHeight = 0;
+                    thumbnailsHeight = 0;
+                    var contentHeight = h;
+                }
 
-                        // 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;
+                m.find('.content').css({top: offset});
 
-                        // 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
-                        });
-                    });
+                var 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 () {
 
-                    // setTimeout(function() {
-                    //   var slideshowID = m.find('.fb-slideshow').attr('id');
-                    //   $('#' + slideshowID).find('.fb-slideshow-slide').css('visibility', 'visible');
-                    // }, 100)
+                    // 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
+                    });
+                });
                 break;
             default:
                 break;
@@ -692,7 +720,11 @@ FluidbookMenu.prototype = {
         ccss.maxHeight = h - captionHeight;
         if (forceHeight) {
             css.minHeight = css.height = h;
-            ccss.minHeight = ccss.height = h - captionHeight;
+            if (contentHeight === undefined) {
+                ccss.minHeight = ccss.height = h - captionHeight;
+            } else {
+                ccss.minHeight = ccss.height = contentHeight;
+            }
         } else {
             ccss.minHeight = ccss.height = css.minHeight = css.height = '';
         }
diff --git a/js/libs/fluidbook/fluidbook.slideshow.js b/js/libs/fluidbook/fluidbook.slideshow.js
index 80adc799..e52fd25e 100644
--- a/js/libs/fluidbook/fluidbook.slideshow.js
+++ b/js/libs/fluidbook/fluidbook.slideshow.js
@@ -1,44 +1,44 @@
 function FluidbookSlideshow(fluidbook) {
-  this.fluidbook = fluidbook;
+    this.fluidbook = fluidbook;
 }
 
 FluidbookSlideshow.prototype = {
-  initSlideshow: function(id) {
-    var $slideshow = $('#' + id),
-        thumbnailsID = id +'_thumbnails',
-        $thumbnails;
+    initSlideshow: function (id) {
+        var $slideshow = $('#' + id),
+            thumbnailsID = id + '_thumbnails',
+            $thumbnails;
 
-    if ($slideshow.length == 0) return false;
+        if ($slideshow.length == 0) return false;
 
-    // Dynamically add thumbnails from full sized images
-    // Images have to load anyway so we can reuse full images for thumbnails
-    $('<div class="fb-slideshow-thumbnails" id="'+ thumbnailsID +'"></div>').appendTo($slideshow.parent());
-    $thumbnails = $('#' + thumbnailsID);
+        // Dynamically add thumbnails from full sized images
+        // Images have to load anyway so we can reuse full images for thumbnails
+        $('<div class="fb-slideshow-thumbnails" id="' + thumbnailsID + '"></div>').appendTo($slideshow.parent());
+        $thumbnails = $('#' + thumbnailsID);
 
-    $slideshow.find('img').each(function() {
-      var img = $(this).clone();
-      $thumbnails.append(img);
-    });
+        $slideshow.find('img').each(function () {
+            var img = $(this).clone();
+            $thumbnails.append(img);
+        });
 
-    // Main image slider
-    $slideshow.slick({
-      variableWidth: false,
-      asNavFor: '#'+ thumbnailsID, // Synced with thumbnails slider
-      infinite: false,
-      draggable: true
-    });
+        // Main image slider
+        $slideshow.slick({
+            variableWidth: false,
+            asNavFor: '#' + thumbnailsID, // Synced with thumbnails slider
+            infinite: false,
+            draggable: true
+        });
 
-    // Thumbnails slider
-    $thumbnails.slick({
-      slidesToShow: 6,
-      asNavFor: '#'+ id, // Synced with main slider
-      focusOnSelect: true,
-      variableWidth: true,
-      arrows: false,
-      draggable: true,
-      swipeToSlide: true,
-      infinite: false,
-      centerMode: false
-    });
-  }
+        // Thumbnails slider
+        $thumbnails.slick({
+            slidesToShow: 6,
+            asNavFor: '#' + id, // Synced with main slider
+            focusOnSelect: true,
+            variableWidth: true,
+            arrows: false,
+            draggable: true,
+            swipeToSlide: true,
+            infinite: false,
+            centerMode: false
+        });
+    }
 }
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 1c6c1f46..78036e38 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1264,11 +1264,11 @@ html.ios body.portrait #interface {
 
 	@menutransition: 400ms;
 
-	-webkit-transition: all @menutransition;
-	-moz-transition: all @menutransition;
-	-ms-transition: all @menutransition;
-	-o-transition: all @menutransition;
-	transition: all @menutransition;
+	-webkit-transition: opacity @menutransition, top @menutransition;
+	-moz-transition: opacity @menutransition, top @menutransition;
+	-ms-transition: opacity @menutransition, top @menutransition;
+	-o-transition: opacity @menutransition, top @menutransition;
+	transition: opacity @menutransition, top @menutransition;
 
 	&[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"], &[data-menu="externalchapters"] {
 		.caption {
@@ -1449,6 +1449,14 @@ html.ios body.portrait #interface {
 				line-height: 1;
 				z-index: 1;
 
+				&.small{
+					width: 30px;
+					height: 30px;
+					padding: 10px;
+					font-size: 7px;
+					line-height: 10px;
+				}
+
 				.rtl & {
 					right: auto;
 					left: 0;
@@ -2346,7 +2354,6 @@ ul.chapters {
 #tooltip {
 	@tooltip-arrows-size: 10px;
 
-
 	position: absolute;
 	background-color: @tooltip-background;
 	color: @tooltip-color;
diff --git a/style/fluidbook.slideshow.less b/style/fluidbook.slideshow.less
index b0328bbd..3c269047 100644
--- a/style/fluidbook.slideshow.less
+++ b/style/fluidbook.slideshow.less
@@ -3,78 +3,89 @@
 // Slideshow Module
 
 .fb-slideshow {
-  position: relative;
-  padding: 0 60px;
-
-  img {
-    max-width: 100%;
-  }
-
-  &-slide {
-    display: flex !important;
-    flex-direction: column;
-    justify-content: center;
-    text-align: center;
-    //visibility: hidden; // Hide until JS can resize the images to avoid flicker
-
-    &-image {
-      margin: 0 auto;
-    }
-
-    &-caption {
-      padding: 1em 0;
-    }
-  }
-
-  &-thumbnails {
-    padding: 20px 60px 40px;
-
-    img {
-      height: 80px;
-      width: auto;
-      margin-right: 30px;
-    }
-
-    .slick-current {
-      // Using outline so it doesn't affect layout or image size
-      outline: 5px solid @menu-select-background;
-      outline-offset: -5px;
-    }
-  }
+	position: relative;
+	padding: 0 60px;
+
+	&.fb-slideshow-fullscreen {
+		padding: 0;
+	}
+
+	img {
+		max-width: 100%;
+	}
+
+	&-slide {
+		position: relative;
+		display: flex !important;
+		flex-direction: column;
+		justify-content: center;
+		text-align: center;
+		//visibility: hidden; // Hide until JS can resize the images to avoid flicker
+
+		&-image {
+			margin: 0 auto;
+		}
+
+		&-caption {
+			padding: 1em 0;
+		}
+	}
+
+	&-thumbnails {
+		&.fb-slideshow-nothumbs{
+			display: none;
+		}
+
+
+		padding: 20px 60px 40px;
+
+		img {
+			height: 80px;
+			width: auto;
+			margin-right: 30px;
+			cursor: pointer;
+		}
+
+		.slick-current {
+			// Using outline so it doesn't affect layout or image size
+			outline: 5px solid @menu-select-background;
+			outline-offset: -5px;
+		}
+	}
 
 }
 
-
 //--- Slick slider overrides
 
 .slick-slider * {
-  outline: none;
+	outline: none;
 }
 
 .slick-disabled {
-  opacity: 0.25; // Applied to arrows when not clickable
+	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;
-
-  &:before {
-    display: none;
-  }
+	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;
+	transform: rotate(-45deg);
+	right: 20px;
 }
 
 .slick-prev {
-  transform: rotate(135deg);
-  left: 20px;
+	transform: rotate(135deg);
+	left: 20px;
 }