Basic JS log utility
by laustdeleuran
HTML
<section>
<h1>JS Logging utility</h1>
<p>Basic JS log utility.</p>
</section>
CSS
body {
font-size:16px;
font-family:Georgia, Times, "Times New Roman", serif;
line-height:1.5em;
color:#222;
background:#fcfcfc;
}
section {
padding:1.5em;
}
h1 {
font-size:2em;
margin:0 0 0.75em;
text-shadow:0 1px 0 #fff;
}
JavaScript
// Class
var logModule = function(obj){
// Set defaults
this.internal = [];
this.debug = false;
this.domConsole = false;
this.meta = true;
this.name = 'logModule';
// Update settings
if (typeof obj === 'object') {
if (typeof obj.debug === 'boolean') this.debug = obj.debug;
if (typeof obj.name === 'string') this.name = obj.name;
if (typeof obj.meta === 'boolean') this.meta = obj.meta;
if (obj.domConsole) {
this.domConsole = true;
}
}
// Check for jQuery to allow domConsole
if (typeof jQuery !== 'undefined') { // Require jQuery because I'm lazy
this.canDoDomConsole = true;
}
return this;
};
logModule.prototype.call = function(arg,forceDebug){
var orgArg = arg;
if (this.meta) {
arg = {
log: this.name,
arg: orgArg,
datetime: (function(){ return new Date().getTime()})(),
type: typeof arg,
string: arg.toString()
};
}
this.internal.push(arg); // Push object to internal log
try { console.log(arg) } catch(err) { } // Try native console, but fail silently.
if (this.debug || typeof forceDebug !== 'undefined') { alert('Console call: ' + orgArg) } // Make loud debugging noises
if (this.domConsole === true && this.canDoDomConsole === true) { // Call to very basic DOM based console for browsers with no native console
if (typeof this.domConsoleElems !== 'object') this.setupDomConsole();
this.domConsoleElems.container.append(this.domConsoleElems.item.clone().text(this.meta ? arg.datetime + ' - ' + arg.type + ' : ' + arg.string : orgArg));
}
return arg;
};
logModule.prototype.setupDomConsole = function(){
if (this.canDoDomConsole) {
this.domConsoleElems = {
container: jQuery('<ol class="log-module" title="'+this.name+'" style="line-height:15px; max-height:100px; overflow:auto; background:#fffbd6; padding:10px; clear:both; margin:0; border-bottom:1px solid #ccc; position:relative; list-style:decimal; z-index:9999;"></ul>').prependTo('body'),
...