Changeset 18095 for misc/runpugs

Timestamp:

09/22/07 11:27:13 (14 months ago)

Author:

azawawi

Message:

[runpugs] :tutorial functionality added
[runpugs] :next, :back tutorial functionality added
[runpugs] Passed w3c xhtml 1.0 transitional validation
[runpugs] information text loads dynamically on $(document).ready

Location:

misc/runpugs/htdocs

Files:

• runpugs.css (modified) (4 diffs)
• runpugs/index.html (modified) (2 diffs)
• runpugs/runpugs.js (modified) (4 diffs)

misc/runpugs/htdocs/runpugs.css

@@ -1 +1 @@
 body {
         font:13px arial,helvetica,clean,sans-serif;
-        width:100%;
-        margin-left:10%;margin-right:0%; margin-top: 0px; 
+        width:85%;
+        margin-left:10%;margin-right:0%; margin-top: 0px;
         line-height: normal; 
 }
@@ -13 +13 @@
     background-color: #204a87;
         margin: 0px;
-    padding: 0px;
+    padding: 2px;
         text-align: center;
 }
-H2 { font-weight: bold; font-size: 11pt}
+H2 { font-weight: bold; font-size: 11pt; margin: 0px; padding: 0px;}
 EM { font-weight: bold; font-style: normal; text-decoration:none;}
+code {
+        font-family: 'Courier New', Monaco, Courier, monospace;
+        background-color: black;
+        color: white;
+}
 TT {color: #204a87; font-weight: bold; }
 LABEL {font-weight: normal; }
@@ -116 +121 @@
 }
 pre {
+        background-color: black;
         color: white;
-        background-color: transparent;
         margin: 0;
-        padding: 0;
+        padding: 5px;
         border: none;
-        display:inline;
 }
 pre.wb_theme  {
@@ -146 +150 @@
         border: none;
         display:inline;
-}
-.note { 
-        font:13px arial,helvetica,clean,sans-serif;
-        border-style: solid; 
-        border-width: 1px; 
-        border-color: #F0C000; 
-        background-color: #FFFFCE; 
 }
 span.cursorOn {

misc/runpugs/htdocs/runpugs/index.html

@@ -26 +26 @@
                     <input name="ia" value="1" type="hidden"/>
                     <input name="action" value="runpugs" type="hidden"/>
-                    <input id="rel" value="1" name="reldev" type="radio" checked="checked" onClick="set_version()"/>
+                    <input id="rel" value="1" name="reldev" type="radio" checked="checked" onclick="set_version()"/>
                     <label for="rel"><strong>Release version</strong></label>&nbsp;&nbsp;
-                    <input id="dev" value="1" name="reldev" type="radio" onClick="set_version()"/>
+                    <input id="dev" value="1" name="reldev" type="radio" onclick="set_version()"/>
                     <label for="dev"><strong>Development version</strong></label>
                 </div>
@@ -41 +41 @@
                 </div>
                 <div id='status'></div>
-                <div class='note' style='padding: 5px;'>
-                    This live web terminal runs the <a href="http://www.pugscode.org/">Pugs</a>
-                    interpreter for <a href="http://dev.perl.org/perl6/">Perl&nbsp;6</a>.
-                    This is the development version, featuring asynchronous jQuery AJAX,
-                    mod_perl and preloaded pugs sessions.
-                    <h2>Instructions</h2>
-                    <code>runpugs</code> presents the pugs interactive shell. <code>runpugs</code>-specific commands:
-                    <dl>
-                    <dt><code>help</code></dt><dd> displays the Pugs shell help (same as
-                    <code>:h</code>)</dd>
-                    <dt><code>clear</code></dt><dd>clears the web terminal (this command is not sent to the
-                    pugs shell).</dd>
-                    <dt><code>quit</code>, <code>bye</code></dt><dd>quit the Pugs session (same as
-                    <code>:q</code>)</dd>
-                    </dl>
-                    <p>Please be considerate and do <em>quit</em> your
-                    pugs session  before you close the browser window.
-                    </p>
-                    <h2>Restrictions</h2>
-                    Because this is a web terminal, a number of restrictions apply. 
-                    Please <a href="http://feather.perl6.nl/%7Eandara/runpugs/">read the documentation</a> for more information.
-                    <br/><br/>
-                    <div class="copyright">&copy; Copyright 2006 by Wim.Vanderbauwhede. Contact me @ gmail.com<br/>
-                        &nbsp;&nbsp;&nbsp;&nbsp;Enhanced web terminal by Ahmad.Zawawi. Contact me @ gmail.com
-                    </div>
-                </div>
+                <!-- info text will get loaded in $.onReady() -->
+                <div id='info' style='padding: 3px;'></div>
             </form>
         </div>
-        <br/>
+        <div class="copyright">&copy; Copyright 2006 by Wim.Vanderbauwhede. Contact me @ gmail.com<br/>
+            &nbsp;&nbsp;&nbsp;&nbsp;Enhanced web terminal by Ahmad.Zawawi. Contact me @ gmail.com
+        </div>
         <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" 
                 alt="Valid XHTML 1.0!" height="31" width="88" border="0" /></a>
         <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="http://jigsaw.w3.org/css-validator/images/vcss" 
                alt="Valid CSS!" height="31" width="88" border="0"/></a>
+        <!-- hidden iframe is now inserted $(document).ready() -->
         <div id="hidden_iframe"></div>
-        <!--
-        //This is now inserted automatically by jQuery to start loading things after $(document).ready()
-        <iframe src="/perl/runpugs.pl" id="scratch" name="scratch" style="visibility:hidden" 
-        width="700px" height="1px" onLoad="getreply()"></iframe>
-        -->
     </body>
 </html>

misc/runpugs/htdocs/runpugs/runpugs.js

@@ -13 +13 @@
 var fixedCharWidth;
 
+//for tutorials & school ;-)
+var tutorialMode = 0;
+var slide = 0;
+var slides = new Array(
+    'default_info.html',
+    'tutorial/01_helloworld.html',
+    'tutorial/02_vars.html',
+    'tutorial/03_iteration_array.html',
+    'tutorial/04_iteration_hash.html',
+    'tutorial/05_iteration_many.html',
+    'tutorial/06_conditionals.html',
+    'tutorial/07_junctions.html',
+    'tutorial/08_junctions_array.html',
+    'tutorial/09_chained_comparison.html',
+    'tutorial/10_io.html',
+    'tutorial/11_io_iteration.html',
+    'tutorial/12_io_reading.html',
+    'tutorial/13_lists_reduction.html',
+    'tutorial/14_lists_hyper.html',
+    'tutorial/15_lists_cross.html',
+    'tutorial/16_grammar.html',
+    'tutorial/17_final.html'
+);
+
+ 
 //show the cursor
 function showCursor() {
@@ -95 +120 @@
     });
 
