mirror of
https://bitbucket.org/bellord13/kit.git
synced 2026-11-13 19:06:11 +03:00
fix
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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
@@ -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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user