From: soufiane <soufiane@cubedesigners.com>
Date: Wed, 7 Aug 2024 13:56:26 +0000 (+0200)
Subject: wip #6961 @4:00
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=78daf0bcfa0158f1894fcffc055fc4bdf0e9c1a7;p=fluidbook-toolbox.git

wip #6961 @4:00
---

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index c0ca33cd1..ff1c6c944 100644
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -1567,15 +1567,9 @@ LinkeditorLinks.prototype = {
     },
 
     animation: function() {
-        let el = $("[data-action^='links.']")
-        el.addClass("active")
-        if(el.hasClass("active")) {
-            this.setPreview()
-            this.setAnim()
-        } else {
-            this.clearPreview()
-            el.removeClass("active")
-        }
+        $("[data-action='links.preview']").addClass("active")
+        this.setPreview()
+        this.setAnim()
     },
 
     loadFontSize: function() {
@@ -1633,7 +1627,10 @@ LinkeditorLinks.prototype = {
                     'z-index': 99
                 })
             } else if (linkData.type === '15' || /\.(jpg|png|svg|webp|avif)$/.exec(linkData.image)) {
-                let imgUrl = linkData.type === '15' ? ASSETS['uid_' + linkData.uid]['url'] : "/fluidbook-publication/" + FLUIDBOOK_DATA.id + "/edit/links/assets/" + linkData.image
+                let imgUrl = "/fluidbook-publication/" + FLUIDBOOK_DATA.id + "/edit/links/assets/" + linkData.image
+                if(ASSETS['uid_' + linkData.uid]['url'] !== undefined && linkData.type === '15') {
+                    imgUrl = ASSETS['uid_' + linkData.uid]['url']
+                }
                 imgUrl = imgUrl + (imgUrl.includes('.svg') ? "#svgView(preserveAspectRatio(none))" : '')
                 let img = "<img src='" + imgUrl + "' />"
                 $("[data-id-preview=" + linkData.uid + "]").html(img)
@@ -1648,7 +1645,7 @@ LinkeditorLinks.prototype = {
             } else if (linkData.type === '35') {
                 var hash = 'fb_' + window.MD5(linkData.image).toString().substring(0, 10)
                 this.setFontSize(linkData)
-                $("[data-id-preview=" + linkData.uid + "]").text(linkData.to).css({
+                $("[data-id-preview=" + linkData.uid + "]").addClass("link-text").text(linkData.to).css({
                     'height': 'auto',
                     'width': 'max-content',
                     'font-family': hash,
@@ -1751,20 +1748,25 @@ LinkeditorLinks.prototype = {
 
         for(let link in links) {
             if(!isActive) {
-                console.log('ok 2')
                 this.updatePreview(links[link], zooming)
             }
         }
     },
 
-    setAnim: function() {
-        const links = this.getLinksOfPage(this.linkeditor.currentPage)
+    setAnim: function(all = true) {
+        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 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)) {
+                el = previewDiv.children().get(0)
+            }
 
-            this.linkeditor.linksAnimations.executeAnimations($("[data-id-preview=" + links[link].uid + "]").children().get(0), animations)
+            this.linkeditor.linksAnimations.executeAnimations(el, animations)
         }
     },
 
diff --git a/resources/linkeditor/js/linkeditor.panels.js b/resources/linkeditor/js/linkeditor.panels.js
index 1fc923293..cc0e272b6 100644
--- a/resources/linkeditor/js/linkeditor.panels.js
+++ b/resources/linkeditor/js/linkeditor.panels.js
@@ -38,7 +38,7 @@ LinkeditorPanels.prototype = {
             }
         });
 
-        $("[data-name=image_rollover]").append("<button id='linkeditor-start-animation'>Lancer l'animation</button>")
+        $("[data-name=image_rollover] label").append("<button id='linkeditor-start-animation'><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><use xlink:href=\"#linkeditor-start-animation\"></use></svg></button>")
 
         this.linkeditor.layers.init();
 
diff --git a/resources/linkeditor/style/inc/_form.sass b/resources/linkeditor/style/inc/_form.sass
index 2935ac18e..3cfe375c4 100644
--- a/resources/linkeditor/style/inc/_form.sass
+++ b/resources/linkeditor/style/inc/_form.sass
@@ -276,5 +276,21 @@ button
 .select2-container--bootstrap .select2-results > .select2-results__options
     max-height: 350px !important
 
+
+[data-name='image_rollover'] label
+    display: flex !important
+    align-items: end
+    justify-content: space-between
+
 #linkeditor-start-animation
-    display: block
+    display: flex
+    width: 26px
+    height: 26px
+    background: transparent
+    padding: 4px 4px
+    border: 0
+    &:hover
+        background-color: #000
+    svg
+        width: 100%
+        fill: transparent
diff --git a/resources/linkeditor/style/inc/_links.sass b/resources/linkeditor/style/inc/_links.sass
index fdea33551..5a7b7610e 100644
--- a/resources/linkeditor/style/inc/_links.sass
+++ b/resources/linkeditor/style/inc/_links.sass
@@ -20,7 +20,7 @@
         .canvas .texts
             z-index: 2
 
-        [data-id-preview]
+        [data-id-preview]:not(.link-text)
             overflow: hidden
 
         #linkeditor-main.dropfile &.dropfile