<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
// <![CDATA[
// Stores specific hotKeyEvents. Certain keys need to be assigned to a different function
// rather than the function that simply outputs the data to the cmdLineDiv div.
// For instance the <enter> key also needs to continue the requests, as well as starting
// a new line
var hotKeyEvents = new Array();
hotKeyEvents[10] = proceed;
hotKeyEvents[13] = proceed;
hotKeyEvents[127] = removeInputIfNecessary;
// De page that need to be accessed via AJAX for processing the input of the cmd
// line
var ajaxRequestPage = 'ajax_install_test_div.php';
// Defines the starting characters of a new cmd line (cf. C:\ on a windows cmd line)
var CMDNL = '>>> ';
// Contains the height of 1 line of text in the cmd (in px)
var LINE_HEIGHT = 12;
// Contains the height of the cmd itself (in px)
var CMD_DIV_HEIGHT = 250;
// contains the maximum amount of lines that can be displayed without having to use
// scrollbars
var MAX_CMD_LINES = Math.round(CMD_DIV_HEIGHT / LINE_HEIGHT);
// When set to true, an additional textarea will be outputted at the bottom of the screen
// with some debug information
var debug = false;
// Contains a reference to the cmdLineDiv div in the HTML document
var cmdLineDiv = null;
// Contains the first occurence (backwards) that need to be found so that no contents
// gets deleted after that point (sounds crazy, but is actually very logical)
// In cmd on Windows, for instance, you can't delete the "C:\ " character at the beginning
// of each line. The prevent a user from deleting these lines here, I had to make a copy
// of the string that can't be deleted (">>> " in this case, or when a question is asked)
var noEditLine = null;
// Contains the XMLHttpRequest object in case XMLHttpRequest is available, otherwise
// an ActiveXObject
var ajaxRequestObject = null;
// Contains a question that need to be answered. This question was send from the
// ajaxRequestPage
var cmdQuestion = null;
// Contains the answer, filled in by the user, to the question last asked
var cmdAnswer = null;
var newLines = 0;
/**
* This function is called whenever a key is pressed inside the cmdLineDiv div.
* It will check the key pressed, and then decides what to do with the event. By
* default it will simply display the character in the cmdLineDiv div, unless a
* hotKeyEvent was stored in the hotKeyEvents Array
*
* @param object An event object containing all information about the event
*/
function onKeyPressEvent (event) {
event = event? event : (window.event? window.event : null);
if (event != null) {
var charCode = event.charCode? event.charCode : (event.which? event.which : event.keyCode);
if (debug) alertT (charCode + " = '" + String.fromCharCode(charCode) + "'");
if (charCode in hotKeyEvents)
hotKeyEvents[charCode]();
else if (charCode > 31 && charCode < 127)
insertChar (charCode);
else if (charCode > 160 && charCode <255)
insertHtmlChar (charCode);
}
}
/**
* Adds HTML text to the cmdLineDiv.
* It will first remove the fake cursor, otherwise an unecessary underscore will
* be placed on the cmdLineDiv div as well
*
* @param string The text that need to be displayed to the user on the cmdLineDiv div
*/
function addHtmlText (text) {
removeCursor ();
cmdLineDiv.innerHTML += text;
}
/**
* This function is called whenever te <enter> key was pressed on your keyboard
* If a question was asked during the previous cmd output, the answer is searched
* for first. Next it will call the proceedWithRequests function to continue sending
* requests to the ajaxRequestPage
*/
function proceed () {
if (debug) alertT ("proceed:");
if (cmdQuestion != null) {
removeCursor ();
cmdAnswer = cmdLineDiv.innerHTML.substring (cmdLineDiv.innerHTML.lastIndexOf (cmdQuestion) + cmdQuestion.length + 1);
cmdAnswer = (cmdAnswer == "" || cmdAnswer == " ")? null : cmdAnswer;
if (debug) alertT ("\tcmdAnswer: " + cmdAnswer);
}
//alert (cmdLineDiv.scrollHeight + " - " + cmdLineDiv.scrollTop);
proceedWithRequests ();
alertT (newLines);
alertT ("scrollH - scrollT = " + cmdLineDiv.scrollHeight + " - " + cmdLineDiv.scrollTop);
addHtmlText ("<br />\r\n" + CMDNL);
noEditLine = CMDNL;
var toScroll = Math.round (cmdLineDiv.scrollHeight / LINE_HEIGHT);
alertT ("toScroll no round: " + parseFloat(cmdLineDiv.scrollHeight / LINE_HEIGHT));
alertT ("scrollH - toScroll - newLines = " + cmdLineDiv.scrollHeight + " - " + toScroll + " - " + newLines);
if (toScroll > MAX_CMD_LINES)
cmdLineDiv.scrollTop = (toScroll - MAX_CMD_LINES) * LINE_HEIGHT;
cmdLineDiv.focus();
cmdLineDiv.scrollHeight;
alertT ("scrollH - toScroll - newLines = " + cmdLineDiv.scrollHeight + " - " + toScroll + " - " + newLines);
}
/**
* Whenever the user hits the ctrl+backspace key combination on the keyboard
* The text needs to be removed from the cmdLineDiv div. This function is called
* everytime the user hits this combination, or keeps it down
* Since I couldn't simply catch the backspace key-press, I had to use the
* ctrl+backspace key combination
*/
function removeInputIfNecessary () {
removeCursor ();
var cur = cmdLineDiv.innerText.substring (cmdLineDiv.innerText.length - noEditLine.length)
if (debug) alertT ("removeInputIfNecessary: " + cur + " vs. " + noEditLine + " = " + (cur == noEditLine? 'no-change' : 'remove'));
if (cur != noEditLine) {
cmdLineDiv.innerHTML = cmdLineDiv.innerHTML.substring (0, cmdLineDiv.innerHTML.length-1);
}
}
/**
* Inserts the character referring to the key that was pressed on your keyboard
* into the cmdLineDiv div
*
* @param string The character code that refers to a certain character
*/
function insertChar (char) {
if (debug) alertT ("insertChar: " + String.fromCharCode (char));
addHtmlText (String.fromCharCode (char));
}
/**
* When extended ASCII characters, such as ù, are typed, the HTML equivalent needs
* to be inserted into the cmdLineDiv div.
*
* @param string The character code of a certain extended ASCII character. Eventually
* the &#-char-; string is inserted into the cmdLineDiv div
*/
function insertHtmlChar (char) {
if (debug) alertT ("insertHtmlChar: " + String.fromCharCode(char));
addHtmlText ("&#" + parseInt (char) + ";");
}
/**
* This function is called to initiate all startup variables and functions
*/
function __init__ () {
if (debug) createDebugOutputField ();
cmdLineDiv = document.getElementById('cmdLineDiv');
cmdLineDiv.focus();
noEditLine = CMDNL;
createAjaxObject ();
toggleCursor ();
}
/**
* This function makes a cursor flash inside the cmdLineDiv div.
* It uses the setTimeout function that redirects to itself with an interval of
* 0.5 seconds
*/
function toggleCursor () {
if (cmdLineDiv.innerHTML.substring (cmdLineDiv.innerHTML.length-1) == '_')
cmdLineDiv.innerHTML = cmdLineDiv.innerHTML.substring (0, cmdLineDiv.innerHTML.length-1);
else
cmdLineDiv.innerHTML += '_';
setTimeout (toggleCursor, 500)
}
/**
* Removes the cursor from the cmdLineDiv div whenever text needs to be added to the div
*/
function removeCursor () {
if (cmdLineDiv.innerHTML.substring (cmdLineDiv.innerHTML.length-1) == '_')
cmdLineDiv.innerHTML = cmdLineDiv.innerHTML.substring (0, cmdLineDiv.innerHTML.length-1);
}
/**
* Creates the XMLHttpRequest object or an ActiveXObject, depending on the browser
*/
function createAjaxObject () {
if (window.XMLHttpRequest) {
ajaxRequestObject = new XMLHttpRequest();
return true;
} else if (window.ActiveXObject) {
var aVersions = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"];
for (var i=
0; i<aVersions.
length; i++
) { try {
ajaxRequestObject = new ActiveXObject (aVersions[i]);
return true;
} catch (e) {}
}
} else {
alertT("Your browser doesn't support AJAX, please switch to Opera, Netscape, Firefox or IE");
return false;
}
}
/**
* Keeps on sending requests to the ajaxRequestPage whenever the user hits the <enter>
* key on his keyboard
*/
function proceedWithRequests () {
if (ajaxRequestObject != null) {
if (debug) alertT ("proceedWithRequests:");
ajaxRequestObject.open ('POST', ajaxRequestPage);
ajaxRequestObject.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded');
ajaxRequestObject.onreadystatechange = function () {
if (ajaxRequestObject.readyState == 4 && ajaxRequestObject.status == 200) {
var xml = ajaxRequestObject.responseXML;
var status = parseInt(xml.getElementsByTagName ('status')[0].firstChild.nodeValue);
if (debug) alertT ("\tstatus: " + status);
if (status == 0) {
var cmdText = new Array();
var a = xml.getElementsByTagName ('cmdText')
for (var i=
0; i<a.
length;i++
) if (a[i].firstChild.nodeValue != "") cmdText.push (a[i].firstChild.nodeValue);
try {
cmdQuestion = xml.getElementsByTagName ('cmdQuestion')[0].firstChild.nodeValue;
} catch (e) {
cmdQuestion = null;
}
updateCmdLineDiv (cmdText, cmdQuestion);
newLines = parseInt(cmdText.length + (cmdQuestion == null? 0 : 1));
alertT("newLines in proceedWithRequests: " + newLines);
} else {
updateCmdLineDiv (new Array ('<span style="color:red">Error(' + status + '): The installation could not be completed</span>'), null);
newLines = 1;
}
} else {
try {
if (debug) alertT ("\tSomething went wrong during the ajax request:\n\tstatus: " + ajaxRequestObject.status + "\n\treadyState: " + ajaxRequestObject.readyState);
} catch (e) {}
newLines = 0;
}
};
if (cmdAnswer != null)
ajaxRequestObject.send ("sectionId=3&cmdAnwser=" + cmdAnswer);
else
ajaxRequestObject.send ("sectionId=1");
}
return 0;
}
/**
* Processes the list of text that needs to be added to the cmdLineDiv div
*/
function updateCmdLineDiv (cmdText, cmdQuestion) {
if (debug) alertT ("updateCmdLineDiv: cmdText(length):" + cmdText.length + ";cmdQuestion:" + cmdQuestion);
for (var i=0; i<cmdText.length; i++) {
addHtmlText (cmdText[i] + "<br/>\r\n");
}
if (cmdQuestion != null) {
addHtmlText (CMDNL + cmdQuestion + " ");
noEditLine = cmdQuestion + " ";
} else {
addHtmlText (CMDNL);
noEditLine = CMDNL;
}
}
/**
* Creates the textarea in which the debug-output will be placed
*/
function createDebugOutputField () {
var textarea = document.createElement ('textarea');
try {
textarea.className = 'debugField';
textarea.id = 'debugField';
} catch (e) {
textarea.setAttribute ('class', 'debugField');
textarea.setAttribute ('id', 'debugField');
}
document.body.appendChild (textarea);
}
/**
* A variant of the built-in alert function, except this one simply outputs the
* text to the debug field
*/
function alertT (text) {
document.getElementById ('debugField').value += text + '\n';
}
// ]]>
</script>
<style type="text/css" media="screen">
/* <![CDATA[ */
textarea.debugField {
width:90%;
height:150px;
}
div.cmdLine {
border:2px solid #AAAAAA;
height:250px;
width:90%;
font-family:"Lucida Console";
font-size:12px;
color:rgb(192,192,192);
background-color:#000000;
overflow:auto;
padding:2px;
}
/* ]]> */
</style>
</head>
<body onload="__init__(); createDebugOutputField()">
<h3>Even wat zever zetten</h3>
<button id="installbtn" type="button">Install!</button><br/>
<br/>
<div class="cmdLine" id="cmdLineDiv" onkeypress="onKeyPressEvent(event)">>>> </div>
</body>
</html>
Linear Mode
