From 40e415d4483e40ded939dd66eab3177e34f91800 Mon Sep 17 00:00:00 2001 From: soufiane Date: Wed, 11 Sep 2024 18:46:06 +0200 Subject: [PATCH] wip #6961 --- resources/linkeditor/js/linkeditor.links.js | 214 +----------------- .../linkeditor/js/linkeditor.previewLinks.js | 210 ++++++++++++++++- resources/linkeditor/js/linkeditor.zoom.js | 4 +- 3 files changed, 214 insertions(+), 214 deletions(-) diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js index d101500d2..68ab13564 100644 --- a/resources/linkeditor/js/linkeditor.links.js +++ b/resources/linkeditor/js/linkeditor.links.js @@ -358,7 +358,7 @@ LinkeditorLinks.prototype = { e.preventDefault() let isActive = $("#preview-links").hasClass("active") $("#preview-links").addClass("active") - $this.setPreview(false,isActive) + $this.linkeditor.previewLinks.setPreview(false,isActive) $this.setAnim(false) }) @@ -435,7 +435,7 @@ LinkeditorLinks.prototype = { this.linkeditor.hasChanged(); this.updatePolygonLinks(); this.updateLayers(); - this.updatePreview(this.lastSelectedLinkData); + this.linkeditor.previewLinks.updatePreview(this.lastSelectedLinkData); }, hasUIDLink: function (uid) { @@ -1173,7 +1173,7 @@ LinkeditorLinks.prototype = { this.linkeditor.rulers.updateMagnetValues(); this.updateLayers(); this.updatePolygonLinks(false); - this.updatePreview(LINKS[id]); + this.linkeditor.previewLinks.updatePreview(LINKS[id]); }, updateSelectionData: function (props) { @@ -1562,15 +1562,15 @@ LinkeditorLinks.prototype = { el.toggleClass("active") if(el.hasClass("active")) { - this.setPreview() + this.linkeditor.previewLinks.setPreview() } else { - this.clearPreview() + this.linkeditor.previewLinks.clearPreview() } }, animation: function() { $("[data-action='links.preview']").addClass("active") - this.setPreview() + this.linkeditor.previewLinks.setPreview() this.setAnim() }, @@ -1597,203 +1597,6 @@ LinkeditorLinks.prototype = { } }, - updatePreview: function(link) { - this.linkData = link - if($("#preview-links").hasClass("active")) { - let l = this.getLinkById(link.uid) - let absoluteCss = { - width: "100%", - height: "100%", - top: 0, - left: 0, - position: "absolute", - } - - if ($('[data-id-preview="' + link.uid + '"]').length < 1) { - if(this.linkData.type === '35') { - l.html("
") - } else { - l.html("
") - } - } - - $("[data-id-preview=" + this.linkData.uid + "]").css({ - height: '100%', - width: '100%' - }) - - this.previewByType(link.type) - } - }, - - 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 = "" - $("[data-id-preview=" + $this.linkData.uid + "]").css("position","absolute").html(img) - - $("[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") - - if(animZoom.length > 0 && $("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper").length < 1) { - $("[data-id-preview=" + $this.linkData.uid + "]").append('
') - } - - if($("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-page").length < 1) { - $("[data-id-preview=" + $this.linkData.uid + "]").html('
') - $("[data-id-preview=" + $this.linkData.uid + "]").find(".linkeditor-page-right-copy,.linkeditor-page-left-copy").css({ - "position": "absolute", - "left": 0 - }) - - $("[data-id-preview=" + $this.linkData.uid + "]").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($this.linkData.to === "image") { - // do something - bg = 'url('+srcImg+')' - } else if($this.linkData.to === "onlytext" || $this.linkData.to === "text") { - // do something - bg = 'url('+srcText+')' - } - - $("[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=" + $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;' - - 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; - } - } - - let 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 = "" - $("[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, - }) - } - }, - - setPreview: function(zooming = false, isActive = false) { - const links = this.getLinksOfPage(this.linkeditor.currentPage) - - for(let link in links) { - if(!isActive) { - this.updatePreview(links[link]) - } - } - }, - setAnim: function(all = true) { const links = all ? this.getLinksOfPage(this.linkeditor.currentPage) : [this.getLinksOfPage(this.linkeditor.currentPage)[this.getCurrentSelection().attr('fb-uid')]] @@ -1861,11 +1664,6 @@ LinkeditorLinks.prototype = { }) }, - clearPreview: function() { - $("[data-id-preview],.bg-preview").remove() - $("[data-id-preview]").parents('.link').css() - }, - resolveAnimation: function(animationText) { let obj = [] if(animationText) { diff --git a/resources/linkeditor/js/linkeditor.previewLinks.js b/resources/linkeditor/js/linkeditor.previewLinks.js index d06fa0ab5..f43ade8f8 100644 --- a/resources/linkeditor/js/linkeditor.previewLinks.js +++ b/resources/linkeditor/js/linkeditor.previewLinks.js @@ -1,13 +1,215 @@ -function LinkeditorPreviewLinks(linkeditor) { +var LinkeditorPreviewLinks = function(linkeditor) { this.linkeditor = linkeditor; + this.linkData = [] this.init() } LinkeditorPreviewLinks.prototype = { init: function () { - let links = this.linkeditor.links.getLinksOfPage(1); - console.log("links",links) - } + // Do something + }, + + updatePreview: function(link) { + this.linkData = link + if($("#preview-links").hasClass("active")) { + let l = this.linkeditor.links.getLinkById(link.uid) + let absoluteCss = { + width: "100%", + height: "100%", + top: 0, + left: 0, + position: "absolute", + } + + if ($('[data-id-preview="' + link.uid + '"]').length < 1) { + if(this.linkData.type === '35') { + l.html("
") + } else { + l.html("
") + } + } + + $("[data-id-preview=" + this.linkData.uid + "]").css({ + height: '100%', + width: '100%' + }) + + this.previewByType(link.type) + } + }, + + setPreview: function(zooming = false, isActive = false) { + const links = this.linkeditor.links.getLinksOfPage(this.linkeditor.currentPage) + + for(let link in links) { + if(!isActive) { + this.updatePreview(links[link]) + } + } + }, + + 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 = "" + $("[data-id-preview=" + $this.linkData.uid + "]").css("position","absolute").html(img) + + $("[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.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) + } 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") + + if(animZoom.length > 0 && $("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper").length < 1) { + $("[data-id-preview=" + $this.linkData.uid + "]").append('
') + } + + if($("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-page").length < 1) { + $("[data-id-preview=" + $this.linkData.uid + "]").html('
') + $("[data-id-preview=" + $this.linkData.uid + "]").find(".linkeditor-page-right-copy,.linkeditor-page-left-copy").css({ + "position": "absolute", + "left": 0 + }) + + $("[data-id-preview=" + $this.linkData.uid + "]").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($this.linkData.to === "image") { + // do something + bg = 'url('+srcImg+')' + } else if($this.linkData.to === "onlytext" || $this.linkData.to === "text") { + // do something + bg = 'url('+srcText+')' + } + + $("[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=" + $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;' + + 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; + } + } + + let 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 = "" + $("[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, + }) + } + }, + + clearPreview: function() { + $("[data-id-preview],.bg-preview").remove() + $("[data-id-preview]").parents('.link').css() + }, + } export default LinkeditorPreviewLinks; diff --git a/resources/linkeditor/js/linkeditor.zoom.js b/resources/linkeditor/js/linkeditor.zoom.js index e17733982..128b14686 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.links.setPreview(this.zoom) + this.linkeditor.previewLinks.setPreview(this.zoom) }, 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.links.setPreview() + this.linkeditor.previewLinks.setPreview() }, }; export default LinkeditorZoom; -- 2.39.5