wip #2286 @3

diff --git a/images/interface.svg b/images/interface.svg
index eab1519e2ad587f33ff05a605fdfca206009e263..a9da0ad3428b387355d2d2ba9bea9d9735bc752e 100644 (file)
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -1,8 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
     <symbol id="interface-loader" viewBox="0 0 48 48">
         <circle cx="24" cy="24" r="23"></circle>
-        <circle cx="24" cy="24" fill="none" stroke="currentColor" stroke-width="3" r="16" stroke-dasharray="80 80" transform="rotate(102 24 24)">
-            <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 24 24;360 24 24" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
+        <circle cx="24" cy="24" fill="none" stroke="currentColor" stroke-width="3" r="16" stroke-dasharray="80 80"
+                transform="rotate(102 24 24)">
+            <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 24 24;360 24 24"
+                              keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
         </circle>
     </symbol>
     <symbol id="interface-chevron" viewBox="0 0 512 512">
@@ -20,4 +22,10 @@
     <symbol id="interface-previous" viewBox="0 0 53 107">
         <path d="M36.5,55.1L21,39.6l15.5-15.5c0.3-0.3,0.3-0.7,0-0.9l-1.4-1.4c-0.3-0.3-0.7-0.3-0.9,0L17,39 c-0.2,0.2-0.2,0.4-0.2,0.6c0,0.2,0,0.4,0.2,0.5l17.2,17.2c0.3,0.3,0.7,0.3,0.9,0l1.4-1.4C36.8,55.7,36.8,55.3,36.5,55.1z M22,86.5 h2v-15h-2V86.5z M29.1,79l5.8-5.8c0.3-0.3,0.3-0.7,0-0.9l-0.5-0.5c-0.3-0.3-0.7-0.3-0.9,0L27.3,78c0,0,0,0-0.1,0l-0.5,0.5 c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.2,0.1,0.4,0.2,0.5l0.5,0.5c0,0,0.1,0,0.1,0.1l6.2,6.2c0.3,0.3,0.7,0.3,0.9,0l0.5-0.5 c0.3-0.3,0.3-0.7,0-0.9L29.1,79z"/>
     </symbol>
+    <symbol id="interface-minus" viewBox="0 0 50 50">
+        <rect x="16.5" y="23.5" class="st0" width="17" height="2.9"/>
+    </symbol>
+    <symbol id="interface-plus" viewBox="0 0 50 50">
+        <polygon class="st0" points="33.5,23.5 26.5,23.5 26.5,16.5 23.5,16.5 23.5,23.5 16.5,23.5 16.5,26.5 23.5,26.5 23.5,33.5 26.5,33.5 26.5,26.5 33.5,26.5 "/>
+    </symbol>
 </svg>

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index d1d57827efa1ac4e438271640ea53496247ae0f7..fc5c6c88b1ec3188f0b846aa0843d9b5775904a0 100644 (file)
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -155,8 +155,8 @@ FluidbookMenu.prototype = {
         var read = multimedia.indexOf('r_') == 0 ? ' data-readmode="1"' : '';
         $("#view").append('<div class="mview" dir="ltr" data-menu="multimedia"' + read + '>' + view + '</div>');
 
-        if(animateLinks){
-            this.fluidbook.links.animateLinks($("#view"),500);
+        if (animateLinks) {
+            this.fluidbook.links.animateLinks($("#view"), 500);
         }
 
         if (callback != undefined) {
@@ -522,7 +522,7 @@ FluidbookMenu.prototype = {
         var w = ww * 0.6;
         var h = hh * 0.8;
         var forceHeight = false;
-        var fullscreen = false;
+        var fullscreen = m.data('fullscreen') == '1';
         var nw, nh;
         var hasCaption = true;
 

diff --git a/js/libs/fluidbook/links/fluidbook.links.zoomhd.js b/js/libs/fluidbook/links/fluidbook.links.zoomhd.js
index 0d6299b74fc9f1a2c1f7bda4ba318743f196eb4b..413210fcacf5244838696752738f4eaabb273b72 100644 (file)
--- a/js/libs/fluidbook/links/fluidbook.links.zoomhd.js
+++ b/js/libs/fluidbook/links/fluidbook.links.zoomhd.js
@@ -20,16 +20,23 @@ FluidbookLinksZoomHD.prototype = {
 
         view = '<div class="caption">' + this.fluidbook.menu.closeButton() + '</div>';
         view += '<div class="content"><div class="zoomhdHolder"><div class="zoomhdScale">';
-        view += '</div></div></div>';
+        view += '</div><div class="zoomhdControls"><a href="#" class="minus">'+getSpriteIcon('interface-minus')+'</a><a href="#" class="plus">'+getSpriteIcon('interface-plus')+'</a></div></div></div>';
 
-        $("#view").append('<div class="mview" dir="ltr" data-menu="zoomhd">' + view + '</div>');
+        $("#view").append('<div class="mview" dir="ltr" data-menu="zoomhd" data-fullscreen="1">' + view + '</div>');
 
-        $("#view").find('.zoomhdScale').append(image);
+        var e = $("#view").find('.zoomhdScale');
+        e.append(image);
+
+        this.initZoomHD(e);
 
         if (callback != undefined) {
             callback();
         }
     },
+
+    initZoomHD: function (e) {
+
+    },
 }
 
 $(function () {

diff --git a/style/fluidbook.less b/style/fluidbook.less
index db9f938f323b5eb14cf029b24e95d45e6759e789..e5bd76392ceb3b1cdbbcb56d3037ac1c10c1533d 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1281,7 +1281,7 @@ html.ios body.portrait #interface {
        -o-transition: opacity @menutransition, top @menutransition;
        transition: opacity @menutransition, top @menutransition;
 
-       &[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"], &[data-menu="externalchapters"], &[data-menu="iframe"], &[data-menu="text"] {
+       &[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"], &[data-menu="externalchapters"], &[data-menu="iframe"], &[data-menu="text"], &[data-menu="zoomhd"] {
                .caption {
                        height: 0;
                        padding: 0;
@@ -1416,11 +1416,52 @@ html.ios body.portrait #interface {
                                                height: 60px;
                                                z-index: 2;
                                        }
+                               }
+                       }
+               }
+       }
+
+       .zoomhdHolder {
+               position: relative;
+               width: 100%;
+               height: 100%;
+               overflow: hidden;
+
+               .zoomhdControls {
+                       position: absolute;
+                       bottom: 50px;
+                       left: 50%;
+                       width: 0;
 
+                       a {
+                               position: absolute;
+                               display: block;
+                               top: -20px;
+                               left: 10px;
+                               width: 50px;
+                               height: 50px;
+                               border-radius: 50%;
+                               background-color: @menu-button-background;
+                               color: @menu-text;
+
+                               &.minus {
+                                       left: -60px;
                                }
                        }
                }
 
+               .zoomhdScale {
+                       position: absolute;
+                       top: 50%;
+                       left: 50%;
+                       img{
+                               display: block;
+                               position: absolute;
+                               top: -50%;
+                               left: -50%;
+                       }
+               }
+
        }
 
        &[data-menu="webvideo"], &[data-menu="webvideo"] {