diff --git a/experiments/touch.html b/experiments/touch.html index 8656b610..660f49f4 100644 --- a/experiments/touch.html +++ b/experiments/touch.html @@ -11,8 +11,12 @@ #main { border: solid blue; margin:50px; - height: 300px; - overflow:hidden + height: 400px; + overflow:hidden; + top:0; + bottom:0; + right:0; + left:0; } #input{ font-size: 20px @@ -21,6 +25,13 @@ background: -webkit-linear-gradient(-87deg, rgba(200,10,100,0.5), rgba(100,10,200,0.5)); /*position: absolute*/ } + #output { + border: solid blue; + position: absolute; + top:0; + bottom:0; + right:0 + } @@ -30,52 +41,148 @@
Juhu Kinners
- Juhu Kinners
- Juhu Kinners
- Juhu Kinners
+
+ Juhu Kinners
+
- +
diff --git a/lib/ace/ext/mobile.js b/lib/ace/ext/mobile.js index 9fbc30ef..195ef9bb 100644 --- a/lib/ace/ext/mobile.js +++ b/lib/ace/ext/mobile.js @@ -1,50 +1,50 @@ -/* ***** BEGIN LICENSE BLOCK ***** - * Distributed under the BSD license: - * - * Copyright (c) 2012, 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 TouchHandler = require("../mouse/touch_handler").TouchHandler; -var config = require("../config"); - -var Editor = require("../editor").Editor; -require("../config").defineOptions(Editor.prototype, "editor", { - enableTouchSupport: { - set: function(val) { - if ('ontouchstart' in this.container || 1) - if (val && !this.$touchHandler) - this.$touchHandler = new TouchHandler(this); - }, - value: true, - initialValue: false - } -}); - +/* ***** BEGIN LICENSE BLOCK ***** + * Distributed under the BSD license: + * + * Copyright (c) 2012, 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 TouchHandler = require("../mouse/touch_handler").TouchHandler; +var config = require("../config"); + +var Editor = require("../editor").Editor; +require("../config").defineOptions(Editor.prototype, "editor", { + enableTouchSupport: { + set: function(val) { + // if ('ontouchstart' in this.container) + if (val && !this.$touchHandler) + this.$touchHandler = new TouchHandler(this); + }, + value: true, + initialValue: false + } +}); + }); \ No newline at end of file diff --git a/lib/ace/keyboard/textinput.js b/lib/ace/keyboard/textinput.js index f0830e71..f3dbf0d5 100644 --- a/lib/ace/keyboard/textinput.js +++ b/lib/ace/keyboard/textinput.js @@ -49,6 +49,7 @@ var TextInput = function(parentNode, host) { text.wrap = "off"; text.autocorrect = "off"; text.autocapitalize = "off"; + text.autofocus = false; text.spellcheck = false; text.style.opacity = "0"; @@ -67,11 +68,15 @@ var TextInput = function(parentNode, host) { // ie9 throws error if document.activeElement is accessed too soon try { var isFocused = document.activeElement === text; } catch(e) {} + console.log(isFocused) + event.addListener(text, "blur", function() { + console.log("blur") host.onBlur(); isFocused = false; }); event.addListener(text, "focus", function() { + console.log("focuse") isFocused = true; host.onFocus(); resetSelection(); @@ -218,6 +223,8 @@ var TextInput = function(parentNode, host) { } else if (data == PLACEHOLDER.charAt(0)) { if (afterContextMenu) host.execCommand("del", {source: "ace"}); + else + host.execCommand("backspace", {source: "ace"}); } else { if (data.substring(0, 2) == PLACEHOLDER) data = data.substr(2); diff --git a/lib/ace/mouse/touch_handler.js b/lib/ace/mouse/touch_handler.js index 2f942f5d..8a5e8d6d 100644 --- a/lib/ace/mouse/touch_handler.js +++ b/lib/ace/mouse/touch_handler.js @@ -1,125 +1,244 @@ /* ***** BEGIN LICENSE BLOCK ***** - * Version: MPL 1.1/GPL 2.0/LGPL 2.1 + * Distributed under the BSD license: * - * The contents of this file are subject to the Mozilla Public License Version - * 1.1 (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * http://www.mozilla.org/MPL/ + * Copyright (c) 2010, Ajax.org B.V. + * All rights reserved. * - * Software distributed under the License is distributed on an "AS IS" basis, - * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License - * for the specific language governing rights and limitations under the - * License. + * 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. * - * The Original Code is Ajax.org Code Editor (ACE). - * - * The Initial Developer of the Original Code is - * Ajax.org B.V. - * Portions created by the Initial Developer are Copyright (C) 2010 - * the Initial Developer. All Rights Reserved. - * - * Contributor(s): - * Fabian Jakobs - * - * Alternatively, the contents of this file may be used under the terms of - * either the GNU General Public License Version 2 or later (the "GPL"), or - * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), - * in which case the provisions of the GPL or the LGPL are applicable instead - * of those above. If you wish to allow use of your version of this file only - * under the terms of either the GPL or the LGPL, and not to allow others to - * use your version of this file under the terms of the MPL, indicate your - * decision by deleting the provisions above and replace them with the notice - * and other provisions required by the GPL or the LGPL. If you do not delete - * the provisions above, a recipient may use your version of this file under - * the terms of any one of the MPL, the GPL or the LGPL. + * 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) { +define(function(require, exports, module) { +"use strict"; var event = require("../lib/event"); var TouchHandler = function(editor) { this.editor = editor; - event.addListener(editor.container, "click", function(e) { - // does this only work on click? - editor.focus(); + this.editor.on("mousedown", function(e) { + if (editor.$hasActiveTouch) { + e.stop(); + } + e.defaultPrevented = true; }); - var mouseTarget = editor.renderer.getMouseEventTarget(); - mouseTarget.ontouchstart = this.onTouchStart.bind(this); - mouseTarget.ontouchmove = this.onTouchMove.bind(this); - mouseTarget.ontouchend = this.onTouchEnd.bind(this); + + editor.on("focus", function() { + editor.focusedFromTouch = editor.fromTouch; + }); + + editor.on("blur", function() { + editor.focusedFromTouch = false; + }); + + + var el = editor.container; + var st = null, m = null, inter, vintX = 0, vintY = 0; + var st0, vX = 0, vY = 0, vprevX = 0, vprevY = 0; + + var dt, t = 0, t1, c; + + var dbClick, stickyX = false, stickyY = false; + var touches; + el.addEventListener("touchstart", function(e) { + editor.touchMoved = false; + st0 = st = m = conv(e.touches[0], e); + if (ticker) { + ticker = clearInterval(ticker); + vintX = vmidX; + vintY = vmidY; + } else { + vintX = 0; + vintY = 0; + stickyX = true; + stickyY = true; + } + vmidX = vmidY = 0; + vprevX = vX = vprevY = vY = 0; + t = e.timeStamp; + // if (e.touches.length < 2) + + if (editor.focusedFromTouch) { + if (e.touches.length < 2) + e.preventDefault(); + } + }); + el.addEventListener("touchend", function(e) { + inter = clearInterval(inter); + + m = conv(e.changedTouches[0], e); + move(m); + if (vmidX * vintX > 0 || vmidY * vintY > 0) { + c = (Math.abs(vmidY) + Math.abs(vintY)) / Math.abs(vmidY); + } else { + c = 1; + } + k = k0; + animate(e); + }); + + var k0 = 0.1, k = k0; + var ticker; + function animate(e) { + clearInterval(ticker); + var vmidX0 = vmidX; + var vmidY0 = vmidY; + var t0 = m.t; + + vmidY0 = ((m.y-st0.y)/(m.t-st0.t)); + + if (Math.abs(vmidX) < 0.001 && Math.abs(vmidY) < 0.001) { + moveCursor(e.changedTouches[0]); + return; + } + + ticker = function() { + t1 = t; + t = Date.now(); + var dt = t - t1; + + var dy = vmidY * dt; + var dx = vmidX * dt; + + var d = ((1 - c) * 1 / (1 + 0.6 * (t-t0)) + c) * Math.exp(- k0 * (t-t0) / 50); + + vmidX -= k * vmidX * dt / 20; + vmidY -= k * vmidY * dt / 20; + + vmidX = d * vmidX0; + vmidY = d * vmidY0; + + if (k < k0) + k += k0 * (k0 - k); + + if (Math.abs(dx) + Math.abs(dy) < 1) { + return ticker = clearInterval(ticker); + } + scrollBy(dx, dy); + // output.innerHTML = sct + if (ticker) + setTimeout(ticker, 30); + }; + ticker(); + } + + el.addEventListener("touchmove", function(e) { + m = conv(e.touches[0], e); + editor.touchMoved = true; + move(m); + e.preventDefault(); + }); + + var vmidX, vmidY, vprevX = 0, vprevY = 0, dtPrev = 0; + function move(m) { + var dx = m.x-st.x; + var dy = m.y-st.y; + var t1 = m.t; + if (t1 <= t) return; + + if (Math.abs(dx) + Math.abs(dy) > 3) { + if (stickyX && stickyY) { + if (Math.abs(dy) > 1.5 * Math.abs(dx)) { + stickyY = false; + } else if (Math.abs(dx) > 1.5 * Math.abs(dy)) { + stickyX = false; + } else { + stickyX = stickyY = false; + } + } else if (stickyX) { + if (Math.abs(m.x - st0.x) > 3 * Math.abs(m.y - st0.y)) + stickyX = false; + } else if (stickyY) { + if (Math.abs(m.y - st0.y) > 3 * Math.abs(m.x - st0.x)) + stickyY = false; + } + + } + if (stickyX) dx = 0; + if (stickyY) dy = 0; + + dt = (t1 - t ); + t = t1; + + vX = dx / dt; + vY = dy / dt; + var d = 0.4 * dtPrev / (dtPrev + dt); + + m.vX = vX; + m.vY = vY; + m.dt = dt; + vmidX = d * vprevX + (1-d) * vX; + vmidY = d * vprevY + (1-d) * vY * 10; + if (isNaN(vmidY))debugger; + + dtPrev = dt; + vprevX = vX; + vprevY = vY; + scrollBy(dx, dy); + st = m; + } + + function conv(e, e1) { + var rect = el.getBoundingClientRect(); + var x = e.clientX - rect.left; + var y = e.clientY - rect.right; + + return {x: x, y: y, t: e1.timeStamp}; + } + + + + editor.textInput.getElement().style.fontSize = "60px"; + + + event.addListener(editor.container, "click", function(e) { + + if (editor.touchMoved) + return; + editor.fromTouch = true; + editor.focus(); + editor.fromTouch = false; + }); + + var scrollBy = function(x, y) { + var s = editor.session; + s.setScrollLeft(s.getScrollLeft() - x); + s.setScrollTop(s.getScrollTop() - y); + }; + + var moveCursor = function(touch) { + var x = touch.clientX; + var y = touch.clientY; + + // var editor = this.editor; + var pos = editor.renderer.screenToTextCoordinates(x, y); + editor.moveCursorToPosition(pos); + editor.selection.clearSelection(); + editor.renderer.scrollCursorIntoView(); + }; }; (function() { - - this.$scrollSpeed = 1; - this.setScrollSpeed = function(speed) { - this.$scrollSpeed = speed; - }; - this.getScrollSpeed = function() { - return this.$scrollSpeed; - }; - - this.onTouchMove = function(e) { - e.preventDefault(); - if (e.touches.length == 1) { - this.$moveCursor(e.touches[0]); - } - else if (e.touches.length == 2) { - if (!this.$scroll) - return; - - var touch = e.touches[0]; - var diffX = this.$scroll.pageX - touch.pageX; - var diffY = this.$scroll.pageY - touch.pageY; - this.editor.renderer.scrollBy(diffX, diffY); - - this.$scroll = { - pageX: touch.pageX, - pageY: touch.pageY, - ts: new Date().getTime() - } - } - }; - - this.$moveCursor = function(touch) { - var pageX = touch.pageX; - var pageY = touch.pageY; - - var editor = this.editor; - var pos = editor.renderer.screenToTextCoordinates(pageX, pageY); - pos.row = Math.max(0, Math.min(pos.row, editor.session.getLength()-1)); - - editor.moveCursorToPosition(pos); - editor.renderer.scrollCursorIntoView(); - }; - - this.onTouchEnd = function(e) { - //if (e.touches.length == 1) { - console.log("focus") - // editor.focus(); - //e.preventDefault(); - //} - - - }; - - this.onTouchStart = function(e) { - if (e.touches.length == 1) { - this.$moveCursor(e.touches[0]); - } - else if (e.touches.length == 2) { - e.preventDefault(); - var touch = e.touches[0]; - this.$scroll = { - pageX: touch.pageX, - pageY: touch.pageY - } - } - }; - }).call(TouchHandler.prototype); exports.TouchHandler = TouchHandler;