Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added some additional functions #2

Closed
wants to merge 3 commits into from
Closed

Added some additional functions #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7b6d0f3
Adding functions and loading bar
Feb 16, 2015
9843e48
Cleaned comments, empty lines
Feb 16, 2015
b129084
Update README.md
Jun 23, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 25 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,34 @@ terminaljs

terminal.js is a dead simple JavaScript library for emulating a shell environment.


###Initialization

var myTerminal = new Terminal(id)

###Properties and methods

.empty()
Prints a blank new line. (HTML contents are  )

.printraw(html)
Prints html-formatted text on a new line. Links and images can be added via respective HTML formatting.

.load(name, message, width, progress, callback)
Generates a new line with an Id of 'name', and a loading message provided. A loading bar will be generated beside the message with the width provided, in characters. Progress function will be called once every half second to update the progress bar. Progress function should return an integer between 0-100. Progress function will stop and execute callback function when returned value is 100 or greater.

.clearhistory()
Clears the previous input history.

.history
This is an array of strings that is the input history

.lasthistory
Default value of -1, this is the last input displayed from history. This allows scrolling up/down through previous inputs via arrow keys, and clears the input field when down is pressed past defined history.




.html
This is the top DOM element of the terminal instance. If you want to modify styling via CSS, all instances belong to a .Terminal class. The element will also get the ID from the constructor argument.

