Compare commits
3 commits
master
...
touch_hand
| Author | SHA1 | Date | |
|---|---|---|---|
|
25d5e582e0 | ||
|
|
604b9e5aae | ||
|
|
f334ae16cb |
5 changed files with 521 additions and 0 deletions
|
|
@ -613,6 +613,7 @@ env.editor.setOptions({
|
|||
enableBasicAutocompletion: true,
|
||||
enableSnippets: true
|
||||
})
|
||||
require("ace/ext/mobile");
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
218
experiments/touch.html
Normal file
218
experiments/touch.html
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- <meta name="viewport" content="user-scalable=0" /> -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Touch handler</title>
|
||||
<meta name="author" content="Fabian Jakobs">
|
||||
<style>
|
||||
#main {
|
||||
border: solid blue;
|
||||
margin:50px;
|
||||
height: 400px;
|
||||
overflow:hidden;
|
||||
top:0;
|
||||
bottom:0;
|
||||
right:0;
|
||||
left:0;
|
||||
}
|
||||
#input{
|
||||
font-size: 20px
|
||||
}
|
||||
#juhu {
|
||||
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
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<textarea id="ni"></textarea>
|
||||
|
||||
<div id="main">
|
||||
<textarea id="input"></textarea>
|
||||
<div id="juhu">
|
||||
Juhu Kinners<br>
|
||||
</div>
|
||||
</div>
|
||||
<div id="output">
|
||||
Juhu Kinners<br>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
var juhu = document.getElementById("juhu");
|
||||
var el = document.getElementById("main");
|
||||
var input = document.getElementById("input");
|
||||
var output = document.getElementById("output");
|
||||
|
||||
input.style.fontSize = "30px"
|
||||
|
||||
a = []; for (var i = 500; i--;) a[i] = i;
|
||||
juhu.innerHTML = a.join("<br>")//---------1----------2-----------3---------4---------5--------6-------7-------8-------9-------")
|
||||
|
||||
//document.body.style.webkitTransformOrigin= "0% 0%";
|
||||
//document.body.style.webkitTransform = "scale(1.1)";
|
||||
|
||||
var testEditor = !false
|
||||
var st = null, m = null, inter, t = 0, vintX = 0, vintY = 0
|
||||
|
||||
|
||||
el.addEventListener("touchstart", function(e) {
|
||||
testEditor && input.focus()
|
||||
st0 = st = m = conv(e.touches[0],e)
|
||||
if (ticker) {
|
||||
ticker = clearInterval(ticker)
|
||||
vintX = vmidX
|
||||
vintY = vmidY
|
||||
} else {
|
||||
vintX = 0
|
||||
vintY = 0
|
||||
|
||||
}
|
||||
vmidX = vmidY = 0
|
||||
vprevX = vX = vprevY = vY = null
|
||||
t = e.timeStamp
|
||||
// if (e.touches.length < 2)
|
||||
e.preventDefault()
|
||||
// inter = setInterval(move, 20)
|
||||
})
|
||||
el.addEventListener("touchend", function(e) {
|
||||
e.preventDefault()
|
||||
inter = clearInterval(inter)
|
||||
|
||||
m = conv(e.changedTouches[0],e)
|
||||
move(m)
|
||||
//if (Math.abs(vmidY) > 0.001 || Math.abs(vmidX) > 0.001) {
|
||||
if (vmidX * vintX > 0 || vmidY * vintY > 0) {
|
||||
k = 0.1 * k
|
||||
} else
|
||||
k = k0
|
||||
console.log(vmidX, vmidY)
|
||||
//if (Math.abs(vmidX) < 10 * Math.abs(vmidY)) vmidX = 0;
|
||||
//else if (Math.abs(vmidY) < 10 * Math.abs(vmidX)) vmidY = 0;
|
||||
animate()
|
||||
//}
|
||||
})
|
||||
|
||||
var k0 = 0.1, k = k0
|
||||
var ticker
|
||||
animate = function() {
|
||||
var scts = sct
|
||||
clearInterval(ticker)
|
||||
console.log(vmidY, vY, (st0.y - m.y)/(st0.t - m.t))
|
||||
|
||||
// output.innerHTML = "----"+vmidX+"|" +vmidY
|
||||
ticker = function() {
|
||||
// output.innerHTML+="<br>1"
|
||||
if (Math.abs(vmidX) < 0.001 && Math.abs(vmidY) < 0.001) {
|
||||
console.log("traveled", sct-scts)
|
||||
// output.innerHTML+="<br>traveled"+( sct-scts)
|
||||
return ticker = clearInterval(ticker)
|
||||
}
|
||||
t1 = t
|
||||
t = Date.now()
|
||||
dt = t - t1
|
||||
|
||||
dy = vmidY * dt
|
||||
dx = vmidX * dt
|
||||
vmidX -= k * vmidX
|
||||
vmidY -= k * vmidY
|
||||
|
||||
if (k < k0)
|
||||
k += k0 * (k0 - k)
|
||||
// console.log(k)
|
||||
|
||||
setSc(scl + dx, sct + dy)
|
||||
// output.innerHTML = sct
|
||||
if (ticker)
|
||||
setTimeout(ticker, 30)
|
||||
}
|
||||
ticker()
|
||||
}
|
||||
|
||||
el.addEventListener("touchmove", function(e) {
|
||||
m = conv(e.touches[0], e)
|
||||
|
||||
move(m)
|
||||
e.preventDefault()
|
||||
})
|
||||
el.addEventListener("click", function(e) {
|
||||
testEditor && input.focus()
|
||||
|
||||
if (testEditor) {
|
||||
input.value="2222"
|
||||
input.select()
|
||||
}
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
var vmidX, vmidY, vprevX, vprevY, dtPrev
|
||||
move = function(m) {
|
||||
var dx = m.x-st.x
|
||||
var dy = m.y-st.y
|
||||
var t1 = m.t
|
||||
dt = (t1 - t )|| 1
|
||||
t = t1
|
||||
if (t1==t)debugger
|
||||
|
||||
vX = dx / dt
|
||||
vY = dy / dt
|
||||
if (vprevX) {
|
||||
d = 0.4 * dtPrev / dt
|
||||
vmidX = d * vprevX + (1-d) * vX
|
||||
}
|
||||
if (vprevY) {
|
||||
d = 0.4 * dtPrev / dt
|
||||
vmidY = d * vprevY + (1-d) * vY
|
||||
}
|
||||
|
||||
if (isNaN(vmidY))debugger
|
||||
|
||||
dtPrev = dt
|
||||
vprevX = vX
|
||||
vprevY = vY
|
||||
|
||||
setSc(scl + dx, sct + dy)
|
||||
// output.innerHTML = vX+"|"+vY
|
||||
st = m
|
||||
}
|
||||
|
||||
conv = function(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}
|
||||
}
|
||||
|
||||
|
||||
scl = 0
|
||||
sct = 0
|
||||
sctm = juhu.style.offsetHeight
|
||||
sclm = 1000
|
||||
|
||||
juhu.style.width = sclm + "px"
|
||||
juhu.style.height = sctm + "px"
|
||||
function setSc(x, y) {
|
||||
scl = x//Math.max(0, Math.min(sclm, x))
|
||||
sct = y//Math.max(0, Math.min(sctm, y))
|
||||
juhu.style.marginLeft = scl + "px"
|
||||
juhu.style.marginTop = sct + "px"
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<div style="height:500px">
|
||||
</body>
|
||||
</html>
|
||||
50
lib/ace/ext/mobile.js
Normal file
50
lib/ace/ext/mobile.js
Normal file
|
|
@ -0,0 +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)
|
||||
if (val && !this.$touchHandler)
|
||||
this.$touchHandler = new TouchHandler(this);
|
||||
},
|
||||
value: true,
|
||||
initialValue: false
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
245
lib/ace/mouse/touch_handler.js
Normal file
245
lib/ace/mouse/touch_handler.js
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
/* ***** 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 event = require("../lib/event");
|
||||
|
||||
var TouchHandler = function(editor) {
|
||||
this.editor = editor;
|
||||
this.editor.on("mousedown", function(e) {
|
||||
if (editor.$hasActiveTouch) {
|
||||
e.stop();
|
||||
}
|
||||
e.defaultPrevented = true;
|
||||
});
|
||||
|
||||
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() {
|
||||
|
||||
}).call(TouchHandler.prototype);
|
||||
|
||||
exports.TouchHandler = TouchHandler;
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue