Changeset 17872 for misc/runpugs
- Timestamp:
- 09/16/07 21:54:17 (14 months ago)
- Location:
- misc/runpugs/htdocs
- Files:
-
- 3 modified
-
runpugs.css (modified) (9 diffs)
-
runpugs/index.html (modified) (1 diff)
-
runpugs/runpugs.js (modified) (7 diffs)
Legend:
- Unmodified
- Added
- Removed
-
misc/runpugs/htdocs/runpugs.css
r17861 r17872 14 14 margin: 5px; 15 15 padding: 5px; 16 text-align: center; 16 17 } 17 18 H2 { font-weight: bold; font-size: 11pt} … … 21 22 FIELDSET {border: solid white 0px} 22 23 LEGEND {font-weight:normal; text-align: left; } 23 24 24 .copyright {font-size: 9pt} 25 25 .tabon { … … 63 63 font-size: 11pt; 64 64 font-weight: bold; 65 line-height: 11pt;65 line-height: normal; 66 66 color: #204a87; 67 67 background-color: #f2f2f0; … … 71 71 font-size: 11pt; 72 72 font-weight: normal; 73 line-height: 11pt;73 line-height: normal; 74 74 color: #204a87; 75 75 background-color: #f2f2f0; … … 80 80 font-size: 11pt; 81 81 font-weight: normal; 82 line-height: 11pt;82 line-height: normal; 83 83 color: #204a87; 84 84 background-color: #f2f2f0; … … 92 92 font-size: 11pt; 93 93 font-weight: normal; 94 line-height: 11pt;94 line-height: normal; 95 95 color: #204a87; 96 96 background-color: #f2f2f0; … … 104 104 .cc { 105 105 font-family: 'Courier New', Monaco, Courier, monospace; 106 font-size: 1 1px;106 font-size: 14px; 107 107 color: white; 108 108 background-color: black; 109 109 padding: 5px; 110 110 width:100%; 111 line-height: 1em;111 line-height:normal; 112 112 height:24em; 113 113 overflow: auto; … … 139 139 } 140 140 pre.ab_theme { 141 color: rgb(255,1 40,0);141 color: rgb(255,160,0); 142 142 background-color: black; 143 143 margin: 0; … … 154 154 span.cursorOn { 155 155 font-family: 'Courier New', Monaco, Courier, monospace; 156 font-size: 1 1px;156 font-size: 14px; 157 157 display:inline; 158 158 background: white; 159 159 color: white; 160 160 border:none; 161 margin: 0; 162 padding: 0; 163 z-index: 1; 164 position:relative; 165 left:0px; 166 top:0px; 167 opacity:0.6; 168 -moz-opacity:0.6; 161 169 } 162 170 span.cursorOff { 163 171 font-family: 'Courier New', Monaco, Courier, monospace; 164 font-size: 1 1px;172 font-size: 14px; 165 173 display:inline; 166 174 background: black; 175 margin: 0; 176 padding: 0; 167 177 color: black; 168 178 border:none; 179 z-index: -1; 180 position:relative; 181 left:0px; 182 top:0px; 183 opacity:0.6; 184 -moz-opacity:0.6; 169 185 } -
misc/runpugs/htdocs/runpugs/index.html
r17861 r17872 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html lang="en"> 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 3 4 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset= utf-8">5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 5 6 <title>Run Perl 6 Now -- in your browser!</title> 6 <link rel="stylesheet" type="text/css" href="../runpugs.css" >7 <script language="javascript" src="jquery-1.2.min.js"></script>8 <script language="JavaScript" src="runpugs.js"></script>7 <link rel="stylesheet" type="text/css" href="../runpugs.css"/> 8 <script type="text/javascript" src="jquery-1.2.min.js"></script> 9 <script type="text/javascript" src="runpugs.js"></script> 9 10 </head> 10 11 <body> 12 <div id="mainwindow"> 13 <h1 id="logo" style="display:none;"> 14 Run Perl 6 now -- in your browser! 15 </h1> 16 <strong>Color schema:</strong> 17 <select id="theme"> 18 <option value="wb_theme" selected="selected">White & black</option> 19 <option value="gb_theme">Green</option> 20 <option value="ab_theme">Amber</option> 21 </select> 22 <form id="term" name="terminal" action="" method="post"> 23 <input name="prompt" value=" " type="hidden"/> 24 <input name="sessionid" value="" type="hidden"/> 25 <input name="ia" value="1" type="hidden"/> 26 <input name="action" value="runpugs" type="hidden"/> 27 <input id="rel" value="1" name="reldev" type="radio" checked="checked" onClick="set_version()"/> 28 <label for="rel"><strong>Release version</strong></label> 29 <input id="dev" value="1" name="reldev" type="radio" onClick="set_version()"/> 30 <label for="dev"><strong>Development version</strong></label> 31 <div id="termwindow"> 32 <textarea id="cmd" name="cmd" rows="3" cols="80">Please wait while Pugs 33 starts up...</textarea> 34 </div> 35 <div id="termwin" class='cc'> 36 <table id='tt' cellspacing='0' cellpadding='0' border='0' width='100%'> 37 <tr><td></td></tr> 38 </table> 39 </div> 40 <div id='status'></div> 41 <div class='note' style='padding: 5px'> 42 <p>This live web terminal runs the <a href="http://www.pugscode.org/">Pugs</a> 43 interpreter for <a href="http://dev.perl.org/perl6/">Perl 6</a>. 44 This is the development version, featuring asynchronous jQuery AJAX, 45 mod_perl and preloaded pugs sessions.</p> 46 <h2>Instructions</h2> 47 <p><code>runpugs</code> presents the pugs interactive shell. <code>runpugs</code>-specific commands:</p> 48 <dl> 49 <dt><code>help</code></dt><dd> displays the Pugs shell help (same as 50 <code>:h</code>)</dd> 51 <dt><code>clear</code></dt><dd>clears the web terminal (this command is not sent to the 52 pugs shell).</dd> 53 <dt><code>quit</code>, <code>bye</code></dt><dd>quit the Pugs session (same as 54 <code>:q</code>)</dd> 55 </dl> 56 <p>Please be considerate and do <em>quit</em> your 57 pugs session before you close the browser window. 58 </p> 59 <h2>Restrictions</h2> 60 <p>Because this is a web terminal, a number of restrictions apply. 61 Please <a href="http://feather.perl6.nl/%7Eandara/runpugs/">read the documentation</a> for more information.</p> 62 <p class="copyright"> 63 © Copyright 2006 by Wim.Vanderbauwhede. Contact me @ gmail.com<br/> 64 Enhanced web terminal by Ahmad.Zawawi. Contact me @ gmail.com 65 </p> 66 </div> 67 </form> 68 </div> 11 69 <iframe src="/perl/runpugs.pl" id="scratch" name="scratch" style="visibility:hidden" 12 70 width="700px" height="1px" onLoad="getreply()"></iframe> 13 <div id="mainwindow"> 14 <h1 id="logo" style="display:none;"><center>Run Perl 6 now -- in your browser!</center></h1> 15 <strong>Terminal:</strong> 16 <select id="theme"> 17 <option value="wb_theme" selected="selected">White & black</option> 18 <option value="gb_theme">Green</option> 19 <option value="ab_theme">Amber</option> 20 </select> 21 <form id="term" name="terminal" action="" method="post"> 22 <input name="prompt" value=" " type="hidden"> 23 <input name="sessionid" value="" type="hidden"> 24 <input name="ia" value="1" type="hidden"> 25 <input name="action" value="runpugs" type="hidden"> 26 <input id="rel" value="1" name="reldev" type="radio" checked="checked" onClick="set_version()"> 27 <label for="rel"><strong>Release version</strong></label> 28 <input id="dev" value="1" name="reldev" type="radio" onClick="set_version()"> 29 <label for="dev"><strong>Development version</strong></label> 30 <div id="termwindow"> 31 <textarea id="cmd" name="cmd" rows="3" cols="80" wrap="virtual">Please wait while Pugs 32 starts up...</textarea> 33 </div> 34 <div id="termwin" class='cc'> 35 <table id='tt' cellspacing='0' cellpadding='0' border='0' width='100%'> 36 </table> 37 </div> 38 </form> 39 <!--<script language="JavaScript"> 40 //document.terminal.cmd.focus() // _SKIPC_ 41 // document.terminal.cmd.scrollTop =document.terminal.cmd.scrollHeight; // _SKIPC_ 42 //nchars=document.terminal.cmd.value.length; 43 </script> 44 --> 45 <div class='note' style='padding: 5px'> 46 <p>This live web terminal runs the <a href="http://www.pugscode.org/">Pugs</a> 47 interpreter for <a href="http://dev.perl.org/perl6/">Perl 6</a>. 48 This is the development version, featuring asynchronous jQuery AJAX, 49 mod_perl and preloaded pugs sessions.</p> 50 </p> 51 <h2>Instructions</h2> 52 <p><code>runpugs</code> presents the pugs interactive shell. Only 53 the line typed at the last prompt is sent to pugs.</p> 54 <p><code>runpugs</code>-specific commands:</p> 55 <dl> 56 <dt><code>help</code></dt><dd> displays the Pugs shell help (same as 57 <code>:h</code>)</dd><br> 58 <dt><code>clear</code></dt><dd>clears the web terminal (this command is not sent to the 59 pugs shell).</dd><br> 60 <dt><code>quit</code>, <code>bye</code></dt><dd>quit the Pugs session (same as 61 <code>:q</code>)</dd><br> 62 </dl> 63 <p>Please be considerate and do <em>quit</em> your 64 pugs session before you close the browser window. 65 </p> 66 <h2>Restrictions</h2> 67 <p>Because this is a web terminal, a number of restrictions apply. 68 Please <a href="http://feather.perl6.nl/%7Eandara/runpugs/">read the documentation</a> for more information. 69 70 <p class="copyright">© Copyright 2006 by Wim.Vanderbauwhede. Contact me @ gmail.com</p> 71 </div> 72 </div> 71 <hr/> 72 <a href="http://validator.w3.org/check?uri=referer"> 73 <img src="http://www.w3.org/Icons/valid-xhtml10" 74 alt="Valid XHTML 1.0!" height="31" width="88" border="0" /> 75 </a> 73 76 </body> 74 77 </html> -
misc/runpugs/htdocs/runpugs/runpugs.js
r17861 r17872 10 10 var cmds = new Array(); 11 11 var theme = "wb_theme"; 12 13 $(window).unload(function() { 14 //send :q to pugs on onload 15 $.ajax({ 16 url: "/perl/runpugs.pl?" + "sessionid=" + sessionid + 17 "&reldev=1&ia=1&cmd=%3Aq", 18 async: true 19 }); 20 }); 21 12 var fixedCharWidth; 13 14 //show the cursor 22 15 function showCursor() { 23 var cursorEl = "#d" + (cmds.length - 1); 16 var cmdLen = cmds.length; 17 var cursorEl = (cmdLen == 0) ? "#d0" : "#d" + (cmdLen - 1); 24 18 $(cursorEl).toggleClass('cursorOff'); 25 19 $(cursorEl).toggleClass('cursorOn'); … … 27 21 } 28 22 23 //move the cursor by css 24 function moveCursor() { 25 var left = -(cmd.length-curpos) * fixedCharWidth; 26 var cursorEl = "#d" + (cmds.length - 1); 27 $(cursorEl).css('left',left + "px"); 28 } 29 30 //show command 31 function showCmd() { 32 var cmdEl = "#c" + (cmds.length - 1); 33 $(cmdEl).text(prompt + cmd); 34 } 35 36 //update the console 29 37 function updateConsole() { 30 38 $("#tt").empty(); 31 39 $.each(cmds,function(i,n) { 32 40 var l = (n == "") ? " " : n; 33 $("#tt").append( 34 "<tr><td><pre id='c" + i + "' class='"+ theme +"'>" + 35 l + "</pre><span id='d" + i + 36 "' class='cursorOff'> </span></td></tr>" 37 ); 38 }); 39 var lastId = (cmds.length - 1); 40 var cmdEl = "#c" + lastId; 41 var cursorEl = "#d" + lastId; 42 41 var tr = "<tr><td><pre id='c" + i + 42 "' class='"+ theme +"'>" + l + "</pre>"; 43 if(i == cmds.length - 1) { 44 tr += "<span id='d" + i + 45 "' class='cursorOff'> </span>"; 46 } 47 $("#tt").append(tr + "</td></tr>"); 48 }); 43 49 var scrollHeight = $("#termwin")[0].scrollHeight; 44 50 $("#termwin").animate({ scrollTop: scrollHeight }, "fast") 45 51 } 46 52 53 //wait for when the document is ready 47 54 $(document).ready( function() { 48 //document is ready now... 55 56 //display waiting msg and try to calculate width of 57 //a single fixed character... 58 var msg = "Please wait while Pugs starts up..."; 49 59 $("#tt").empty(); 50 $("#tt").append("<tr><td><pre id='c0' class='wb_theme'>" + 51 "Please wait while Pugs starts up...</pre>"+ 52 "<span class='cursor'> </span></td></tr>"); 53 60 $("#tt").append("<tr><td><pre id='c0' class='wb_theme'>" + msg + 61 "</pre><span id='d0' class='cursorOff'> </span></td></tr>"); 62 fixedCharWidth = ($("#c0")[0]) ? 63 $("#c0")[0].offsetWidth / msg.length : 8; 64 65 //apply theme and animate logo 54 66 $("#theme").change(function() { 55 67 $("pre").toggleClass(theme); 56 68 theme = $("#theme").val(); 57 $("pre").toggleClass(theme); 69 $("pre").toggleClass(theme); 58 70 }); 59 71 $("#logo").slideDown(2000); 60 72 73 //repaint & start showing the cursor... 74 updateConsole(); 61 75 showCursor(); 76 77 //attach keyboard listeners... 78 $(document).keydown(function(event) { 79 return onKeyDown(event); 80 }); 81 $(document).keypress(function(event) { 82 return onKeyPress(event); 83 }); 84 85 //attach pugs cleanup listener... 86 $(window).unload(function() { 87 //send :q to pugs on onload 88 $.ajax({ 89 url: "/perl/runpugs.pl?" + "sessionid=" + sessionid + 90 "&reldev=1&ia=1&cmd=%3Aq", 91 async: true 92 }); 93 }); 94 62 95 }); 63 96 64 65 66 67 68 $(document).keydown(function(event) { 69 var keyCode = event.keyCode; 70 var cmdEl = "#c" + (cmds.length - 1); 71 97 //insert character 'ch' at index 'pos' in string str 98 //and return it 99 function insert(str,ch,pos) { 100 var s = str.substring(0,pos); 101 var t = str.substring(pos,str.length); 102 return s + ch + t; 103 } 104 105 function focusOnCmd(e) { 106 $(e).focus(); 72 107 var scrollHeight = $("#termwin")[0].scrollHeight; 73 108 $("#termwin").animate({ scrollTop: scrollHeight }, "fast"); 74 109 } 110 111 //$.keydown 112 function onKeyDown(event) { 113 if(event.ctrlKey || event.altKey || event.shiftKey) { 114 //ignore ctrl and alt modifiers 115 return true; 116 } 117 118 var keyCode = event.keyCode; 119 120 focusOnCmd("#status"); 121 75 122 if(keyCode == 13) { 76 123 //enter … … 85 132 cmd = ""; 86 133 return false; 134 87 135 } else if(keyCode == 8) { 88 136 //backspace 89 137 if(curpos > 0) { 90 138 curpos -=1 91 cmd = cmd.substring(0,cmd.length-1); 92 $(cmdEl).text(prompt + cmd); 93 } 94 return false; 139 var newCmd = ""; 140 for(var i = 0; i < cmd.length; i++) { 141 if(i != curpos) { 142 newCmd += cmd.charAt(i); 143 } 144 } 145 cmd = newCmd; 146 showCmd(); 147 } 148 return false; 149 95 150 } else if(keyCode == 38) { 96 151 //up 97 152 hist_next(); 98 99 return false;153 return false; 154 100 155 } else if(keyCode == 40) { 101 156 //down 102 157 hist_prev(); 103 $(cmdEl).text(prompt + cmd);104 return false;105 } /*else if(keyCode == 37) {158 return false; 159 160 } else if(keyCode == 37) { 106 161 //left 107 $("#status").text("left not implemented"); 108 return false; 162 if(curpos > 0) { 163 curpos--; 164 moveCursor(); 165 } 166 return false; 167 109 168 } else if(keyCode == 39) { 110 169 //right 111 $("#status").text("right not implemented"); 170 if(curpos < cmd.length) { 171 curpos++; 172 moveCursor(); 173 } 112 174 return false; 113 175 } else if(keyCode == 36) { 114 176 //home 115 //curpos = 0;116 $("#status").text("home not implemented");177 curpos = 0; 178 moveCursor(); 117 179 return false; 118 180 119 181 } else if(keyCode == 35) { 120 182 //end 121 $("#status").text("end not implemented"); 183 curpos = cmd.length; 184 moveCursor(); 122 185 return false; 123 186 124 } */ 125 126 return true; 127 }); 128 $(document).keypress(function(event) { 129 130 var scrollHeight = $("#termwin")[0].scrollHeight; 131 $("#termwin").animate({ scrollTop: scrollHeight }, "fast"); 187 } else if(keyCode == 46) { 188 //del 189 if(curpos >= 0){// && curpos <= cmd.length+1) { 190 var newCmd = ""; 191 for(var i = 0; i < cmd.length; i++) { 192 if(i != curpos) { 193 newCmd += cmd.charAt(i); 194 } 195 } 196 cmd = newCmd; 197 //if(curpos > cmd.length) { 198 // curpos = cmd.length+1; 199 //} 200 showCmd(); 201 moveCursor(); 202 } 203 return false; 204 } 205 return true; 206 } 207 208 //$.keypress 209 function onKeyPress(event) { 210 211 if(event.ctrlKey || event.altKey) { 212 //ignore ctrl and alt modifiers 213 return; 214 } 215 216 focusOnCmd("#status"); 132 217 133 218 var keyCode = event.keyCode; 134 var cmdEl = "#c" + (cmds.length - 1);135 219 if($.browser.msie || $.browser.opera) { 136 220 var key = String.fromCharCode(keyCode); 137 221 if(key >= ' ') { 138 222 if(($.browser.opera && (keyCode < 35 || keyCode > 40)) || $.browser.msie) { 139 cmd += key; 140 $(cmdEl).text(prompt + cmd); 223 //insert key at curpos 224 cmd = insert(cmd,key,curpos); 225 showCmd(); 141 226 curpos++; 142 227 } 143 228 } 144 229 return false; 145 } else if($.browser.mozilla && keyCode == 0) {230 } else if($.browser.mozilla && keyCode == 0) { 146 231 var key = String.fromCharCode(event.charCode ? event.charCode : event.keyCode); 147 cmd += key; 148 $(cmdEl).text(prompt + cmd); 232 //insert key at curpos 233 cmd = insert(cmd,key,curpos); 234 showCmd(); 149 235 curpos++; 150 236 return false; 151 237 } 152 238 return true; 153 }); 154 155 239 } 240 241 //called by textarea: TODO should be removed when textarea 242 //is replaced by async $.ajax 156 243 function getreply () { 157 244 scratchpad=frames['scratch'].document; … … 163 250 cmds = reply.replace(/ /g,' ').split(/\r\n|\n|\r/g); 164 251 updateConsole(); 165 } 166 252 cmd = ""; 253 curpos=0; 254 moveCursor(); 255 showCmd(); 256 } 257 258 //next in history (triggered by DOWN) 167 259 function hist_next () { 168 260 if (histentry>=1) { … … 170 262 cmd=histlist[histentry]; 171 263 curpos=cmd.length; 172 var cmdEl = "#c" + (cmds.length - 1);173 $(cmdEl).text(prompt + cmd);264 showCmd(); 265 moveCursor(); 174 266 } 175 267 return false; 176 268 } 177 269 270 //previous in history (triggered by UP) 178 271 function hist_prev () { 179 272 if (histentry<histlist.length-1) { … … 181 274 cmd=histlist[histentry]; 182 275 curpos=cmd.length; 183 var cmdEl = "#c" + (cmds.length - 1); 184 $(cmdEl).text(prompt + cmd); 185 } 186 } 187 276 showCmd(); 277 moveCursor(); 278 } 279 } 280 281 //triggered by user selecting release/development version 188 282 function set_version () { 189 283 var reldev=document.terminal.reldev[0].checked; … … 196 290 } 197 291 frames['scratch'].document.terminal.submit(); 198 } 199 292 293 focusOnCmd("#tt"); 294 } 295
