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(depth, key, value, level = ''){
        key = String(key);
        value = String(value);
        var result = '<logger-item style="--logger-depth:'+support.toNumber(depth, 1)+';" 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 getItemObjectNode(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-item-object'+entity+style+'>'+css+'</logger-item-object>');
    }



    /**
     * @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.setHtmlCollection = function (node) {
        /**
         * @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)
        }
    };

    LoggerService.prototype.__row = function(message, depth = 0, logLevel = '') {
        if (!this.__htmlCollection) {
            this.setHtmlCollection();
        }
        var log = this.__htmlCollection;

        function setObjectValue(log, depth, key, value, opClass, maxDepth = 3, openDepth = 1, isRoot = true) {
            var rowChildNode, isObj = support.isObject(value), id = isObj?support.uniqueId():'',
                skipValue = value === window || value === document,
                valueString = ((isObj && typeof value.toString !== 'function') || typeof value === 'symbol')?(typeof value):value,
                val = (isObj&&maxDepth&&!skipValue)?'<label class="logger-toggler" for="'+id+'">'+valueString+'</label>':valueString, inp, j,
                len = isObj?Object.keys(value).length:0;

            if(!isRoot || (isRoot && !isObj)) {
                log.appendChild(getRowNode(depth, key, '' + val + (isObj?(' ['+len+']'):''), opClass));
            }
            if(skipValue) {
                return;
            }
            if(isObj&&maxDepth) {
                !isRoot && ++depth;
                maxDepth = Math.max(0, maxDepth - 1);
                log.appendChild(inp = support.makeNode('<input id="'+id+'" type="checkbox" style="display: none;">'));
                inp.checked = !!openDepth;
                openDepth = Math.max(0, openDepth - 1);
                log.appendChild(rowChildNode = getItemObjectNode(id));
                for(j in value) {
                    if(value.hasOwnProperty(j))
                        setObjectValue(rowChildNode, depth, j, value[j], opClass, maxDepth, openDepth, false);
                }
            }
        }

        setObjectValue(log, depth, '', message, logLevel, 6, 3);

        log.scrollTop = log.scrollHeight;
    };

    LoggerService.prototype.__logHandler = function(data = {
        level: '',
        message: '',
        context: [],
    }){
        this.__row(data.message, 1, data.level);
        if(support.isObject(data.context))
            this.__row(data.context, 2);
    };

    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;
});