From 2f00f2d94306e94b7c50c3c2e14cc0d6e81f2dc2 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 28 Jun 2017 16:23:30 +0200
Subject: [PATCH] wip #1503 @2

---
 js/libs/fluidbook/fluidbook.menu.js | 39 ++++++++++++++++++++---------
 style/fluidbook.less                |  6 +++++
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index c3018e23..6fa92c42 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -185,7 +185,9 @@ FluidbookMenu.prototype = {
         view += '<div class="content"><div class="multimediaScale">';
         view += markup;
         view += '</div></div>';
-        $("#view").append('<div class="mview" dir="ltr" data-menu="multimedia">' + view + '</div>');
+
+        var read = multimedia.indexOf('r_') == 0 ? ' data-readmode="1"' : '';
+        $("#view").append('<div class="mview" dir="ltr" data-menu="multimedia"' + read + '>' + view + '</div>');
         if (callback != undefined) {
             callback();
         }
@@ -443,6 +445,7 @@ FluidbookMenu.prototype = {
         var h = hh * 0.8;
         var forceHeight = false;
         var fullscreen = false;
+        var nw, nh;
 
         $("#viewOverlay").css({width: ww, height: hh});
 
@@ -510,12 +513,11 @@ FluidbookMenu.prototype = {
                 break;
             case 'multimedia':
                 var iframe = m.find('iframe,img');
+                var readmode = m.data('readmode') == 1;
 
                 nw = parseInt($(iframe).data('width'));
                 nh = parseInt($(iframe).data('height'));
 
-                forceHeight = true;
-
                 var w = Math.max(ww * 0.8);
                 var h = Math.max(hh * 0.8);
                 if (ww < 600) {
@@ -524,16 +526,29 @@ FluidbookMenu.prototype = {
                     fullscreen = true;
                 }
 
-                var s = Math.min(w / nw, h / nh);
-                if (iframe.is('img')) {
-                    s = Math.min(1, s);
-                }
-                if (!fullscreen) {
-                    w = nw * s;
-                    h = nh * s;
+                var s, x, y;
+                if (readmode) {
+                    w = Math.max(w * 0.5, nw);
+                    forceHeight = false;
+                    if (w > ww * 0.9) {
+                        fullscreen = true;
+                        w = ww;
+                        h = hh;
+                    }
+                } else {
+                    forceHeight = true;
+
+                    s = Math.min(w / nw, h / nh);
+                    if (iframe.is('img')) {
+                        s = Math.min(1, s);
+                    }
+                    if (!fullscreen) {
+                        w = nw * s;
+                        h = nh * s;
+                    }
+                    x = ( w - (nw * s)  ) / 2;
+                    y = (h - (nh * s)) / 2;
                 }
-                var x = ( w - (nw * s)  ) / 2;
-                var y = (h - (nh * s)) / 2;
 
                 m.find('.multimediaScale').css({width: nw, height: nh, overflow: 'hidden'}).transform({translateX: x + 'px', translateY: y + 'px', scale: [s, s], origin: [0, 0]}).css('text-align', 'left');
                 break;
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 8ff1038a..3955e99c 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -881,6 +881,8 @@ html.ios body.portrait #interface {
 		.caption {
 			height: 0;
 			padding: 0;
+			position: relative;
+			z-index: 4;
 			a, div {
 				&.button.back {
 					width: 30px;
@@ -892,6 +894,10 @@ html.ios body.portrait #interface {
 			}
 		}
 
+		.ps__scrollbar-x-rail, .ps__scrollbar-y-rail {
+			z-index: 4;
+		}
+
 	}
 
 	&[data-menu="webvideo"], &[data-menu="webvideo"] {
-- 
2.39.5