From 779e73eb128ee35f4fbab6e3a06fa6d1395a486f Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 2 Sep 2024 18:22:56 +0200
Subject: [PATCH] wip #6961

---
 resources/linkeditor/js/linkeditor.links.js | 284 ++++++++++----------
 1 file changed, 149 insertions(+), 135 deletions(-)

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index 45bd644ea..d101500d2 100644
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -22,6 +22,8 @@ var LinkeditorLinks = function (linkeditor) {
 
     this.locks = new LinkeditorLinksLock(linkeditor);
 
+    this.linkData = [];
+
     this.init();
 }
 
@@ -357,7 +359,7 @@ LinkeditorLinks.prototype = {
             let isActive = $("#preview-links").hasClass("active")
             $("#preview-links").addClass("active")
             $this.setPreview(false,isActive)
-            $this.setAnim(false,isActive)
+            $this.setAnim(false)
         })
 
         setInterval(function () {
@@ -1595,10 +1597,9 @@ LinkeditorLinks.prototype = {
         }
     },
 
-    updatePreview: function(link, zooming = false) {
+    updatePreview: function(link) {
+        this.linkData = link
         if($("#preview-links").hasClass("active")) {
-            let linkData = link
-
             let l = this.getLinkById(link.uid)
             let absoluteCss = {
                 width: "100%",
@@ -1608,165 +1609,178 @@ 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') {
+                if(this.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>")
                 } else {
                     l.html("<div class='bg-preview'></div><div data-id-preview='" + link.uid + "'></div>")
                 }
             }
 
-            $("[data-id-preview=" + linkData.uid + "]").css({
+            $("[data-id-preview=" + this.linkData.uid + "]").css({
                 height: '100%',
                 width: '100%'
             })
 
-            if (linkData.type === '14') {
-                $("[data-id-preview=" + linkData.uid + "]").css({
-                    backgroundColor: linkData.to,
-                    'z-index': 99
-                })
-            } else if (linkData.type === '15' || /\.(jpg|png|svg|webp|avif)$/.exec(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 + "]").css("position","absolute").html(img)
-
-                $("[data-id-preview=" + linkData.uid + "] img").css({
-                    height: '100%',
-                    width: '100%',
-                    display: 'block',
-                    'background-size': '100% 100%',
-                    'background-position': '0 0',
-                })
-            } else if (linkData.type === '35') {
-                var hash = 'fb_' + window.MD5(linkData.image).toString().substring(0, 10)
-                this.setFontSize(linkData)
-                $("[data-id-preview=" + linkData.uid + "]").addClass("link-text").text(linkData.to).css({
-                    'height': 'auto',
-                    'width': 'max-content',
-                    'font-family': hash,
-                    'color': linkData.extra,
-                    'position': 'absolute'
-                })
-                this.updateFontSize(link)
-            } else if (linkData.type === '39') {
-                $("[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 + "] .preview-wrapper").find(".linkeditor-zoom-copy").css({
-                        "position": "absolute",
-                        "transform-origin": "0 0"
-                    })
-                    this.linkeditor.resize.resizePages()
-
-                    $(".linkeditor-fluidbook-copy").css({position: 'absolute', "transform-origin": "0 0"});
-
-                    this.linkeditor.zoom.setZoom(1)
-                }
-                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+')'
-                    }
+            this.previewByType(link.type)
+        }
+    },
 
-                    $("[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")
-                    }
-                }
+    previewByType: function (type) {
+        const $this = this
+        if (type === '14') {
+            $("[data-id-preview=" + $this.linkData.uid + "]").css({
+                backgroundColor: $this.linkData.to,
+                'z-index': 99
+            })
+        } else if (type === '15' || /\.(jpg|png|svg|webp|avif)$/.exec($this.linkData.image)) {
+            let imgUrl = "/fluidbook-publication/" + FLUIDBOOK_DATA.id + "/edit/links/assets/" + $this.linkData.image
+            if(ASSETS['uid_' + $this.linkData.uid]['url'] !== undefined && type === '15') {
+                imgUrl = ASSETS['uid_' + $this.linkData.uid]['url']
+            }
+            imgUrl = imgUrl + (imgUrl.includes('.svg') ? "#svgView(preserveAspectRatio(none))" : '')
+            let img = "<img src='" + imgUrl + "' />"
+            $("[data-id-preview=" + $this.linkData.uid + "]").css("position","absolute").html(img)
 
-                this.linkeditor.resize.resizeCanvas()
-                const $this = this
+            $("[data-id-preview=" + $this.linkData.uid + "] img").css({
+                height: '100%',
+                width: '100%',
+                display: 'block',
+                'background-size': '100% 100%',
+                'background-position': '0 0',
+            })
+        } else if (type === '35') {
+            var hash = 'fb_' + window.MD5($this.linkData.image).toString().substring(0, 10)
+            this.setFontSize($this.linkData)
+            console.log(this)
+
+            $("[data-id-preview=" + $this.linkData.uid + "]").addClass("link-text").text($this.linkData.to).css({
+                'height': 'auto',
+                'width': 'max-content',
+                'font-family': hash,
+                'color': $this.linkData.extra,
+                'position': 'absolute'
+            })
+            this.updateFontSize($this.linkData)
+        } else if (type === '39') {
+            let $link = $("[fb-uid="+this.linkData.uid+"]")
+            let animationText = $link.attr("fb-image_rollover")
+            let animations = this.resolveAnimation(animationText)
+            let animZoom = animations.filter((v) => v.type === "zoomout" || v.type === "zoomin")
 
-                $("[data-id-preview=" + linkData.uid + "] .preview-wrapper").css({
-                    "clip-path":"inset(0)",
+            if(animZoom.length > 0 && $("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper").length < 1) {
+                $("[data-id-preview=" + $this.linkData.uid + "]").append('<div class="preview-wrapper"></div>')
+            }
+
+            if($("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-page").length < 1) {
+                $("[data-id-preview=" + $this.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=" + $this.linkData.uid + "]").find(".linkeditor-page-right-copy,.linkeditor-page-left-copy").css({
                     "position": "absolute",
-                }).find('img').css({
-                    'width': '100%',
-                    'height': '100%',
-                    'position': 'absolute',
-                    'left': 0,'top': 0
+                    "left": 0
                 })
 
-                requestAnimationFrame(function() {
-                    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 + "] .preview-wrapper").find(".linkeditor-zoom-copy").css({
-                        "left": -left - 1,
-                        "top": -top - 1,
-                    })
+                $("[data-id-preview=" + $this.linkData.uid + "]").find(".linkeditor-zoom-copy").css({
+                    "position": "absolute",
+                    "transform-origin": "0 0"
                 })
-            }
+                this.linkeditor.resize.resizePages()
 
-            if (linkData.type === '10') {
-                let paramIframe = 'accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;'
+                $(".linkeditor-fluidbook-copy").css({position: 'absolute', "transform-origin": "0 0"});
 
-                let iframeUrl = () => {
-                    if(linkData.video_service === 'youtube') {
-                        return "https://www.youtube.com/embed/" + linkData.to + "?controls=" + linkData.video_controls + "&modestbranding=1&rel=0&showinfo=" + linkData.video_controls + "&loop=" + linkData.video_loop + "&muted="+linkData.video_sound_on+"&fs=0&hl&playsinline=true&enablejsapi=1";
-                    }else if(linkData.video_service === 'dailymotion') {
-                        return 'https://www.dailymotion.com/embed/video/' + linkData.to;
-                    }else if(linkData.video_service === 'dailymotion') {
-                        return 'https://player.vimeo.com/video/' + linkData.to + '?autoplay=' + linkData.video_auto_start + '&loop=' + linkData.video_loop + '&muted=' + linkData.video_sound_on;
-                    }
+                this.linkeditor.zoom.setZoom(1)
+            }
+            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($this.linkData.to === "image") {
+                    // do something
+                    bg = 'url('+srcImg+')'
+                } else if($this.linkData.to === "onlytext" || $this.linkData.to === "text") {
+                    // do something
+                    bg = 'url('+srcText+')'
                 }
 
-                let iframe = "<iframe src='"+iframeUrl()+"' allowfullscreen></iframe>"
-                if(linkData.video_auto_start === '1' && linkData.video_service === 'youtube') {
-                    paramIframe += ' autoplay;'
+                $("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper").css("clip-path","inset(0)")
+                $("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper").addClass("img").find(".linkeditor-page-right-copy").css({
+                    'background': bg,
+                    'background-size': '100%'
+                })
+                //$("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper .linkeditor-page").remove()
+            }else {
+                if ($("[data-id-preview=" + $this.linkData.uid + "] img").length < 1) {
+                    $("#linkeditor-page-left .contents img").clone().addClass('left').appendTo("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-page-left-copy")
+                    $("#linkeditor-page-right .contents img").clone().addClass('right').appendTo("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-page-right-copy")
                 }
+                $("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper").remove()
+            }
+
+            this.linkeditor.resize.resizeCanvas()
 
-                $("[data-id-preview=" + linkData.uid + "]").find("iframe").remove()
-                $("[data-id-preview=" + linkData.uid + "]").css({
-                    "position":"relative",
-                    "background": linkData.extra
-                }).append(iframe)
-                $("[data-id-preview=" + linkData.uid + "]").find("iframe").css(absoluteCss).attr("allow", paramIframe)
+            $("[data-id-preview=" + $this.linkData.uid + "]").css({
+                "clip-path":"inset(0)",
+                "position": "absolute",
+            }).find('img').css({
+                'width': '100%',
+                'height': '100%',
+                'position': 'absolute',
+                'left': 0,'top': 0
+            })
+
+            requestAnimationFrame(function() {
+                let linkeditorZoomRect = $("#linkeditor-zoom")[0].getBoundingClientRect()
+                let left = $this.linkeditor.fluidbookToGlobal($this.linkData.left, 'left') - linkeditorZoomRect.left
+                let top = $this.linkeditor.fluidbookToGlobal($this.linkData.top, 'top') - linkeditorZoomRect.top
+                $("[data-id-preview=" + $this.linkData.uid + "]").find(".linkeditor-zoom-copy").css({
+                    "left": -left - 1,
+                    "top": -top - 1,
+                })
+            })
+            if(animZoom.length > 0) {
+                $("[data-id-preview=" + $this.linkData.uid + "]").children().appendTo("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper")
             }
+        }
+
+        if (type === '10') {
+            let paramIframe = 'accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;'
 
-            if (linkData.type === '4') {
-                let url = "/fluidbook-publication/" + FLUIDBOOK_DATA.id + "/edit/links/assets/" + linkData.to
-                let html = "<video playsinline='playsinline' controlslist='nodownload' disablepictureinpicture oncontextmenu='return false;' src='"+url+"'><source src='"+url+"'></video>"
-                $("[data-id-preview=" + linkData.uid + "]").find("video").remove()
-                $("[data-id-preview=" + linkData.uid + "]").css("position","relative").append(html)
-                $("[data-id-preview=" + linkData.uid + "]").find("video").css({...absoluteCss, ...{'object-fit': 'fill'} })
+            let iframeUrl = () => {
+                if($this.linkData.video_service === 'youtube') {
+                    return "https://www.youtube.com/embed/" + $this.linkData.to + "?controls=" + $this.linkData.video_controls + "&modestbranding=1&rel=0&showinfo=" + $this.linkData.video_controls + "&loop=" + $this.linkData.video_loop + "&muted="+$this.linkData.video_sound_on+"&fs=0&hl&playsinline=true&enablejsapi=1";
+                }else if($this.linkData.video_service === 'dailymotion') {
+                    return 'https://www.dailymotion.com/embed/video/' + $this.linkData.to;
+                }else if($this.linkData.video_service === 'dailymotion') {
+                    return 'https://player.vimeo.com/video/' + $this.linkData.to + '?autoplay=' + $this.linkData.video_auto_start + '&loop=' + $this.linkData.video_loop + '&muted=' + $this.linkData.video_sound_on;
+                }
             }
 
-            if(linkData.type === '10' || linkData.type === '4') {
-                $("[data-id-preview=" + linkData.uid + "]").css("transform","rotate("+linkData.rot+"deg)").find('img').css({
-                    "position":"absolute",
-                    "z-index":2,
-                })
+            let iframe = "<iframe src='"+iframeUrl()+"' allowfullscreen></iframe>"
+            if($this.linkData.video_auto_start === '1' && $this.linkData.video_service === 'youtube') {
+                paramIframe += ' autoplay;'
             }
+
+            $("[data-id-preview=" + $this.linkData.uid + "]").find("iframe").remove()
+            $("[data-id-preview=" + $this.linkData.uid + "]").css({
+                "position":"relative",
+                "background": $this.linkData.extra
+            }).append(iframe)
+            $("[data-id-preview=" + $this.linkData.uid + "]").find("iframe").css(absoluteCss).attr("allow", paramIframe)
+        }
+
+        if (type === '4') {
+            let url = "/fluidbook-publication/" + FLUIDBOOK_DATA.id + "/edit/links/assets/" + $this.linkData.to
+            let html = "<video playsinline='playsinline' controlslist='nodownload' disablepictureinpicture oncontextmenu='return false;' src='"+url+"'><source src='"+url+"'></video>"
+            $("[data-id-preview=" + $this.linkData.uid + "]").find("video").remove()
+            $("[data-id-preview=" + $this.linkData.uid + "]").css("position","relative").append(html)
+            $("[data-id-preview=" + $this.linkData.uid + "]").find("video").css({...absoluteCss, ...{'object-fit': 'fill'} })
+        }
+
+        if(type === '10' || type === '4') {
+            $("[data-id-preview=" + $this.linkData.uid + "]").css("transform","rotate("+$this.linkData.rot+"deg)").find('img').css({
+                "position":"absolute",
+                "z-index":2,
+            })
         }
     },
 
@@ -1775,7 +1789,7 @@ LinkeditorLinks.prototype = {
 
         for(let link in links) {
             if(!isActive) {
-                this.updatePreview(links[link], zooming)
+                this.updatePreview(links[link])
             }
         }
     },
-- 
2.39.5