- add animated scrolling to the demo

- fix infinite loop
- fix some typos

demo/kitchen-sink/demo.js

@@ -301,6 +301,7 @@ var showGutterEl = document.getElementById("show_gutter");
 var showPrintMarginEl = document.getElementById("show_print_margin");
 var highlightSelectedWordE = document.getElementById("highlight_selected_word");
 var showHScrollEl = document.getElementById("show_hscroll");
+var animateScrollEl = document.getElementById("animate_scroll");
 var softTabEl = document.getElementById("soft_tab");
 var behavioursEl = document.getElementById("enable_behaviours");
 
@@ -357,6 +358,7 @@ function updateUIEditorOptions() {
     showPrintMarginEl.checked = editor.renderer.getShowPrintMargin();
     highlightSelectedWordE.checked = editor.getHighlightSelectedWord();
     showHScrollEl.checked = editor.renderer.getHScrollBarAlwaysVisible();
+    animateScrollEl.checked = editor.getAnimatedScroll();
     softTabEl.checked = session.getUseSoftTabs();
     behavioursEl.checked = editor.getBehavioursEnabled();
 }
@@ -440,6 +442,10 @@ bindCheckbox("show_hscroll", function(checked) {
     env.editor.renderer.setHScrollBarAlwaysVisible(checked);
 });
 
+bindCheckbox("animate_scroll", function(checked) {
+    env.editor.setAnimatedScroll(checked);
+});
+
 bindCheckbox("soft_tab", function(checked) {
     env.editor.getSession().setUseSoftTabs(checked);
 });

kitchen-sink.html

@@ -132,6 +132,13 @@
         <input type="checkbox" name="show_hscroll" id="show_hscroll">
       </td>
     </tr>
+    <tr>
+      <td >
+        <label for="animate_scroll">Animate scrolling</label>
+      </td><td>
+        <input type="checkbox" name="animate_scroll" id="animate_scroll">
+      </td>
+    </tr>
     <tr>
       <td >
         <label for="keybinding">Key Binding</label>

lib/ace/editor.js

@@ -608,11 +608,11 @@ var Editor = function(renderer, session) {
 
     this.setAnimatedScroll = function(shouldAnimate){
         this.renderer.setAnimatedScroll(shouldAnimate);
-    }
+    };
 
     this.getAnimatedScroll = function(){
-        this.rendered.getAnimatedScroll();
-    }
+        this.renderer.getAnimatedScroll();
+    };
 
     this.setShowInvisibles = function(showInvisibles) {
         if (this.getShowInvisibles() == showInvisibles)

lib/ace/virtual_renderer.js

@@ -285,11 +285,11 @@ var VirtualRenderer = function(container, theme) {
 
     this.setAnimatedScroll = function(shouldAnimate){
         this.$animatedScroll = shouldAnimate;
-    }
+    };
 
-    this.getAnimatedscroll = function(){
-        return this.$animatedScroll
-    }
+    this.getAnimatedScroll = function(){
+        return this.$animatedScroll;
+    };
 
     this.setShowInvisibles = function(showInvisibles) {
         if (this.$textLayer.setShowInvisibles(showInvisibles))
@@ -747,15 +747,14 @@ var VirtualRenderer = function(container, theme) {
             offset -= this.$size.scrollerHeight / 2;
 
         if (this.$animatedScroll && Math.abs(offset - this.scrollTop) < 10000) {
-            var i = 0;
             var _self = this;
             var steps = _self.$calcSteps(this.scrollTop, offset);
 
-            clearInterval(_self.$timer);
+            clearInterval(this.$timer);
             this.$timer = setInterval(function() {
-                _self.session.setScrollTop(steps[i]);
+                _self.session.setScrollTop(steps.shift());
                 
-                if (++i == this.STEPS + 1)
+                if (!steps.length)
                     clearInterval(_self.$timer);
             }, 10);
         }