From dc74ca3b53925770e623afc37f21c0d2214070b2 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 13 Feb 2017 18:41:48 +0100
Subject: [PATCH] fix #1138 @1.5

---
 js/libs/fluidbook/fluidbook.tooltip.js | 104 +++++++++++++++----------
 js/libs/fluidbook/fluidbook.touch.js   |  11 +++
 style/fluidbook.css                    |   6 ++
 style/fluidbook.less                   |   6 ++
 4 files changed, 88 insertions(+), 39 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.tooltip.js b/js/libs/fluidbook/fluidbook.tooltip.js
index 3ad2bebb..1c5619e8 100644
--- a/js/libs/fluidbook/fluidbook.tooltip.js
+++ b/js/libs/fluidbook/fluidbook.tooltip.js
@@ -1,5 +1,6 @@
 function FluidbookTooltip(fluidbook) {
     this.fluidbook = fluidbook;
+    this.displaying = false;
     this.init();
 }
 
@@ -7,51 +8,76 @@ FluidbookTooltip.prototype = {
     init: function () {
         var $this = this;
 
-        $(document).on('mouseover', 'a[data-tooltip]', function () {
-            if (Modernizr.ftouch && !$(this).is("[data-tooltip-touch]")) {
-                return true;
-            }
-            var maxWidth = 140;
-            if ($(this).data('tooltip-maxwidth') !== null) {
-                maxWidth = $(this).data('tooltip-maxwidth');
-            }
-
-            maxWidth *= 1.28;
-            maxWidth = Math.round(maxWidth);
-
-            var position = $(this).offset();
-            position.top += $(this).outerHeight() + 20;
-
-            var text = $(this).data('tooltip');
-            text = $('<textarea />').html(text).text();
-            if (text.substr(0, 1) == '~') {
-                var text = $this.fluidbook.l10n.__(text.substring(1));
-                $(this).data('tooltip', text);
-            }
-            var ok = $this.displayTooltip(text, position, maxWidth);
-            if (ok) {
-                if (Modernizr.ftouch) {
-                    $(document).one("touchstart", function () {
-                        $this.hideTooltip();
-                    });
-                } else {
-                    $(this).one('mouseout', function () {
-                        $this.hideTooltip();
-                    });
-                }
-            }
-            return false;
+        $(window).on('mousemove', function (e) {
+            $this.updateTooltipPosition(e);
         });
-        $("body").append('<div id="tooltip"></div>');
 
+        $(window).on('fluidbookzoom', function (e, zoom) {
+            $("#tooltip").transform({scale: 1 / zoom}).css({'marginTop': 20 / zoom, 'marginLeft': -10 / zoom});
+        });
+
+
+        if (Modernizr.ftouch) {
+            $(document).on('touchstart', 'a[data-tooltip-touch][data-tooltip]', function (e) {
+                $this.updateTooltipPosition(e);
+                return $this.eventTriggered(this);
+            });
+        } else {
+            $(document).on('mouseover', 'a[data-tooltip]', function (e) {
+                $this.updateTooltipPosition(e);
+                return $this.eventTriggered(this);
+            });
+        }
+        $("body").append('<div id="tooltip"></div>');
+    },
 
+    updateTooltipPosition: function (e) {
+        $("#tooltip").css({top: e.pageY, left: e.pageX});
     },
-    displayTooltip: function (tooltip, position, maxWidth) {
-        if (tooltip == undefined || tooltip == '') {
+
+    eventTriggered: function (target) {
+        if (Modernizr.ftouch && !$(target).is("[data-tooltip-touch]")) {
+            return true;
+        }
+        var $this = this;
+        var maxWidth = 140;
+        if ($(target).data('tooltip-maxwidth') !== null) {
+            maxWidth = $(target).data('tooltip-maxwidth');
+        }
+
+        maxWidth *= 1.28;
+        maxWidth = Math.round(maxWidth);
+
+        var position = $(target).offset();
+        position.top += $(target).outerHeight();
+
+        var text = $(target).data('tooltip');
+        text = $('<textarea />').html(text).text();
+        if (text.substr(0, 1) == '~') {
+            var text = $this.fluidbook.l10n.__(text.substring(1));
+            $(target).data('tooltip', text);
+        }
+        if (text == undefined || text == '') {
             return false;
         }
-        position.left -= 10;
-        position.maxWidth = maxWidth;
+
+        if (Modernizr.ftouch) {
+            $(document).one("touchstart", function () {
+                $this.hideTooltip();
+            });
+        } else {
+            $(target).one('mouseout', function () {
+                $this.hideTooltip();
+            });
+        }
+
+        this.displayTooltip(text, position, maxWidth);
+        return false;
+    },
+
+    displayTooltip: function (tooltip, position, maxWidth) {
+        var p = {};
+        p.maxWidth = maxWidth;
         $("#tooltip").html(tooltip).css(position).show();
 
         return true;
diff --git a/js/libs/fluidbook/fluidbook.touch.js b/js/libs/fluidbook/fluidbook.touch.js
index 2b2a2698..345d26ee 100644
--- a/js/libs/fluidbook/fluidbook.touch.js
+++ b/js/libs/fluidbook/fluidbook.touch.js
@@ -67,6 +67,7 @@ FluidbookTouch.prototype = {
         this.offsetX = 0;
         this.offsetY = 0;
         this.triggered = false;
+        this.updateZoom();
     },
     gesturestart: function (event) {
         if (this.fluidbook.pad.enabled) {
@@ -75,6 +76,7 @@ FluidbookTouch.prototype = {
         var e = event.originalEvent;
         this.enableUserScale();
         this.gesturing = true;
+        this.updateZoom();
         return true;
     },
     gesturechange: function (event) {
@@ -83,6 +85,7 @@ FluidbookTouch.prototype = {
         }
         var e = event.originalEvent;
         this.gesturing = true;
+        this.updateZoom();
         return true;
     },
     gestureend: function (event) {
@@ -98,6 +101,7 @@ FluidbookTouch.prototype = {
         } else {
             $('html').removeClass('nopan');
         }
+        this.updateZoom();
         return true;
     },
     start: function (event) {
@@ -121,6 +125,13 @@ FluidbookTouch.prototype = {
         }
         return true;
     },
+    updateZoom: function () {
+        var currentZoom = $('body').data('zoom');
+        var newZoom = DetectZoom.zoom();
+        if (currentZoom != newZoom) {
+            $(window).trigger('fluidbookzoom', newZoom);
+        }
+    },
     testOffset: function () {
         if (this.triggered) {
             return false;
diff --git a/style/fluidbook.css b/style/fluidbook.css
index 0268c7e1..fdc4eb14 100644
--- a/style/fluidbook.css
+++ b/style/fluidbook.css
@@ -1439,6 +1439,12 @@ a.button {
   z-index: 100;
   white-space: pre-wrap;
   line-height: 1.15rem;
+  -moz-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  -o-transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  margin: 20px 0 0 -10px;
 }
 #zoomguides {
   width: 100%;
diff --git a/style/fluidbook.less b/style/fluidbook.less
index ee78fbaf..368bca91 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1688,6 +1688,12 @@ a.button {
 	z-index: 100;
 	white-space: pre-wrap;
 	line-height: 1.15rem;
+	-moz-transform-origin: 0 0;
+	-ms-transform-origin: 0 0;
+	-o-transform-origin: 0 0;
+	-webkit-transform-origin: 0 0;
+	transform-origin: 0 0;
+	margin: 20px 0 0 -10px;
 }
 
 #zoomguides {
-- 
2.39.5