mirror of
https://bitbucket.org/bellord13/kit.git
synced 2026-11-13 19:06:11 +03:00
fix
This commit is contained in:
@@ -0,0 +1,150 @@
|
||||
:root {
|
||||
--logger-color-emergency: hsl(0, 100%, 25%);
|
||||
--logger-color-alert: hsl(0, 100%, 45%);
|
||||
--logger-color-critical: hsl(0, 100%, 40%);
|
||||
--logger-color-error: hsl(0, 100%, 35%);
|
||||
--logger-color-warning: hsl(31, 100%, 55%);
|
||||
--logger-color-notice: #909090;
|
||||
--logger-color-info: hsl(205, 100%, 61%);
|
||||
--logger-color-debug: #673ab7;
|
||||
--logger-color-success: #8bc34a;
|
||||
--logger-depth-gap: 2em;
|
||||
}
|
||||
.kit-logger, #kit-logger {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
font-family: monospace;
|
||||
background: hsl(0, 0%, 15%);
|
||||
color: #909090;
|
||||
overflow-y: scroll !important;
|
||||
word-break: break-all;
|
||||
display: block;
|
||||
}
|
||||
.kit-logger:empty, #kit-logger:empty {
|
||||
display: none;
|
||||
}
|
||||
.kit-logger--fixed {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
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;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: flex-start;
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
font-size: 1em !important;
|
||||
line-height: calc(1.1em) !important;
|
||||
color: var(--logger-color-value, #c1c1c1);
|
||||
background-color: var(--logger-color-content-value, transparent);
|
||||
}
|
||||
logger-item__options {
|
||||
color: #606060;
|
||||
}
|
||||
logger-item__value * {
|
||||
color: inherit;
|
||||
}
|
||||
logger-item__value .logger-toggler {
|
||||
cursor: pointer;
|
||||
color: hsl(0, 0%, 75%) !important;
|
||||
opacity: 0.6;
|
||||
font-size: 0.8em !important;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
logger-item__msg {
|
||||
|
||||
}
|
||||
logger-item__key {
|
||||
min-width: 2em;
|
||||
padding-right: 5px;
|
||||
}
|
||||
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;
|
||||
}
|
||||
logger-item__value * {
|
||||
font-size: inherit !important;
|
||||
line-height: inherit !important;
|
||||
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 {
|
||||
--logger-color-key: #fff;
|
||||
--logger-color-content-key: var(--logger-color-emergency);
|
||||
--logger-color-value: #fff;
|
||||
--logger-color-content-value: var(--logger-color-emergency);
|
||||
}
|
||||
.kit-logger-row--alert {
|
||||
--logger-color-key: var(--logger-color-alert);
|
||||
--logger-color-value: var(--logger-color-alert);
|
||||
font-weight: bold;
|
||||
}
|
||||
.kit-logger-row--critical {
|
||||
--logger-color-key: var(--logger-color-critical);
|
||||
--logger-color-value: var(--logger-color-critical);
|
||||
}
|
||||
.kit-logger-row--error {
|
||||
--logger-color-key: var(--logger-color-error);
|
||||
--logger-color-value: var(--logger-color-error);
|
||||
}
|
||||
.kit-logger-row--warning {
|
||||
--logger-color-key: var(--logger-color-warning);
|
||||
--logger-color-value: var(--logger-color-warning);
|
||||
}
|
||||
.kit-logger-row--notice {}
|
||||
.kit-logger-row--info {
|
||||
--logger-color-key: var(--logger-color-info);
|
||||
--logger-color-value: var(--logger-color-info);
|
||||
}
|
||||
.kit-logger-row--debug {
|
||||
--logger-color-key: var(--logger-color-debug);
|
||||
--logger-color-value: var(--logger-color-debug);
|
||||
}
|
||||
.kit-logger-row--success {
|
||||
--logger-color-key: var(--logger-color-success);
|
||||
--logger-color-value: var(--logger-color-success);
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
/** @module log */
|
||||
__PluginManager__.register('log', function(module, exports, require, /** @param {kit}*/global){
|
||||
|
||||
var support = require('support');
|
||||
var Collection = require('Collection');
|
||||
var lib = require('lib');
|
||||
|
||||
var LogLevel = {
|
||||
EMERGENCY: 'emergency',
|
||||
ALERT: 'alert',
|
||||
CRITICAL: 'critical',
|
||||
ERROR: 'error',
|
||||
WARNING: 'warning',
|
||||
NOTICE: 'notice',
|
||||
INFO: 'info',
|
||||
DEBUG: 'debug',
|
||||
SUCCESS: 'success',
|
||||
};
|
||||
|
||||
/**
|
||||
* @class Logger
|
||||
*/
|
||||
class Logger
|
||||
{
|
||||
constructor() {
|
||||
this.collection = new Collection();
|
||||
this.onLog = new Collection();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param collection {kit.Collection}
|
||||
*/
|
||||
Logger.prototype.setCollection = function (collection) {
|
||||
this.collection = collection;
|
||||
};
|
||||
|
||||
Logger.prototype.emergency = function (message, context) {
|
||||
this.log(LogLevel.EMERGENCY, message, context);
|
||||
};
|
||||
Logger.prototype.alert = function (message, context) {
|
||||
this.log(LogLevel.ALERT, message, context);
|
||||
};
|
||||
Logger.prototype.critical = function (message, context) {
|
||||
this.log(LogLevel.CRITICAL, message, context);
|
||||
};
|
||||
Logger.prototype.error = function (message, context) {
|
||||
this.log(LogLevel.ERROR, message, context);
|
||||
};
|
||||
Logger.prototype.warning = function (message, context) {
|
||||
this.log(LogLevel.WARNING, message, context);
|
||||
};
|
||||
Logger.prototype.notice = function (message, context) {
|
||||
this.log(LogLevel.NOTICE, message, context);
|
||||
};
|
||||
Logger.prototype.info = function (message, context) {
|
||||
this.log(LogLevel.INFO, message, context);
|
||||
};
|
||||
Logger.prototype.debug = function (message, context) {
|
||||
this.log(LogLevel.DEBUG, message, context);
|
||||
};
|
||||
Logger.prototype.success = function (message, context) {
|
||||
this.log(LogLevel.SUCCESS, message, context);
|
||||
};
|
||||
Logger.prototype.log = function (level, message, context = []) {
|
||||
var data = {
|
||||
level: level,
|
||||
message: message,
|
||||
context: context,
|
||||
};
|
||||
this.__logData(data);
|
||||
};
|
||||
Logger.prototype.__logData = function (data) {
|
||||
this.collection.push(data);
|
||||
this.onLog.eachCall(this, data);
|
||||
};
|
||||
|
||||
const HINT_DATA_KEY_LIST = ['id', 'createdAt', 'userId', 'ip'];
|
||||
function getTooltipContent(data) {
|
||||
var contentList = [];
|
||||
HINT_DATA_KEY_LIST.map(function (item) {
|
||||
if(data[item]){contentList.push(item+': ' + data[item]);}
|
||||
});
|
||||
return contentList.join('<br>');
|
||||
}
|
||||
function getOptionsTemplate(data) {
|
||||
var optionsTemplate = '';
|
||||
var content = getTooltipContent(data);
|
||||
if(content) {
|
||||
optionsTemplate = '<logger-item__options class="kit-picture-line" ' +
|
||||
'data-kit-tooltip2="autoload" ' +
|
||||
'data-kit-tooltip2-h-align="left" ' +
|
||||
'data-kit-tooltip2-h-direction="left" ' +
|
||||
'data-kit-tooltip2-v-align="top" ' +
|
||||
'data-kit-tooltip2-v-direction="top" ' +
|
||||
'data-kit-tooltip2-offset="0" ' +
|
||||
'data-kit-tooltip2-content="'+content+'">'+
|
||||
lib.svg.options+
|
||||
'</logger-item__options>';
|
||||
}
|
||||
return optionsTemplate;
|
||||
}
|
||||
|
||||
function getRowNode(key, value, level = '', data = {
|
||||
id: 0,
|
||||
createdAt: '',
|
||||
userId: '',
|
||||
}){
|
||||
key = String(key);
|
||||
value = String(value);
|
||||
var result = '<logger-item class="kit-logger-row--'+level+'">' +
|
||||
'<logger-item__key>'+key+'</logger-item__key>' +
|
||||
'<logger-item__value>'+value+'</logger-item__value>' +
|
||||
getOptionsTemplate(data) +
|
||||
'</logger-item>';
|
||||
|
||||
return support.makeNode(result);
|
||||
}
|
||||
|
||||
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-context'+entity+style+'>'+css+'</logger-context>');
|
||||
}
|
||||
|
||||
/**
|
||||
* @extends Logger
|
||||
* @class LoggerVisual
|
||||
* @param nodeOrSelector
|
||||
* @param maxDepth
|
||||
* @param openDepth
|
||||
*/
|
||||
class LoggerVisual extends Logger
|
||||
{
|
||||
constructor(nodeOrSelector = '', maxDepth = 3, openDepth = 1){
|
||||
super();
|
||||
/**
|
||||
* @type {Element}
|
||||
* @private
|
||||
*/
|
||||
this.__htmlCollection = support.getNode(nodeOrSelector);
|
||||
if(this.__htmlCollection) {
|
||||
support.data.set(this.__htmlCollection, 'log', this);
|
||||
}
|
||||
this.__maxDepth = support.toNumber(maxDepth, 3);
|
||||
this.__openDepth = support.toNumber(openDepth, 1);
|
||||
|
||||
this.onLog.push(this.__logHandler);
|
||||
this.__htmlCollectionTemplater = '<div class="kit-logger kit-logger--fixed"></div>';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* @return {HTMLElement}
|
||||
*/
|
||||
LoggerVisual.prototype.getHtmlCollection = function() {
|
||||
if (!this.__htmlCollection) {
|
||||
/**
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
this.__htmlCollection = 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) {
|
||||
support.data.set(this.__htmlCollection, 'log', this);
|
||||
}
|
||||
}
|
||||
|
||||
return this.__htmlCollection;
|
||||
};
|
||||
|
||||
function getPairNode(depth, key, value, logLevel, maxDepth = 6, openDepth = 1, isRoot = true, data = {}) {
|
||||
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;
|
||||
|
||||
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);
|
||||
}
|
||||
} 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;
|
||||
}
|
||||
|
||||
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, data));
|
||||
}
|
||||
}
|
||||
|
||||
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], '', maxDepth, openDepth, false));
|
||||
}
|
||||
}
|
||||
}
|
||||
return pairNode;
|
||||
}
|
||||
|
||||
LoggerVisual.prototype.__logHandler = function(data = {
|
||||
level: '',
|
||||
message: '',
|
||||
context: [],
|
||||
}){
|
||||
var logCollectionNode = this.getHtmlCollection();
|
||||
var loggerLogNode = getLoggerLogNode();
|
||||
loggerLogNode.appendChild(getPairNode(1, data.message, data.context, data.level, this.__maxDepth, this.__openDepth, true, data));
|
||||
logCollectionNode.appendChild(loggerLogNode);
|
||||
logCollectionNode.scrollTop = logCollectionNode.scrollHeight;
|
||||
};
|
||||
|
||||
LoggerVisual.prototype.logList = function (logList) {
|
||||
var self = this;
|
||||
logList = new Collection(logList);
|
||||
logList.map(function (log) {
|
||||
self.__logData(log);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @var logger
|
||||
* @memberOf {kit.service}
|
||||
* @type LoggerVisual
|
||||
*/
|
||||
global.service.logger = new LoggerVisual();
|
||||
|
||||
/**
|
||||
* @memberOf kit
|
||||
*/
|
||||
var log = {
|
||||
Logger,
|
||||
LogLevel,
|
||||
LoggerVisual
|
||||
};
|
||||
return module.exports = log;
|
||||
});
|
||||
Reference in New Issue
Block a user