wait #7171

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index 982187cf9461407fc2a929a2a3ea80f6a3ed92db..14f13ae684d514d541d18ee846b8a82c4dc8a71d 100644 (file)
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -1605,7 +1605,7 @@ LinkeditorLinks.prototype = {
             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)
+            let el = previewDiv
 
             let animWithBackground = animations.filter((v) => v.backgroundColor)
             let backgroundColor = animWithBackground.length > 0 ? animWithBackground[0].backgroundColor : 'transparent'

diff --git a/resources/linkeditor/js/linkeditor.previewLinks.js b/resources/linkeditor/js/linkeditor.previewLinks.js
index f60ed5f077cea1b969fd71df0699a11ef0077e5a..f8a89dbfcbd57cc4ba21b156595de7918b6ce3f7 100644 (file)
--- a/resources/linkeditor/js/linkeditor.previewLinks.js
+++ b/resources/linkeditor/js/linkeditor.previewLinks.js
@@ -7,26 +7,31 @@ var LinkeditorPreviewLinks = function(linkeditor) {
 LinkeditorPreviewLinks.prototype = {
     init: function () {
         // Do something
-    },
 
-    updatePreview: function(link) {
-        let $this = this
-        this.linkData = link
-        let l = this.linkeditor.links.getLinkById(link.uid)
-        let absoluteCss = {
+        this.absoluteCss = {
             width: "100%",
             height: "100%",
             top: 0,
             left: 0,
             position: "absolute",
         }
+    },
+
+    setPreview: function(isZooming = false) {
+        const links = this.linkeditor.links.getLinksOfPage(this.linkeditor.currentPage)
+
+        for (let link in links) {
+            this.updatePreview(links[link],isZooming)
+        }
+    },
+
+    updatePreview: function(link, isZooming = false) {
+        let $this = this
+        this.linkData = link
+        let l = this.linkeditor.links.getLinkById(link.uid)
 
         if ($('[data-id-preview="' + link.uid + '"]').length < 1) {
-            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-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>")
         }
 
         $("[data-id-preview=" + this.linkData.uid + "]").css({
@@ -34,169 +39,204 @@ LinkeditorPreviewLinks.prototype = {
             width: '100%'
         })
 
-        $this.previewByType(link.type)
-    },
-
-    setPreview: function() {
-        const links = this.linkeditor.links.getLinksOfPage(this.linkeditor.currentPage)
-
-        for (let link in links) {
-            this.updatePreview(links[link])
-        }
+        $this.previewByType(link.type, isZooming)
     },
 
-    previewByType: function (type) {
+    previewByType: function (type, isZooming = false) {
         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.previewColor($this)
+        } else if (type === '15' || /\.(jpg|png|svg|webp|avif)$/.exec(this.linkData.image)) {
+            this.previewImage($this)
         } else if (type === '35') {
-            var hash = 'fb_' + window.MD5($this.linkData.image).toString().substring(0, 10)
-            $this.linkeditor.links.setFontSize($this.linkData)
-
-            $("[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.linkeditor.links.updateFontSize($this.linkData)
+            this.previewText($this)
         } else if (type === '39') {
-            let $link = $("[fb-uid="+$this.linkData.uid+"]")
-            let animationText = $link.attr("fb-image_rollover")
-            let animations = $this.linkeditor.links.resolveAnimation(animationText)
-            let animZoom = animations.filter((v) => v.type === "zoomout" || v.type === "zoomin")
+            this.previewLayer($this,isZooming)
+        }
 
-            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 (type === '10') {
+            this.previewIframe($this)
+        }
+
+        if (type === '4') {
+            this.previewVideo($this)
+        }
+
+        if(type === '10' || type === '4') {
+            $("[data-id-preview=" + $this.linkData.uid + "]").css("transform","rotate("+$this.linkData.rot+"deg)")
+        }
+    },
+
+    createPreviewLayerHTML: function(el,zoom = false) {
+        let 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>
+        `;
+        if(zoom) {
+            html = '<div class="preview-wrapper">'+html+'</div>'
+        }
+        el.html(html)
+    },
+
+    /**
+     *
+     * Ci-dessous on applique les differents changements
+     * pour chaque type de previsualisation
+     *
+     */
+    previewColor: function($this) {
+        let previewDiv = $("[data-id-preview=" + this.linkData.uid + "]")
+        previewDiv.css({
+            backgroundColor: $this.linkData.to,
+            'z-index': 99
+        })
+    },
+
+    previewImage: function($this) {
+        let imgUrl = "/fluidbook-publication/" + FLUIDBOOK_DATA.id + "/edit/links/assets/" + this.linkData.image
+        let previewDiv = $("[data-id-preview=" + $this.linkData.uid + "]")
+
+        if(ASSETS['uid_' + this.linkData.uid]['url'] !== undefined) {
+            imgUrl = ASSETS['uid_' + this.linkData.uid]['url']
+        }
+        imgUrl = imgUrl + (imgUrl.includes('.svg') ? "#svgView(preserveAspectRatio(none))" : '')
+        let img = "<img src='" + imgUrl + "' />"
+        previewDiv.css("position","absolute").html(img)
+    },
 
-            this.createPreviewLayerHTML($("[data-id-preview=" + $this.linkData.uid + "]"))
+    previewText: function($this) {
+        var hash = 'fb_' + window.MD5(this.linkData.image).toString().substring(0, 10)
+        this.linkeditor.links.setFontSize(this.linkData)
+        let previewDiv = $("[data-id-preview=" + $this.linkData.uid + "]")
+
+        previewDiv.addClass("link-text").text($this.linkData.to).css({
+            'height': 'auto',
+            'width': 'max-content',
+            'font-family': hash,
+            'color': $this.linkData.extra,
+            'position': 'absolute'
+        })
+        this.linkeditor.links.updateFontSize($this.linkData)
+    },
+
+    previewLayer: function($this,isZooming) {
+        let $link = $("[fb-uid="+$this.linkData.uid+"]")
+        let animationText = $link.attr("fb-image_rollover")
+        let animations = $this.linkeditor.links.resolveAnimation(animationText)
+        let animZoom = animations.filter((v) => v.type === "zoomout" || v.type === "zoomin")
+        let previewDiv = $("[data-id-preview=" + $this.linkData.uid + "]")
+
+        if(!isZooming) {
+            this.createPreviewLayerHTML(previewDiv,animZoom.length > 0)
             this.linkeditor.resize.resizePages()
-            //this.linkeditor.zoom.setZoom(1)
 
-            if(animZoom.length > 0) {
-                let srcImg = $("#linkeditor-page-left .contents img.images").attr('src')
-                let srcText = $("#linkeditor-page-left .contents img.texts").attr('src')
-                let bg = 'url('+srcText+'), url('+srcImg+')'
+            if (animZoom.length > 0) {
+                $("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper").addClass("img")
+
+                let srcImgLeft = $("#linkeditor-page-left .contents img.images").attr('src')
+                let srcTextLeft = $("#linkeditor-page-left .contents img.texts").attr('src')
 
-                if($this.linkData.to === "image") {
+                let bgLeft = 'url(' + srcTextLeft + '), url(' + srcImgLeft + ')'
+
+                if ($this.linkData.to === "image") {
                     // do something
-                    bg = 'url('+srcImg+')'
-                } else if($this.linkData.to === "onlytext" || $this.linkData.to === "text") {
+                    bgLeft = 'url(' + srcImgLeft + ')'
+                } else if ($this.linkData.to === "onlytext" || $this.linkData.to === "text") {
                     // do something
-                    bg = 'url('+srcText+')'
+                    bgLeft = 'url(' + srcTextLeft + ')'
                 }
 
-                $("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper").addClass("img")
-
                 $("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-page-left-copy").css({
-                    "background":bg,
-                    "background-size":"100%"
+                    "background": bgLeft,
+                    "background-size": "100%"
                 })
 
+                if($("#linkeditor").hasClass("double")) {
+                    let srcImgRight = $("#linkeditor-page-right .contents img.images").attr('src')
+                    let srcTextRight = $("#linkeditor-page-right .contents img.texts").attr('src')
+
+                    let bgRight = 'url(' + srcTextRight + '), url(' + srcImgRight + ')'
+
+                    if ($this.linkData.to === "image") {
+                        // do something
+                        bgRight = 'url(' + srcImgRight + ')'
+                    } else if ($this.linkData.to === "onlytext" || $this.linkData.to === "text") {
+                        // do something
+                        bgRight = 'url(' + srcTextRight + ')'
+                    }
+
+                    $("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-page-right-copy").css({
+                        "background": bgRight,
+                        "background-size": "100%"
+                    })
+                }
+
+
                 //$("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper .linkeditor-page").remove()
-            }else {
+            } 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()
-            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")
+                previewDiv.find(".preview-wrapper").remove()
             }
         }
 
-        if (type === '10') {
-            let paramIframe = 'accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;'
-
-            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;
-                }
-            }
+        this.linkeditor.resize.resizeCanvas()
+        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
 
-            let iframe = "<iframe src='"+iframeUrl()+"' allowfullscreen></iframe>"
-            if($this.linkData.video_auto_start === '1' && $this.linkData.video_service === 'youtube') {
-                paramIframe += ' autoplay;'
-            }
+        previewDiv.find(".linkeditor-zoom-copy").css({
+            "left": -left - 1,
+            "top": -top - 1,
+        })
 
-            $("[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(animZoom.length > 0) {
+            previewDiv.children().appendTo("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper")
         }
+    },
 
-        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'} })
+    previewIframe: function($this) {
+        let paramIframe = 'accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;'
+        let previewDiv = $("[data-id-preview=" + $this.linkData.uid + "]")
+
+        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(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,
-            })
+        let iframe = "<iframe src='"+iframeUrl()+"' allowfullscreen></iframe>"
+        if($this.linkData.video_auto_start === '1' && $this.linkData.video_service === 'youtube') {
+            paramIframe += ' autoplay;'
         }
-    },
 
-    clearPreview: function() {
-        $("[data-id-preview],.bg-preview").hide()
-        $("[data-id-preview]").parents('.link').css()
+        previewDiv.find("iframe").remove()
+        previewDiv.css({
+            "position":"relative",
+            "background": $this.linkData.extra
+        }).append(iframe)
+        previewDiv.find("iframe").css($this.absoluteCss).attr("allow", paramIframe)
     },
 
-    showPreview: function(bool) {
-        const el = $("[data-id-preview],.bg-preview")
-        el.hide()
-        if(bool) {
-            el.show()
-        }
-        $("[data-id-preview]").parents('.link').css()
-    },
+    previewVideo: function($this) {
+        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>"
+        let previewDiv = $("[data-id-preview=" + $this.linkData.uid + "]")
 
-    createPreviewLayerHTML: function(el) {
-        let 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>
-        `;
-        el.html(html)
-    },
+        previewDiv.find("video").remove()
+        previewDiv.css("position","relative").append(html)
+        previewDiv.find("video").css({...$this.absoluteCss, ...{'object-fit': 'fill'} })
+    }
 
 }
 

diff --git a/resources/linkeditor/js/linkeditor.zoom.js b/resources/linkeditor/js/linkeditor.zoom.js
index 33c5ee551034b6a64f654d40b051d97e2d513a64..8e7d783bc5db572fba518edad32eed113bf64f14 100644 (file)
--- a/resources/linkeditor/js/linkeditor.zoom.js
+++ b/resources/linkeditor/js/linkeditor.zoom.js
@@ -81,7 +81,7 @@ LinkeditorZoom.prototype = {
 
         $("#linkeditor-canvas").scrollTo({left: sx, top: sy});
         this.linkeditor.rulers.updateRulers();
-        this.linkeditor.previewLinks.setPreview()
+        this.linkeditor.previewLinks.setPreview(true)
     },
 
     normalizeZoom: function (z) {
@@ -140,7 +140,7 @@ LinkeditorZoom.prototype = {
         var top = this.linkeditor.mobileFirst ? 0 : '50%';
         $("#linkeditor-canvas").scrollTo({top: top, left: '50%'});
         this.resetZoomDrag();
-        this.linkeditor.previewLinks.setPreview()
+        this.linkeditor.previewLinks.setPreview(true)
     },
 };
 export default LinkeditorZoom;

diff --git a/resources/linkeditor/style/inc/_links.sass b/resources/linkeditor/style/inc/_links.sass
index 4ff1f3c0f84d35bb14b7fe82cc673f46f8b1615b..a20a1924063e846fca950470eb03a7a7ad17a477 100644 (file)
--- a/resources/linkeditor/style/inc/_links.sass
+++ b/resources/linkeditor/style/inc/_links.sass
@@ -14,6 +14,16 @@ body:not(.preview)
             .bg-preview
                 display: none
 
+#linkeditor
+    &.double
+        .linkeditor-page-right-copy,
+        .linkeditor-page-left-copy
+            width: 50%
+    &.single
+        .linkeditor-page-right-copy,
+        .linkeditor-page-left-copy
+            width: 100%
+
 
 #linkeditor-links
     .link
@@ -57,6 +67,10 @@ body:not(.preview)
                 background-size: 100% 100%
                 background-position: 0 0
 
+        &[fb-type='15']
+            img
+                width: 100%
+
         &[fb-type='39'] [data-id-preview]
             clip-path: inset(0)
             position: absolute
@@ -67,6 +81,12 @@ body:not(.preview)
                 left: 0
                 top: 0
 
+        &[fb-type='10'],
+        &[fb-type='4']
+            img
+                position: absolute
+                z-index: 2
+
         [data-id-preview]
             &.onlytext,&.text
                 .images
@@ -89,7 +109,6 @@ body:not(.preview)
             .linkeditor-page-left-copy
                 position: absolute
                 left: 0
-                width: 100%
                 height: 100%
 
             .linkeditor-zoom-copy,