minsky-kit/js/factories/HamburgerFactory.js

Kit of components for MINSKY web agency

// impaorts
import { strToDom } from '../utils/dom';
import { strToCssClass } from '../utils/css';

// methods
export function generateHamburgerString (cfg) {
    // defaults
    const settings = {
        bars: cfg.bars || 3,
    };

    cfg.labels = cfg.labels || {};
    settings.labels = {
        open:  cfg.labels.open || 'Menu',
        close: cfg.labels.close || 'Close',
    };

    let bars = '';
    for (let i = 1; i <= settings.bars; i++) {
        bars += `<span class="${strToCssClass('hamburger', 'bar')} ${strToCssClass('hamburger', 'bar', i)}"></span>`;
    }

    return `
    <a class="${strToCssClass('hamburger')}" href="#menu" title="Menu openen">
        <span class="${strToCssClass('hamburger', 'label')} ${strToCssClass('hamburger', 'bar', 'open')}">${settings.labels.open}</span>
        <span class="${strToCssClass('hamburger', 'label')} ${strToCssClass('hamburger', 'bar', 'close')}">${settings.labels.close}</span>
        ${bars}
    </a>`;
}

export function generateHamburgerEl (cfg = {}) {
    return strToDom(generateHamburgerString(cfg));
}

export default {
    generateHamburgerString,
    generateHamburgerEl,
};