scroll console window to the bottom after every command

- uses script.aculo.us for now
jschementi · May 25, 2008 · e02d20f · e02d20f
1 parent 4a2ba3b
commit e02d20f
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 5 deletions.
diff --git a/app/views/layouts/tryruby.html.erb b/app/views/layouts/tryruby.html.erb
@@ -7,6 +7,7 @@
   <title>TryRuby: <%= controller.action_name %></title>
   <%= stylesheet_link_tag 'scaffold' %>
   <%= silverlight_include_tag :defaults %>
+  <%= javascript_include_tag :defaults %>
 </head>
 <body>
 

diff --git a/app/views/tryruby/_evaluator.rb b/app/views/tryruby/_evaluator.rb
@@ -33,10 +33,11 @@ def next_instruction
 
 def hook_run
   document.run.onclick do |s, a|
-    document.loading.innerHTML = 'evaluating ...'
+    document.loading.innerHTML = "<img src='/images/loading.gif' alt='evaluating ...' />"
     compute
     move_on
     document.loading.innerHTML = ''
+    HtmlPage.window.eval "moveTo('console', 'code')"
   end
 end
 

diff --git a/app/views/tryruby/basic.html.erb b/app/views/tryruby/basic.html.erb
@@ -64,22 +64,88 @@ h1 {
 }
 </style>
 
+<!-- TODO: remove this when I can hook HTML keyboard events properly -->
+<script type="text/javascript">
+  function submitenter(myField, e) {
+    var keycode;
+    if(window.event) {
+      keycode = window.event.keyCode;
+    } else if(e) {
+      keycode = e.which;
+    } else {
+      return true;
+    }
+
+    if(keycode == 13) {
+      document.getElementById('run').click();
+      return false;
+    } else {
+      return true;
+    }
+  }
+</script>
+
+<!-- Scrolling that uses script.aculo.us (port to SL?) -->
+<script type="text/javascript">
+  Effect.Scroll = Class.create(); 
+  Object.extend(Object.extend(Effect.Scroll.prototype, Effect.Base.prototype), { 
+    initialize: function(element) { 
+      this.element = $(element); 
+      var options = Object.extend({ 
+        x:    0, 
+        y:    0, 
+        mode: 'absolute' 
+      } , arguments[1] || {}  ); 
+      this.start(options); 
+    }, 
+    setup: function() { 
+      if (this.options.continuous && !this.element._ext ) { 
+        this.element.cleanWhitespace(); 
+        this.element._ext=true; 
+        this.element.appendChild(this.element.firstChild); 
+      } 
+
+      this.originalLeft=this.element.scrollLeft; 
+      this.originalTop=this.element.scrollTop; 
+
+      if(this.options.mode == 'absolute') { 
+        this.options.x -= this.originalLeft; 
+        this.options.y -= this.originalTop; 
+      } else { 
+
+      } 
+    }, 
+    update: function(position) {     
+      this.element.scrollLeft = this.options.x * position + this.originalLeft; 
+      this.element.scrollTop  = this.options.y * position + this.originalTop; 
+    } 
+  }); 
+
+  function moveTo(container, element) {
+    Position.prepare();
+    container_y = Position.cumulativeOffset($(container))[1]
+    element_y = Position.cumulativeOffset($(element))[1]
+    new Effect.Scroll(container, {x:0, y:(element_y-container_y)});
+    return false;
+  }
+</script>
+
 <h1>Try IronRuby: basic</h1>
 <div class="warning">
   <b>Very early prototype</b>: Only tested in Firefox, and there is no error handling, so 
-  any error will just hang with "evaluating ..." until you type something that executes 
-  successfully. Also, the up-arrow doesn't cycle through previous commands, though you 
+  any error will just hang with "..." until you type something that executes 
+  successfully. Also, the up-arrow doesn't cycle through previous commands, though sometimes you 
   will get browser auto-complete once you start typing. =)
 </div>
 
 <div id="console">
   <div id="result"></div>
-  <span id="prompt">&raquo;&nbsp;</span><form id="run_form" action="javascript:void(0)"><input type="text" id="code" /><input type="submit" id="run" value="Run" /></form>
+  <span id="prompt">&raquo;&nbsp;</span><form id="run_form" action="javascript:void(0)"><input type="text" id="code" onkeypress="return submitenter(this, event)" /><input type="submit" id="run" value="Run" /></form>
   <span id="loading"></span>
 </div>
 <div id="tutorial">
   <h2>Tutorial</h2>
   <div id="instructions">
-    <em>Loading ...</em>
+    <img src="/images/loading2.gif" alt="Loading ..." />
   </div>
 </div>