Development
August 31, 2024

Сhange the font size depending on whether the text fits into the block

Sometimes you need to put the text in a block in one line.
This way we can change the font size depending on whether the text fits into the block.

function scale(block) {
    var step = 2,
        minfs = 9,
        scw = block.scrollWidth,
        w = block.offsetWidth;

    if (scw > w) {
        const styles = window.getComputedStyle(block);
        let fontsize = parseInt(styles.fontSize, 10) - step;
        if (fontsize >= minfs) {
            block.style.fontSize = fontsize + "px";
            scale(block);
    }
}

function setFontSize() {
    let targetBlock = '#selector_of_target_block_default#';
    /** if (BX.SidePanel.Instance.getTopSlider()) { // Bitrix iframe
        let topSlider = BX.SidePanel.Instance.getTopSlider().getFrame();
        targetBlock = '#selector_of_target_block_in_slider#';
        titleList = topSlider.contentDocument.querySelector(targetBlock);
    } **/
    if (targetBlock) {
        scale(targetBlock);
    }
}

setTimeout(setFontSize, 500);
// BX.addCustomEvent("SidePanel.Slider:onLoad", setFontSize); // Bitrix iframe