From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 12 Aug 2024 09:24:42 +0000 (+0200)
Subject: wip #6961
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=8af937bd9992590b471bf322a139768abf7bbb8f;p=fluidbook-toolbox.git

wip #6961
---

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index ff1c6c944..4ba9a7426 100644
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -1610,9 +1610,9 @@ LinkeditorLinks.prototype = {
 
             if ($('[data-id-preview="' + link.uid + '"]').length < 1) {
                 if(linkData.type === '35') {
-                    l.html("<div data-id-preview-wrap='" + link.uid + "'><div data-id-preview='" + link.uid + "'></div></div>")
+                    l.html("<div class='bg-preview'></div><div data-id-preview-wrap='" + link.uid + "'><div data-id-preview='" + link.uid + "'></div></div>")
                 } else {
-                    l.html("<div data-id-preview='" + link.uid + "'></div>")
+                    l.html("<div class='bg-preview'></div><div data-id-preview='" + link.uid + "'></div>")
                 }
             }
 
@@ -1633,7 +1633,7 @@ LinkeditorLinks.prototype = {
                 }
                 imgUrl = imgUrl + (imgUrl.includes('.svg') ? "#svgView(preserveAspectRatio(none))" : '')
                 let img = "<img src='" + imgUrl + "' />"
-                $("[data-id-preview=" + linkData.uid + "]").html(img)
+                $("[data-id-preview=" + linkData.uid + "]").css("position","absolute").html(img)
 
                 $("[data-id-preview=" + linkData.uid + "] img").css({
                     height: '100%',
@@ -1649,7 +1649,8 @@ LinkeditorLinks.prototype = {
                     'height': 'auto',
                     'width': 'max-content',
                     'font-family': hash,
-                    'color': linkData.extra
+                    'color': linkData.extra,
+                    'position': 'absolute'
                 })
                 this.updateFontSize(link)
             } else if (linkData.type === '39') {
@@ -1757,14 +1758,21 @@ LinkeditorLinks.prototype = {
         const links = all ? this.getLinksOfPage(this.linkeditor.currentPage) : [this.getLinksOfPage(this.linkeditor.currentPage)[this.getCurrentSelection().attr('fb-uid')]]
 
         for(let link in links) {
-            let animationText = $("[fb-uid=" + links[link].uid + "]").attr("fb-image_rollover")
+            let $link = $("[fb-uid=" + links[link].uid + "]")
+            let animationText = $link.attr("fb-image_rollover")
             let animations = this.resolveAnimation(animationText)
             let previewDiv = $("[data-id-preview=" + links[link].uid + "]")
             let el = previewDiv.get(0)
 
-            if(links[link].type === '15' || /\.(jpg|png|svg|webp|avif)$/.exec(links[link].image)) {
+            let animWithBackground = animations.filter((v) => v.backgroundColor)
+            let backgroundColor = animWithBackground.length > 0 ? animWithBackground[0].backgroundColor : null
+
+            console.log($link.find('.bg-preview'))
+
+            $link.find('.bg-preview').css('background-color',backgroundColor)
+            /*if(links[link].type === '15' || /\.(jpg|png|svg|webp|avif)$/.exec(links[link].image)) {
                 el = previewDiv.children().get(0)
-            }
+            }*/
 
             this.linkeditor.linksAnimations.executeAnimations(el, animations)
         }
@@ -1803,13 +1811,15 @@ LinkeditorLinks.prototype = {
 
         $("[data-id-preview-wrap="+link.uid+"]").css({
             transform: "scale("+zoom+")",
-            'transform-origin': "0 0"
+            'transform-origin': "0 0",
+            width: "calc(100% / "+zoom+")",
+            height: "calc(100% / "+zoom+")"
         })
     },
 
     clearPreview: function() {
-        $("[data-id-preview]").remove()
-        $("[data-action='links.animation']").removeClass("active")
+        $("[data-id-preview],.bg-preview").remove()
+        $("[data-id-preview]").parents('.link').css()
     },
 
     resolveAnimation: function(animationText) {
diff --git a/resources/linkeditor/style/inc/_links.sass b/resources/linkeditor/style/inc/_links.sass
index 5a7b7610e..c6a5c7e1f 100644
--- a/resources/linkeditor/style/inc/_links.sass
+++ b/resources/linkeditor/style/inc/_links.sass
@@ -20,6 +20,11 @@
         .canvas .texts
             z-index: 2
 
+        .bg-preview
+            width: 100%
+            height: 100%
+            position: absolute
+
         [data-id-preview]:not(.link-text)
             overflow: hidden