wip #1503 @2

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index c3018e23b04f1e25be6cdd536d9572304edd0aaf..6fa92c42bdafea54140e974642618ab5a81ffd11 100644 (file)
--- 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 8ff1038ab6f52f9b6504d58ffdc927e6b8dabe97..3955e99c1000297781c1ff09f3da0f1cc0a6dd05 100644 (file)
--- 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"] {