YUI Logger and Basic Dialog

[jbowman]

Originally, using borderlayout, I had my logger set a seperate tab to the main body of my pages, so I could switch back and forth to it. I decided I didn't like this, and instead, wanted to put the logger into a basic dialog so I could open and close it on demand. It wasn't that hard, and I learned how to set a global variable inside a function :)

Javascript

YAHOO.util.myLogger = {
init: function() {
window.myLoggerDialog = null;;

loggerDialog = document.createElement('div');
loggerDialog.id = 'loggerDialog';
loggerDialog.style.visibility = 'hidden';

document.body.appendChild(loggerDialog);

myLoggerDialog = new YAHOO.ext.BasicDialog("loggerDialog", {
modal:false,
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:300
});

myLoggerDialog.header.update('Logger');
loggerTabs = new YAHOO.ext.TabPanel(myLoggerDialog.body.dom);
loggerTab = loggerTabs.addTab('logger', 'Logger');
myLoggerDialog.tabs = loggerTabs;
myLoggerDialog.tabs.activate('logger');
var myLogReader = new YAHOO.widget.LogReader("logger");
}
};
YAHOO.ext.EventManager.onDocumentReady(YAHOO.util.myLogger.init, YAHOO.util.myLogger, true);


HTML to place in your page to trigger showing the dialog

<span onClick='myLoggerDialog.show(this);'>Logger</span>

[tryanDLS]

You could streamline this further. Creating a BasicDialog will build the internal div (hd, bd, ft) and add the css classes also. Basically all you have to do is pass the div that will contain the dialog (e.g. loggerDialog in your case)

[jbowman]

Your 100% correct, and as such, I've updated the block of code :)

[jack.slocum]

Can someone give me an example link to this? It sounds sweet. :)

[jbowman]

http://whasit.com/ci/

Actually, there you can see a bug in it too.. until you resize the logger box, it won't show a tabbar in the content panel?

[jack.slocum]

Don't you want to wrap the logger?

[jbowman]

ok, that post was made when I was still half asleep...

actually the logger does wrap.. after you resize the dialog it's in. Maybe I need a repaint or something after I insert the logger into the tab?

[jack.slocum]

Ah that's a lot better. Now it's time to clean up that text and buttons hehe. I might actually use it myself. I am sick of alerting everything. :)

[jbowman]

if you end up with a better one, let me know :) I'm playing around trying to integrate drupal 5 beta and yui-ext :D

[jbowman]

I've updated my version to use layoutdialog cutting down a few lines of code. I also finally figured out a fix for the body of the dialog not displaying correctly until after a resize.


YAHOO.util.myLogger = {
init: function() {

window.myLoggerDialog = null;

loggerDialog = document.createElement('div');
loggerDialog.id = 'loggerDialog';
loggerDialog.style.visibility = 'hidden';

document.body.appendChild(loggerDialog);

myLoggerDialog = new YAHOO.ext.LayoutDialog("loggerDialog", {
modal:false,
autoScroll:true,
width:500,
height:300,
shadow:true,
minWidth:500,
minHeight:300,
center: {
autoScroll:true,
alwaysShowTabs: false
}
});

var layout = myLoggerDialog.getLayout();
myLoggerDialog.beginUpdate();
var loggerPane = layout.add('center', new YAHOO.ext.ContentPanel('logger', {
fitToFrame: true,
autoCreate: true }));
myLoggerDialog.endUpdate();

myLoggerDialog.header.update('Logger');
var myLogReader = new YAHOO.widget.LogReader("logger");
myLoggerDialog.syncBodyHeight();
}
};
YAHOO.ext.EventManager.onDocumentReady(YAHOO.util.myLogger.init, YAHOO.util.myLogger, true);

[jbowman]

OK, I'm almost done with this. I've used the layoutdialog to seperate the header and footer into different regions to keep them displayed, and the logs now scroll in the center region. Only other thing I have to figure out is how I can float the buttons to the right, and ideally, hide the collapse button altogether, and I'll be calling this done. Definetly more useable in this state than it was before though.

Edit: I've also gotten rid of assigning it to the window object, per advice given to me by Jack :)


YAHOO.util.myLogger = {
init: function() {

loggerDialog = document.createElement('div');
loggerDialog.id = 'loggerDialog';
loggerDialog.style.visibility = 'hidden';

document.body.appendChild(loggerDialog);

myLoggerDialog = new YAHOO.ext.LayoutDialog("loggerDialog", {
modal:false,
autoScroll:true,
width:500,
height:300,
shadow:true,
minWidth:500,
minHeight:300,
center: {
autoScroll:true,
alwaysShowTabs: false
},
north: {
split: false,
initialSize: 40,
alwaysShowTabs: false
},
south: {
split: false,
initialSize: 65,
alwaysShowTabs: false
}
});

var layout = myLoggerDialog.getLayout();
myLoggerDialog.beginUpdate();
var loggerPane = layout.add('center', new YAHOO.ext.ContentPanel('logger', {
fitToFrame: true,
autoCreate: true }));
var loggerHeader = layout.add('north', new YAHOO.ext.ContentPanel('loggerHeader', {
fitToFrame: true,
autoCreate: true }));
var loggerFooter = layout.add('south', new YAHOO.ext.ContentPanel('loggerFooter', {
fitToFrame: true,
autoCreate: true }));
myLoggerDialog.endUpdate();

myLoggerDialog.header.update('Logger');
var myLoggerConfig = {
logReaderEnabled: true,
verboseOutput: true
};
var myLogReader = new YAHOO.widget.LogReader("logger", myLoggerConfig);
var myLogReaderFooter = YAHOO.util.Dom.getElementsByClassName("yui-log-ft", "div", "logger");
var myLogReaderHeader = YAHOO.util.Dom.getElementsByClassName("yui-log-hd", "div", "logger");
loggerHeader.getEl().appendChild(myLogReaderHeader[0]);
loggerFooter.getEl().appendChild(myLogReaderFooter[0]);
myLoggerDialog.syncBodyHeight();
}
};
YAHOO.ext.EventManager.onDocumentReady(YAHOO.util.myLogger.init, YAHOO.util.myLogger, true);

[jbowman]

So.. now I've figured out how to add style elements to the header of the document, and even how to get it to work in firefox and ie both :D

This latest example looks a lot nicer, but also requires a version of yui-ext pulled from the svn repository newer that 11/26/2006, as it takes advantage of the new autoCreate feature for basicDialog (and layoutDialog in this case).

BUG NOTICE: In IE6, the checkboxs for the filter for some reason have ceased working, however they do work in Firefox 1.5 :? I'll try to come up with a patch for the yui logger when I have some time. I prefer to log everything, so really I'm not going to be in a hurry to fix this, sorry.

screenshot
http://whasit.com/images/yuiextlogger.jpg

code

YAHOO.util.myLogger = {
init: function() {

myLoggerDialog = new YAHOO.ext.LayoutDialog("loggerDialog", {
autoCreate: true,
modal:false,
autoScroll:true,
width:500,
height:300,
shadow:true,
minWidth:500,
minHeight:300,
center: {
autoScroll:true,
alwaysShowTabs: false
},
north: {
split: false,
initialSize: "1.5em",
alwaysShowTabs: false
},
south: {
split: false,
initialSize: "3em",
alwaysShowTabs: false
}
});

var layout = myLoggerDialog.getLayout();
myLoggerDialog.beginUpdate();
var loggerPane = layout.add('center', new YAHOO.ext.ContentPanel('logger', {
fitToFrame: true,
autoCreate: true }));
var loggerHeader = layout.add('north', new YAHOO.ext.ContentPanel('loggerHeader', {
fitToFrame: true,
autoCreate: true }));
var loggerFooter = layout.add('south', new YAHOO.ext.ContentPanel('loggerFooter', {
fitToFrame: true,
autoCreate: true }));
myLoggerDialog.endUpdate();

myLoggerDialog.header.update('Logger');
var myLoggerConfig = {
logReaderEnabled: true,
verboseOutput: true
};
var myLogReader = new YAHOO.widget.LogReader("logger", myLoggerConfig);
var myLogReaderFooter = YAHOO.util.Dom.getElementsByClassName("yui-log-ft", "div", "logger");
var myLogReaderHeader = YAHOO.util.Dom.getElementsByClassName("yui-log-hd", "div", "logger");
loggerHeader.getEl().appendChild(myLogReaderHeader[0]);
loggerFooter.getEl().appendChild(myLogReaderFooter[0]);
var newStyle = document.createElement('style');
newStyle.setAttribute("type","text/css");
var styleText = '#loggerFooter .yui-log-btns { float: right;}#loggerHeader {background-color: #6593cf; color: white;}#loggerHeader .yui-log-btns { display: none;}';
if (newStyle.styleSheet) {
newStyle.styleSheet.cssText = styleText;
} else {
var newStyleContent = document.createTextNode(styleText);
newStyle.appendChild(newStyleContent);
}
var hd = document.getElementsByTagName("head")[0];
hd.appendChild(newStyle);
myLoggerDialog.syncBodyHeight();
}
};
YAHOO.ext.EventManager.onDocumentReady(YAHOO.util.myLogger.init, YAHOO.util.myLogger, true);

[jack.slocum]

Seems to work well. Very cool!