minsky-kit/js/utils/svg.js

Kit of components for MINSKY web agency

// import
import Ticker from '../managers/Ticker';
import { strToDom } from './dom';
import { createLogger } from './createLogger';

const log = createLogger('SVG - Utils');

// generate svg icon String
export function svgIconString (name, classes = []) {
    return `
    <span role="none" class="icon icon--svg icon--${name} ${classes.join(' ')}">
        <svg class="icon__svg" role="none" alt="">
            <use xlink:href="#${name}"></use>
        </svg>
    </span>`;
}

// generate svg icon Element
export function svgIconEl (name, classes = []) {
    return strToDom(svgIconString(name, classes));
}

export function prepSvgMask (...svgIds) {
    const $collection = document.querySelector('.svg-mask-container') || renderSvgMaskContainer();

    const $svgs = svgIds.map((svgId) => {
        const $symbol = document.querySelector(`symbol#${svgId}`);
        if ($symbol) {
            const viewBox = $symbol.getAttribute('viewBox').split(' ');
            const $maskSvg = strToDom(`
                <svg viewBox="${viewBox.join(' ')}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="opacity: 0;">
                    <defs>
                        <clipPath transform="scale(${1 / viewBox[2]}, ${1 / viewBox[3]})" id="${svgId}-clip" clipPathUnits="objectBoundingBox">
                            ${$symbol.innerHTML}
                        </clipPath>
                    </defs>
                </svg>
            `);

            $collection.appendChild($maskSvg);
            return $maskSvg;
        }

        log('warn', 'No symbol found for', svgId);
        return null;
    });

    // safari hack
    (new Ticker(1000, { $items: $svgs }).on('timeout', (e) => {
        document.body.classList.add('svg-clips-ready');
        e.currentTarget.autoDestroy = true;
    })).start();
}

export function renderSvgMaskContainer () {
    const $el = strToDom('<div class="svg-mask-container noRender"></div>');
    document.body.append($el);
    return $el;
}

export function inlineSvgs (id) {
    const $targetSvg = document.querySelector(`.icon--${id} svg`);
    const $spriteSymbol = document.querySelector(`svg defs symbol#${id}`);

    if ($targetSvg && $spriteSymbol) {
        $targetSvg.innerHTML = $spriteSymbol.innerHTML;
        $targetSvg.setAttribute('viewBox', $spriteSymbol.getAttribute('viewBox'));
    }
}