From 20c5f5f00f58881eacbf193b047831225414d838 Mon Sep 17 00:00:00 2001 From: soufiane Date: Tue, 29 Oct 2024 14:49:19 +0100 Subject: [PATCH] wait #7162 @1:00 --- resources/linkeditor/js/linkeditor.links.js | 88 ++++++++++++++------- resources/linkeditor/style/inc/_links.sass | 18 ++++- 2 files changed, 77 insertions(+), 29 deletions(-) diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js index 68ab13564..e3f2fadf9 100644 --- a/resources/linkeditor/js/linkeditor.links.js +++ b/resources/linkeditor/js/linkeditor.links.js @@ -356,15 +356,16 @@ LinkeditorLinks.prototype = { $(document).on("click", "#linkeditor-start-animation", function(e) { e.preventDefault() - let isActive = $("#preview-links").hasClass("active") $("#preview-links").addClass("active") - $this.linkeditor.previewLinks.setPreview(false,isActive) + $("body").addClass("preview") $this.setAnim(false) }) setInterval(function () { $this.checkLastSelectedLink(); }, 250); + + $this.linkeditor.previewLinks.setPreview(false,true) }, key: function (shortcut, scope) { @@ -435,6 +436,7 @@ LinkeditorLinks.prototype = { this.linkeditor.hasChanged(); this.updatePolygonLinks(); this.updateLayers(); + this.linkeditor.previewLinks.updatePreview(this.lastSelectedLinkData); }, @@ -1173,7 +1175,9 @@ LinkeditorLinks.prototype = { this.linkeditor.rulers.updateMagnetValues(); this.updateLayers(); this.updatePolygonLinks(false); - this.linkeditor.previewLinks.updatePreview(LINKS[id]); + + const $this = this + $this.linkeditor.previewLinks.updatePreview(LINKS[id]); }, updateSelectionData: function (props) { @@ -1558,19 +1562,13 @@ LinkeditorLinks.prototype = { }, preview: function() { - let el = $("[data-action='links.preview']") - el.toggleClass("active") - - if(el.hasClass("active")) { - this.linkeditor.previewLinks.setPreview() - } else { - this.linkeditor.previewLinks.clearPreview() - } + $("body").toggleClass("preview") + $("#preview-links").toggleClass("active") }, animation: function() { - $("[data-action='links.preview']").addClass("active") - this.linkeditor.previewLinks.setPreview() + $("body").addClass("preview") + $("#preview-links").addClass("active") this.setAnim() }, @@ -1608,14 +1606,44 @@ LinkeditorLinks.prototype = { let el = previewDiv.get(0) let animWithBackground = animations.filter((v) => v.backgroundColor) - let backgroundColor = animWithBackground.length > 0 ? animWithBackground[0].backgroundColor : null + let backgroundColor = animWithBackground.length > 0 ? animWithBackground[0].backgroundColor : 'transparent' + + if(links[link].type !== '45') { + $link.find('.bg-preview').css('background-color', backgroundColor) + } + + /** + * On supprime les svgs s'il y en a + * utile dans le cas si c'est une animation pie + */ + previewDiv.find('svg').remove() - $link.find('.bg-preview').css('background-color',backgroundColor) /** - * Utiliser les classes css pour selectionner seulement - * le calque à animer + * On ajoute un id utilisable par l'animation pie */ + previewDiv.attr('id','linkwrapper-'+links[link].uid) + + /** + * On ajoute un attribut data-color utilisable par l'animation pie + * Pour les liens couleurs + */ + if(links[link].type === '14') { + previewDiv.attr('data-color', links[link].to) + } + + /** + * On ajoute un attribut data-color utilisable par l'animation pie + * Pour les liens texte + */ + if(links[link].type === '35') { + previewDiv.attr('data-anim-numeric-value', links[link].to).addClass('textLink') + } + if(animationText) { + /** + * Utiliser les classes css pour selectionner seulement + * le calque à animer + */ if(links[link].type === '39') { previewDiv.addClass(links[link].to) } @@ -1641,26 +1669,32 @@ LinkeditorLinks.prototype = { 'line-height': FONT_SIZE[hash]['capHeight'] }) } catch (e) { - + console.log(e) } }, updateFontSize: function(link) { - let scaleString = link.image_rollover.split('\n').filter((n) => { return n.includes('scale') })[0] + let scaleString = false + if (link.image_rollover) { + scaleString = link.image_rollover.split('\n').filter((n) => { + return n.includes('scale') + })[0] + } + let scale = scaleString ? parseFloat(scaleString.split('=')[1]) : 1 let zoom = 0.39 - $("[data-id-preview="+link.uid+"]").css({ - transform: "scale("+scale+")", - 'transform-origin': "0 100%" + $("[data-id-preview=" + link.uid + "]").css({ + transform: "scale(" + scale + ")", + 'transform-origin': "0 100% !important" }) - $("[data-id-preview-wrap="+link.uid+"]").css({ - transform: "scale("+zoom+")", + $("[data-id-preview-wrap=" + link.uid + "]").css({ + transform: "scale(" + zoom + ")", 'transform-origin': "0 0", - width: "calc(100% / "+zoom+")", - height: "calc(100% / "+zoom+")" + width: "calc(100% / " + zoom + ")", + height: "calc(100% / " + zoom + ")" }) }, @@ -1675,7 +1709,7 @@ LinkeditorLinks.prototype = { result = [] for (let k in o) { let entries = o[k].split('=') - result[entries[0]] = entries[1] + result[entries[0]] = entries[1]?.replace(/([\"]+)/gm, "") } obj[anim] = Object.assign({}, result) } diff --git a/resources/linkeditor/style/inc/_links.sass b/resources/linkeditor/style/inc/_links.sass index d29a58395..cd7971e0f 100644 --- a/resources/linkeditor/style/inc/_links.sass +++ b/resources/linkeditor/style/inc/_links.sass @@ -1,5 +1,13 @@ @import "variables" +body.preview + #linkeditor-links + .link + .bg-preview, + [data-id-preview] + display: block + + #linkeditor-links .link @@ -20,6 +28,10 @@ .canvas .texts z-index: 2 + .bg-preview, + [data-id-preview] + display: none + .bg-preview, .preview-wrapper width: 100% @@ -29,6 +41,10 @@ [data-id-preview]:not(.link-text) overflow: hidden + &[fb-type='14'] [data-id-preview] + mix-blend-mode: normal + position: absolute + [data-id-preview] &.onlytext,&.text .images @@ -45,8 +61,6 @@ display: initial !important - - #linkeditor-main.dropfile &.dropfile border-style: dashed -- 2.39.5