From: soufiane Date: Wed, 13 Nov 2024 15:28:09 +0000 (+0100) Subject: wait #7156 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=ec22f89af678b3a31412f1c1d092fa28a36fa375;p=fluidbook-toolbox.git wait #7156 --- diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js index dc736e194..d797621f3 100644 --- a/resources/linkeditor/js/linkeditor.js +++ b/resources/linkeditor/js/linkeditor.js @@ -506,7 +506,7 @@ LinkEditor.prototype = { } this.undo.updateIconsStates(); this.loader.preloadPages(); - this.previewLinks.setPreview() + this.previewLinks.setPreview(); }, getCurrentPages: function (page) { diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js index b26ca1266..3d2a4c920 100644 --- a/resources/linkeditor/js/linkeditor.links.js +++ b/resources/linkeditor/js/linkeditor.links.js @@ -1579,33 +1579,6 @@ LinkeditorLinks.prototype = { this.setAnim() }, - loadFontSize: function() { - const $this = this - if(Object.keys(window.LINKS).length > 0) { - $.ajax({ - url: '/fluidbook-publication/' + FLUIDBOOK_DATA.id + '/generatefont', - type: 'post', - data: {links: window.LINKS, rulers: window.RULERS}, - success: function (response) { - FONT_SIZE = JSON.parse(response); - }, - complete: function () { - $("#extra-font-face").remove() - $("head").append("") - for (let k in FONT_SIZE) { - $("#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 { - $("#preview-links").removeClass('disabled'); - } - }, - setAnim: function(all = true) { const links = all ? this.getLinksOfPage(this.linkeditor.currentPage) : [this.getLinksOfPage(this.linkeditor.currentPage)[this.getCurrentSelection().attr('fb-uid')]] @@ -1642,14 +1615,6 @@ LinkeditorLinks.prototype = { 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 @@ -1664,27 +1629,74 @@ LinkeditorLinks.prototype = { } }, + loadFontSize: function() { + const $this = this + if(Object.keys(window.LINKS).length > 0) { + $.ajax({ + url: '/fluidbook-publication/' + FLUIDBOOK_DATA.id + '/generatefont', + type: 'post', + data: {links: window.LINKS, rulers: window.RULERS}, + success: function (response) { + FONT_SIZE = JSON.parse(response); + }, + complete: function () { + $("#extra-font-face").remove() + $("head").append("") + for (let k in FONT_SIZE) { + $("#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.rulers.updateRulers() + $this.linkeditor.resize.resize() + $this.linkeditor.previewLinks.setPreview(true) + } + }); + } else { + $("#preview-links").removeClass('disabled'); + } + }, + + /** + * + * @see \Fluidbook\Tools\Links\TextLink::getCSS + * @param link + */ setFontSize: function(link) { - var pw = FLUIDBOOK_DATA.settings.width; - var ph = FLUIDBOOK_DATA.settings.height; - var ratio = pw / ph; + try { + const z = this.linkeditor.zoom.normalizeZoom(this.linkeditor.zoom.getZoom()); + const hash = 'fb_' + window.MD5(link.image).toString().substring(0, 10); + const capHeight = FONT_SIZE[hash]['capHeight']; + const cssScale = this.getCssScale() - let h = $('[fb-uid="'+link.uid+'"]').get(0).getBoundingClientRect().height; - var fs = (h * (3 * Math.min(( 567 / pw), (709 / ph)))); + // On récupère la hauteur du lien + // en prenant en compte le changement de dimension + // lors du zoom + let h = link.height * z; - var hash = 'fb_' + window.MD5(link.image).toString().substring(0, 10) + let fz = h; + fz = h / capHeight - try { $("[data-id-preview=" + link.uid + "]").text(link.to).css({ - 'font-size': (fs / FONT_SIZE[hash]['capHeight']).toFixed(2) + 'px', - 'line-height': FONT_SIZE[hash]['capHeight'] + 'font-size': fz.toFixed(2) * 0.8 + 'px', + 'line-height': capHeight }) } catch (e) { console.log(e) } }, - updateFontSize: function(link) { + getCssScale: function() { + // Voir \Fluidbook\Tools\Compiler\ + const pageZoomFactor = 3; + const optimalWidth = 567; + const optimalHeight = 709; + const pw = FLUIDBOOK_DATA.settings.width; + const ph = FLUIDBOOK_DATA.settings.height; + + return pageZoomFactor * Math.min(( optimalWidth / pw), (optimalHeight / ph)) + }, + + addStyleToWrappersLinkText: function(link) { let scaleString = false if (link.image_rollover) { scaleString = link.image_rollover.split('\n').filter((n) => { @@ -1694,18 +1706,14 @@ LinkeditorLinks.prototype = { 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% !important" }) $("[data-id-preview-wrap=" + link.uid + "]").css({ - transform: "scale(" + zoom + ")", - 'transform-origin': "0 0", - width: "calc(100% / " + zoom + ")", - height: "calc(100% / " + zoom + ")" + width: "100%", + height: "100%" }) }, diff --git a/resources/linkeditor/js/linkeditor.previewLinks.js b/resources/linkeditor/js/linkeditor.previewLinks.js index c5b51197d..db7cb7c42 100644 --- a/resources/linkeditor/js/linkeditor.previewLinks.js +++ b/resources/linkeditor/js/linkeditor.previewLinks.js @@ -105,17 +105,43 @@ LinkeditorPreviewLinks.prototype = { previewText: function($this) { var hash = 'fb_' + window.MD5(this.linkData.image).toString().substring(0, 10) - this.linkeditor.links.setFontSize(this.linkData) let previewDiv = $("[data-id-preview=" + $this.linkData.uid + "]") + this.linkeditor.links.setFontSize(this.linkData) + var options = null + + /** + * On ajoute un attribut data-anim-numeric-value et l'id utilisable par l'animation de type number + */ + previewDiv.attr('data-anim-numeric-value', this.linkData.to).addClass('textLink') + previewDiv.attr('id','linkwrapper-'+this.linkData.uid) + + if (this.linkData.image_rollover) { + let animation = this.linkeditor.links.resolveAnimation(this.linkData.image_rollover) + let hasAnimationNumber = animation.filter((v) => v.type === 'number') + if(hasAnimationNumber.length > 0) { + options = { + separator: animation[0].separator, + prefix: animation[0].prefix, + suffix: animation[0].suffix + } + } + } previewDiv.addClass("link-text").text($this.linkData.to).css({ 'height': 'auto', 'width': 'max-content', 'font-family': hash, 'color': $this.linkData.extra, - 'position': 'absolute' + 'position': 'absolute', + 'transform-origin': '0 100%' }) - this.linkeditor.links.updateFontSize($this.linkData) + + console.log(options) + if(options !== null) { + let countup = new CountUp(previewDiv.attr('id'), previewDiv.attr('data-anim-numeric-value'), options); + countup.start() + } + this.linkeditor.links.addStyleToWrappersLinkText(this.linkData) }, previewLayer: function($this,isZooming,reset) { @@ -123,31 +149,7 @@ LinkeditorPreviewLinks.prototype = { 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") - let previewDiv = $("[data-id-preview=" + $this.linkData.uid + "]") - - const z = this.linkeditor.zoom.normalizeZoom(this.linkeditor.zoom.getZoom()) - if(z) { - this.linkeditor.zoom.setZoom(z) - } - - /** - * - * (Voir linkeditor.resize.js resizePages()) - * - * Application des styles pour #linkeditor-fluidbook-copy - */ - let width = $("#linkeditor-fluidbook").css("width") - let height = $("#linkeditor-fluidbook").css("height") - let left_ = $("#linkeditor-fluidbook").css("left") - let top_ = $("#linkeditor-fluidbook").css("top") - let transform = $("#linkeditor-fluidbook").css("transform") - $(".linkeditor-fluidbook-copy").css({'width':width,'height':height,'left':left_,'top':top_,'transform':transform}) - - /** - * Application des styles pour #linkeditor-page-right-copy - */ - let left__ = $("#linkeditor-page-right").css("left") - $(".linkeditor-page-right-copy").css('left',left__) + var previewDiv = $("[data-id-preview=" + $this.linkData.uid + "]") /** * @@ -206,19 +208,47 @@ LinkeditorPreviewLinks.prototype = { } } + const z = this.linkeditor.zoom.normalizeZoom(this.linkeditor.zoom.getZoom()) + if(z) { + this.linkeditor.zoom.setZoom(z) + } + + /** + * + * (Voir linkeditor.resize.js resizePages()) + * + * Application des styles pour #linkeditor-fluidbook-copy + */ + let width = $("#linkeditor-fluidbook").css("width") + let height = $("#linkeditor-fluidbook").css("height") + let left_ = $("#linkeditor-fluidbook").css("left") + let top_ = $("#linkeditor-fluidbook").css("top") + let transform = $("#linkeditor-fluidbook").css("transform") + $("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-fluidbook-copy").css({'width':width,'height':height,'left':left_,'top':top_,'transform':transform}) + + /** + * Application des styles pour #linkeditor-page-right-copy + */ + let left__ = $("#linkeditor-page-right").css("left") + $(".linkeditor-page-right-copy").css('left',left__) + if(reset) { $this.linkeditor.rulers.updateRulers(); } 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 + //console.log(this.linkeditor.globalToEditor(linkeditorZoomRect.left,linkeditorZoomRect.top)) + var left = this.linkeditor.fluidbookToGlobal($this.linkData.left, 'left') - linkeditorZoomRect.left + var top = this.linkeditor.fluidbookToGlobal($this.linkData.top, 'top') - linkeditorZoomRect.top // - previewDiv.find(".linkeditor-zoom-copy").css({ - "left": -left - 1, - "top": -top - 1, + requestAnimationFrame(function() { + previewDiv.find(".linkeditor-zoom-copy").css({ + "left": -left - 1, + "top": -top - 1, + }) }) + if(animZoom.length > 0) { previewDiv.children().appendTo("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper") } diff --git a/resources/linkeditor/style/inc/_links.sass b/resources/linkeditor/style/inc/_links.sass index 800efc42c..ce8edb572 100644 --- a/resources/linkeditor/style/inc/_links.sass +++ b/resources/linkeditor/style/inc/_links.sass @@ -56,8 +56,9 @@ body:not(.preview) height: 100% position: absolute - [data-id-preview-wrap] - overflow: hidden + &:not([fb-type='35']) + [data-id-preview-wrap] + overflow: hidden &[fb-type='14'] [data-id-preview] mix-blend-mode: normal