build/modules/block-editor/utils
fit-text-frontend.js
3.1 KB
7 months ago
fit-text-frontend.js.map
6.9 KB
7 months ago
fit-text-frontend.min.asset.php
180 B
7 months ago
fit-text-frontend.min.js
1.1 KB
7 months ago
fit-text-frontend.min.js.map
7.3 KB
7 months ago
fit-text-frontend.js in Gutenberg 23.2.0, at build/modules/block-editor/utils/fit-text-frontend.js
| 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 (fontSize === 0) { |
| 64 | ref.style.fontSize = ""; |
| 65 | } else { |
| 66 | ref.style.fontSize = `${fontSize}px`; |
| 67 | } |
| 68 | }; |
| 69 | context.fontSize = optimizeFitText(ref, applyFontSize); |
| 70 | if (window.ResizeObserver && ref.parentElement) { |
| 71 | const resizeObserver = new window.ResizeObserver(() => { |
| 72 | context.fontSize = optimizeFitText(ref, applyFontSize); |
| 73 | }); |
| 74 | resizeObserver.observe(ref.parentElement); |
| 75 | resizeObserver.observe(ref); |
| 76 | return () => { |
| 77 | if (resizeObserver) { |
| 78 | resizeObserver.disconnect(); |
| 79 | } |
| 80 | }; |
| 81 | } |
| 82 | } |
| 83 | } |
| 84 | }); |
| 85 | //# sourceMappingURL=fit-text-frontend.js.map |
| 86 |