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)
})
this.linkeditor.hasChanged();
this.updatePolygonLinks();
this.updateLayers();
- this.updatePreview(this.lastSelectedLinkData);
+ this.linkeditor.previewLinks.updatePreview(this.lastSelectedLinkData);
},
hasUIDLink: function (uid) {
this.linkeditor.rulers.updateMagnetValues();
this.updateLayers();
this.updatePolygonLinks(false);
- this.updatePreview(LINKS[id]);
+ this.linkeditor.previewLinks.updatePreview(LINKS[id]);
},
updateSelectionData: function (props) {
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()
},
}
},
- 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("<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=" + 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 = "<img src='" + imgUrl + "' />"
- $("[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('<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",
- "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 = "<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,
- })
- }
- },
-
- 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')]]
})
},
- clearPreview: function() {
- $("[data-id-preview],.bg-preview").remove()
- $("[data-id-preview]").parents('.link').css()
- },
-
resolveAnimation: function(animationText) {
let obj = []
if(animationText) {
-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("<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=" + 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 = "<img src='" + imgUrl + "' />"
+ $("[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('<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",
+ "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 = "<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,
+ })
+ }
+ },
+
+ clearPreview: function() {
+ $("[data-id-preview],.bg-preview").remove()
+ $("[data-id-preview]").parents('.link').css()
+ },
+
}
export default LinkeditorPreviewLinks;
projects / fluidbook-toolbox.git / commitdiff