import type { CSSProperties, VNodeTypes } from 'vue'; import { createApp } from 'vue'; interface MeasureResult { finished: boolean; vNode: VNodeTypes; } interface Option { rows: number; suffix?: string; } // We only handle element & text node. const TEXT_NODE = 3; const COMMENT_NODE = 8; let ellipsisContainer: HTMLParagraphElement; const wrapperStyle: CSSProperties = { padding: 0, margin: 0, display: 'inline', lineHeight: 'inherit', }; function pxToNumber(value: string | null) { if (!value) return 0; const match = value.match(/^\d*(\.\d*)?/); return match ? Number(match[0]) : 0; } function styleToString(style: CSSStyleDeclaration) { // There are some different behavior between Firefox & Chrome. // We have to handle this ourself. const styleNames = Array.prototype.slice.apply(style); return styleNames.map(name => `${name}: ${style.getPropertyValue(name)};`).join(''); } export default ( originEle: HTMLElement, option: Option, content: string, fixedContent: VNodeTypes[], ellipsisStr: string, ): { content: VNodeTypes; text: string; ellipsis: boolean; } => { if (!ellipsisContainer) { ellipsisContainer = document.createElement('div'); ellipsisContainer.setAttribute('aria-hidden', 'true'); document.body.appendChild(ellipsisContainer); } const { rows, suffix = '' } = option; // Get origin style const originStyle = window.getComputedStyle(originEle); const originCSS = styleToString(originStyle); const lineHeight = pxToNumber(originStyle.lineHeight); const maxHeight = Math.round( lineHeight * (rows + 1) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom), ); // Set shadow ellipsisContainer.setAttribute('style', originCSS); ellipsisContainer.style.position = 'fixed'; ellipsisContainer.style.left = '0'; ellipsisContainer.style.height = 'auto'; ellipsisContainer.style.minHeight = 'auto'; ellipsisContainer.style.maxHeight = 'auto'; ellipsisContainer.style.top = '-999999px'; ellipsisContainer.style.zIndex = '-1000'; // clean up css overflow ellipsisContainer.style.textOverflow = 'clip'; ellipsisContainer.style.whiteSpace = 'normal'; ellipsisContainer.style.webkitLineClamp = 'none'; // Render in the fake container const vm = createApp({ render() { return (
{content} {suffix} {fixedContent}
); }, }); vm.mount(ellipsisContainer); // Check if ellipsis in measure div is height enough for content function inRange() { return ellipsisContainer.offsetHeight < maxHeight; } // Skip ellipsis if already match if (inRange()) { vm.unmount(); return { content, text: ellipsisContainer.innerHTML, ellipsis: false }; } const childNodes = Array.prototype.slice .apply(ellipsisContainer.childNodes[0].childNodes[0].cloneNode(true).childNodes) .filter(({ nodeType, data }) => nodeType !== COMMENT_NODE && data !== ''); const fixedNodes = Array.prototype.slice.apply( ellipsisContainer.childNodes[0].childNodes[1].cloneNode(true).childNodes, ); vm.unmount(); // ========================= Find match ellipsis content ========================= const ellipsisChildren = []; ellipsisContainer.innerHTML = ''; // Create origin content holder const ellipsisContentHolder = document.createElement('span'); ellipsisContainer.appendChild(ellipsisContentHolder); const ellipsisTextNode = document.createTextNode(ellipsisStr + suffix); ellipsisContentHolder.appendChild(ellipsisTextNode); fixedNodes.forEach(childNode => { ellipsisContainer.appendChild(childNode); }); // Append before fixed nodes function appendChildNode(node: ChildNode) { ellipsisContentHolder.insertBefore(node, ellipsisTextNode); } // Get maximum text function measureText( textNode: Text, fullText: string, startLoc = 0, endLoc = fullText.length, lastSuccessLoc = 0, ): MeasureResult { const midLoc = Math.floor((startLoc + endLoc) / 2); const currentText = fullText.slice(0, midLoc); textNode.textContent = currentText; if (startLoc >= endLoc - 1) { // Loop when step is small for (let step = endLoc; step >= startLoc; step -= 1) { const currentStepText = fullText.slice(0, step); textNode.textContent = currentStepText; if (inRange() || !currentStepText) { return step === fullText.length ? { finished: false, vNode: fullText, } : { finished: true, vNode: currentStepText, }; } } } if (inRange()) { return measureText(textNode, fullText, midLoc, endLoc, midLoc); } return measureText(textNode, fullText, startLoc, midLoc, lastSuccessLoc); } function measureNode(childNode: ChildNode): MeasureResult { const type = childNode.nodeType; // console.log('type', type); // if (type === ELEMENT_NODE) { // // We don't split element, it will keep if whole element can be displayed. // appendChildNode(childNode); // if (inRange()) { // return { // finished: false, // vNode: contentList[index], // }; // } // // Clean up if can not pull in // ellipsisContentHolder.removeChild(childNode); // return { // finished: true, // vNode: null, // }; // } if (type === TEXT_NODE) { const fullText = childNode.textContent || ''; const textNode = document.createTextNode(fullText); appendChildNode(textNode); return measureText(textNode, fullText); } // Not handle other type of content return { finished: false, vNode: null, }; } childNodes.some(childNode => { const { finished, vNode } = measureNode(childNode); if (vNode) { ellipsisChildren.push(vNode); } return finished; }); return { content: ellipsisChildren, text: ellipsisContainer.innerHTML, ellipsis: true, }; };