wait #7162 @1:00

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index 68ab135649b784817e7c7f552ee3ae6b1198dee7..e3f2fadf91ff8a3d6301290d768d747129013a85 100644 (file)
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -356,15 +356,16 @@ LinkeditorLinks.prototype = {
 
         $(document).on("click", "#linkeditor-start-animation", function(e) {
             e.preventDefault()
-            let isActive = $("#preview-links").hasClass("active")
             $("#preview-links").addClass("active")
-            $this.linkeditor.previewLinks.setPreview(false,isActive)
+            $("body").addClass("preview")
             $this.setAnim(false)
         })
 
         setInterval(function () {
             $this.checkLastSelectedLink();
         }, 250);
+
+        $this.linkeditor.previewLinks.setPreview(false,true)
     },
 
     key: function (shortcut, scope) {
@@ -435,6 +436,7 @@ LinkeditorLinks.prototype = {
         this.linkeditor.hasChanged();
         this.updatePolygonLinks();
         this.updateLayers();
+
         this.linkeditor.previewLinks.updatePreview(this.lastSelectedLinkData);
     },
 
@@ -1173,7 +1175,9 @@ LinkeditorLinks.prototype = {
         this.linkeditor.rulers.updateMagnetValues();
         this.updateLayers();
         this.updatePolygonLinks(false);
-        this.linkeditor.previewLinks.updatePreview(LINKS[id]);
+
+        const $this = this
+        $this.linkeditor.previewLinks.updatePreview(LINKS[id]);
     },
 
     updateSelectionData: function (props) {
@@ -1558,19 +1562,13 @@ LinkeditorLinks.prototype = {
     },
 
     preview: function() {
-        let el = $("[data-action='links.preview']")
-        el.toggleClass("active")
-
-        if(el.hasClass("active")) {
-            this.linkeditor.previewLinks.setPreview()
-        } else {
-            this.linkeditor.previewLinks.clearPreview()
-        }
+        $("body").toggleClass("preview")
+        $("#preview-links").toggleClass("active")
     },
 
     animation: function() {
-        $("[data-action='links.preview']").addClass("active")
-        this.linkeditor.previewLinks.setPreview()
+        $("body").addClass("preview")
+        $("#preview-links").addClass("active")
         this.setAnim()
     },
 
@@ -1608,14 +1606,44 @@ LinkeditorLinks.prototype = {
             let el = previewDiv.get(0)
 
             let animWithBackground = animations.filter((v) => v.backgroundColor)
-            let backgroundColor = animWithBackground.length > 0 ? animWithBackground[0].backgroundColor : null
+            let backgroundColor = animWithBackground.length > 0 ? animWithBackground[0].backgroundColor : 'transparent'
+
+            if(links[link].type !== '45') {
+                $link.find('.bg-preview').css('background-color', backgroundColor)
+            }
+
+            /**
+             * On supprime les svgs s'il y en a
+             * utile dans le cas si c'est une animation pie
+             */
+            previewDiv.find('svg').remove()
 
-            $link.find('.bg-preview').css('background-color',backgroundColor)
             /**
-             *  Utiliser les classes css pour selectionner seulement
-             *  le calque à animer
+             * On ajoute un id utilisable par l'animation pie
              */
+            previewDiv.attr('id','linkwrapper-'+links[link].uid)
+
+            /**
+             * On ajoute un attribut data-color utilisable par l'animation pie
+             * Pour les liens couleurs
+             */
+            if(links[link].type === '14') {
+                previewDiv.attr('data-color', links[link].to)
+            }
+
+            /**
+             * On ajoute un attribut data-color utilisable par l'animation pie
+             * Pour les liens texte
+             */
+            if(links[link].type === '35') {
+                previewDiv.attr('data-anim-numeric-value', links[link].to).addClass('textLink')
+            }
+
             if(animationText) {
+                /**
+                 *  Utiliser les classes css pour selectionner seulement
+                 *  le calque à animer
+                 */
                 if(links[link].type === '39') {
                     previewDiv.addClass(links[link].to)
                 }
@@ -1641,26 +1669,32 @@ LinkeditorLinks.prototype = {
                 'line-height': FONT_SIZE[hash]['capHeight']
             })
         } catch (e) {
-
+            console.log(e)
         }
     },
 
     updateFontSize: function(link) {
-        let scaleString = link.image_rollover.split('\n').filter((n) => { return n.includes('scale') })[0]
+        let scaleString = false
+        if (link.image_rollover) {
+            scaleString = link.image_rollover.split('\n').filter((n) => {
+                return n.includes('scale')
+            })[0]
+        }
+
         let scale = scaleString ? parseFloat(scaleString.split('=')[1]) : 1
 
         let zoom = 0.39
 
-        $("[data-id-preview="+link.uid+"]").css({
-            transform: "scale("+scale+")",
-            'transform-origin': "0 100%"
+        $("[data-id-preview=" + link.uid + "]").css({
+            transform: "scale(" + scale + ")",
+            'transform-origin': "0 100% !important"
         })
 
-        $("[data-id-preview-wrap="+link.uid+"]").css({
-            transform: "scale("+zoom+")",
+        $("[data-id-preview-wrap=" + link.uid + "]").css({
+            transform: "scale(" + zoom + ")",
             'transform-origin': "0 0",
-            width: "calc(100% / "+zoom+")",
-            height: "calc(100% / "+zoom+")"
+            width: "calc(100% / " + zoom + ")",
+            height: "calc(100% / " + zoom + ")"
         })
     },
 
@@ -1675,7 +1709,7 @@ LinkeditorLinks.prototype = {
                 result = []
                 for (let k in o) {
                     let entries = o[k].split('=')
-                    result[entries[0]] = entries[1]
+                    result[entries[0]] = entries[1]?.replace(/([\"]+)/gm, "")
                 }
                 obj[anim] = Object.assign({}, result)
             }

diff --git a/resources/linkeditor/style/inc/_links.sass b/resources/linkeditor/style/inc/_links.sass
index d29a58395f529411cbe4a29637fee8246c807bb7..cd7971e0f12e671fd5fcfc81b41d9c1f9245a0fe 100644 (file)
--- a/resources/linkeditor/style/inc/_links.sass
+++ b/resources/linkeditor/style/inc/_links.sass
@@ -1,5 +1,13 @@
 @import "variables"
 
+body.preview
+    #linkeditor-links
+        .link
+            .bg-preview,
+            [data-id-preview]
+                display: block
+
+
 #linkeditor-links
     .link
 
@@ -20,6 +28,10 @@
         .canvas .texts
             z-index: 2
 
+        .bg-preview,
+        [data-id-preview]
+            display: none
+
         .bg-preview,
         .preview-wrapper
             width: 100%
@@ -29,6 +41,10 @@
         [data-id-preview]:not(.link-text)
             overflow: hidden
 
+        &[fb-type='14'] [data-id-preview]
+            mix-blend-mode: normal
+            position: absolute
+
         [data-id-preview]
             &.onlytext,&.text
                 .images
@@ -45,8 +61,6 @@
                     display: initial !important
 
 
-
-
         #linkeditor-main.dropfile &.dropfile
             border-style: dashed