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("<style id='extra-font-face'></style>")
- 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')]]
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
}
},
+ 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("<style id='extra-font-face'></style>")
+ 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) => {
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%"
})
},
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) {
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 + "]")
/**
*
}
}
+ 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")
}
projects / fluidbook-toolbox.git / commitdiff