woocommerce/packages/woocommerce-blocks/assets/js/base/components/read-more/utils.js
2021-12-10 12:03:04 +00:00

88 lines
2.5 KiB
JavaScript

/**
* External dependencies
*/
import trimHtml from 'trim-html';
/**
* Truncate some HTML content to a given length.
*
* @param {string} html HTML that will be truncated.
* @param {number} length Length to truncate the string to.
* @param {string} ellipsis Character to append to truncated content.
*/
export const truncateHtml = ( html, length, ellipsis = '...' ) => {
const trimmed = trimHtml( html, {
suffix: ellipsis,
limit: length,
} );
return trimmed.html;
};
/**
* Clamp lines calculates the height of a line of text and then limits it to the
* value of the lines prop. Content is updated once limited.
*
* @param {string} originalContent Content to be clamped.
* @param {Object} targetElement Element which will contain the clamped content.
* @param {number} maxHeight Max height of the clamped content.
* @param {string} ellipsis Character to append to clamped content.
* @return {string} clamped content
*/
export const clampLines = (
originalContent,
targetElement,
maxHeight,
ellipsis
) => {
const length = calculateLength( originalContent, targetElement, maxHeight );
return truncateHtml( originalContent, length - ellipsis.length, ellipsis );
};
/**
* Calculate how long the content can be based on the maximum number of lines allowed, and client height.
*
* @param {string} originalContent Content to be clamped.
* @param {Object} targetElement Element which will contain the clamped content.
* @param {number} maxHeight Max height of the clamped content.
*/
const calculateLength = ( originalContent, targetElement, maxHeight ) => {
let markers = {
start: 0,
middle: 0,
end: originalContent.length,
};
while ( markers.start <= markers.end ) {
markers.middle = Math.floor( ( markers.start + markers.end ) / 2 );
// We set the innerHTML directly in the DOM here so we can reliably check the clientHeight later in moveMarkers.
targetElement.innerHTML = truncateHtml(
originalContent,
markers.middle
);
markers = moveMarkers( markers, targetElement.clientHeight, maxHeight );
}
return markers.middle;
};
/**
* Move string markers. Used by calculateLength.
*
* @param {Object} markers Markers for clamped content.
* @param {number} currentHeight Current height of clamped content.
* @param {number} maxHeight Max height of the clamped content.
*/
const moveMarkers = ( markers, currentHeight, maxHeight ) => {
if ( currentHeight <= maxHeight ) {
markers.start = markers.middle + 1;
} else {
markers.end = markers.middle - 1;
}
return markers;
};