From a8f8500889e87dd5bf39a4b66c6e7eb684e7bfe4 Mon Sep 17 00:00:00 2001 From: soufiane Date: Tue, 5 Nov 2024 18:12:26 +0100 Subject: [PATCH] wait #7171 --- resources/linkeditor/js/linkeditor.links.js | 2 +- .../linkeditor/js/linkeditor.previewLinks.js | 314 ++++++++++-------- resources/linkeditor/js/linkeditor.zoom.js | 4 +- resources/linkeditor/style/inc/_links.sass | 21 +- 4 files changed, 200 insertions(+), 141 deletions(-) diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js index 982187cf9..14f13ae68 100644 --- 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 f60ed5f07..f8a89dbfc 100644 --- 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("
") - } else { - l.html("
") - } + l.html("
") } $("[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 = "" - $("[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('
') - } + 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 = ` +
+
+
+
+
+
+ `; + if(zoom) { + html = '
'+html+'
' + } + 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 = "" + 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 = "" - 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 = "" - $("[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 = "" + 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 = "" + let previewDiv = $("[data-id-preview=" + $this.linkData.uid + "]") - createPreviewLayerHTML: function(el) { - let html = ` -
-
-
-
-
-
- `; - 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 33c5ee551..8e7d783bc 100644 --- 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 4ff1f3c0f..a20a19240 100644 --- 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, -- 2.39.5