/examples/web/terminal/static/js/jquery.terminal.js

https://bitbucket.org/prologic/circuits/ · JavaScript · 234 lines · 180 code · 36 blank · 18 comment · 28 complexity · 3d22a03456008ac7e796ac73b0a64599 MD5 · raw file

  1. /*
  2. * AJAX Terminal (0.1)
  3. * by Sagie Maoz (n0nick.net)
  4. * n0nick@php.net
  5. *
  6. * jQuery plugin to create a web-based console-like behavior that posts user
  7. * input commands to an AJAX server, and prints the result text.
  8. * Designed to be utterly simple and highly customizable.
  9. *
  10. * Copyright (c) 2009 Sagie Maoz <n0nick@php.net>
  11. * Licensed under the GPL license, see http://www.gnu.org/licenses/gpl-3.0.html
  12. *
  13. *
  14. * NOTE: This script requires jQuery to work. Download jQuery at www.jquery.com
  15. *
  16. */
  17. (function($) {
  18. $.fn.terminal = function(url, options) {
  19. settings = $.extend({
  20. 'max_height' : '100%',
  21. 'form_method' : 'POST',
  22. 'input_name' : 'input',
  23. 'post_vars' : {},
  24. 'custom_prompt' : false,
  25. 'focus_on_load' : true,
  26. 'submit_on_load' : false,
  27. 'grab_focus_on_click' : true,
  28. 'hello_message' : false,
  29. 'unix_theme' : true,
  30. 'allow_empty_input' : false,
  31. 'tab_width' : 4,
  32. 'disable_input' : false,
  33. 'onload' : null,
  34. }, options);
  35. if (settings.custom_prompt)
  36. {
  37. settings.custom_prompt = $.trim(settings.custom_prompt) + ' ';
  38. }
  39. return this.each(function()
  40. {
  41. var terminal_container = $(this);
  42. terminal_container.append('<div></div>');
  43. var terminal = terminal_container.find('div:last');
  44. if (settings.max_height == '100%')
  45. {
  46. settings.max_height = terminal_container.innerHeight();
  47. }
  48. terminal.css({
  49. 'display' : 'block',
  50. 'overflow-x' : 'none',
  51. 'overflow-y' : 'auto',
  52. 'padding' : '0',
  53. 'max-height' : settings.max_height + 'px',
  54. });
  55. terminal.append('<span></span');
  56. var terminal_output = terminal.find('span:last');
  57. terminal.append('<form method="'+settings.form_method+'" action="'+url+'"></form>');
  58. var terminal_form = $(this).find('form:last');
  59. if (settings.custom_prompt)
  60. {
  61. terminal_form.append('<span>' + settings.custom_prompt + '</span>');
  62. }
  63. terminal_form.css('display', 'inline');
  64. terminal_form.attr('onsubmit', 'return false;');
  65. var tabString = "";
  66. for (var i=0; i<settings.tab_width; i++)
  67. tabString+= "&nbsp;";
  68. var terminal_append = function(data)
  69. {
  70. var formattedData = $('<span></span>').text(data);
  71. var dataRows = formattedData.html().split(/\n/);
  72. data = '';
  73. for (row in dataRows)
  74. {
  75. data += '<span>' + dataRows[row].replace(/\t/g, tabString);
  76. if (!(row == dataRows.length-1 && (!dataRows[row] || !settings.custom_prompt)))
  77. data+= '<br />';
  78. data += '</span>';
  79. }
  80. terminal_output.append('<span>' + data + '</span>');
  81. terminal_form.show();
  82. terminal_input.val('').focus();
  83. // if input is disabled, we trick a focus so the scrolling will be ok
  84. if (settings.disable_input)
  85. {
  86. terminal_input.removeAttr('disabled').focus().attr('disabled', 'disabled');
  87. }
  88. }
  89. // outsource this function for misc. implementations
  90. terminal_container[0].append = terminal_append;
  91. var terminal_command = function(first)
  92. {
  93. var first = first || false;
  94. var val = $.trim(terminal_input.val());
  95. if ("" == val && !first)
  96. {
  97. if (!settings.allow_empty_input)
  98. return;
  99. }
  100. terminal_form.hide();
  101. if ("" != val || settings.allow_empty_input)
  102. {
  103. var last_command = '<span>';
  104. last_command+= settings.custom_prompt? settings.custom_prompt : '';
  105. last_command+= val + '<br />';
  106. terminal_output.append(last_command);
  107. }
  108. post_vars = settings.post_vars;
  109. post_vars[settings.input_name] = val;
  110. function terminal_command_success(data)
  111. {
  112. return terminal_append(data);
  113. }
  114. function terminal_command_error(x, tStatus)
  115. {
  116. var out = 'ERROR: ';
  117. switch(tStatus)
  118. {
  119. case 'timeout':
  120. out+= 'Server timeout. Try again later.';
  121. break;
  122. case 'notmodified':
  123. out+= 'Server did not response properly. Try again.';
  124. break;
  125. case 'parsererror':
  126. out+= 'Client error. Try again.';
  127. break;
  128. default:
  129. case 'error':
  130. out+= 'A server error has occured. Check your command.';
  131. break;
  132. }
  133. return terminal_command_success(out);
  134. }
  135. $.ajax({
  136. 'type' : terminal_form.attr('method'),
  137. 'url' : terminal_form.attr('action'),
  138. 'cache' : false,
  139. 'data' : post_vars,
  140. 'dataType' : 'text',
  141. 'success' : terminal_command_success,
  142. 'error' : terminal_command_error,
  143. });
  144. }
  145. terminal_form.submit(terminal_command);
  146. terminal_form.append('<input type="text" name="'+settings.input_name+'" />');
  147. var terminal_input = terminal_form.find('input:last');
  148. terminal_input.css('width', '80%');
  149. terminal_input.attr('autocomplete', 'off');
  150. if (settings.unix_theme)
  151. {
  152. terminal_container.css({
  153. 'border' : 'none',
  154. 'background-color' : 'black',
  155. });
  156. terminal_form.css({
  157. 'padding' : '0',
  158. 'margin' : '0',
  159. });
  160. terminal_input.css({
  161. 'border' : 'none',
  162. 'background-color' : 'black',
  163. 'padding' : '0',
  164. 'margin' : '0',
  165. });
  166. terminal_container.find('input, span').css({
  167. 'color' : 'lightgrey',
  168. 'font-family' : 'monospace',
  169. 'font-size' : '1em',
  170. 'line-height' : '1.3em',
  171. });
  172. }
  173. $(document).ready(function()
  174. {
  175. if (settings.grab_focus_on_click)
  176. {
  177. terminal_container.mouseup(function()
  178. {
  179. if ("" == document.getSelection())
  180. {
  181. $(terminal_input.focus());
  182. }
  183. });
  184. }
  185. if (settings.hello_message)
  186. terminal_output.append('<span>' + settings.hello_message + '<br /></span>');
  187. if (settings.submit_on_load)
  188. terminal_command(true);
  189. if (settings.focus_on_load)
  190. terminal_input.focus();
  191. if (settings.disable_input)
  192. terminal_input.attr('disabled', 'disabled');
  193. if (settings.onload)
  194. settings.onload();
  195. });
  196. });
  197. }
  198. }(jQuery));