// 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, ); } } }