| 1 |
// packages/block-editor/build-module/utils/fit-text-frontend.mjs |
| 2 |
import { store, getElement, getContext } from "@wordpress/interactivity"; |
| 3 |
|
| 4 |
// packages/block-editor/build-module/utils/fit-text-utils.mjs |
| 5 |
function findOptimalFontSize(textElement, applyFontSize) { |
| 6 |
const alreadyHasScrollableHeight = textElement.scrollHeight > textElement.clientHeight; |
| 7 |
let minSize = 0; |
| 8 |
let maxSize = 2400; |
| 9 |
let bestSize = minSize; |
| 10 |
const computedStyle = window.getComputedStyle(textElement); |
| 11 |
let paddingLeft = parseFloat(computedStyle.paddingLeft) || 0; |
| 12 |
let paddingRight = parseFloat(computedStyle.paddingRight) || 0; |
| 13 |
const range = document.createRange(); |
| 14 |
range.selectNodeContents(textElement); |
| 15 |
let referenceElement = textElement; |
| 16 |
const parentElement = textElement.parentElement; |
| 17 |
if (parentElement) { |
| 18 |
const parentElementComputedStyle = window.getComputedStyle(parentElement); |
| 19 |
if (parentElementComputedStyle?.display === "flex") { |
| 20 |
referenceElement = parentElement; |
| 21 |
paddingLeft += parseFloat(parentElementComputedStyle.paddingLeft) || 0; |
| 22 |
paddingRight += parseFloat(parentElementComputedStyle.paddingRight) || 0; |
| 23 |
} |
| 24 |
} |
| 25 |
let maxclientHeight = referenceElement.clientHeight; |
| 26 |
while (minSize <= maxSize) { |
| 27 |
const midSize = Math.floor((minSize + maxSize) / 2); |
| 28 |
applyFontSize(midSize); |
| 29 |
const rect = range.getBoundingClientRect(); |
| 30 |
const textWidth = rect.width; |
| 31 |
const fitsWidth = textElement.scrollWidth <= referenceElement.clientWidth && textWidth <= referenceElement.clientWidth - paddingLeft - paddingRight; |
| 32 |
const fitsHeight = alreadyHasScrollableHeight || textElement.scrollHeight <= referenceElement.clientHeight || textElement.scrollHeight <= maxclientHeight; |
| 33 |
if (referenceElement.clientHeight > maxclientHeight) { |
| 34 |
maxclientHeight = referenceElement.clientHeight; |
| 35 |
} |
| 36 |
if (fitsWidth && fitsHeight) { |
| 37 |
bestSize = midSize; |
| 38 |
minSize = midSize + 1; |
| 39 |
} else { |
| 40 |
maxSize = midSize - 1; |
| 41 |
} |
| 42 |
} |
| 43 |
range.detach(); |
| 44 |
return bestSize; |
| 45 |
} |
| 46 |
function optimizeFitText(textElement, applyFontSize) { |
| 47 |
if (!textElement) { |
| 48 |
return; |
| 49 |
} |
| 50 |
applyFontSize(0); |
| 51 |
const optimalSize = findOptimalFontSize(textElement, applyFontSize); |
| 52 |
applyFontSize(optimalSize); |
| 53 |
return optimalSize; |
| 54 |
} |
| 55 |
|
| 56 |
// packages/block-editor/build-module/utils/fit-text-frontend.mjs |
| 57 |
store("core/fit-text", { |
| 58 |
callbacks: { |
| 59 |
init() { |
| 60 |
const context = getContext(); |
| 61 |
const { ref } = getElement(); |
| 62 |
const applyFontSize = (fontSize) => { |
| 63 |
if (!ref) { |
| 64 |
return; |
| 65 |
} |
| 66 |
if (fontSize === 0) { |
| 67 |
ref.style.fontSize = ""; |
| 68 |
} else { |
| 69 |
ref.style.fontSize = `${fontSize}px`; |
| 70 |
} |
| 71 |
}; |
| 72 |
context.fontSize = optimizeFitText(ref, applyFontSize); |
| 73 |
if (window.ResizeObserver && ref?.parentElement) { |
| 74 |
const resizeObserver = new window.ResizeObserver(() => { |
| 75 |
context.fontSize = optimizeFitText(ref, applyFontSize); |
| 76 |
}); |
| 77 |
resizeObserver.observe(ref.parentElement); |
| 78 |
resizeObserver.observe(ref); |
| 79 |
return () => { |
| 80 |
if (resizeObserver) { |
| 81 |
resizeObserver.disconnect(); |
| 82 |
} |
| 83 |
}; |
| 84 |
} |
| 85 |
return void 0; |
| 86 |
} |
| 87 |
} |
| 88 |
}); |
| 89 |
//# sourceMappingURL=fit-text-frontend.js.map |
| 90 |
|
