YUI Logger and Basic Dialog

[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

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


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!