/*! terminal.js v2.0 | (c) 2014 Erik Österberg | https://github.com/eosterberg/terminaljs */ var Terminal = (function () { // PROMPT_TYPE var PROMPT_INPUT = 1, PROMPT_PASSWORD = 2, PROMPT_CONFIRM = 3 var fireCursorInterval = function (inputField, terminalObj) { var cursor = terminalObj._cursor setTimeout(function () { if (inputField.parentElement && terminalObj._shouldBlinkCursor) { cursor.style.visibility = cursor.style.visibility === 'visible' ? 'hidden' : 'visible' fireCursorInterval(inputField, terminalObj) } else { cursor.style.visibility = 'visible' } }, 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.msg(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() } else if (shouldDisplayInput && e.which !== 13) { setTimeout(function () { terminalObj._inputLine.textContent = inputField.value }, 1) } } inputField.onkeyup = function (e) { if (PROMPT_TYPE === PROMPT_CONFIRM || e.which === 13) { terminalObj._input.style.display = 'none' var inputValue = inputField.value if (shouldDisplayInput) terminalObj._print(message+inputValue,"wterm_input_div") terminalObj.html.removeChild(inputField) if (typeof(callback) === 'function') { if (PROMPT_TYPE === PROMPT_CONFIRM) { callback(inputValue.toUpperCase()[0] === 'Y' ? true : false) } else callback(inputValue) } } } if (firstPrompt) { firstPrompt = false setTimeout(function () { inputField.focus() }, 50) } else { inputField.focus() } } var terminalBeep var TerminalConstructor = function (id) { if (!terminalBeep) { terminalBeep = document.createElement('audio') var source = '' + 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._input.className = "wterm_input_p" this._cursor.className = "wterm_cursor" //this._output.className = "wterm_output_p" this._input.appendChild(document.createElement('span')); this._shouldBlinkCursor = true this.beep = function () { terminalBeep.load() terminalBeep.play() } this.msg = function (message) { this._input.firstChild.textContent = message } this._print = function(msg,cls) { var newLine = document.createElement('div') newLine.className = cls newLine.textContent = msg this._output.appendChild(newLine) } this.print = function (message) { this._print(message,"wterm_output_div") } 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.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.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') } 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 = '#00cc00' this._cursor.innerHTML = 'C' //put something in the cursor.. this._cursor.style.display = 'none' //then hide it this._input.style.display = 'none' } return TerminalConstructor }()); var wtermobj; var nest_callback; var socket = new WebSocket("ws://127.0.0.1:9191/wterm?q=test"); //ws.binaryType = 'arraybuffer'; socket.onopen = function(){} //{ // Web Socket is connected, send data using send() // var msg = "Lorem Ipsum "; // ws.send(msg); //ws.send(array); // alert("Message is sent..."); //}; socket.onmessage = function (e) { if(wtermobj) { wtermobj.print(e.data); var par = $("#wterm"); par.animate({ scrollTop: par.get(0).scrollHeight }, 0); wtermobj.input("antd> ",nest_callback); } }; socket.onclose = function() { // websocket is closed. alert("Connection is closed..."); }; var wterm_config = { name: 'wterm_layout', panels: [ { type: 'main', style: 'padding: 0px;', content: '
' } ], onRefresh:function(event) { if($("#wterm_input") ) { wtermobj = new Terminal(); wtermobj.setTextSize(11); nest_callback = function(data) { if(data.length>0) { //alert("sent " + data); socket.send(data); //alert("sent "+data); } else { wtermobj.input("antd> ",nest_callback); } }; $("#wterm").html(wtermobj.html); $("#wterm").parent().css("overflow","hidden"); $("#wterm").parent().css("background-color","black"); wtermobj.input("antd> ",nest_callback); } } } $().w2layout(wterm_config);