From b365f7d9e1fb4168881177e63c4bc59bcc089a70 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 29 Nov 2019 12:06:23 +0100
Subject: [PATCH] wip #3186 @0.5

---
 images/interface.svg                          | 11 +++
 .../fluidbook/links/fluidbook.links.zoom.js   | 22 +++--
 style/fluidbook.less                          | 98 +------------------
 style/tooltip.less                            | 98 +++++++++++++++++++
 4 files changed, 124 insertions(+), 105 deletions(-)
 create mode 100644 style/tooltip.less

diff --git a/images/interface.svg b/images/interface.svg
index e80f8558..204cf2e7 100644
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -35,6 +35,17 @@
 		c-0.1-0.2-0.3-0.4-0.5-0.4c-0.2,0-0.5,0.1-0.6,0.2l-2,2.4l-0.7-0.6l2-2.4c0.2-0.2,0.2-0.4,0.1-0.7C5.4,16,5.2,15.8,5,15.8l-1.3-0.4
 		l6.2-3.3L7.7,18.8z"/>
     </symbol>
+    <symbol id="icon-pdf" viewBox="0 0 25 25">
+        <path d="M15.5,12.2c0,0.4,0.3,0.7,0.7,0.7s0.7-0.3,0.7-0.7V9.4c0-0.5-0.2-1-0.6-1.3l-4.7-4.7c-0.4-0.4-0.8-0.6-1.3-0.6H3.8
+		c-1,0-1.9,0.9-1.9,1.9v15.6c0,1,0.9,1.9,1.9,1.9h1.1c0.4,0,0.7-0.3,0.7-0.7s-0.3-0.7-0.7-0.7H3.8c-0.3,0-0.5-0.2-0.5-0.5V4.7
+		c0-0.3,0.2-0.5,0.5-0.5h6.3v3.6c0,1,0.8,1.8,1.8,1.8h3.6V12.2z M11.5,7.8V5.2l3,3h-2.6C11.7,8.2,11.5,8,11.5,7.8z"/>
+        <path d="M8.6,13.5h-1c-0.4,0-0.7,0.3-0.7,0.7v7.3c0,0.4,0.3,0.7,0.7,0.7s0.7-0.3,0.7-0.7v-2.2h0.3c1.6,0,2.9-1.3,2.9-2.9
+		S10.2,13.5,8.6,13.5z M8.6,17.9H8.2v-3h0.3c0.8,0,1.5,0.7,1.5,1.5S9.4,17.9,8.6,17.9z"/>
+        <path d="M13.5,13.5c-0.4,0-0.7,0.3-0.7,0.7v7.3c0,0.4,0.3,0.7,0.7,0.7c2,0,3.7-1.6,3.7-3.6v-1.5C17.2,15.1,15.5,13.5,13.5,13.5z
+		 M15.8,18.6c0,1-0.7,1.8-1.6,2.1V15c0.9,0.3,1.6,1.1,1.6,2.1V18.6z"/>
+        <path d="M20.9,14.9h1.5c0.4,0,0.7-0.3,0.7-0.7s-0.3-0.7-0.7-0.7h-1.5c-1.2,0-2.2,1-2.2,2.2v5.9c0,0.4,0.3,0.7,0.7,0.7
+		s0.7-0.3,0.7-0.7V19h1.7c0.4,0,0.7-0.3,0.7-0.7s-0.3-0.7-0.7-0.7h-1.7v-1.9C20.1,15.2,20.5,14.9,20.9,14.9z"/>
+    </symbol>
     <symbol id="interface-next-simple" viewBox="0 0 12 22">
         <path d="M11.89,10.71L1.49,0.12c-0.15-0.15-0.4-0.15-0.55,0L0.13,0.95c-0.15,0.15-0.15,0.4,0,0.56l9.34,9.52
 		l-9.35,9.54c-0.15,0.15-0.15,0.4,0,0.56l0.82,0.84c0.15,0.15,0.4,0.15,0.55,0l10.39-10.6c0.08-0.09,0.11-0.2,0.1-0.31
