public/js/fingerpoken.js in fingerpoken-0.2.20110101195735 vs public/js/fingerpoken.js in fingerpoken-0.2.20110102034531
- old
+ new
@@ -1,10 +1,94 @@
(function() {
/* TODO(sissel): This could use some serious refactoring. */
$(document).ready(function() {
var status = $("#status");
+ var keyboard = $('#keyboard');
+ var keyboard_button = keyboard.prev('a');
+ keyboard.width(keyboard_button.width());
+ keyboard.height(keyboard_button.height());
+ /* TODO(sissel): get the computed width (margin, padding, width) */
+ keyboard.css('margin-left', '-' + keyboard_button.width() + 'px');
+ keyboard.show();
+
+ keyboard.bind("focus", function() {
+ /* move the textarea away so we don't see the caret */
+ keyboard.css('margin-left', '-10000px');
+ state.keyboard = true;
+ $(window).triggerHandler("resize");
+ });
+ keyboard.bind("blur", function(){
+ keyboard.css('margin-left', '-' + keyboard_button.width() + 'px');
+ state.keyboard = false;
+ $(window).triggerHandler("resize");
+ });
+ keyboard.bind("keypress", function(event) {
+ var e = event.originalEvent;
+ var key = e.charCode;
+ if (!key) {
+ key = (e.keyCode ? e.keyCode : e.which);
+ }
+ state.websocket.send(JSON.stringify({
+ action: "log",
+ shift: e.shiftKey,
+ char: e.charCode,
+ ctrl: e.ctrlKey,
+ meta: e.ctrlKey,
+ }));
+ state.websocket.send(JSON.stringify({
+ action: "keypress",
+ key: key,
+ shift: e.shiftKey,
+ }));
+
+ /* Only prevent default if we're not backspace,
+ * this lets 'backspace' do keyrepeat. */
+ if (key != 8) {
+ event.preventDefault();
+ }
+ }).bind("change", function(event) {
+ /* Skip empty changes */
+ if (keyboard.val() == "") {
+ return;
+ }
+
+ state.websocket.send(JSON.stringify({
+ action: "type",
+ string: keyboard.val(),
+ }));
+
+ /* Clear the field */
+ keyboard.val("");
+ });
+
+ keyboard.bind("keyup", function(event) {
+ var e = event.originalEvent;
+ state.websocket.send(JSON.stringify({
+ action: "log",
+ shift: e.shiftKey,
+ char: e.charCode,
+ key: e.which,
+ ctrl: e.ctrlKey,
+ meta: e.ctrlKey,
+ }));
+
+ var key = (e.keyCode ? e.keyCode : e.which);
+ if (key >= 32 && key <= 127) {
+ /* skip printable keys (a-z, etc) */
+ return;
+ }
+
+ state.websocket.send(JSON.stringify({
+ action: "keypress",
+ key: key,
+ shift: e.shiftKey,
+ }));
+
+ event.preventDefault();
+ });
+
var config = function (key, value, default_value) {
if (value) {
status.html("config[" + key + "] = " + value);
//alert(key + " => " + value);
@@ -20,11 +104,13 @@
y: -1,
moving: false,
dragging: false,
width: window.innerWidth,
height: window.innerHeight,
- key: undefined,
+ key: undefined, /* TODO(sissel): unused? */
+ keyboard: false,
+ touchpad_active: false,
mouse: { },
scroll: {
y: 0,
}
};
@@ -53,29 +139,41 @@
.attr("checked", "checked").click()
$("input[name = \"mouse-acceleration\"]")
.bind("change", function(event) {
config("fingerpoken/mouse/acceleration", parseInt(event.target.value));
- //status.html(event.target.value);
}).val(config("fingerpoken/mouse/acceleration")).change();
/* Changing orientation sometimes leaves the viewport
* not starting at 0,0. Fix it with this hack.
* Also, we want to make the content size full height. */
$(window).bind("orientationchange resize pageshow", function(event) {
scroll(0, 0);
- console.log(window.orientation);
var header = $(".header:visible");
var footer = $(".footer:visible");
var content = $(".content:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
/* Trim margin/border/padding height */
content_height -= (content.outerHeight() - content.height());
+
+ /* TODO(sissel): Make this special handling only for iphones.
+ * http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html
+ */
+ if (state.keyboard) {
+ if (window.orientation == 90 || window.orientation == -90) {
+ content_height -= 162; /* landscape orientation keyboard */
+ content_height -= 32; /* "form assistant" aka FormFill, this height is undocumented. */
+ } else {
+ content_height -= 216; /* portrait orientation keyboard */
+ content_height -= 44; /* "form assistant" aka FormFill */
+ }
+ }
+ status.html("Resize / " + window.orientation + " / " + state.keyboard + " / " + content_height);
content.height(content_height);
});
var connect = function(state) {
status.html("connecting...");
@@ -119,15 +217,15 @@
//}));
//});
/* TODO(sissel): add mousedown/mousemove/mouseup support */
- console.log($("#touchpad-surface"));
- $("#area").bind("touchstart", function(event) {
- event.preventDefault();
+ $("#area").bind("touchstart mousedown", function(event) {
var e = event.originalEvent;
- var touches = e.touches;
+ state.touchpad_active = true;
+ /* if no 'touches', use the event itself, one finger/mouse */
+ var touches = e.touches || [ e ];
var output = "Start: " + touches[0].clientX + "," + touches[0].clientY + "\n";
output += "Fingers: " + touches.length + "\n";
status.html(output);
/* number of fingers == mouse button */
@@ -145,13 +243,14 @@
action: "mousedown",
button: state.button,
}))
state.dragging = true;
}
- }).bind("touchend", function(event) { /* $("#touchpadsurface").bind("touchend" ... */
+ event.preventDefault();
+ }).bind("touchend mouseup", function(event) { /* $("#touchpadsurface").bind("touchend" ... */
var e = event.originalEvent;
- var touches = e.touches;
+ var touches = e.touches || [ e ];
if (state.mouse.vectorTimer) {
clearInterval(state.mouse.vectorTimer);
state.mouse.vectorTimer = null;
}
@@ -169,87 +268,10 @@
if (r < 0) {
r += 360;
}
status.html(r);
- if (r > 75 && r < 105) {
- /* Activate the keyboard when there's a ~90-degree rotation*/
- var keyboard = $("<textarea id='keyboard' rows='10'></textarea>");
- keyboard.css("width", "100%");
- keyboard.css("height", "100%");
- status.html("");
- keyboard.appendTo(status).focus();
- keyboard.bind("keypress", function(event) {
- var e = event.originalEvent;
- var key = e.charCode;
- console.log(key);
- if (!key) {
- key = (e.keyCode ? e.keyCode : e.which);
- }
- state.websocket.send(JSON.stringify({
- action: "log",
- shift: e.shiftKey,
- char: e.charCode,
- ctrl: e.ctrlKey,
- meta: e.ctrlKey,
- }));
- state.websocket.send(JSON.stringify({
- action: "keypress",
- key: key,
- shift: e.shiftKey,
- }));
-
- e.preventDefault();
- }).bind("change", function(event) {
- /* Skip empty changes */
- if (keyboard.val() == "") {
- return;
- }
-
- state.websocket.send(JSON.stringify({
- action: "type",
- string: keyboard.val(),
- }));
-
- /* Clear the field */
- keyboard.val("");
- });
-
- keyboard.bind("keyup", function(event) {
- var e = event.originalEvent;
- state.websocket.send(JSON.stringify({
- action: "log",
- shift: e.shiftKey,
- char: e.charCode,
- key: e.which,
- ctrl: e.ctrlKey,
- meta: e.ctrlKey,
- }));
-
- console.log(key);
- var key = (e.keyCode ? e.keyCode : e.which);
- if (key >= 32 && key <= 127) {
- /* skip printable keys (a-z, etc) */
- return;
- }
-
- state.websocket.send(JSON.stringify({
- action: "keypress",
- key: key,
- shift: e.shiftKey,
- }));
-
- e.preventDefault();
- });
- //status.html("<textarea id='keyboard'></textarea>");
- //$("#keyboard").focus();
- } else { /* Otherwise, we didn't rotate */
- state.websocket.send(JSON.stringify({
- action: "move_end",
- now: (new Date()),
- }));
- }
} else if (state.scrolling) {
/* nothing for now */
} else {
/* No movement, click! */
status.html("Click!");
@@ -258,19 +280,25 @@
button: state.button,
}));
state.last_click = (new Date()).getTime();
}
}
- if (touches.length == 0) {
+ if (touches.length == 0 || !e.touches) {
state.moving = false;
state.scrolling = false;
+ state.touchpad_active = false;
}
event.preventDefault();
- }).bind("touchmove", function(event) { /* $("#touchpadsurface").bind("touchmove" ... */
+ }).bind("touchmove mousemove", function(event) { /* $("#touchpadsurface").bind("touchmove" ... */
var e = event.originalEvent;
- var touches = e.touches;
- event.preventDefault();
+ var touches = e.touches || [ e ];
+
+ //if (!state.touchpad_active) {
+ //event.preventDefault();
+ //return;
+ //}
+
if (!state.moving) {
/* Start calculating delta offsets now */
state.moving = true;
state.start_x = state.x = touches[0].clientX;
state.start_y = state.y = touches[0].clientY;
@@ -346,16 +374,23 @@
} else {
/* Only 1 finger, and we aren't dragging. So let's move! */
/* TODO(sissel): Refactor these in to fumctions */
var movement = config("fingerpoken/mouse/movement");
if (movement == "relative") {
- status.html(output);
state.websocket.send(JSON.stringify({
action: "mousemove_relative",
rel_x: delta_x,
rel_y: delta_y
}));
+ } else if (movement == "absolute") {
+ /* Send absolute in terms of percentages. */
+ var content = $(".content:visible");
+ state.websocket.send(JSON.stringify({
+ action: "mousemove_absolute",
+ percent_x: x / content.innerWidth(),
+ percent_y: y / content.innerHeight(),
+ }));
} else if (movement == "vector") {
if (!state.mouse.vectorTimer) {
state.mouse.vectorTimer = setInterval(function() {
var rx = state.x - state.start_x;
var ry = state.y - state.start_y;
@@ -369,19 +404,19 @@
output = "rx,ry = " + rx + ", " + ry + "\n";
rx = Math.ceil(Math.pow(Math.abs(rx), vector_accel) * sign_rx);
ry = Math.ceil(Math.pow(Math.abs(ry), vector_accel) * sign_ry);
output += "rx2,ry2 = " + rx + ", " + ry + "\n";
- status.html(output)
state.websocket.send(JSON.stringify({
action: "mousemove_relative",
rel_x: rx,
rel_y: ry
}));
}, 15);
} /* if (!state.mouse.vectorTimer) */
} /* mouse vector movement */
+ status.html(output)
} /* finger movement */
}); /* $("#touchpadsurface").bind( ... )*/
/* Take commands like this: