wip #6961

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index 1ef764ca9ed5469bea60dcba016d224d8348d174..45bd644ea8762be174cd5bf883242ae12b8190f0 100644 (file)
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -1608,6 +1608,11 @@ LinkeditorLinks.prototype = {
                 position: "absolute",
             }
 
+            let $link = $("[fb-uid=" + link.uid + "]")
+            let animationText = $link.attr("fb-image_rollover")
+            let animations = this.resolveAnimation(animationText)
+            let animZoom = animations.filter((v) => v.type === "zoomout" || v.type === "zoomin")
+
             if ($('[data-id-preview="' + link.uid + '"]').length < 1) {
                 if(linkData.type === '35') {
                     l.html("<div class='bg-preview'></div><div data-id-preview-wrap='" + link.uid + "'><div data-id-preview='" + link.uid + "'></div></div>")
@@ -1654,14 +1659,15 @@ LinkeditorLinks.prototype = {
                 })
                 this.updateFontSize(link)
             } else if (linkData.type === '39') {
-                if($("[data-id-preview=" + linkData.uid + "] .linkeditor-page").length < 1) {
-                    $("[data-id-preview=" + linkData.uid + "]").html('<div class="linkeditor-zoom-copy"><div class="linkeditor-fluidbook-copy"><div class="linkeditor-page linkeditor-page-right-copy" data-page="1"></div><div class="linkeditor-page linkeditor-page-left-copy" data-page="0"></div></div></div>')
-                    $("[data-id-preview=" + linkData.uid + "]").find(".linkeditor-page-right-copy,.linkeditor-page-left-copy").css({
+                $("[data-id-preview=" + linkData.uid + "]").html('<div class="preview-wrapper"></div>')
+                if($("[data-id-preview=" + linkData.uid + "] .preview-wrapper .linkeditor-page").length < 1) {
+                    $("[data-id-preview=" + linkData.uid + "] .preview-wrapper").html('<div class="linkeditor-zoom-copy"><div class="linkeditor-fluidbook-copy"><div class="linkeditor-page linkeditor-page-right-copy" data-page="1"></div><div class="linkeditor-page linkeditor-page-left-copy" data-page="0"></div></div></div>')
+                    $("[data-id-preview=" + linkData.uid + "] .preview-wrapper").find(".linkeditor-page-right-copy,.linkeditor-page-left-copy").css({
                         "position": "absolute",
                         "left": 0
                     })
 
-                    $("[data-id-preview=" + linkData.uid + "]").find(".linkeditor-zoom-copy").css({
+                    $("[data-id-preview=" + linkData.uid + "] .preview-wrapper").find(".linkeditor-zoom-copy").css({
                         "position": "absolute",
                         "transform-origin": "0 0"
                     })
@@ -1671,15 +1677,36 @@ LinkeditorLinks.prototype = {
 
                     this.linkeditor.zoom.setZoom(1)
                 }
-                if($("[data-id-preview=" + linkData.uid + "] img").length < 1) {
-                    $("#linkeditor-page-left .contents img").clone().addClass('left').appendTo("[data-id-preview=" + linkData.uid + "] .linkeditor-page-left-copy")
-                    $("#linkeditor-page-right .contents img").clone().addClass('right').appendTo("[data-id-preview=" + linkData.uid + "] .linkeditor-page-right-copy")
+                if(animZoom.length > 0) {
+                    let srcImg = $("#linkeditor-page-right .contents img.images").attr('src')
+                    let srcText = $("#linkeditor-page-right .contents img.texts").attr('src')
+                    let bg = 'url('+srcText+'), url('+srcImg+')'
+
+                    if(linkData.to === "image") {
+                        // do something
+                        bg = 'url('+srcImg+')'
+                    } else if(linkData.to === "onlytext" || linkData.to === "text") {
+                        // do something
+                        bg = 'url('+srcText+')'
+                    }
+
+                    $("[data-id-preview=" + linkData.uid + "]").css("clip-path","inset(0)")
+                    $("[data-id-preview=" + linkData.uid + "] .preview-wrapper").addClass("img").find(".linkeditor-page-right-copy").css({
+                        'background': bg,
+                        'background-size': '100%'
+                    })
+                    //$("[data-id-preview=" + linkData.uid + "] .preview-wrapper .linkeditor-page").remove()
+                }else {
+                    if ($("[data-id-preview=" + linkData.uid + "] .preview-wrapper img").length < 1) {
+                        $("#linkeditor-page-left .contents img").clone().addClass('left').appendTo("[data-id-preview=" + linkData.uid + "] .preview-wrapper .linkeditor-page-left-copy")
+                        $("#linkeditor-page-right .contents img").clone().addClass('right').appendTo("[data-id-preview=" + linkData.uid + "] .preview-wrapper .linkeditor-page-right-copy")
+                    }
                 }
 
                 this.linkeditor.resize.resizeCanvas()
                 const $this = this
 
-                $("[data-id-preview=" + linkData.uid + "]").css({
+                $("[data-id-preview=" + linkData.uid + "] .preview-wrapper").css({
                     "clip-path":"inset(0)",
                     "position": "absolute",
                 }).find('img').css({
@@ -1693,14 +1720,13 @@ LinkeditorLinks.prototype = {
                     let linkeditorZoomRect = $("#linkeditor-zoom")[0].getBoundingClientRect()
                     let left = $this.linkeditor.fluidbookToGlobal(linkData.left, 'left') - linkeditorZoomRect.left
                     let top = $this.linkeditor.fluidbookToGlobal(linkData.top, 'top') - linkeditorZoomRect.top
-                    $("[data-id-preview=" + linkData.uid + "]").find(".linkeditor-zoom-copy").css({
+                    $("[data-id-preview=" + linkData.uid + "] .preview-wrapper").find(".linkeditor-zoom-copy").css({
                         "left": -left - 1,
                         "top": -top - 1,
                     })
                 })
             }
 
-
             if (linkData.type === '10') {
                 let paramIframe = 'accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;'
 
@@ -1768,11 +1794,17 @@ LinkeditorLinks.prototype = {
             let backgroundColor = animWithBackground.length > 0 ? animWithBackground[0].backgroundColor : null
 
             $link.find('.bg-preview').css('background-color',backgroundColor)
-            if(links[link].type === '39') {
-                previewDiv.addClass(links[link].to)
-            }
+            /**
+             *  Utiliser les classes css pour selectionner seulement
+             *  le calque à animer
+             */
+            if(animationText) {
+                if(links[link].type === '39') {
+                    previewDiv.addClass(links[link].to)
+                }
 
-            this.linkeditor.linksAnimations.executeAnimations(el, animations)
+                this.linkeditor.linksAnimations.executeAnimations(el, animations)
+            }
         }
     },
 
@@ -1821,18 +1853,20 @@ LinkeditorLinks.prototype = {
     },
 
     resolveAnimation: function(animationText) {
-        let animations = animationText.split('---')
         let obj = []
-        let result = []
-        for(let anim in animations) {
-            let o = animations[anim].trim().split('\n')
-            obj.push({});
-            result = []
-            for(let k in o) {
-                let entries = o[k].split('=')
-                result[entries[0]] = entries[1]
+        if(animationText) {
+            let animations = animationText.split('---')
+            let result = []
+            for (let anim in animations) {
+                let o = animations[anim].trim().split('\n')
+                obj.push({});
+                result = []
+                for (let k in o) {
+                    let entries = o[k].split('=')
+                    result[entries[0]] = entries[1]
+                }
+                obj[anim] = Object.assign({}, result)
             }
-            obj[anim] = Object.assign({},result)
         }
         return obj
     }

diff --git a/resources/linkeditor/style/inc/_links.sass b/resources/linkeditor/style/inc/_links.sass
index fc04a3b48548ef4a434820e02286992aa196a3cc..d29a58395f529411cbe4a29637fee8246c807bb7 100644 (file)
--- a/resources/linkeditor/style/inc/_links.sass
+++ b/resources/linkeditor/style/inc/_links.sass
@@ -20,7 +20,8 @@
         .canvas .texts
             z-index: 2
 
-        .bg-preview
+        .bg-preview,
+        .preview-wrapper
             width: 100%
             height: 100%
             position: absolute