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
+31 -10
View File
@@ -8,7 +8,7 @@
--logger-color-info: hsl(205, 100%, 61%);
--logger-color-debug: #673ab7;
--logger-color-success: #8bc34a;
--logger-depth: 1;
--logger-depth-gap: 2em;
}
.kit-logger, #kit-logger {
margin: 0;
@@ -26,7 +26,24 @@
.kit-logger--fixed {
position: sticky;
bottom: 0;
height: 30vh;
height: 50vh;
}
logger-additional {
opacity: 0.3;
}
logger-log {
display: block;
min-height: 1em;
}
logger-pair {
display: block;
min-height: 1em;
}
logger-log logger-pair > logger-context > logger-pair {
padding-left: var(--logger-depth-gap);
}
logger-log logger-item__key > logger-pair > logger-context > logger-pair {
padding-left: 0;
}
logger-item {
margin: 0;
@@ -48,10 +65,10 @@ logger-item {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
white-space: pre-line;
padding-left: calc((var(--logger-depth, 1) - 1) * 25px);
font-size: 12px !important;
line-height: 14px !important;
white-space: normal;
word-break: break-all;
font-size: 1em !important;
line-height: calc(1.1em) !important;
}
logger-item__value * {
color: inherit;
@@ -59,23 +76,24 @@ logger-item__value * {
logger-item__value .logger-toggler {
cursor: pointer;
color: #2698db !important;
opacity: 0.6;
}
logger-item__msg {
}
logger-item__key {
min-width: 25px;
min-width: 2em;
padding-right: 5px;
white-space: nowrap;
color: var(--logger-color-key, #909090);
background-color: var(--logger-color-content-key, transparent);
}
logger-item__key, logger-item__key > * {
color: var(--logger-color-key, #909090);
}
logger-item__key:empty {
display: none;
}
logger-item__value {
flex: 1 0 0;
white-space: pre-wrap;
color: var(--logger-color-value, #c1c1c1);
background-color: var(--logger-color-content-value, transparent);
}
@@ -85,6 +103,9 @@ logger-item__value * {
color: inherit !important;
white-space: inherit !important;
}
logger-pair > input[type="checkbox"]:checked ~ logger-item > logger-item__value .logger-toggler {
opacity: 1;
}
.kit-logger-row--emergency {
+84 -36
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,7 +54,9 @@ __PluginManager__.register('loggerService', function(module, exports, require, g
support.extend(LoggerService.prototype, Logger.prototype);
LoggerService.prototype.setHtmlCollection = function (node) {
LoggerService.prototype.getHtmlCollection = function() {
var node;
if (!this.__htmlCollection) {
/**
* @type {HTMLElement}
*/
@@ -46,55 +65,84 @@ __PluginManager__.register('loggerService', function(module, exports, require, g
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 setObjectValue(log, depth, key, value, opClass, maxDepth = 3, openDepth = 1, isRoot = true) {
var rowChildNode, isObj = support.isObject(value), id = isObj?support.uniqueId():'',
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,
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;
valueType = support.getType(value),
len = isIterable?Object.keys(value).length:0,
lenPrint = isIterable?' [' + Object.keys(value).length + ']':'',
val = value,inp, j;
if(!isRoot || (isRoot && !isObj)) {
log.appendChild(getRowNode(depth, key, '' + val + (isObj?(' ['+len+']'):''), opClass));
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);
}
if(skipValue) {
return;
} else {
val = getLoggerAdditionalHtml(valueType + ' empty');
}
if(isObj&&maxDepth) {
!isRoot && ++depth;
maxDepth = Math.max(0, maxDepth - 1);
log.appendChild(inp = support.makeNode('<input id="'+id+'" type="checkbox" style="display: none;">'));
}
}
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);
log.appendChild(rowChildNode = getItemObjectNode(id));
pairNode.appendChild(contextNode = getContextNode(id));
for(j in value) {
if(value.hasOwnProperty(j))
setObjectValue(rowChildNode, depth, j, value[j], opClass, maxDepth, openDepth, false);
if(value.hasOwnProperty(j)) {
contextNode.appendChild(getPairNode(depth, j, value[j], logLevel, maxDepth, openDepth, false));
}
}
}
setObjectValue(log, depth, '', message, logLevel, 6, 3);
log.scrollTop = log.scrollHeight;
};
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) {
+34 -11
View File
@@ -113,7 +113,7 @@ __PluginManager__.register('support', function(module, exports, require, global)
for(var i = 1; arguments.length - 1 >= i;i++) {
args.push(arguments[i]);
}
if(typeof value === 'function') {
if(isFunction(value)) {
return value.apply(this, args);
}
return value;
@@ -125,25 +125,45 @@ __PluginManager__.register('support', function(module, exports, require, global)
Number.isNaN(val) === true ||
val === '' ||
val === 0 ||
val === false;
}
function emptyEx(val) {
return empty(val) ||
(isObject(val) && (function () {
for(v in val) return false;
val === false ||
((isObject(val) || isArray(val)) && (function () {
for(var v in val) return false;
return true;
})());
}
function typeOf(value) {
function emptyEx(val) {
return empty(val) ||
((isObject(val) || isArray(val)) && (function () {
for(var v in val) return false;
return true;
})());
}
function isUndefined(value) {
return value === undefined || Number.isNaN(value) || value === null || (typeof value === 'number' && !isFinite(value));
}
function getType(value) {
if(isUndefined(value)) {
return 'undefined';
} else if(isArray(value)) {
return 'array';
}
return typeof value;
}
function isFunction(value) {
return typeof value === 'function';
}
function isObject(value) {
return typeOf(value) === 'object' ? value !== null : typeof value === 'function';
return getType(value) === 'object' ? value !== null : false;
}
function isIterable(value) {
return isObject(value) || isArray(value);
}
function isNumber(value) {
return !Number.isNaN(value) && isFinite(value) && typeof value === 'number';
}
function isArray(value) { return Array.isArray(value);}
function isArray(value) {
return Array.isArray(value);
}
/**
* @return {number}
*/
@@ -370,9 +390,12 @@ __PluginManager__.register('support', function(module, exports, require, global)
uniqueId,
valueEx,
empty,
isUndefined,
isNumber,
typeOf,
getType,
isIterable,
isObject,
isArray,
isInteger,
isFloat,
isString,
+22 -1
View File
@@ -34,6 +34,7 @@ $APPLICATION->ShowHead();
logger.notice(null);
logger.notice(NaN);
logger.notice('bigData', {win: window, doc: document});
logger.notice('context array', [100, 200]);
logger.notice(kit.date('Y-m-d H:i:s'), {
test1: {
@@ -53,9 +54,29 @@ $APPLICATION->ShowHead();
},
});
logger.notice(kit.date('Y-m-d H:i:s'), {
test1: {
test2: {
test3: {
test4: {
test5: {
test6: {
test7: {
test1: kit.date('Y-m-d H:i:s'),
test2: kit.date('Y-m-d H:i:s'),
test3: kit.date('Y-m-d H:i:s'),
},
},
},
},
},
},
},
});
kit.service.logger.logList(logger.collection);
unit.assertSame(14, kit.service.logger.collection.length, 'Проверка количества логов в логерСервисе после подгрузки логов из класса Logger через loggerService.logList');
unit.assertSame(16, kit.service.logger.collection.length, 'Проверка количества логов в логерСервисе после подгрузки логов из класса Logger через loggerService.logList');
});
</script>