Changeset 17861 for misc/runpugs

Show
Ignore:
Timestamp:
09/15/07 20:30:01 (14 months ago)
Author:
azawawi
Message:

[runpugs] minimal pugs terminal simulation for IE7+,FF2+ and Opera 9.2+
[runpugs] jquery now simplifies most JS code
[runpugs] runpugs page has been simplified for end-users

Location:
misc/runpugs/htdocs
Files:
3 modified

Legend:

Unmodified
Added
Removed

  • misc/runpugs/htdocs/runpugs.css

    r17827 r17861  
    1 BODY {width:100%;margin-left:10%;margin-right:10%; margin-top: 10px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12pt; line-height: normal; background-color:#FFFFFF;} 
    2 H1 {font-size: 24pt;  
     1body { 
     2        font:14px arial,helvetica,clean,sans-serif; 
     3        width:100%; 
     4        margin-left:10%;margin-right:10%; margin-top: 0px;  
     5        line-height: normal;  
     6} 
     7H1 { 
     8        width: 100%; 
     9        font-size: 24pt;  
    310    font-family: Georgia, Serif, Times;  
    411    font-weight: normal; 
    512    color: white; 
    613    background-color: #204a87; 
    7     padding: 15px; 
    8     } 
    9 H2 { font-weight: bold; font-size: 12pt} 
    10  
    11 EM {font-weight: bold; 
    12     font-style: normal; 
    13         text-decoration:none;} 
    14 TT {color: #204a87; 
    15         font-weight: bold; 
    16         } 
    17  
     14        margin: 5px; 
     15    padding: 5px; 
     16} 
     17H2 { font-weight: bold; font-size: 11pt} 
     18EM { font-weight: bold; font-style: normal; text-decoration:none;} 
     19TT {color: #204a87; font-weight: bold; } 
    1820LABEL {font-weight: normal; } 
    1921FIELDSET {border: solid white 0px} 
    2022LEGEND {font-weight:normal; text-align: left; } 
    2123 
    22 /* 
    23 DL {  
    24 } 
    25  
    26 DT { 
    27     display:block; 
    28     float: left; 
    29     width: 10ex; 
    30 } 
    31  
    32 DD { 
    33     display:block ; 
    34     float: left; 
    35 } 
    36 */ 
    37  
    3824.copyright {font-size: 9pt} 
    39 .warning { 
    40 border: solid 2px #204a87; 
    41 padding: 5px; 
    42 } 
    4325.tabon { 
    4426font-weight:bold; 
    … …  
    4729    padding: 2px; 
    4830    padding-bottom: 0px; 
    49     margin-top: 10px;  
     31    margin-top: 0px;  
    5032 
    5133} 
    … …  
    5335font-weight:bold; 
    5436    background-color: #c2c2c0; 
    55 color: gray; 
     37        color: gray; 
    5638    border: solid 2px #204a87; 
    5739    padding: 2px; 
    5840    padding-bottom: 0px; 
    59     margin-top: 10px;  
     41    margin-top: 0px;  
    6042} 
    6143#mainwindow { 
    62 width: 85ex; /*750px */ 
    63 } 
    64 #hist { 
    65     width: 100%; /*750px; */ 
    66     font-family: "Andale Mono", courier, fixed, monospace; 
    67     font-weight: normal; 
    68     font-size: 10pt; 
    69     color: #204a87; 
    70     border: solid 0px #204a87; 
    71     background-color: #f2f2f0; 
    72     padding-bottom: 5px; 
     44        width:80%; 
    7345} 
    7446.term { 
    … …  
    8052    height:40ex; 
    8153} 
    82 #editorwindow { 
    83     height: 50ex; /*400px;*/ 
    84 } 
    85  
    8654#termwindow { 
    87     height: 45ex; /*400px;*/ 
     55    height: 100px; 
     56        display:none; 
    8857    background-color: #f2f2f0; 
    8958    border: solid 2px #204a87; 
    … …  
    9463    font-size: 11pt; 
    9564    font-weight: bold; 
    96     line-height: 12pt; 
     65    line-height: 11pt; 
    9766    color: #204a87; 
    9867    background-color: #f2f2f0; 
    99 /*        border: solid 0px #f2f2f0;*/ 
    10068} 
    10169.termfont { 
    … …  
    10371    font-size: 11pt; 
    10472    font-weight: normal; 
    105     line-height: 12pt; 
     73    line-height: 11pt; 
    10674    color: #204a87; 
    10775    background-color: #f2f2f0; 
    108 /*        border: solid 0px #f2f2f0;*/ 
    109 } 
    110 #cmdline { 
    111 width: 90%; /* sadly, Safari would need 92% */ 
    112     font-family: "Andale Mono", courier, fixed, monospace; 
    113     font-size: 11pt; 
    114     font-weight: normal; 
    115     line-height: 12pt; 
    116     color: #204a87; 
    117     background-color: #f2f2f0; 
    118         border: solid 0px #f2f2f0; 
    11976} 
    12077#output,#script { 
    … …  
    12380    font-size: 11pt; 
    12481    font-weight: normal; 
    125     line-height: 12pt; 
     82    line-height: 11pt; 
    12683    color: #204a87; 
    12784    background-color: #f2f2f0; 
    … …  
    13592    font-size: 11pt; 
    13693    font-weight: normal; 
    137     line-height: 12pt; 
     94    line-height: 11pt; 
    13895    color: #204a87; 
    13996    background-color: #f2f2f0; 
    14097    border: solid 0px #f2f2f0; 
    141 /*    border: solid 2px #204a87; 
    142     padding: 5px;*/ 
    14398} 
    144 /* Linkdefinities */ 
    14599A:link, A.bold:link { text-decoration: underline; color: #660066} 
    146100A:active, A.bold:active { text-decoration: underline; color: #6699FF} 
    … …  
    148102A:hover, A.bold:hover { text-decoration: underline; color: #000099} 
    149103A.taboff:link, A.taboff:active,A.taboff:visited {text-decoration: none; color: #333333} 
     104.cc { 
     105        font-family: 'Courier New', Monaco, Courier, monospace; 
     106        font-size: 11px; 
     107        color: white; 
     108        background-color: black; 
     109        padding: 5px; 
     110        width:100%; 
     111        line-height:1em; 
     112        height:24em; 
     113        overflow: auto; 
     114        border: 1px solid white; 
     115} 
     116pre { 
     117        color: white; 
     118        background-color: black; 
     119        margin: 0; 
     120        padding: 0; 
     121        border: none; 
     122        display:inline; 
     123} 
     124pre.wb_theme  { 
     125        color: white; 
     126        background-color: black; 
     127        margin: 0; 
     128        padding: 0; 
     129        border: none; 
     130        display:inline; 
     131} 
     132pre.gb_theme { 
     133        color: rgb(0,255,0); 
     134        background-color: black; 
     135        margin: 0; 
     136        padding: 0; 
     137        border: none; 
     138        display:inline; 
     139} 
     140pre.ab_theme { 
     141        color: rgb(255,140,0); 
     142        background-color: black; 
     143        margin: 0; 
     144        padding: 0; 
     145        border: none; 
     146        display:inline; 
     147} 
     148.note {  
     149        border-style: solid;  
     150        border-width: 1px;  
     151        border-color: #F0C000;  
     152        background-color: #FFFFCE;  
     153} 
     154span.cursorOn { 
     155        font-family: 'Courier New', Monaco, Courier, monospace; 
     156        font-size: 11px; 
     157        display:inline; 
     158        background: white; 
     159        color: white; 
     160        border:none; 
     161} 
     162span.cursorOff { 
     163        font-family: 'Courier New', Monaco, Courier, monospace; 
     164        font-size: 11px; 
     165        display:inline; 
     166        background: black; 
     167        color: black; 
     168        border:none; 
     169} 

  • misc/runpugs/htdocs/runpugs/index.html

    r17838 r17861  
    11<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    2 <html lang="en"><head> 
    3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Run Perl 6 Now -- in your browser!</title> 
    4 <link rel="stylesheet" type="text/css" href="../runpugs.css"> 
    5 <script language="javascript" src="jquery-1.2.min.js"></script> 
    6 <script language="JavaScript" src="runpugs.js"></script> 
    7 </head> 
    8 <body> 
    9 <iframe src="/perl/runpugs.pl" id="scratch" name="scratch" 
    10  style="visibility:hidden" width="700px" height="1px"   
    11 onLoad="getreply()"></iframe> 
    12 <div id="mainwindow"> 
    13 <h1>Run Perl 6 now -- in your browser!</h1> 
    14 <form id="term" name="terminal" action="" method="post">                   
    15 <input name="prompt" value=" " type="hidden"> 
    16 <input name="sessionid" value="" type="hidden"> 
    17 <input name="ia" value="1" type="hidden"> 
    18 <input name="action" value="runpugs" type="hidden"> 
    19 <input id="rel" value="0" name="reldev" type="radio" 
    20 onClick="set_version()"><label for="rel">Release version</label>&nbsp;&nbsp; 
    21 <input id="dev" value="1" name="reldev" checked="checked" type="radio" onClick="set_version()"><label for="dev">Development version</label> 
    22 <div id="termwindow"> 
    23 <textarea id="cmd" name="cmd" rows="20" cols="80" wrap="virtual">Please wait while Pugs starts up...</textarea> 
    24 </div> 
    25 </form> 
    26 <script language="JavaScript"> 
    27 document.terminal.cmd.focus() // _SKIPC_ 
    28 document.terminal.cmd.scrollTop =document.terminal.cmd.scrollHeight; // _SKIPC_ 
    29 nchars=document.terminal.cmd.value.length; 
    30 </script> 
    31 <p>This live web terminal runs the <a href="http://www.pugscode.org/">Pugs</a> 
    32 interpreter for <a href="http://dev.perl.org/perl6/">Perl&nbsp;6</a>. 
    33 <!--<p>This is the development version, featuring asynchronous JavaScript, 
    34 mod_perl and preloaded pugs sessions.</p>--> 
    35 Please <a href="http://feather.perl6.nl/%7Eandara/runpugs/">read the documentation</a>. 
    36 </p> 
    37 <p class="copyright">&copy; Copyright 2006 by Wim.Vanderbauwhede. Contact me @ gmail.com<./p> 
    38 </div> 
    39 </body></html> 
     2<html lang="en"> 
     3    <head> 
     4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     5        <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> 
     9    </head> 
     10    <body> 
     11        <iframe src="/perl/runpugs.pl" id="scratch" name="scratch" style="visibility:hidden"  
     12        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 &amp; 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>&nbsp;&nbsp; 
     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&nbsp;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">&copy; Copyright 2006 by Wim.Vanderbauwhede. Contact me @ gmail.com</p> 
     71            </div> 
     72        </div> 
     73    </body> 
     74</html> 

  • misc/runpugs/htdocs/runpugs/runpugs.js

    r17838 r17861  
    1 var nchars=0; 
    21var histlist=new Array(); 
    32var histentry=0; 
    43var reply=""; 
    54var sessionid=0; 
    6 var reldev=1; 
     5var reldev=0; 
     6 
     7var curpos=0; 
     8var cmd = ""; 
     9var prompt = "pugs> "; 
     10var cmds = new Array(); 
     11var theme = "wb_theme"; 
    712 
    813$(window).unload(function() { 
    914        //send :q to pugs on onload 
    1015        $.ajax({ 
    11                 url: '/perl/runpugs.pl?sessionid='+sessionid+'&reldev=1&ia=1&cmd=%3Aq', 
    12                 async: false 
    13         });                 
     16                url: "/perl/runpugs.pl?" + "sessionid=" + sessionid +  
     17        "&reldev=1&ia=1&cmd=%3Aq", 
     18                async: true 
     19        }); 
    1420}); 
     21 
     22function showCursor() { 
     23    var cursorEl = "#d" + (cmds.length - 1); 
     24    $(cursorEl).toggleClass('cursorOff'); 
     25    $(cursorEl).toggleClass('cursorOn'); 
     26    setTimeout('showCursor()',1000); 
     27} 
     28 
     29function updateConsole() { 
     30    $("#tt").empty(); 
     31    $.each(cmds,function(i,n) { 
     32        var l = (n == "") ? "&nbsp;" : n; 
     33        $("#tt").append( 
     34        "<tr><td><pre id='c" + i + "' class='"+ theme +"'>" +  
     35        l + "</pre><span id='d" + i +  
     36        "' class='cursorOff'>&nbsp;</span></td></tr>" 
     37        ); 
     38    }); 
     39    var lastId = (cmds.length - 1); 
     40    var cmdEl = "#c" + lastId; 
     41    var cursorEl = "#d" + lastId; 
     42     
     43    var scrollHeight = $("#termwin")[0].scrollHeight; 
     44    $("#termwin").animate({ scrollTop: scrollHeight }, "fast") 
     45} 
     46 
    1547$(document).ready( function() { 
    1648        //document is ready now... 
    17         $('#cmd').keydown(function(event) { 
    18                 return process_events(event.keyCode); 
    19         }); 
     49    $("#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'>&nbsp;</span></td></tr>"); 
     53     
     54    $("#theme").change(function() { 
     55        $("pre").toggleClass(theme); 
     56        theme = $("#theme").val(); 
     57        $("pre").toggleClass(theme);     
     58    }); 
     59    $("#logo").slideDown(2000); 
     60     
     61    showCursor(); 
    2062}); 
    2163 
    … …  
    2365 
    2466 
    25 function getnchars() { 
    26     return document.terminal.cmd.value.length 
    27 } 
    2867 
    29 function getcursorpos() { 
    30         var obj=document.terminal.cmd; 
    31         if(document.selection) { 
    32         obj.focus();                     
    33                 var rng=document.selection.createRange();                        
    34         rng.moveStart('textedit',-1); 
    35 //        rng.moveEnd('character',getnchars()); 
    36                 return rng.text.length; 
    37         } else if(obj.selectionStart) { // FireFox 
    38         var start = obj.selectionStart; 
    39         var end   = obj.selectionEnd; 
    40                 if (start<=end) { 
    41                         return start; 
    42                 } else { 
    43                         return end; 
    44            } 
    45         } 
    46 } 
     68$(document).keydown(function(event) { 
     69    var keyCode = event.keyCode; 
     70    var cmdEl = "#c" + (cmds.length - 1); 
    4771 
    48 function setcursorpos() { 
    49         var obj=document.terminal.cmd; 
    50         if(document.selection) { 
    51         obj.focus();                     
    52                 var rng=document.selection.createRange();                        
    53         rng.moveStart('character',0); 
    54         rng.moveEnd('textedit'); 
    55 //              rng.select(); 
    56         } else if(obj.selectionStart>=0) { // FireFox 
    57                 obj.selectionStart=nchars; 
    58            obj.selectionEnd=nchars; 
    59         } 
    60 } 
     72    var scrollHeight = $("#termwin")[0].scrollHeight; 
     73    $("#termwin").animate({ scrollTop: scrollHeight }, "fast"); 
    6174 
    62 function process_events (keycode) { 
    63     if (keycode == 13) { 
    64         var cmd=document.terminal.cmd.value; 
    65        //cmd.replace(/^.*pugs\>\ /, ""); 
    66         var cmds=cmd.split('pugs> '); 
    67         var lastCmd=cmds[cmds.length-1]; 
    68         if($.trim(lastCmd) != "") { 
    69                 histlist.push(lastCmd); 
    70         } 
    71         frames['scratch'].document.getElementById("cmd").value=cmd; 
     75    if(keyCode == 13) { 
     76        //enter 
     77        var sessCmds=document.terminal.cmd.value + "\n" + prompt + cmd; 
     78        var tmpCmds=sessCmds.split('pugs> '); 
     79        var tmpCmd=tmpCmds[tmpCmds.length-1]; 
     80        if($.trim(tmpCmd) != "") { 
     81            histlist.push(tmpCmd); 
     82        } 
     83        frames['scratch'].document.getElementById("cmd").value=sessCmds; 
    7284        frames['scratch'].document.terminal.submit();  
     85        cmd = ""; 
    7386        return false; 
    74     } else if (keycode==38) { 
     87    } else if(keyCode == 8) { 
     88        //backspace 
     89        if(curpos > 0) { 
     90            curpos -=1 
     91            cmd = cmd.substring(0,cmd.length-1); 
     92            $(cmdEl).text(prompt + cmd); 
     93        } 
     94        return false; 
     95    } else if(keyCode == 38) { 
     96        //up 
    7597        hist_next(); 
    76         setcursorpos(); 
     98         
    7799        return false; 
    78     } else if (keycode==40) { 
     100    } else if(keyCode == 40) { 
     101        //down 
    79102        hist_prev(); 
     103        $(cmdEl).text(prompt + cmd); 
    80104        return false; 
    81     } else if ((keycode==8)||(keycode==37)||(keycode==46)) { 
    82         if ((getnchars()>nchars) && (getcursorpos() > nchars)) { 
    83             return true; 
    84         } else { 
    85         setcursorpos(); 
    86             return false; 
     105    } /*else if(keyCode == 37) { 
     106        //left 
     107        $("#status").text("left not implemented"); 
     108        return false; 
     109    } else if(keyCode == 39) { 
     110        //right 
     111        $("#status").text("right not implemented"); 
     112        return false; 
     113    } else if(keyCode == 36) { 
     114        //home 
     115        //curpos = 0; 
     116        $("#status").text("home not implemented"); 
     117        return false; 
     118     
     119    } else if(keyCode == 35) { 
     120        //end 
     121        $("#status").text("end not implemented"); 
     122        return false; 
     123   
     124    } */ 
     125       
     126      return true; 
     127}); 
     128$(document).keypress(function(event) { 
     129 
     130    var scrollHeight = $("#termwin")[0].scrollHeight; 
     131    $("#termwin").animate({ scrollTop: scrollHeight }, "fast"); 
     132 
     133    var keyCode = event.keyCode; 
     134    var cmdEl = "#c" + (cmds.length - 1); 
     135    if($.browser.msie || $.browser.opera) { 
     136        var key = String.fromCharCode(keyCode); 
     137        if(key >= ' ') { 
     138            if(($.browser.opera && (keyCode < 35 || keyCode > 40)) || $.browser.msie) { 
     139                cmd += key;    
     140                $(cmdEl).text(prompt + cmd); 
     141                curpos++; 
     142            } 
    87143        } 
    88     } else { 
    89     if(keycode) { 
    90         return true; 
    91         } else {  
    92144        return false; 
    93         } 
     145    }else if($.browser.mozilla && keyCode == 0) { 
     146        var key = String.fromCharCode(event.charCode ? event.charCode : event.keyCode); 
     147        cmd += key;    
     148        $(cmdEl).text(prompt + cmd); 
     149        curpos++; 
     150        return false; 
    94151    } 
    95 } 
     152    return true; 
     153}); 
     154 
    96155 
    97156function getreply () { 
    98     scratchpad=frames['scratch'].document;//.contentDocument; 
     157    scratchpad=frames['scratch'].document; 
    99158    reply=scratchpad.getElementById("cmd").value; 
    100159    histentry=histlist.length; 
    101160    sessionid=scratchpad.terminal.sessionid.value; 
    102161    document.terminal.cmd.value=reply; 
    103     document.terminal.cmd.focus()  
    104     document.terminal.cmd.scrollTop =document.terminal.cmd.scrollHeight; 
    105     nchars=document.terminal.cmd.value.length; 
     162 
     163        cmds = reply.replace(/ /g,'&nbsp;').split(/\r\n|\n|\r/g); 
     164    updateConsole(); 
    106165} 
    107166 
    108167function hist_next () { 
    109168    if (histentry>=1) { 
    110         histentry-=1; 
    111         document.terminal.cmd.value=reply+histlist[histentry]; 
    112         document.terminal.cmd.scrollTop =document.terminal.cmd.scrollHeight;  
     169        histentry--; 
     170        cmd=histlist[histentry]; 
     171        curpos=cmd.length; 
     172        var cmdEl = "#c" + (cmds.length - 1); 
     173        $(cmdEl).text(prompt + cmd); 
    113174    } 
    114175    return false; 
    … …  
    117178function hist_prev () { 
    118179    if (histentry<histlist.length-1) { 
    119         histentry+=1; 
    120         document.terminal.cmd.value=reply+histlist[histentry]; 
    121         document.terminal.cmd.scrollTop =document.terminal.cmd.scrollHeight;  
     180        histentry++; 
     181        cmd=histlist[histentry]; 
     182        curpos=cmd.length; 
     183        var cmdEl = "#c" + (cmds.length - 1); 
     184        $(cmdEl).text(prompt + cmd); 
    122185    } 
    123186}