WIP: Terminal emulator written in JavaScript

Mads Madsen 00:42 on April 16, 2013 Permalink Reply
Tags: JavaScript, Terminal, WIP

WIP: Terminal emulator written in JavaScript

/**
<ul>
<li>Terminal constructor</li>
</ul>


 **/
function Terminal() {
	/**
	 * Global variables
	 **/
	this.termDiv = null;
	this.promptDiv = null;
	this.prompt = null;
	this.user = null;
	this.company = null;
	this.cwd = null;
	this.debug = false;
	this.dispatch = new Array();
	this.container = document.getElementById("container");
	this.lines = 16;
	this.currentCmd = null;
}

/**
<ul>
<li>Terminal init function</li>
</ul>


 **/
Terminal.prototype.init = function(divTerm) {
	// Set divTerm
	if (document.getElementById(divTerm) != undefined && this.termDiv == null) {
		this.termDiv = document.getElementById(divTerm);
	} else {
		return;
	}

	// Init prompt
	this.promptFunc();

	// Set height on container
	this.container.style.height = 16*this.lines*1.5 + 'px';
}

Terminal.prototype.promptFunc = function() {
	/**
	 * Write prompt if it does not exists
	 **/
	if ((document.getElementById("promptDiv") == undefined || document.getElementById("promptDiv") == null) && this.promptDiv == null) {
		// Create promptDiv element
		var promptElement = document.createElement('div');
		promptElement.setAttribute('id', 'promptDiv');
		promptElement.innerHTML = '<span id="cd">' + this.user + '@' + this.company + ':' + this.cwd + '$</span>&nbsp;<input type="text" id="prompt" />';

		// Write after this.termDiv
		this.termDiv.parentNode.insertBefore(promptElement, this.termDiv.nextSibling);
		this.promptDiv = document.getElementById("promptDiv");
		this.prompt = document.getElementById("prompt");
		this.prompt.style.width = this.termDiv.offsetWidth - document.getElementById("cd").offsetWidth - 20 + 'px';
	} else {
		return;
	}

	// Put focus on the promt
	this.prompt.focus();

	this.prompt.onkeydown = function (e) {
		if (Terminal.debug == true) { console.log(e) };
		if (e == undefined) {
			e = window.event;
		}
		var keyCode = e.keyCode;
		switch (keyCode) {
			/**
			 * Tab completion
			 **/
			case 9:
				if (Terminal.currentCmd == null) {

				} else {

				}
			break;

			/**
			 * Enter
			 **/
			case 13:
				Terminal.addContent(Terminal.user + '@' + Terminal.company + ':' + Terminal.cwd + '$&nbsp;' + Terminal.prompt.value);
				Terminal.promptHide();
				Terminal.processInput(Terminal.prompt.value);
			break;

			default:
				this.tabCount = 0;
			break;
		}
	}
}

Terminal.prototype.promptShow = function() {
	this.prompt.value = '';
	this.promptDiv.style.visibility = 'visible';
	this.prompt.focus();
	this.prompt.style.width = Terminal.termDiv.offsetWidth - document.getElementById("cd").offsetWidth - 20 + 'px';
}

Terminal.prototype.promptHide = function() {
	this.promptDiv.style.visibility = 'hidden';
}

Terminal.prototype.addContent = function(data) {
	var newLine = document.createElement('p');
	newLine.innerHTML = data;
	this.termDiv.appendChild(newLine);
	this.container.scrollTop = this.container.scrollHeight;
}

Terminal.prototype.processInput = function(input) {
	var _cmd = input.split(' ')[0];
	if(this.dispatch[_cmd] == undefined) {
		this.addContent(_cmd + ": command not found");
		this.promptShow();
	} else {
		var _result = this.dispatch[_cmd](input);
		if (_result != true) {
			this.addContent(_result);
		}
		this.promptShow();
	}
}

Terminal.prototype.registerCommand = function(command, dispatch_method) {
	try {
		if( typeof dispatch_method === 'function' || typeof dispatch_method === 'string' || typeof dispatch_method === 'object' ) {
			this.dispatch[command] = dispatch_method;
		} else {
			throw 'Dispatch needs to be a method';
		}
	} catch ( e ) {
		// Error Handling here
	}
}

function lsCmd(data) {

}

function cdCmd(data) {

}

