From 5c1aef3ccf4991b3ddb7b1032fe1d6a96ac98a82 Mon Sep 17 00:00:00 2001
From: C9 <matt@c9.io>
Date: Sat, 24 Nov 2012 05:28:39 -0500
Subject: [PATCH 1/3] First run test of iOS scrolling

---
 demo/kitchen-sink/demo.js    | 75 +++++++++++++++++++++++++++++++++++-
 demo/kitchen-sink/styles.css | 15 ++++++++
 kitchen-sink.html            |  8 ++++
 3 files changed, 96 insertions(+), 2 deletions(-)

diff --git a/demo/kitchen-sink/demo.js b/demo/kitchen-sink/demo.js
index 29be01be..7a2008e8 100644
--- a/demo/kitchen-sink/demo.js
+++ b/demo/kitchen-sink/demo.js
@@ -177,8 +177,6 @@ var keybindings = {
     })
 };
 
-
-
 /*********** manage layout ***************************/
 var consoleHeight = 20;
 function onResize() {
@@ -395,6 +393,79 @@ 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;
+        var totalHeight = env.editor.session.getLength() * env.editor.renderer.lineHeight;
+        var width = document.documentElement.clientWidth - left;
+
+        var mobileScrollDiv = document.createElement("div");
+        mobileScrollDiv.id = "scrolldiv_container";
+        mobileScrollDiv.style.width = width + "px";
+        //mobileScrollDiv.style.left = left + "px";
+        mobileScrollDiv.style.height = height;
+
+        var mobileScrollDivChild = document.createElement("div");
+        mobileScrollDivChild.id = "scrolldiv_child";
+        mobileScrollDivChild.style.height = totalHeight + "px";
+        mobileScrollDiv.appendChild(mobileScrollDivChild);
+        editorElement.appendChild(mobileScrollDiv);
+
+        var movementDiff = 0, lastMovementPos = 0;
+        var timeDiff = 0, lastTime = 0;
+        document.addEventListener("touchmove", function(e) {
+            //console.log("     TOUCHMOVE", e, mobileScrollDiv.scrollTop);
+            movementDiff = mobileScrollDiv.scrollTop - lastMovementPos;
+            lastMovementPos = mobileScrollDiv.scrollTop;
+
+            timeDiff = e.timeStamp - lastTime;
+            lastTime = e.timeStamp;
+        });
+        var movingTimer;
+        document.addEventListener("touchstart", function(e) {
+            if (e.target.className.split(" ").indexOf("ace_content") !== -1) {
+                if (movingTimer)
+                    clearInterval(movingTimer);
+
+                //console.log("touchstart", e);
+            }
+        }, false);
+        document.addEventListener("touchend", function(e) {
+            if (e.target.className.split(" ").indexOf("ace_content") !== -1) {
+                //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;
+                    //console.log(velocity);
+                    env.editor.session.setScrollTop(position);
+                    if (Math.abs(velocity) < 4)
+                        clearInterval(movingTimer);
+                }, 5);
+            }
+        }, false);
+
+        mobileScrollDiv.onscroll = function(e) {
+            //console.log("Scrolling", e, mobileScrollDiv.scrollTop);
+            env.editor.session.setScrollTop(mobileScrollDiv.scrollTop);
+        };
+    }
+    else {
+        var mobileScrollDiv = document.getElementById("scrolldiv_container");
+        if (mobileScrollDiv)
+            mobileScrollDiv.parentNode.removeChild(mobileScrollDiv);
+    }
+});
+
 /************** dragover ***************************/
 event.addListener(container, "dragover", function(e) {
     return event.preventDefault(e);
diff --git a/demo/kitchen-sink/styles.css b/demo/kitchen-sink/styles.css
index ec3578aa..d525fce1 100644
--- a/demo/kitchen-sink/styles.css
+++ b/demo/kitchen-sink/styles.css
@@ -40,4 +40,19 @@ body {
 
 #controls td + td {
     text-align: left;
+}
+
+#scrolldiv_container {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 9999;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: scroll;
+    pointer-events: none;
+}
+
+#scrolldiv_child {
+    -webkit-transform: translateZ(0px);
+    pointer-events: none;
 }
\ No newline at end of file
diff --git a/kitchen-sink.html b/kitchen-sink.html
index 96dc9c37..9164cbbe 100644
--- a/kitchen-sink.html
+++ b/kitchen-sink.html
@@ -245,6 +245,14 @@
         <input type="checkbox" id="highlight_token">
       </td>
     </tr>
+    <tr>
+      <td >
+        <label for="mobile_mode">Mobile Mode</label>
+      </td>
+      <td>
+        <input type="checkbox" id="mobile_mode">
+      </td>
+    </tr>
   </table>
   </td></tr>
   </table>

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 2/3] 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);
         }

From fdee7b9fa6dd0d138bfe2d9a317e6c881fae33fa Mon Sep 17 00:00:00 2001
From: Ubuntu <ubuntu@ip-10-60-10-79.ec2.internal>
Date: Sun, 2 Dec 2012 22:06:07 +0000
Subject: [PATCH 3/3] Removed mobile mode option

---
 kitchen-sink.html | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/kitchen-sink.html b/kitchen-sink.html
index dc205075..324e5778 100644
--- a/kitchen-sink.html
+++ b/kitchen-sink.html
@@ -246,14 +246,6 @@
         <input type="checkbox" id="highlight_token">
       </td>
     </tr>
-    <tr>
-      <td >
-        <label for="mobile_mode">Mobile Mode</label>
-      </td>
-      <td>
-        <input type="checkbox" id="mobile_mode">
-      </td>
-    </tr>
   </table>
   </td></tr>
   </table>