From b4df09164fc468f719277dc4430bd73251d97a09 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 9 Nov 2021 19:07:32 +0100
Subject: [PATCH] wait #4854 @0.5

---
 images/symbols/cart-overlay.svg      |  8 ++--
 js/libs/fluidbook/fluidbook.cart.js  | 21 +++++++++--
 js/libs/fluidbook/fluidbook.links.js |  2 +-
 style/cart.less                      | 55 +++++++++++++++++++++++++++-
 4 files changed, 76 insertions(+), 10 deletions(-)

diff --git a/images/symbols/cart-overlay.svg b/images/symbols/cart-overlay.svg
index 1ceaf7fb..2096d4bd 100644
--- a/images/symbols/cart-overlay.svg
+++ b/images/symbols/cart-overlay.svg
@@ -1,19 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
-    <symbol id="link-cart-add-hover" viewBox="0 0 34 34">
+    <symbol id="link-cart-add-hover" viewBox="0 0 35 35">
         <path d="M17.5,0.5c-9.4,0-17,7.6-17,17c0,9.4,7.6,17,17,17c9.4,0,17-7.6,17-17C34.5,8.1,26.9,0.5,17.5,0.5z M26.2,18.5
 		h-7.8v7.8h-2v-7.8H8.8v-2h7.8V8.8h2v7.8h7.8V18.5z"/>
     </symbol>
-    <symbol id="link-cart-remove-hover" viewBox="0 0 34 34">
+    <symbol id="link-cart-remove-hover" viewBox="0 0 35 35">
         <path d="M17.5,0.5c-9.4,0-17,7.6-17,17c0,9.4,7.6,17,17,17s17-7.6,17-17C34.5,8.1,26.9,0.5,17.5,0.5z M26.2,18.5H8.8
 		v-2h17.5V18.5z"/>
     </symbol>
-    <symbol id="link-cart-add" viewBox="0 0 34 34">
+    <symbol id="link-cart-add" viewBox="0 0 35 35">
         <path d="M17.5,0C7.9,0,0,7.9,0,17.5S7.9,35,17.5,35S35,27.1,35,17.5S27.1,0,17.5,0z M17.5,34C8.4,34,1,26.6,1,17.5
 		S8.4,1,17.5,1S34,8.4,34,17.5S26.6,34,17.5,34z"/>
         <polygon points="18.5,8.8 16.5,8.8 16.5,16.5 8.8,16.5 8.8,18.5 16.5,18.5 16.5,26.2 18.5,26.2 18.5,18.5 26.3,18.5
 		26.3,16.5 18.5,16.5 	"/>
     </symbol>
-    <symbol id="link-cart-remove" viewBox="0 0 34 34">
+    <symbol id="link-cart-remove" viewBox="0 0 35 35">
         <path d="M17.5,0C7.9,0,0,7.9,0,17.5S7.9,35,17.5,35S35,27.1,35,17.5S27.1,0,17.5,0z M17.5,34C8.4,34,1,26.6,1,17.5
 		S8.4,1,17.5,1S34,8.4,34,17.5S26.6,34,17.5,34z"/>
         <rect x="8.7" y="16.5" width="17.5" height="2"/>
diff --git a/js/libs/fluidbook/fluidbook.cart.js b/js/libs/fluidbook/fluidbook.cart.js
index 67188370..6ca7ef48 100644
--- a/js/libs/fluidbook/fluidbook.cart.js
+++ b/js/libs/fluidbook/fluidbook.cart.js
@@ -63,16 +63,29 @@ FluidbookCart.prototype = {
     },
 
     updateLinks: function () {
+        console.log('updatelinks');
+
         $('a[data-cart-ref]').removeClass('active');
+
         try {
             var references = this.instance.getItemsReferences();
+            $.each(references, function (k, ref) {
+                $('a[data-cart-ref="' + ref + '"]').addClass('active');
+            });
         } catch (err) {
-            return;
         }
 
-        $.each(references, function (k, ref) {
-            $('a[data-cart-ref="' + ref + '"]').addClass('active');
-        });
+        if (this.fluidbook.settings.cartLinkAppearance === 'overlay') {
+            $('a[data-cart-ref]').each(function () {
+
+                var paddingTop = 0.5 * ($(this).outerHeight() - 100);
+                var paddingLeft = 0.5 * ($(this).outerWidth() - 300);
+                $(this).attr('data-tooltip', null).addClass('overlay').css({
+                    paddingTop: paddingTop,
+                    paddingLeft: paddingLeft
+                }).html('<div class="remove">' + getSpriteIcon('link-cart-remove') + getSpriteIcon('link-cart-remove-hover') + '</div><div class="add">' + getSpriteIcon('link-cart-add') + getSpriteIcon('link-cart-add-hover') + '</div>');
+            });
+        }
     },
     getMenuWidth: function () {
         try {
diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 4b11ac28..d0b5c314 100644
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -457,7 +457,7 @@ FluidbookLinks.prototype = {
         }, 200);
 
 
-        $(fluidbook).trigger('fluidbook.links.ready');
+        $(this.fluidbook).trigger('fluidbook.links.ready');
         this.resize();
     },
 
diff --git a/style/cart.less b/style/cart.less
index 4dd39b50..79946a4b 100644
--- a/style/cart.less
+++ b/style/cart.less
@@ -1 +1,54 @@
-@import "cart/@{import-cart-styles}";
\ No newline at end of file
+@import "cart/@{import-cart-styles}";
+
+a[data-cart-ref] {
+  &.overlay {
+    color: #fff;
+
+    div {
+      @w: 100px;
+      display: none;
+      position: relative;
+      width: @w;
+      height: @w;
+
+      &:last-child {
+        margin-left: @w;
+      }
+
+      svg {
+        top:0;
+        left: 0;
+        width: @w;
+        height: @w;
+        overflow: visible;
+        position: absolute;
+        display: block;
+
+        &:first-child {
+          display: none;
+        }
+      }
+
+      &:hover {
+        svg {
+          &:first-child {
+            display: block;
+          }
+
+          &:last-child {
+            display: none;
+          }
+        }
+      }
+    }
+
+    &.displayArea:hover {
+      background-color: rgba(0, 0, 0, 0.65);
+      mix-blend-mode: multiply;
+
+      div {
+        display: inline-block;
+      }
+    }
+  }
+}
\ No newline at end of file
-- 
2.39.5