This commit is contained in:
2022-04-28 13:11:14 +03:00
parent 4bd6c93b00
commit 2a6f01f460
4 changed files with 180 additions and 67 deletions
+93 -45
View File
@@ -5,21 +5,38 @@ __PluginManager__.register('loggerService', function(module, exports, require, g
var Logger = require('Logger');
var Collection = require('Collection');
function getRowNode(depth, key, value, level = ''){
function getRowNode(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>';
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 getItemObjectNode(id = ''){
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-item-object'+entity+style+'>'+css+'</logger-item-object>');
return support.makeNode('<logger-context'+entity+style+'>'+css+'</logger-context>');
}
@@ -37,64 +54,95 @@ __PluginManager__.register('loggerService', function(module, exports, require, g
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);
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)
if((this.__htmlCollection instanceof HTMLElement) && !this.__htmlCollection.parentElement) {
document.body.appendChild(this.__htmlCollection)
}
}
return this.__htmlCollection;
};
LoggerService.prototype.__row = function(message, depth = 0, logLevel = '') {
if (!this.__htmlCollection) {
this.setHtmlCollection();
}
var log = 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;
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):(Array.isArray(value)?'Array':value),
val = (isObj&&maxDepth&&!skipValue)?'<label class="logger-toggler" for="'+id+'">'+valueString+'</label>':valueString,
inp, j,
len = isObj?Object.keys(value).length:0;
if(support.isIterable(value)){
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);
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;
}
setObjectValue(log, depth, '', message, logLevel, 6, 3);
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));
}
}
log.scrollTop = log.scrollHeight;
};
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: [],
}){
this.__row(data.message, 1, data.level);
if(support.isObject(data.context))
this.__row(data.context, 2);
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) {