From: Vincent Vanwaelscappel <vincent@cubedesigners.Com>
Date: Thu, 11 Oct 2018 15:07:50 +0000 (+0200)
Subject: wip #2286 @3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=61d471c455f751f335424edac31ed5eda5a5ab9b;p=fluidbook-html5.git

wip #2286 @3
---

diff --git a/images/interface.svg b/images/interface.svg
index eab1519e..a9da0ad3 100644
--- 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 d1d57827..fc5c6c88 100644
--- 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 0d6299b7..413210fc 100644
--- 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 db9f938f..e5bd7639 100644
--- 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"] {