extended_debug.js

ajax窗体技术,有许多漂亮的窗体,实现漂亮的客户端

var commandHistory;
var historyIndex;

function showExtendedDebug() {
	if (debugWindow != null) {
	  hideDebug();
  }
  
	if (debugWindow == null) {
	 	commandHistory = new Array();
	 	historyIndex = 0;
		
		debugWindow = new Window('debug_window', {className: 'dialog',width:250, height:100, right:4, minWidth:250, bottom:42, zIndex:1000, opacity:1, showEffect: Element.show, resizable: true, title: "Debug"})
		debugWindow.getContent().innerHTML = "<style>#debug_window .dialog_content {background:#000;}</style> <div font='monaco' id='debug' style='padding:3px;color:#0F0;font-family:monaco'></div>";

		//create hourglass icon and attach events to it.
		var cont = "<div id=\"debug_window_inspect\" style=\"width: 15px; height: 15px; background: transparent url(themes/default/inspect.gif) no-repeat 0 0; position:absolute; top:5px; left:70px; cursor:pointer; z-index:3000;\"></div>";

		new Insertion.After('debug_window_maximize', cont);
		Event.observe('debug_window_inspect', 'click', enterInspectionMode, false);

		//create command text box
		cont = "Eval:<input id=\"debug_window_command\" type=\"textbox\" style=\"width:150px; height: 12px; color: black;\">"
		debugWindow.setStatusBar(cont);

		Event.observe('debug_window_command', 'mousedown', donothing);
		Event.observe('debug_window_command', 'keypress', evalJS, false);
	}
	debugWindow.show();		
}

function donothing(evt){
		Field.activate('debug_window_command');
		return false;
}

function evalJS(evt){
	if(evt.keyCode == Event.KEY_RETURN){
		var js = $F('debug_window_command');
		try{
			var ret = eval(js);
			if(ret != null)
				debug(ret);
		}catch(e){
			debug(e);
		}
		$('debug_window_command').value = '';

		Field.activate('debug_window_command');
		commandHistory.push(js);
		historyIndex = 0;
	}

	if(evt.keyCode == Event.KEY_UP){
		if(commandHistory.length > historyIndex){
			historyIndex++;
			var js = commandHistory[commandHistory.length-historyIndex];
			$('debug_window_command').value = js;
			Event.stop(evt);
			Field.activate('debug_window_command');
		}
	}

	if(evt.keyCode == Event.KEY_DOWN){
		if(commandHistory.length >= historyIndex && historyIndex > 1){
			historyIndex--;
			var js = commandHistory[commandHistory.length-historyIndex];
			$('debug_window_command').value = js;
			Event.stop(evt);
			Field.activate('debug_window_command');
		}
	}	
}

function enterInspectionMode(evt){
	//stop observing magnifying glass
	Event.stopObserving('debug_window_inspect', 'click', enterInspectionMode, false);
	//change pointer
	document.body.style.cursor='help';
	//start observing mouse clicks
	Event.observe(window, 'click', inspectItem, false);		
}

function inspectItem(evt){
	// the element that triggered the event
	var element = Event.element(evt);
	if(element.id!="debug_window_inspect"){
		clearDebug()
		//change pointer
		document.body.style.cursor='default';
		debug(element.id);
		inspect(element);
		//stop observing mouse clicks
		Event.stopObserving(window, 'click', inspectItem, false);
		//alert('doing something');
		//start observing mag
		Event.observe('debug_window_inspect', 'click', enterInspectionMode, false);
	}
}

function clearDebug() {
	var win = $('debug');
	if (win == null)
		return;
		
	win.innerHTML=" ";
	//clear inspections too
	var divs = document.getElementsByClassName('inspector');
	divs.each(function(div){
		Element.remove(div);
	});
}