pathfinder/js/app/lib/console.js

/**
 * Console module
 * -> extends default window.console log object
 */

define([], () => {
    'use strict';

    /**
     * init custom window.console object
     * -> extend console obj with custom methods for styling and logging
     */
    let initConsole = () => {

        window.console = (origConsole => {
            // save orig methods for byPassing args to original methods
            let log = origConsole.log;
            let info = origConsole.info;
            let warn = origConsole.warn;
            let error = origConsole.error;

            let styles = {
                'indentDefault': {
                    'padding-left': '3px'
                },
                'global': {
                    'font-weight': 500,
                    'font-size': '11px',
                    'line-height': '19px',
                    'font-family': '"Fira Code", "Lucida Console"',
                },
                'debug': {
                    'color': '#d747d6'
                },
                'ok': {
                    'color': '#5cb85c'
                },
                'log': {
                    'color': '#adadad'
                },
                'info': {
                    'color': '#428bca'
                },
                'warn': {
                    'color': '#ffdd9e'
                },
                'error': {
                    'color': '#ff8080'
                },
                'pf': {
                    'color': '#568a89'
                },
                'brand': {
                    'color': '#375959',
                    'line-height': '35px',
                    'font-size': '25px'
                }
            };

            let placeholders = {
                '%s': {
                    'style': ['color: #e93f3b; font-style: italic', 'color: inherit']
                },
                '%i': {
                    'style': ['color: #9980ff', 'color: inherit'],
                },
                '%d': {
                    'style': ['color: #9980ff', 'color: inherit']
                },
                '%f': {
                    'style': ['color: #9980ff', 'color: inherit']
                },
                '%o': {
                    'style': ['', '']
                },
                '%O': {
                    'style': ['', '']
                }
            };

            let findPlaceholders = str => {
                let exp = new RegExp(Object.keys(placeholders).join('|'), 'g');
                let matches = str.match(exp);
                return matches ? matches : [];
            };

            let addStylePlaceholder = str => {
                let exp = new RegExp(Object.keys(placeholders).join('|'), 'g');

                return str.replace(exp, function(matched){
                    return '%c' + matched + '%c';
                });
            };

            let getStyleByPlaceholder = (placeholder, clear = false) => {
                let css = '';
                if(placeholders.hasOwnProperty(placeholder)){
                    css = placeholders[placeholder].style[clear ? 1 : 0];
                }
                return css;
            };

            let getStyleByLogType = (logType, props = []) => {
                let css = '';
                if(styles.hasOwnProperty(logType)){
                    css = Object.keys(styles[logType])
                        .filter(prop => props.length ? props.includes(prop) : true)
                        .reduce((css, prop,i, affe) => {
                            css += prop + ':' + styles[logType][prop] + ';';
                            return css;
                        }, '');
                }
                return css;
            };

            let setLineStyleByLogType = (logType, args) => {
                if(args.length){
                    let lineStyle = getStyleByLogType('global') + getStyleByLogType(logType);
                    lineStyle += ['debug', 'ok', 'log', 'info', 'pf'].includes(logType) ? getStyleByLogType('indentDefault') : '';
                    let bullet = ['debug', 'ok', 'log', 'info', 'pf'].includes(logType) ? '●' : '';

                    if(typeof args[0] === 'string'){
                        // prepend placeholder to existing message
                        args[0] = '%c' + bullet + ' ' + args[0];
                    }else{
                        // prepend placeholder as new message
                        args.splice(0, 0, '%c' + bullet + ' ' + logType + ':');
                    }
                    // set line style as 2nd argument
                    args.splice(1, 0, lineStyle);
                }
            };

            let setMessageStyleByLogType = (logType, args) => {
                if(typeof args[0] === 'string') {
                    let placeholdersFound = findPlaceholders(args[0]);
                    let placeholderCount = placeholdersFound.length;

                    // add c% placeholders around other placeholders
                    args[0] = addStylePlaceholder(args[0]);

                    // add style args for  c% placeholders
                    let placeholderIndex = 0;
                    let argIndexStart = 1;
                    let argIndexEnd = argIndexStart + placeholderCount;
                    let argIndexOffset = 0;
                    for (let argIndex = argIndexStart; argIndex < argIndexEnd; argIndex++) {
                        args.splice(argIndex + argIndexOffset, 0, getStyleByPlaceholder(placeholdersFound[placeholderIndex]));
                        argIndexOffset += 2;
                        args.splice(argIndex + argIndexOffset, 0, getStyleByPlaceholder(placeholdersFound[placeholderIndex], true) + ';' + getStyleByLogType('global') + getStyleByLogType(logType));
                        placeholderIndex++;
                    }
                }
            };

            origConsole.debug = (...args) => {
                setMessageStyleByLogType('debug', args);
                setLineStyleByLogType('debug', args);
                info.apply(origConsole, args);
            };

            origConsole.ok = (...args) => {
                setMessageStyleByLogType('ok', args);
                setLineStyleByLogType('ok', args);
                info.apply(origConsole, args);
            };

            origConsole.info = (...args) => {
                setMessageStyleByLogType('info', args);
                setLineStyleByLogType('info', args);
                info.apply(origConsole, args);
            };

            origConsole.log = (...args) => {
                setMessageStyleByLogType('log', args);
                setLineStyleByLogType('log', args);
                log.apply(origConsole, args);
            };

            origConsole.warn = (...args) => {
                setMessageStyleByLogType('warn', args);
                setLineStyleByLogType('warn', args);
                warn.apply(origConsole, args);
            };

            origConsole.error = (...args) => {
                setMessageStyleByLogType('error', args);
                setLineStyleByLogType('error', args);
                error.apply(origConsole, args);
            };

            origConsole.pf = (...args) => {
                setMessageStyleByLogType('pf', args);
                setLineStyleByLogType('pf', args);
                info.apply(origConsole, args);
            };

            origConsole.brand = (...args) => {
                setMessageStyleByLogType('brand', args);
                setLineStyleByLogType('brand', args);
                info.apply(origConsole, args);
            };

            return origConsole;
        })(window.console);
    };

    initConsole();

    /**
     * show current program version information console
     * @param version
     */
    let showVersionInfo = (version) => {
        console.ok('%c     PATHFINDER',
            'color: #477372; font-size: 25px; margin-left: 10px; line-height: 50px; text-shadow: 1px 1px 0 #212C30; ' +
            'background: url(https://i.imgur.com/bhSr6LI.png) no-repeat;');
        console.pf('Release: %s', version);
    };

    return {
        showVersionInfo: showVersionInfo
    };
});