From 81508772f378f44715a17ccd51b63c2a86c4028a Mon Sep 17 00:00:00 2001
From: C9 <matt@c9.io>
Date: Fri, 30 Nov 2012 04:58:21 -0500
Subject: [PATCH] Initial support for scrolling

---
 demo/kitchen-sink/demo.js     |  26 +++++--
 kitchen-sink.html             |   3 +-
 lib/ace/css/editor.css        |  16 +++++
 lib/ace/layer/mobilescroll.js | 129 ++++++++++++++++++++++++++++++++++
 lib/ace/virtual_renderer.js   |   8 +++
 5 files changed, 174 insertions(+), 8 deletions(-)
 create mode 100644 lib/ace/layer/mobilescroll.js

diff --git a/demo/kitchen-sink/demo.js b/demo/kitchen-sink/demo.js
index 7a2008e8..3f9eaafc 100644
--- a/demo/kitchen-sink/demo.js
+++ b/demo/kitchen-sink/demo.js
@@ -394,11 +394,9 @@ bindCheckbox("highlight_token", function(checked) {
 });
 
 bindCheckbox("mobile_mode", function(checked) {
-    //var editor = env.editor;
     /** Mobile test **/
     if (checked) {
         var editorElement = document.getElementById("editor");
-        var editorElementChild = editorElement.childNodes[0];
 
         var left = editorElement.offsetLeft;
         var height = editorElement.style.height;
@@ -407,7 +405,7 @@ bindCheckbox("mobile_mode", function(checked) {
 
         var mobileScrollDiv = document.createElement("div");
         mobileScrollDiv.id = "scrolldiv_container";
-        mobileScrollDiv.style.width = width + "px";
+        mobileScrollDiv.style.width = (width+30) + "px";
         //mobileScrollDiv.style.left = left + "px";
         mobileScrollDiv.style.height = height;
 
@@ -419,6 +417,8 @@ bindCheckbox("mobile_mode", function(checked) {
 
         var movementDiff = 0, lastMovementPos = 0;
         var timeDiff = 0, lastTime = 0;
+        var waitingForLastScroll = false;
+
         document.addEventListener("touchmove", function(e) {
             //console.log("     TOUCHMOVE", e, mobileScrollDiv.scrollTop);
             movementDiff = mobileScrollDiv.scrollTop - lastMovementPos;
@@ -430,24 +430,30 @@ bindCheckbox("mobile_mode", function(checked) {
         var movingTimer;
         document.addEventListener("touchstart", function(e) {
             if (e.target.className.split(" ").indexOf("ace_content") !== -1) {
-                if (movingTimer)
-                    clearInterval(movingTimer);
+                clearInterval(movingTimer);
 
+                waitingForLastScroll = false;
+                movementDiff = 0, lastMovementPos = 0;
+                timeDiff = 0, lastTime = 0;
                 //console.log("touchstart", e);
             }
         }, false);
         document.addEventListener("touchend", function(e) {
             if (e.target.className.split(" ").indexOf("ace_content") !== -1) {
+                waitingForLastScroll = true;
+
                 //console.log("TOUCH END", e);
                 //console.log(movementDiff, timeDiff);
                 var position = mobileScrollDiv.scrollTop;
                 //var velocity = (movementDiff/timeDiff) * 4;
                 var velocity = movementDiff;
+
                 movingTimer = setInterval(function() {
                     position += velocity;
-                    velocity *= 0.94;
+                    velocity *= 0.949;
                     //console.log(velocity);
                     env.editor.session.setScrollTop(position);
+                    mobileScrollDiv.scrollTop = position;
                     if (Math.abs(velocity) < 4)
                         clearInterval(movingTimer);
                 }, 5);
@@ -456,7 +462,13 @@ bindCheckbox("mobile_mode", function(checked) {
 
         mobileScrollDiv.onscroll = function(e) {
             //console.log("Scrolling", e, mobileScrollDiv.scrollTop);
-            env.editor.session.setScrollTop(mobileScrollDiv.scrollTop);
+            if (waitingForLastScroll === false) {
+                env.editor.session.setScrollTop(mobileScrollDiv.scrollTop);
+            }
+            // Set the top of the scrolldiv to what the editor scrolltop is
+            /*else {
+                mobileScrollDiv.scrollTop = env.editor.session.getScrollTop();
+            }*/
         };
     }
     else {
diff --git a/kitchen-sink.html b/kitchen-sink.html
index 9164cbbe..dc205075 100644
--- a/kitchen-sink.html
+++ b/kitchen-sink.html
@@ -5,6 +5,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Ace Kitchen Sink</title>
     <meta name="author" content="Fabian Jakobs">
+    <meta name="viewport" content="user-scalable=no">
     <!--
     Ace
       version %version%
@@ -27,7 +28,7 @@
     <img id="logo" src="demo/kitchen-sink/logo.png">
   </a> 
   <div style="position: absolute; overflow: hidden; top:80px; bottom:0">
-  <div style="width: 120%; height:100%; overflow-y: scroll">
+  <div style="width: 120%; height:100%; overflow-y: scroll; -webkit-overflow-scrolling: touch">
 
   <table id="controls">
     <tr>
diff --git a/lib/ace/css/editor.css b/lib/ace/css/editor.css
index 73702bdf..e5fa8166 100644
--- a/lib/ace/css/editor.css
+++ b/lib/ace/css/editor.css
@@ -366,3 +366,19 @@
 .ace_italic {
     font-style: italic;
 }
+
+.ace_mobile_scroll-layer {
+    -webkit-overflow-scrolling: touch;
+    overflow-y: scroll;
+}
+
+.ace_mobile_scroll-layer div {
+    z-index: 1;
+    position: absolute;
+    white-space: nowrap;
+    width: 100%;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    pointer-events: none;
+}
\ No newline at end of file
diff --git a/lib/ace/layer/mobilescroll.js b/lib/ace/layer/mobilescroll.js
new file mode 100644
index 00000000..631a2d87
--- /dev/null
+++ b/lib/ace/layer/mobilescroll.js
@@ -0,0 +1,129 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Distributed under the BSD license:
+ *
+ * Copyright (c) 2010, Ajax.org B.V.
+ * All rights reserved.
+ * 
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *     * Redistributions of source code must retain the above copyright
+ *       notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above copyright
+ *       notice, this list of conditions and the following disclaimer in the
+ *       documentation and/or other materials provided with the distribution.
+ *     * Neither the name of Ajax.org B.V. nor the
+ *       names of its contributors may be used to endorse or promote products
+ *       derived from this software without specific prior written permission.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+define(function(require, exports, module) {
+"use strict";
+
+var dom = require("../lib/dom");
+
+var MobileScroll = function(parentEl) {
+    this.parentOverflowEl = dom.createElement("div");
+    this.parentOverflowEl.className = "ace_layer ace_mobile_scroll-layer";
+    this.element = dom.createElement("div");
+    this.parentOverflowEl.appendChild(this.element);
+    parentEl.appendChild(this.parentOverflowEl);
+
+    var _self = this;
+
+    var movementDiff = 0, lastMovementPos = 0;
+    var timeDiff = 0, lastTime = 0;
+    var waitingForLastScroll = false;
+    var stopInertialScrolling = false;
+
+    this.parentOverflowEl.onscroll = function(e) {
+        if (stopInertialScrolling) {
+            _self.parentOverflowEl.scrollTop = _self.session.getScrollTop();
+            return false;
+        }
+
+        if (_self.session)
+            _self.session.setScrollTop(_self.parentOverflowEl.scrollTop);
+    };
+
+    document.addEventListener("touchmove", function(e) {
+        movementDiff = _self.parentOverflowEl.scrollTop - lastMovementPos;
+        lastMovementPos = _self.parentOverflowEl.scrollTop;
+
+        timeDiff = e.timeStamp - lastTime;
+        lastTime = e.timeStamp;
+    });
+
+    var movingTimer;
+    var touchStartedWithAce = false;
+    document.addEventListener("touchstart", function(e) {
+        if (e.target.className.split(" ").indexOf("ace_content") === -1)
+            return true;
+
+        touchStartedWithAce = true;
+        stopInertialScrolling = false;
+
+        clearInterval(movingTimer);
+
+        waitingForLastScroll = false;
+        movementDiff = 0, lastMovementPos = 0;
+        timeDiff = 0, lastTime = 0;
+    }, false);
+
+    document.addEventListener("touchend", function(e) {
+        if (!touchStartedWithAce)
+            return true;
+        touchStartedWithAce = false;
+        waitingForLastScroll = true;
+
+        var position = _self.parentOverflowEl.scrollTop;
+        var velocity = movementDiff;
+
+        movingTimer = setInterval(function() {
+            position += velocity;
+            velocity *= 0.949;
+            _self.session.setScrollTop(position);
+            _self.parentOverflowEl.scrollTop = position;
+            if (Math.abs(velocity) < 4) {
+                clearInterval(movingTimer);
+                stopInertialScrolling = true;
+            }
+        }, 5);
+    }, false);
+};
+
+(function() {
+    this.setSession = function(session) {
+        this.session = session;
+    };
+
+    this.$padding = 0;
+    this.setPadding = function(padding) {
+        this.$padding = padding;
+        this.element.style.padding = "0 " + padding + "px";
+    };
+
+    this.setScrollTop = function(top) {
+        this.parentOverflowEl.scrollTop = top;
+    };
+
+    this.update = function(config) {
+        this.element.style.height = config.lineHeight * this.session.getScreenLength() + "px";
+    };
+
+}).call(MobileScroll.prototype);
+
+exports.MobileScroll = MobileScroll;
+
+});
diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js
index b2331de4..8b5cca57 100644
--- a/lib/ace/virtual_renderer.js
+++ b/lib/ace/virtual_renderer.js
@@ -41,6 +41,7 @@ var GutterLayer = require("./layer/gutter").Gutter;
 var MarkerLayer = require("./layer/marker").Marker;
 var TextLayer = require("./layer/text").Text;
 var CursorLayer = require("./layer/cursor").Cursor;
+var MobileScrollLayer = require("./layer/mobilescroll").MobileScroll;
 var ScrollBar = require("./scrollbar").ScrollBar;
 var RenderLoop = require("./renderloop").RenderLoop;
 var EventEmitter = require("./lib/event_emitter").EventEmitter;
@@ -104,6 +105,8 @@ var VirtualRenderer = function(container, theme) {
     this.$markerFront = new MarkerLayer(this.content);
 
     this.$cursorLayer = new CursorLayer(this.content);
+    
+    this.$mobileScrollLayer = new MobileScrollLayer(this.content);
 
     // Indicates whether the horizontal scrollbar is visible
     this.$horizScroll = false;
@@ -206,6 +209,7 @@ var VirtualRenderer = function(container, theme) {
         this.scroller.className = "ace_scroller";
         
         this.$cursorLayer.setSession(session);
+        this.$mobileScrollLayer.setSession(session);
         this.$markerBack.setSession(session);
         this.$markerFront.setSession(session);
         this.$gutterLayer.setSession(session);
@@ -630,6 +634,7 @@ var VirtualRenderer = function(container, theme) {
     this.setPadding = function(padding) {
         this.$padding = padding;
         this.$textLayer.setPadding(padding);
+        this.$mobileScrollLayer.setPadding(padding);
         this.$cursorLayer.setPadding(padding);
         this.$markerFront.setPadding(padding);
         this.$markerBack.setPadding(padding);
@@ -663,6 +668,7 @@ var VirtualRenderer = function(container, theme) {
     this.$updateScrollBar = function() {
         this.scrollBar.setInnerHeight(this.layerConfig.maxHeight);
         this.scrollBar.setScrollTop(this.scrollTop);
+        this.$mobileScrollLayer.setScrollTop(this.scrollTop);
     };
 
     this.$renderChanges = function(changes, force) {
@@ -695,6 +701,7 @@ var VirtualRenderer = function(container, theme) {
             this.$textLayer.checkForSizeChanges();
             // update scrollbar first to not lose scroll position when gutter calls resize
             this.$updateScrollBar();
+            this.$mobileScrollLayer.update(this.layerConfig);
             this.$textLayer.update(this.layerConfig);
             if (this.showGutter)
                 this.$gutterLayer.update(this.layerConfig);
@@ -726,6 +733,7 @@ var VirtualRenderer = function(container, theme) {
 
         if (changes & this.CHANGE_TEXT) {
             this.$textLayer.update(this.layerConfig);
+            this.$mobileScrollLayer.update(this.layerConfig);
             if (this.showGutter)
                 this.$gutterLayer.update(this.layerConfig);
         }