kit/assets/loggerService/loggerService.js

/** @module loggerService */
__PluginManager__.register('loggerService', function(module, exports, require, global){

    var support = require('support');
    var Logger = require('Logger');
    var Collection = require('Collection');

    function getRowNode(key, value, level = ''){
        key = String(key);
        value = String(value);
        var result = '<logger-item class="kit-logger-row--'+level+'"><logger-item__key>'+key+'</logger-item__key><logger-item__value>'+value+'</logger-item__value></logger-item>';

        return support.makeNode(result);
    }

    function getLoggerLogNode(id = ''){
        var entity = '', css = '', style = '';
        return support.makeNode('<logger-log></logger-log>');
    }
    function getLoggerPairNode(depth = 1){
        return support.makeNode('<logger-pair style="--logger-depth:'+support.toNumber(depth, 1)+';"></logger-pair>');
    }

    function getLoggerAdditionalHtml(html = ''){
        return '<logger-additional>'+html+'</logger-additional>';
    }

    function getLoggerToggerHtml(id, html = ''){
        return '<label class="logger-toggler" for="'+id+'">'+html+'</label>';
    }

    function getContextNode(id = ''){
        var entity = '', css = '', style = '';
        if(id) {
            css = '<style>input#'+id+':checked ~ [data-entity-id="'+id+'"] {display: block !important;}</style>';
            entity = ' data-entity-id="'+id+'"';
            style = ' style="display: none"'
        }
        return support.makeNode('<logger-context'+entity+style+'>'+css+'</logger-context>');
    }



    /**
     * @extends kit.Logger
     * @class LoggerService
     * @memberOf kit
     */
    var LoggerService = function() {
        Logger.prototype.constructor.apply(this, arguments);
        this.onLog.push(this.__logHandler);
        this.__htmlCollectionTemplater = '<div class="kit-logger kit-logger--fixed"></div>';
    };

    support.extend(LoggerService.prototype, Logger.prototype);

    LoggerService.prototype.getHtmlCollection = function() {
        var node;
        if (!this.__htmlCollection) {
            /**
             * @type {HTMLElement}
             */
            this.__htmlCollection = node || document.getElementById('kit-logger') || document.querySelector('.kit-logger') || support.makeNode(this.__htmlCollectionTemplater);

            if((this.__htmlCollection instanceof HTMLElement) && !this.__htmlCollection.parentElement) {
                document.body.appendChild(this.__htmlCollection)
            }
        }

        return this.__htmlCollection;
    };

    function getPairNode(depth, key, value, logLevel, maxDepth = 3, openDepth = 1, isRoot = true) {
        var pairNode = getLoggerPairNode(depth);
        var contextNode,
            isIterable = support.isIterable(value),
            isEmptyValue = support.empty(value),
            id = isIterable?support.uniqueId():'',
            skipValue = value === window || value === document,
            valueType = support.getType(value),
            len = isIterable?Object.keys(value).length:0,
            lenPrint = isIterable?' [' + Object.keys(value).length + ']':'',
            val = value,inp, j;

        if(support.isIterable(value)){

            if(value === window) {
                val = 'window ' + getLoggerAdditionalHtml(valueType);
            } else if(value === document) {
                val = 'document ' + getLoggerAdditionalHtml(valueType);
            } else {
                if(isRoot && support.empty(value)){
                    val = '';
                } else
                if(len){
                    if(maxDepth){
                        val = getLoggerToggerHtml(id, valueType + lenPrint)
                    } else {
                        val = getLoggerAdditionalHtml(valueType + lenPrint);
                    }
                } else {
                    val = getLoggerAdditionalHtml(valueType + ' empty');
                }
            }
        }
        if(isIterable&&maxDepth&&!skipValue) {
            pairNode.appendChild(inp = support.makeNode('<input id="'+id+'" type="checkbox" style="display: none;">'));
            inp.checked = !!openDepth;
        }

        if(support.isIterable(key)){
            pairNode.appendChild(x = getRowNode('', '' + val, logLevel));
            x.querySelector('logger-item__key').appendChild(getPairNode(depth, null, key, logLevel, 1, 1, isRoot));
        } else {
            if(!(isRoot&&support.isUndefined(key))) {
                pairNode.appendChild(getRowNode(key, '' + val, logLevel));
            }
        }

        if(isIterable&&maxDepth&&!skipValue) {
            if(!(isRoot&&support.isUndefined(key))) {
                ++depth;
            }
            maxDepth = Math.max(0, maxDepth - 1);
            openDepth = Math.max(0, openDepth - 1);
            pairNode.appendChild(contextNode = getContextNode(id));
            for(j in value) {
                if(value.hasOwnProperty(j)) {
                    contextNode.appendChild(getPairNode(depth, j, value[j], logLevel, maxDepth, openDepth, false));
                }
            }
        }
        return pairNode;
    }

    LoggerService.prototype.__logHandler = function(data = {
        level: '',
        message: '',
        context: [],
    }){
        var logCollectionNode = this.getHtmlCollection();
        var loggerLogNode = getLoggerLogNode();
        loggerLogNode.appendChild(getPairNode(1, data.message, data.context, data.level, 6, 3));
        logCollectionNode.appendChild(loggerLogNode);
        logCollectionNode.scrollTop = logCollectionNode.scrollHeight;
    };

    LoggerService.prototype.logList = function (logList) {
        var self = this;
        logList = new Collection(logList);
        logList.map(function (log) {
            self.log(log.level, log.message, log.context);
        });
    };

    /**
     * @memberOf kit.service
     * @class logger
     **/
    var logger = new LoggerService();

    global.service.logger = logger;

    module.exports = logger;
});