(function () {
if (!window.console) {
window.console = {};
window.console.log = function (text) {
var content = "";
content = enumObj(text, true);
var li = '<li class="fc tal m_12">' + content + '</li>';
showPanel(li);
}
var makePanel = function (li) {
var ul = '<ul id="consolePanel" class="rc6">' + li + '</ul';
return ul;
}
var showPanel = function (li) {
var panel = $("#consolePanel");
if (panel.length) {
panel.append(li)
} else {
var ul = makePanel(li);
$("body").append(ul);
}
}
function escapeHTML(str) {
var div = document.createElement('div');
var text = document.createTextNode(str);
div.appendChild(text);
return div.innerHTML;
}
function enumObj(obj, header) {
var len, objType, content ="";
if (typeof (obj) === "object") {
if (header) {
objType = (obj instanceof Array) ? "Array" : "Object";
content = '<h2>' + objType + ' details:</h2>';
}
content += '<ul class="consoleObjList">';
for (key in obj) {
if (obj.hasOwnProperty(key)) {
content += '<li><span>' + key + '</span>: ' + enumObj(obj[key], false) + '</li>';
}
}
content += '</ul>';
} else {
//treat it as a string
content = escapeHTML(obj);
}
return content;
}
}
})();
Refactorings
No refactoring yet !
paul.wilkins.myopenid.com
August 21, 2010, August 21, 2010 00:16, permalink
1 rating.
Login to rate!
The major change here is removing the reliance on jQuery.
Functions were declared as both function statements and as function decarations. They are now consistently done as function declarations.
The enumObj function now uses an anonymous function to help reduce the scope of the content variables.
Many other minor tweaks have also been made, for example with the makePanel function, which should have a separate responsibiity as that of the showPanel function.
(function () {
function addHeading(obj) {
var objType, h2, text;
objType = (obj instanceof Array) ? "Array" : "Object";
h2 = document.createElement('h2');
text = document.createTextNode(objType + ' details:');
h2.appendChild(text);
return h2;
}
function escapeHTML(str) {
var div, text;
div = document.createElement('div');
text = document.createTextNode(str);
div.appendChild(text);
return div.innerHTML;
}
function enumObj(obj, skipHeading) {
var content;
content = document.createDocumentFragment();
if (typeof (obj) === "object") {
if (skipHeading !== false) {
content.appendChild(addHeading(obj));
}
content.appendChild(function () {
var ul, li, span, text, key;
ul = document.createElement('ul');
ul.className = 'consoleObjList';
for (key in obj) {
if (obj.hasOwnProperty(key)) {
li = document.createElement('li');
span = document.createElement('span');
text = document.createTextNode(key);
span.appendChild(text);
li.appendChild(span);
li.appendChild(document.createTextNode(': '));
li.appendChild(enumObj(obj[key], false));
ul.appendChild(li);
}
}
return ul;
}());
} else {
//treat it as a string
content.appendChild(document.createTextNode(escapeHTML(obj)));
}
return content;
}
function makePanel() {
var ul = document.createElement('ul');
ul.id = 'consolePanel';
ul.className = 'rc6';
return ul;
}
function showPanel(li) {
var panel = document.getElementById("consolePanel");
if (!panel) {
panel = makePanel();
document.body.appendChild(panel);
}
panel.appendChild(li);
}
if (!window.console) {
window.console = {};
window.console.log = function (obj) {
var li = document.createElement('li');
li.className = 'fc tal m_12';
li.appendChild(enumObj(obj));
showPanel(li);
};
}
}());
I'm assuming jQuery is present here, simply because it is on the project I'm working on. I reckon there's loads of other areas I could improve on though, really looking forward to learning from the feedback.
The idea was to give other browsers a rudimentary console - a bit like firebug, but not as good :) It only implements console.log and shows text, strings and objects.