This commit is contained in:
2021-11-20 16:57:47 +03:00
parent 5daadad67f
commit 9fd1595159
5 changed files with 64 additions and 41 deletions
+1 -1
View File
@@ -284,7 +284,7 @@ kit.PluginManager.register('Collection', function(module, exports, require, glob
};
/**
* Method removes an item from the collection by its key
* Method removes/delete an item from the collection by its key
* @param key
* @return {kit.Collection}
*/
+1
View File
@@ -215,6 +215,7 @@ __PluginManager__.registerPlugins({
module: '/logger.js',
css: '/logger.css',
type: 'loader',
deps: ['support']
},
});
+10 -9
View File
@@ -8,6 +8,7 @@
--logger-color-info: hsl(205, 100%, 61%);
--logger-color-debug: #909090;
--logger-color-success: #8bc34a;
--logger-lvl: 0;
}
.kit-logger, #kit-logger {
margin: 0;
@@ -25,7 +26,7 @@
bottom: 0;
height: 30vh;
}
bx_kit_log {
logger-item {
margin: 0;
display: -ms-flexbox;
display: -webkit-flex;
@@ -46,34 +47,34 @@ bx_kit_log {
-ms-flex-align: start;
align-items: flex-start;
white-space: pre-line;
padding-left: calc(var(--logger-lvl, 0) * 25px);
font-size: 12px !important;
line-height: 14px !important;
}
bx_kit_log_value * {
logger-item__value * {
color: inherit;
}
bx_kit_log_msg {
logger-item__msg {
}
bx_kit_log_key {
logger-item__key {
min-width: 25px;
padding-right: 5px;
white-space: nowrap;
color: var(--logger-color-key, #909090);
}
bx_kit_log_key:empty {
logger-item__key:empty {
display: none;
}
bx_kit_log_lvl {
logger-item__lvl {
min-width: 25px;
}
bx_kit_log_value {
logger-item__value {
flex: 1 0 0;
white-space: pre-wrap;
color: var(--logger-color-value, #c1c1c1);
}
bx_kit_log_value * {
logger-item__value * {
font-size: inherit !important;
line-height: inherit !important;
color: inherit !important;
+37 -29
View File
@@ -1,23 +1,19 @@
/** @module logger */
__PluginManager__.register('Logger', function(module, exports, require, global){
function makeNode(html = '') {
var nodeWrap = document.createElement('div');
nodeWrap.innerHTML = html;
var r = nodeWrap.firstElementChild;
r.remove();
return r;
}
var support = require('support');
var lightMap = [
{class: '', keys: []},
{class: 'text-danger', keys: []},
{class: 'text-secondary', keys: []},
];
var getLightClass = function(key) {
key = ''+key;
var addClass = '', ar;
for(var i=0; i < lightMap.length; i++){
ar = lightMap[i]['keys'];
addClass = ar.includes(String(key))?lightMap[i]['class']:addClass;
addClass = ar.includes(key)?lightMap[i]['class']:addClass;
}
return addClass;
};
@@ -32,20 +28,26 @@ __PluginManager__.register('Logger', function(module, exports, require, global){
// }
// return rArray.join(' ');
// };
function getRowNode(level, key, value, opClass){
function getRowNode(level, key, value, opClass = ''){
if(opClass) {
opClass = ' kit-logger-row--'+opClass;
}
var i = 0, lvlTemplate = '', setStyle = '';
level = Number(level);
var i = 0, lvlTemplate = '';
key = String(key);
value = String(value);
for(i = 0; i < level; i++){
lvlTemplate += '<bx_kit_log_lvl></bx_kit_log_lvl>';
}
var result = '<bx_kit_log class="'+getLightClass(key)+opClass+'" style="'+setStyle+'">'+lvlTemplate+'<bx_kit_log_key class="">'+key+'</bx_kit_log_key><bx_kit_log_value class="text-log-value">'+value+'</bx_kit_log_value></bx_kit_log>';
lvlTemplate = level?'style="--logger-lvl:'+level+';" ':'';
var result = '<logger-item '+lvlTemplate+'class="'+getLightClass(key)+opClass+'"><logger-item__key>'+key+'</logger-item__key><logger-item__value>'+value+'</logger-item__value></logger-item>';
return makeNode(result);
return support.makeNode(result);
}
function getItemObjectNode(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>');
}
function args2array(arguments) {
@@ -70,7 +72,7 @@ __PluginManager__.register('Logger', function(module, exports, require, global){
/**
* @type {HTMLElement}
*/
this.collection = node || document.getElementById('kit-logger') || document.querySelector('.kit-logger') || makeNode(collectionTemplater);
this.collection = node || document.getElementById('kit-logger') || document.querySelector('.kit-logger') || support.makeNode(collectionTemplater);
if((this.collection instanceof HTMLElement) && !this.collection.parentElement) {
document.body.appendChild(this.collection)
@@ -81,22 +83,28 @@ __PluginManager__.register('Logger', function(module, exports, require, global){
this.setCollection();
}
var log = this.collection;
var k = 0, j = 0, i = 0, m = 0, rowNode;
var k = 0, j = 0, i = 0, m = 0, rowNode1, valNode1, rowNode2, isObj, val;
if(typeof message == 'object') {
if(support.isObject(message)) {
for(k in message) {
log.appendChild(getRowNode(lvl, k, message[k], opClass));
if(typeof message[k] == 'object') {
log.appendChild(rowNode2 = getRowNode(lvl, k, message[k], opClass));
if(support.isObject(message[k])) {
log.appendChild(rowNode1 = getItemObjectNode());
for(j in message[k]) {
log.appendChild(getRowNode(lvl+1, j, message[k][j]));
if(typeof message[k][j] == 'object') {
isObj = support.isObject(message[k][j]);
id = support.uniqueId();
val = isObj?'<label for="'+id+'">'+message[k][j]+'</label>':message[k][j];
rowNode1.appendChild(getRowNode(lvl+1, j, val));
rowNode1.appendChild(support.makeNode('<input id="'+id+'" type="checkbox" style="display: none;">'));
if(isObj) {
rowNode1.appendChild(rowNode2 = getItemObjectNode(id));
for(i in message[k][j]) {
log.appendChild(getRowNode(lvl+2, i, message[k][j][i]));
if(typeof message[k][j][i] == 'object') {
for(m in message[k][j][i]) {
log.appendChild(getRowNode(lvl+3, m, message[k][j][i][m]));
}
}
rowNode2.appendChild(getRowNode(lvl+2, i, message[k][j][i]));
// if(typeof message[k][j][i] == 'object') {
// for(m in message[k][j][i]) {
// log.appendChild(getRowNode(lvl+3, m, message[k][j][i][m]));
// }
// }
}
}
}