minsky-kit/js/factories/OverlayFactory.js

Kit of components for MINSKY web agency

// imports
import _merge from 'lodash/merge';
import { strToDom } from '../utils/dom';
import { svgIconString } from '../utils/svg';
import {
    strToCssClass,
    strToCssSelector,
} from '../utils/css';

// privates
const DEF_GENERATORS = {
    overlay:  overlayGenerator,
    closeBtn: closeBtnGenerator,
};

export const DEF_GEN_ARGS = {
    baseClass:        'overlay',
    attributes:       {},
    content:          '',
    closeBtnLocation: 'inner',
    closeBtnTitle:    'close',
    closeBtnContent:  null,
};

// public methods
export function generateOverlay (args, generators) {
    if (this && this.log) this.log('Generate Overlay HTML');
    generators = _merge({}, DEF_GENERATORS, generators);
    const $el = generators.overlay(args, generators);
    if (this && this.log) this.log('Overlay HTML generation done.');
    return $el;
}

// private methods
function overlayGenerator (args, generators) {
    if (this && this.log) this.log('Generate overlay', args);

    // provide default args
    args.attributes = _merge({}, DEF_GEN_ARGS.attributes, args.attributes);
    args.attributes.class = args.attributes.class || '';
    args.baseClass = args.baseClass || DEF_GEN_ARGS.baseClass;
    args.content = args.content || DEF_GEN_ARGS.content;
    args.closeBtnContent = args.closeBtnContent || '';

    args.components = args.components || {};
    args.components.backdrop = (typeof args.components.backdrop === 'boolean') ? args.components.backdrop : true;
    args.components.closeButton = (typeof args.components.closeButton === 'boolean') ? args.components.closeButton : true;

    // prepend base class to attributes class list
    args.attributes.class = `${args.baseClass} ${Array.isArray(args.attributes.class) ? args.attributes.class.join(' ') : args.attributes.class}`;

    // process attributes
    const attributes = [];
    for (const key of Object.keys(args.attributes)) {
        attributes.push(`${key}="${args.attributes[key]}"`);
    }

    // render close button
    const closeBtn = generators.closeBtn.call(this, {
        baseClass: args.baseClass,
        title:     args.closeBtnTitle || DEF_GEN_ARGS.closeBtnTitle,
        content:   args.closeBtnContent || DEF_GEN_ARGS.closeBtnContent,
    });

    // render element
    const $el = strToDom(`<div ${attributes.join(' ')}>
        <div class="${strToCssClass(args.baseClass, 'container')}">
            <div class="${strToCssClass(args.baseClass, 'inner')}">
                <div class="${strToCssClass(args.baseClass, 'content')}"></div>
            </div>
        </div>
    </div>`);

    // add content to element if given
    if (args.content) {
        const container = $el.querySelector(`.${strToCssClass(args.baseClass, 'content')}`);
        // treat content depending on its type
        if (args.content instanceof HTMLElement) {
            container.appendChild(args.content);
        }
        else {
            container.innerHTML = args.content;
        }
    }

    // add backdrop
    if (args.components.backdrop) {
        $el.appendChild(strToDom(`<div class="${strToCssClass(args.baseClass, 'backdrop')}"></div>`));
    }

    // add close button
    if (args.components.closeButton) {
        $el.querySelector(strToCssSelector(args.baseClass, args.closeBtnLocation || DEF_GEN_ARGS.closeBtnLocation)).appendChild(closeBtn);
    }

    if (this && this.log) this.log('Overlay generation done.', $el);

    return $el;
}

function closeBtnGenerator (args) {
    if (this && this.log) this.log('Generate closeBtn', args);
    const $el = strToDom(`<a href="#" title="${args.title}" class="${strToCssClass(args.baseClass, 'closeBtn')}">${svgIconString('close', [strToCssClass(args.baseClass, 'closeSvg')])}</a>`);
    if (this && this.log) this.log('closeBtn generation done.', $el);

    return $el;
}

export default {
    generateOverlay,
};