this.locks = new LinkeditorLinksLock(linkeditor);
+ this.linkData = [];
+
this.init();
}
let isActive = $("#preview-links").hasClass("active")
$("#preview-links").addClass("active")
$this.setPreview(false,isActive)
- $this.setAnim(false,isActive)
+ $this.setAnim(false)
})
setInterval(function () {
}
},
- 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%",
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,
+ })
}
},
for(let link in links) {
if(!isActive) {
- this.updatePreview(links[link], zooming)
+ this.updatePreview(links[link])
}
}
},
projects / fluidbook-toolbox.git / commitdiff