+    //load default text into element id 'info'
+    loadSlide();
+
     //start loading pugs session after page has loaded...
     $("#hidden_iframe").append(
@@ -102 +130 @@
 });
 
+//load a slide into #info with an slideup/slidedown effect
+function loadSlide() {
+    if(debug) {
+        alert("slide url to be loaded = '" + slides[slide] + "'");
+    }
+    $("#info").slideUp("fast");
+    $.ajax({
+        url: slides[slide],
+        async: true,
+        success: function(data) {
+            if(debug) {
+                alert("slide data received: " + data);
+            }
+            $("#info").html(data);
+            $("#info").slideDown("slow");
+        }
+    });
+}
+
 //insert character 'ch' at index 'pos' in string str 
 //and return the result
@@ -133 +180 @@
         var tmpCmds=sessCmds.split(prompt);
         var tmpCmd=tmpCmds[tmpCmds.length-1];
-        if($.trim(tmpCmd) != "") {
+        var trimTmpCmd = $.trim(tmpCmd);
+        if(trimTmpCmd != "") {
             histlist.push(tmpCmd);
         }
-        
+
+        //for tutorial, back, next support
+        if(trimTmpCmd == ":tutorial") {
+            tutorialMode = !tutorialMode;
+            slide = (tutorialMode) ? 1 : 0;
+            loadSlide();
+        }
+        if(trimTmpCmd == ":back" || trimTmpCmd == ":next") {
+            if(tutorialMode) {
+                if(trimTmpCmd == ":back") {
+                    slide--;
+                    if(slide < 1) {
+                        slide = 1;
+                    }
+                    loadSlide(slide);
+                } else {
+                    //next command
+                    slide++;
+                    if(slide >= slides.length) {
+                        slide--;
+                    }
+                    loadSlide(slide);
+                }
+            }
+        }
         if(debug) {
             alert("data to be sent: " + sessCmds);