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

[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);