cdCmd.prototype.autocomplete = function(data) {

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

/**

<ul>

<li>Terminal constructor</li>

</ul>

**/

function Terminal() {

/**

* Global variables

**/

this.termDiv = null;

this.promptDiv = null;

this.prompt = null;

this.user = null;

this.company = null;

this.cwd = null;

this.debug = false;

this.dispatch = new Array();

this.container = document.getElementById("container");

this.lines = 16;

this.currentCmd = null;

}

/**

<ul>

<li>Terminal init function</li>

</ul>

**/

Terminal.prototype.init = function(divTerm) {

// Set divTerm

if (document.getElementById(divTerm) != undefined && this.termDiv == null) {

this.termDiv = document.getElementById(divTerm);

} else {

return;

}

// Init prompt

this.promptFunc();

// Set height on container

this.container.style.height = 16*this.lines*1.5 + 'px';

}

Terminal.prototype.promptFunc = function() {

/**

* Write prompt if it does not exists

**/

if ((document.getElementById("promptDiv") == undefined || document.getElementById("promptDiv") == null) && this.promptDiv == null) {

// Create promptDiv element

var promptElement = document.createElement('div');

promptElement.setAttribute('id', 'promptDiv');

promptElement.innerHTML = '<span id="cd">' + this.user + '@' + this.company + ':' + this.cwd + '$</span> <input type="text" id="prompt" />';

// Write after this.termDiv

this.termDiv.parentNode.insertBefore(promptElement, this.termDiv.nextSibling);

this.promptDiv = document.getElementById("promptDiv");

this.prompt = document.getElementById("prompt");

this.prompt.style.width = this.termDiv.offsetWidth - document.getElementById("cd").offsetWidth - 20 + 'px';

} else {

return;

}

// Put focus on the promt

this.prompt.focus();

this.prompt.onkeydown = function (e) {

if (Terminal.debug == true) { console.log(e) };

if (e == undefined) {

e = window.event;

}

var keyCode = e.keyCode;

switch (keyCode) {

/**

* Tab completion

**/

case 9:

if (Terminal.currentCmd == null) {

} else {

}

break;

/**

* Enter

**/

case 13:

Terminal.addContent(Terminal.user + '@' + Terminal.company + ':' + Terminal.cwd + '$ ' + Terminal.prompt.value);

Terminal.promptHide();

Terminal.processInput(Terminal.prompt.value);

break;

default:

this.tabCount = 0;

break;

}

Terminal.prototype.promptShow = function() {

this.prompt.value = '';

this.promptDiv.style.visibility = 'visible';

this.prompt.focus();

this.prompt.style.width = Terminal.termDiv.offsetWidth - document.getElementById("cd").offsetWidth - 20 + 'px';

}

Terminal.prototype.promptHide = function() {

this.promptDiv.style.visibility = 'hidden';

}

Terminal.prototype.addContent = function(data) {

var newLine = document.createElement('p');

newLine.innerHTML = data;

this.termDiv.appendChild(newLine);

this.container.scrollTop = this.container.scrollHeight;

}

Terminal.prototype.processInput = function(input) {

var _cmd = input.split(' ')[0];

if(this.dispatch[_cmd] == undefined) {

this.addContent(_cmd + ": command not found");

this.promptShow();

} else {

var _result = this.dispatch[_cmd](input);

if (_result != true) {

this.addContent(_result);

}

this.promptShow();

}

Terminal.prototype.registerCommand = function(command, dispatch_method) {

try {

if( typeof dispatch_method === 'function' || typeof dispatch_method === 'string' || typeof dispatch_method === 'object' ) {

this.dispatch[command] = dispatch_method;

} else {

throw 'Dispatch needs to be a method';

}

} catch ( e ) {

// Error Handling here

}

function lsCmd(data) {

}

function cdCmd(data) {

}

cdCmd.prototype.autocomplete = function(data) {

}

Usage:

<div id="container">
	<div id="terminal"></div>
</div>
<script type="text/javascript">
	var Terminal = new Terminal();
	Terminal.debug = true;
	Terminal.user = 'mm';
	Terminal.company = 'lessthinking';
	Terminal.cwd = '~/Projects';
	Terminal.init("terminal");
</script>

</div>

var Terminal = new Terminal();

Terminal.debug = true;

Terminal.user = 'mm';

Terminal.company = 'lessthinking';

Terminal.cwd = '~/Projects';

Terminal.init("terminal");

</script>

P2 on Madsen

Recent Comments

Recent tags

Archives

Mads Madsen 00:42 on April 16, 2013 Permalink Reply
Tags: JavaScript, Terminal, WIP