diff --git a/assets/loggerService/loggerService.css b/assets/loggerService/loggerService.css index 1d27606..61a5c60 100644 --- a/assets/loggerService/loggerService.css +++ b/assets/loggerService/loggerService.css @@ -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 { diff --git a/assets/loggerService/loggerService.js b/assets/loggerService/loggerService.js index 247cd88..c59e63c 100644 --- a/assets/loggerService/loggerService.js +++ b/assets/loggerService/loggerService.js @@ -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 = ''+key+''+value+''; + var result = ''+key+''+value+''; return support.makeNode(result); } - function getItemObjectNode(id = ''){ + + function getLoggerLogNode(id = ''){ + var entity = '', css = '', style = ''; + return support.makeNode(''); + } + function getLoggerPairNode(depth = 1){ + return support.makeNode(''); + } + + function getLoggerAdditionalHtml(html = ''){ + return ''+html+''; + } + + function getLoggerToggerHtml(id, html = ''){ + return ''; + } + + function getContextNode(id = ''){ var entity = '', css = '', style = ''; if(id) { css = ''; entity = ' data-entity-id="'+id+'"'; style = ' style="display: none"' } - return support.makeNode(''+css+''); + return support.makeNode(''+css+''); } @@ -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)?'':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('')); - 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('')); + 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) { diff --git a/assets/support/support.js b/assets/support/support.js index 4b98e5d..4e72e94 100644 --- a/assets/support/support.js +++ b/assets/support/support.js @@ -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, diff --git a/tests/loggerTest.php b/tests/loggerTest.php index c84b0b4..233cbdf 100644 --- a/tests/loggerTest.php +++ b/tests/loggerTest.php @@ -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'); });