You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
2.9 KiB
127 lines
2.9 KiB
// dtpweb-log.js
|
|
// Copyright (C) 2022 DTP Technologies, LLC
|
|
// License: Apache-2.0
|
|
|
|
'use strict';
|
|
|
|
window.dtp = window.dtp || { };
|
|
|
|
export default class DtpWebLog {
|
|
|
|
constructor (component, options) {
|
|
this.component = component;
|
|
this.options = Object.assign({
|
|
color: {
|
|
debug: '#808080',
|
|
info: '#249324',
|
|
warn: '#AC7C37',
|
|
error: '#A74949',
|
|
},
|
|
size: {
|
|
label: 120,
|
|
},
|
|
}, options);
|
|
|
|
this.css = {
|
|
debug: {
|
|
label: `
|
|
display: inline-block;
|
|
background-color: ${this.options.color.debug};
|
|
color: white;
|
|
width: ${this.options.size.label}px;
|
|
padding: 2px 4px;
|
|
border-radius: 4px;
|
|
`,
|
|
message: `
|
|
color: ${this.options.color.debug};
|
|
`,
|
|
},
|
|
info: {
|
|
label: `
|
|
background-color: ${this.options.color.info};
|
|
color: white;
|
|
width: ${this.options.size.label}px;
|
|
padding: 2px 4px;
|
|
border-radius: 4px;
|
|
`,
|
|
message: `
|
|
color: ${this.options.color.info};
|
|
`,
|
|
},
|
|
warn: {
|
|
label: `
|
|
background-color: ${this.options.color.warn};
|
|
color: white;
|
|
width: ${this.options.size.label}px;
|
|
padding: 2px 4px;
|
|
border-radius: 4px;
|
|
`,
|
|
message: `
|
|
color: ${this.options.color.warn};
|
|
`,
|
|
},
|
|
error: {
|
|
label: `
|
|
background-color: ${this.options.color.error};
|
|
color: white;
|
|
width: ${this.options.size.label}px;
|
|
padding: 2px 4px;
|
|
border-radius: 4px;
|
|
`,
|
|
message: `
|
|
color: ${this.options.color.error};
|
|
`,
|
|
},
|
|
};
|
|
|
|
const env = document.querySelector('body').getAttribute('data-dtp-env');
|
|
if (env === 'local') {
|
|
this.enable();
|
|
}
|
|
}
|
|
|
|
enable (enabled = true) {
|
|
this.enabled = enabled;
|
|
}
|
|
|
|
debug (event, msg, data) {
|
|
this.write('debug', this.css.debug, event, msg, data);
|
|
}
|
|
|
|
log (event, msg, data) { this.info(event, msg, data); }
|
|
|
|
info (event, msg, data) {
|
|
this.write('log', this.css.info, event, msg, data);
|
|
}
|
|
|
|
warn (event, msg, data) { // alias for warning
|
|
this.warning(event, msg, data);
|
|
}
|
|
|
|
warning (event, msg, data) {
|
|
this.write('warn', this.css.warn, event, msg, data);
|
|
}
|
|
|
|
error (event, msg, data) {
|
|
this.write('error', this.css.error, event, msg, data);
|
|
if (data && data.error) {
|
|
console.error(data.error);
|
|
}
|
|
}
|
|
|
|
write (method, css, event, msg, data) {
|
|
if (!this.enabled) { return; }
|
|
if (data) {
|
|
console[method]('%c%s%c: %s',
|
|
css.label, `${this.component.slug}.${event}`,
|
|
css.message, msg,
|
|
data,
|
|
);
|
|
} else {
|
|
console[method]('%c%s%c: %s',
|
|
css.label, `${this.component.slug}.${event}`,
|
|
css.message, msg,
|
|
);
|
|
}
|
|
}
|
|
}
|