Expand Down Expand Up @@ -49,7 +71,8 @@ Read more at: [erikosterberg.com/terminaljs](http://www.erikosterberg.com/termin

The MIT License (MIT)

Copyright (c) 2014 Erik Österberg
Original Works Copyright (c) 2014 Erik Österberg
This Contribution is Copyright (c) 2015 Mark Ivanowich

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand All @@ -67,4 +90,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
SOFTWARE.
117 changes: 77 additions & 40 deletions terminal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/*! terminal.js v2.0 | (c) 2014 Erik Österberg | https://github.com/eosterberg/terminaljs */
/*! Additional code | (c) 2015 Mark Ivanowich */

var Terminal = (function () {
// PROMPT_TYPE
var PROMPT_INPUT = 1, PROMPT_PASSWORD = 2, PROMPT_CONFIRM = 3

var PROMPT_INPUT = 1, PROMPT_PASSWORD = 2, PROMPT_CONFIRM = 3, PROMPT_LOAD = 4
var fireCursorInterval = function (inputField, terminalObj) {
var cursor = terminalObj._cursor
setTimeout(function () {
Expand All @@ -15,39 +15,60 @@ var Terminal = (function () {
}
}, 500)
}

var firstPrompt = true;
promptInput = function (terminalObj, message, PROMPT_TYPE, callback) {
var shouldDisplayInput = (PROMPT_TYPE === PROMPT_INPUT)
var inputField = document.createElement('input')

inputField.style.position = 'absolute'
inputField.style.zIndex = '-100'
inputField.style.outline = 'none'
inputField.style.border = 'none'
inputField.style.opacity = '0'
inputField.style.fontSize = '0.2em'

terminalObj._inputLine.textContent = ''
terminalObj._input.style.display = 'block'
terminalObj.html.appendChild(inputField)
fireCursorInterval(inputField, terminalObj)

if (message.length) terminalObj.print(PROMPT_TYPE === PROMPT_CONFIRM ? message + ' (y/n)' : message)
//I know I may have bad form in here. I need to review and revise. I am using message as a carrier for additional data.
if(typeof(message) === 'object'){
if (PROMPT_TYPE === PROMPT_LOAD){
if(!message.width) message.width=20;
if(!message.text.length) message.text='Loading...';
terminalObj.printraw('<span id=\''+message.name+'\'>'+message.text + '<span>');
var lastProgress = 0;
var bar = document.getElementById(message.name);
function processCheck(){
if (typeof(message.progress) === 'function')
lastProgress = message.progress();
if( lastProgress >=100){
clearInterval(processInterval);
bar.removeAttribute('id');
if (typeof(callback) === 'function')callback();
}else{
var barWidth = Math.floor((message.progress()/100)*message.width);
var sections = "";
for(var i=0;i<message.width;i++){
sections += (i<barWidth)?"=":(i==barWidth)?">":"&nbsp;";
}
bar.innerHTML = message.text + " ["+sections+"]";
}
}
var processInterval = setInterval(processCheck, 500);
}
}

if (message.length) terminalObj.print(PROMPT_TYPE === PROMPT_CONFIRM ? message + ' (y/n)' : message);
inputField.onblur = function () {
terminalObj._cursor.style.display = 'none'
}

inputField.onfocus = function () {
inputField.value = terminalObj._inputLine.textContent
terminalObj._cursor.style.display = 'inline'
}

terminalObj.html.onclick = function () {
inputField.focus()
}

inputField.onkeydown = function (e) {
if (e.which === 37 || e.which === 39 || e.which === 38 || e.which === 40 || e.which === 9) {
e.preventDefault()
Expand All @@ -61,12 +82,26 @@ var Terminal = (function () {
if (PROMPT_TYPE === PROMPT_CONFIRM || e.which === 13) {
terminalObj._input.style.display = 'none'
var inputValue = inputField.value
if (shouldDisplayInput) terminalObj.print(inputValue)
if (shouldDisplayInput) {
terminalObj.history.push(inputValue);
terminalObj.lasthistory=terminalObj.history.length;
terminalObj.print(inputValue)
}
terminalObj.html.removeChild(inputField)
if (typeof(callback) === 'function') {
if (PROMPT_TYPE === PROMPT_CONFIRM) {
callback(inputValue.toUpperCase()[0] === 'Y' ? true : false)
} else callback(inputValue)
} else if(PROMPT_TYPE !== PROMPT_LOAD) callback(inputValue)
}
}
if (PROMPT_TYPE === PROMPT_INPUT){
if(e.which === 38 && terminalObj.lasthistory!=-1){
inputField.value=terminalObj.history[(terminalObj.lasthistory-=1)>0?terminalObj.lasthistory:terminalObj.lasthistory=0];
terminalObj._inputLine.textContent = inputField.value;
}else if(e.which === 40 && terminalObj.lasthistory!=-1){
inputField.value=terminalObj.history[(terminalObj.lasthistory+=1)<terminalObj.history.length?terminalObj.lasthistory:terminalObj.lasthistory=terminalObj.history.length];
if(terminalObj.lasthistory==terminalObj.history.length) inputField.value="";
terminalObj._inputLine.textContent = inputField.value;
}
}
}
Expand All @@ -77,109 +112,111 @@ var Terminal = (function () {
inputField.focus()
}
}

var terminalBeep

var terminalBeep;
var TerminalConstructor = function (id) {
if (!terminalBeep) {
terminalBeep = document.createElement('audio')
var source = '<source src="http://www.erikosterberg.com/terminaljs/beep.'
terminalBeep.innerHTML = source + 'mp3" type="audio/mpeg">' + source + 'ogg" type="audio/ogg">'
terminalBeep.volume = 0.05
}

this.html = document.createElement('div')
this.html.className = 'Terminal'
if (typeof(id) === 'string') { this.html.id = id }

this._innerWindow = document.createElement('div')
this._output = document.createElement('p')
this._inputLine = document.createElement('span') //the span element where the users input is put
this._cursor = document.createElement('span')
this._input = document.createElement('p') //the full element administering the user input, including cursor

this._shouldBlinkCursor = true

this.history =[]
this.lasthistory=-1;//-1 by default. 0 is a valuable number.
this.beep = function () {
terminalBeep.load()
terminalBeep.play()
}

this.empty = function () {
var newLine = document.createElement('div')
newLine.innerHTML = '&nbsp;'
this._output.appendChild(newLine)
}
this.print = function (message) {
var newLine = document.createElement('div')
newLine.textContent = message
this._output.appendChild(newLine)
}

this.printraw = function (message) {
var newLine = document.createElement('div')
newLine.innerHTML = message
this._output.appendChild(newLine)
}
this.load = function (name, message, width, progress, callback){
promptInput(this, {text:message, name: name, width: width, progress:progress}, PROMPT_LOAD, callback)
}
this.input = function (message, callback) {
promptInput(this, message, PROMPT_INPUT, callback)
}

this.password = function (message, callback) {
promptInput(this, message, PROMPT_PASSWORD, callback)
}

this.confirm = function (message, callback) {
promptInput(this, message, PROMPT_CONFIRM, callback)
}

this.clear = function () {
this._output.innerHTML = ''
}

this.clearHistory = function () {
this.history = [];
this.lasthistory = -1;
}
this.sleep = function (milliseconds, callback) {
setTimeout(callback, milliseconds)
}

this.setTextSize = function (size) {
this._output.style.fontSize = size
this._input.style.fontSize = size
}

this.setTextColor = function (col) {
this.html.style.color = col
this._cursor.style.background = col
// this._cursor.style.background = col
this._cursor.style.color = col
}

this.setBackgroundColor = function (col) {
this.html.style.background = col
}

this.setWidth = function (width) {
this.html.style.width = width
}

this.setHeight = function (height) {
this.html.style.height = height
}

this.blinkingCursor = function (bool) {
bool = bool.toString().toUpperCase()
this._shouldBlinkCursor = (bool === 'TRUE' || bool === '1' || bool === 'YES')
// bool = bool.toString().toUpperCase()
// this._shouldBlinkCursor = (bool === 'TRUE' || bool === '1' || bool === 'YES')
this._shouldBlinkCursor = bool;
}

this._input.appendChild(this._inputLine)
this._input.appendChild(this._cursor)
this._innerWindow.appendChild(this._output)
this._innerWindow.appendChild(this._input)
this.html.appendChild(this._innerWindow)

this.setBackgroundColor('black')
this.setTextColor('white')
this.setTextSize('1em')
this.setWidth('100%')
this.setHeight('100%')

this.html.style.fontFamily = 'Monaco, Courier'
this.html.style.margin = '0'
this._innerWindow.style.padding = '10px'
this._input.style.margin = '0'
this._output.style.margin = '0'
this._cursor.style.background = 'white'
this._cursor.innerHTML = 'C' //put something in the cursor..
// this._cursor.style.background = 'white'
// this._cursor.innerHTML = 'C' //put something in the cursor..
this._cursor.innerHTML = '&#9610;' //lets make this an actual block instead of a filled cursor
this._cursor.style.display = 'none' //then hide it
this._cursor.style.margin = '0' //size is just a bit off
this._cursor.style.padding = '0' //size is just a bit off
this._input.style.display = 'none'
}

return TerminalConstructor
}())
}())
24 changes: 22 additions & 2 deletions test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,14 @@ <h1>terminal.js test</h1>
t1.input('Whats your name?', function (input) {
t1.print('Welcome, ' + input)


t2.sleep(1000, function () {
t2.print('Hello again!')
t2.input('Whats your name again?', function (input) {
t2.print('Welcome again, ' + input)
})
})
t1.input("Well "+input+", Within this terminal, you can arrow up to see your previous input.")
})

var t3 = new Terminal('terminal_3')
Expand All @@ -43,7 +45,8 @@ <h1>terminal.js test</h1>
t3.setBackgroundColor('green')
document.body.appendChild(t3.html)
t3.password('Enter password:', function (password) {
t3.print('Your password is: ' + password)
t3.print('Your password is: ' + password);
t3.input("Within this terminal, you should not be able to arrow to your previous input")
})

var paragraph = document.createElement("p")
Expand All @@ -60,7 +63,24 @@ <h1>terminal.js test</h1>
t4.print(didConfirm ? 'OK' : 'Why not?')
})

var counter = 0;
var t5 = new Terminal()
t5.setHeight("180px")
t5.setWidth('100%')
t5.setBackgroundColor('black')
document.body.appendChild(t5.html)
t5.input("Enter to start loading.", function(){
t5.load(
'pylons',
'Constructing additional pylons...',
50,
function (){return counter+=3;},
function (didConfirm) { t5.print('Pylons constructed');}
);
});


</script>

</body>
</html>
</html>