diff --git a/js/libs/fluidbook/links/fluidbook.links.zoom.js b/js/libs/fluidbook/links/fluidbook.links.zoom.js
index 6219624a..fecd13f0 100644
--- a/js/libs/fluidbook/links/fluidbook.links.zoom.js
+++ b/js/libs/fluidbook/links/fluidbook.links.zoom.js
@@ -143,18 +143,24 @@ FluidbookLinksZoom.prototype = {
             $groupWrapper.append('<div class="zoomPopupWrapper" id="zoomPopup_' + zoomID + '"></div>');
             if ($groupWrapper.find('.zoomPopupClose').length === 0) {
                 var menu = '<div id="zoomPopupMenuWrapper"><div id="zoomPopupMenu">';
-                if (zoomLink.data('shareurl') !== undefined) {
-                    menu += '<a href="#" class="button nolabel" data-action="share" data-extra="' + zoomLink.data('shareurl') + '" data-context="product">' + getSpriteIcon('nav-share') + '</a>';
-                }
-                if (zoomLink.data('producturl') !== undefined) {
-                    var label = this.fluidbook.datas.product_zoom_label_1 !== '' ? this.fluidbook.datas.product_zoom_label_1 : this.fluidbook.l10n.__('see on the website');
-                    var icon = getSpriteIcon(this.fluidbook.datas.product_zoom_icon_1) !== 'none' ? getSpriteIcon(this.fluidbook.datas.product_zoom_icon_1) : '';
-                    menu += '<a href="' + zoomLink.data('producturl') + '" target="_blank" class="button">' + icon + '<span>' + label + '</span></a>';
+                if (zoomLink.data('shareurl') !== undefined && zoomLink.data('shareurl') !== '') {
+                    menu += '<a href="#" class="button nolabel" data-tooltip="' + this.fluidbook.l10n.__('share') + '" data-action="share" data-extra="' + zoomLink.data('shareurl') + '" data-context="product">' + getSpriteIcon('nav-share') + '</a>';
                 }
                 if (zoomLink.data('extra-1') !== undefined) {
                     var label = this.fluidbook.datas.product_zoom_label_2;
                     var icon = getSpriteIcon(this.fluidbook.datas.product_zoom_icon_2) !== 'none' ? getSpriteIcon(this.fluidbook.datas.product_zoom_icon_2) : '';
-                    menu += '<a href="' + zoomLink.data('extra-1') + '" target="_blank" class="button">' + icon + '<span>' + label + '</span></a>';
+                    var linkClass = "";
+                    if (label !== '') {
+                        label = '<span>' + label + '</span>';
+                    } else {
+                        linkClass = " nolabel";
+                    }
+                    menu += '<a href="' + zoomLink.data('extra-1') + '"  data-tooltip="' + this.fluidbook.datas.product_zoom_tooltip_2 + '" target="_blank" class="button ' + linkClass + '">' + icon + label + '</a>';
+                }
+                if (zoomLink.data('producturl') !== undefined && zoomLink.data('producturl') !== '') {
+                    var label = this.fluidbook.datas.product_zoom_label_1 !== '' ? this.fluidbook.datas.product_zoom_label_1 : this.fluidbook.l10n.__('see on the website');
+                    var icon = getSpriteIcon(this.fluidbook.datas.product_zoom_icon_1) !== 'none' ? getSpriteIcon(this.fluidbook.datas.product_zoom_icon_1) : '';
+                    menu += '<a href="' + zoomLink.data('producturl') + '"  data-tooltip="' + this.fluidbook.datas.product_zoom_tooltip_1 + '" target="_blank" class="button">' + icon + '<span>' + label + '</span></a>';
                 }
                 menu += '</div></div>';
                 $groupWrapper.append('<div id="zoomPopupBackground"><div class="bg"></div>' + menu + '</div>');
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 176dc015..1c8810ce 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -2578,103 +2578,7 @@ ul.chapters {
 
 }
 
-/* Tooltip */
-
-#tooltip {
-  @tooltip-arrows-size: 10px;
-
-  position: absolute;
-  background-color: @tooltip-background;
-  color: @tooltip-color;
-  top: 0px;
-  left: 0px;
-  padding: 20px 25px;
-  border-radius: 3px;
-  display: none;
-  font-size: unit(@tooltip-font-size, px);
-  z-index: 100;
-  white-space: pre-wrap;
-  line-height: 1.14;
-  -moz-transform-origin: 0 0;
-  -ms-transform-origin: 0 0;
-  -o-transform-origin: 0 0;
-  -webkit-transform-origin: 0 0;
-  transform-origin: 0 0;
-  box-sizing: border-box;
-  pointer-events: none;
-
-  &[data-style="invert"] {
-    font-weight: 700;
-    background-color: @tooltip-color;
-    color: @tooltip-background;
-
-    &[data-pos-y="n"] {
-      &:after {
-        border-bottom-color: @tooltip-color;
-      }
-    }
-
-    &[data-pos-y="s"] {
-      &:after {
-        border-top-color: @tooltip-color;
-      }
-    }
-  }
-
-  &[data-style="error"] {
-    font-weight: 700;
-    background-color: #cc0000;
-    color: #fff;
-
-    &[data-pos-y="n"] {
-      &:after {
-        border-bottom-color: #cc0000;
-      }
-    }
-
-    &[data-pos-y="s"] {
-      &:after {
-        border-top-color: #cc0000;
-      }
-    }
-  }
-
-  &:after {
-    content: "";
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-left: @tooltip-arrows-size solid transparent;
-    border-right: @tooltip-arrows-size solid transparent;
-    display: block;
-  }
-
-  &[data-pos-y="n"] {
-    &:after {
-      border-bottom: @tooltip-arrows-size solid @tooltip-background;
-      top: unit(@tooltip-arrows-size*-1, px);
-    }
-  }
-
-  &[data-pos-y="s"] {
-    &:after {
-      border-top: @tooltip-arrows-size solid @tooltip-background;
-      bottom: unit(@tooltip-arrows-size*-1, px);
-    }
-  }
-
-  &[data-pos-x="w"] {
-    &:after {
-      left: 16px;
-    }
-  }
-
-  &[data-pos-x="e"] {
-    &:after {
-      right: 16px;
-    }
-  }
-}
+@import "tooltip";
 
 /* Privacy settings */
 
diff --git a/style/tooltip.less b/style/tooltip.less
new file mode 100644
index 00000000..5627ba6a
--- /dev/null
+++ b/style/tooltip.less
@@ -0,0 +1,98 @@
+
+/* Tooltip */
+
+#tooltip {
+  @tooltip-arrows-size: 10px;
+
+  position: absolute;
+  background-color: @tooltip-background;
+  color: @tooltip-color;
+  top: 0px;
+  left: 0px;
+  padding: 20px 25px;
+  border-radius: 3px;
+  display: none;
+  font-size: unit(@tooltip-font-size, px);
+  z-index: 102;
+  white-space: pre-wrap;
+  line-height: 1.14;
+  -moz-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  -o-transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  pointer-events: none;
+
+  &[data-style="invert"] {
+    font-weight: 700;
+    background-color: @tooltip-color;
+    color: @tooltip-background;
+
+    &[data-pos-y="n"] {
+      &:after {
+        border-bottom-color: @tooltip-color;
+      }
+    }
+
+    &[data-pos-y="s"] {
+      &:after {
+        border-top-color: @tooltip-color;
+      }
+    }
+  }
+
+  &[data-style="error"] {
+    font-weight: 700;
+    background-color: #cc0000;
+    color: #fff;
+
+    &[data-pos-y="n"] {
+      &:after {
+        border-bottom-color: #cc0000;
+      }
+    }
+
+    &[data-pos-y="s"] {
+      &:after {
+        border-top-color: #cc0000;
+      }
+    }
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-left: @tooltip-arrows-size solid transparent;
+    border-right: @tooltip-arrows-size solid transparent;
+    display: block;
+  }
+
+  &[data-pos-y="n"] {
+    &:after {
+      border-bottom: @tooltip-arrows-size solid @tooltip-background;
+      top: unit(@tooltip-arrows-size*-1, px);
+    }
+  }
+
+  &[data-pos-y="s"] {
+    &:after {
+      border-top: @tooltip-arrows-size solid @tooltip-background;
+      bottom: unit(@tooltip-arrows-size*-1, px);
+    }
+  }
+
+  &[data-pos-x="w"] {
+    &:after {
+      left: 16px;
+    }
+  }
+
+  &[data-pos-x="e"] {
+    &:after {
+      right: 16px;
+    }
+  }
+}
\ No newline at end of file
-- 
2.39.5