From a8138829bbe7d8045fe7821b86cae1eeeaca8594 Mon Sep 17 00:00:00 2001 From: soufiane Date: Thu, 31 Oct 2024 17:53:22 +0100 Subject: [PATCH] wait #7164 @5:00 --- .../js/fluidbook.links.animations.js | 14 +++++ resources/linkeditor/js/linkeditor.js | 14 +++-- resources/linkeditor/js/linkeditor.links.js | 6 +- .../linkeditor/js/linkeditor.previewLinks.js | 61 ++++++------------- resources/linkeditor/js/linkeditor.zoom.js | 2 +- resources/linkeditor/style/inc/_links.sass | 37 +++++++++++ 6 files changed, 85 insertions(+), 49 deletions(-) diff --git a/resources/linkeditor/js/fluidbook.links.animations.js b/resources/linkeditor/js/fluidbook.links.animations.js index 0085b0b02..2da9f3863 100644 --- a/resources/linkeditor/js/fluidbook.links.animations.js +++ b/resources/linkeditor/js/fluidbook.links.animations.js @@ -215,6 +215,19 @@ FluidbookLinksAnimations.prototype = { var bottom = h; var left = 0; + /** + * Rename animation direction name + */ + if(!animation.direction) { + animation.direction = 'right' + } + if(animation.direction === 'top') { + animation.direction = 'up' + } + if(animation.direction === 'bottom') { + animation.direction = 'down' + } + var rectinit = 'rect(0px,' + w + 'px,' + h + 'px,0px)'; if ((animation.direction === 'left' && animation.type === 'unmask') || (animation.direction === 'right' && animation.type === 'reveal')) { right = 0; @@ -339,6 +352,7 @@ FluidbookLinksAnimations.prototype = { value = $(link).data('anim-numeric-value'); } link.text(''); + var countup = new CountUp(link.attr('id'), value, options); setTimeout(function () { link.css('opacity', 1); diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js index 9bdfba21b..dc736e194 100644 --- a/resources/linkeditor/js/linkeditor.js +++ b/resources/linkeditor/js/linkeditor.js @@ -1,6 +1,8 @@ import tippy from 'tippy.js'; import 'tippy.js/dist/tippy.css'; import gsap from "gsap"; +import Raphael from "raphael"; +import { CountUp } from "countup.js"; import Noty from "noty"; import 'noty/lib/noty.css'; @@ -33,6 +35,8 @@ window.tippy = tippy; window.Noty = Noty; window.GrahamScan = GrahamScan; window.gsap = gsap; +window.Raphael = Raphael; +window.CountUp = CountUp; window.key.filter = function (event) { return keyfilter(event); @@ -99,6 +103,8 @@ function LinkEditor() { this.dimensionProperties = ['left', 'top', 'width', 'height']; this.init(); + + let $this = this } LinkEditor.prototype = { @@ -383,7 +389,9 @@ LinkEditor.prototype = { css[dim] = (v * ($this.fs * $this.zoom.zoom)) + 1; if (dim === 'height') { if (LINKS[$(e).attr('fb-uid')].type === '35') { - $this.links.setFontSize(LINKS[$(e).attr('fb-uid')]) + $( document ).ajaxComplete(function( event, xhr, settings ) { + //$this.links.setFontSize(LINKS[$(e).attr('fb-uid')]) + }) } } } else { @@ -498,9 +506,7 @@ LinkEditor.prototype = { } this.undo.updateIconsStates(); this.loader.preloadPages(); - if ($("#preview-links").hasClass("active")) { - this.links.setPreview() - } + this.previewLinks.setPreview() }, getCurrentPages: function (page) { diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js index e3f2fadf9..982187cf9 100644 --- a/resources/linkeditor/js/linkeditor.links.js +++ b/resources/linkeditor/js/linkeditor.links.js @@ -364,8 +364,6 @@ LinkeditorLinks.prototype = { setInterval(function () { $this.checkLastSelectedLink(); }, 250); - - $this.linkeditor.previewLinks.setPreview(false,true) }, key: function (shortcut, scope) { @@ -1573,6 +1571,7 @@ LinkeditorLinks.prototype = { }, loadFontSize: function() { + const $this = this if(Object.keys(window.LINKS).length > 0) { $.ajax({ url: '/fluidbook-publication/' + FLUIDBOOK_DATA.id + '/generatefont', @@ -1588,6 +1587,9 @@ LinkeditorLinks.prototype = { $("#extra-font-face").append("@font-face{font-family:" + FONT_SIZE[k]['font'] + ";src:url('/fluidbook-publication/" + FLUIDBOOK_DATA.id + "/edit/links/assets/" + FONT_SIZE[k]['hash'] + "' ) format('woff');}") } $("#preview-links").removeClass('disabled'); + $this.linkeditor.resize.resize() + $this.linkeditor.changePage() + $this.linkeditor.previewLinks.setPreview() } }); } else { diff --git a/resources/linkeditor/js/linkeditor.previewLinks.js b/resources/linkeditor/js/linkeditor.previewLinks.js index f702ddd84..f60ed5f07 100644 --- a/resources/linkeditor/js/linkeditor.previewLinks.js +++ b/resources/linkeditor/js/linkeditor.previewLinks.js @@ -37,13 +37,11 @@ LinkeditorPreviewLinks.prototype = { $this.previewByType(link.type) }, - setPreview: function(zooming = false, isActive = false) { + setPreview: function() { const links = this.linkeditor.links.getLinksOfPage(this.linkeditor.currentPage) for (let link in links) { - if (!isActive) { - this.updatePreview(links[link]) - } + this.updatePreview(links[link]) } }, @@ -62,17 +60,9 @@ LinkeditorPreviewLinks.prototype = { 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) + $this.linkeditor.links.setFontSize($this.linkData) $("[data-id-preview=" + $this.linkData.uid + "]").addClass("link-text").text($this.linkData.to).css({ 'height': 'auto', @@ -81,7 +71,7 @@ LinkeditorPreviewLinks.prototype = { 'color': $this.linkData.extra, 'position': 'absolute' }) - this.linkeditor.links.updateFontSize($this.linkData) + $this.linkeditor.links.updateFontSize($this.linkData) } else if (type === '39') { let $link = $("[fb-uid="+$this.linkData.uid+"]") let animationText = $link.attr("fb-image_rollover") @@ -92,23 +82,10 @@ LinkeditorPreviewLinks.prototype = { $("[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.createPreviewLayerHTML($("[data-id-preview=" + $this.linkData.uid + "]")) + this.linkeditor.resize.resizePages() + //this.linkeditor.zoom.setZoom(1) - 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') @@ -122,7 +99,6 @@ LinkeditorPreviewLinks.prototype = { 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") $("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-page-left-copy").css({ @@ -140,17 +116,6 @@ LinkeditorPreviewLinks.prototype = { } 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 - }) - 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 @@ -221,6 +186,18 @@ LinkeditorPreviewLinks.prototype = { $("[data-id-preview]").parents('.link').css() }, + createPreviewLayerHTML: function(el) { + let html = ` +
+
+
+
+
+
+ `; + el.html(html) + }, + } export default LinkeditorPreviewLinks; diff --git a/resources/linkeditor/js/linkeditor.zoom.js b/resources/linkeditor/js/linkeditor.zoom.js index 128b14686..33c5ee551 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.zoom) + this.linkeditor.previewLinks.setPreview() }, normalizeZoom: function (z) { diff --git a/resources/linkeditor/style/inc/_links.sass b/resources/linkeditor/style/inc/_links.sass index f650ce98d..4ff1f3c0f 100644 --- a/resources/linkeditor/style/inc/_links.sass +++ b/resources/linkeditor/style/inc/_links.sass @@ -8,6 +8,12 @@ body.preview [data-id-preview] display: block !important +body:not(.preview) + #linkeditor-links + .link + .bg-preview + display: none + #linkeditor-links .link @@ -44,6 +50,22 @@ body.preview &[fb-type='14'] [data-id-preview] mix-blend-mode: normal position: absolute + img + height: 100% + width: 100% + display: block + background-size: 100% 100% + background-position: 0 0 + + &[fb-type='39'] [data-id-preview] + clip-path: inset(0) + position: absolute + img + width: 100% + height: 100% + position: absolute + left: 0 + top: 0 [data-id-preview] &.onlytext,&.text @@ -60,6 +82,21 @@ body.preview .images,.texts display: initial !important + .preview-wrapper + clip-path: inset(0) + + .linkeditor-page-right-copy, + .linkeditor-page-left-copy + position: absolute + left: 0 + width: 100% + height: 100% + + .linkeditor-zoom-copy, + .linkeditor-fluidbook-copy + position: absolute + transform-origin: 0 0 + #linkeditor-main.dropfile &.dropfile border-style: dashed -- 2.39.5