<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="no" />
<meta name="viewport" content="user-scalable=no" />
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
position:relative;
width:800px;
margin:0 auto;
}
#output {
position:relative;
width:100%;
height:96px;
border:1px solid black;
}
.keyboard {
position:relative;
width:100%;
height:250px;
border:1px solid black;
background-color:#ccc;
cursor:pointer;
}
.keyboard ul {
list-style-type:none;
}
.keyboard ul ul {
clear:both;
}
.keyboard ul ul li {
float:left;
position:relative;
width:70px;
height:70px;
margin:1px;
border:1px outset gray;
text-align:center;
line-height:70px;
background-color:#ddd;
-moz-border-radius:5px;
border-radius:5px;
}
.keyboard .swypable {
background-color:#eee;
}
.keyboard ul ul li:hover {
background-color:white;
}
.keyboard .middle {
margin-left:20px;
}
.keyboard .lower {
margin-left:50px;
}
</style>
<script>
function init() {
initkeyboard('keyboard');
}
function isIOS() {
var agent = navigator.userAgent.toLowerCase();
return agent.match(/(iphone|ipod|ipad)/);
}
function initkeyboard(name) {
var el = document.getElementById(name);
el.swyping = false;
el.keybuffer = '';
if (isIOS()) {
el.ontouchstart = touchmovehandler;
el.ontouchmove = touchmovehandler;
el.ontouchend = mouseuphandler;
} else {
el.onmousedown = mousedownhandler;
el.onmouseover = mouseoverhandler;
el.onmouseup = mouseuphandler;
}
}
function touchmovehandler(e) {
var e = window.event || e;
var target = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
if (target.className=='swypable') this.keybuffer += target.textContent;
return true;
}
function mousedownhandler(e) {
var e = window.event || e;
if (e.target.className=='swypable') this.keybuffer += e.target.textContent;
this.swyping = true;
return false;
}
function mouseuphandler(e) {
this.swyping = false;
var el = document.getElementById('output');
el.src = 'swypeserver.php?lang=en&text=' + this.keybuffer;
this.keybuffer = '';
}
function mouseoverhandler(e) {
var e = window.event || e;
if (!this.swyping) return;
if (e.target.className=='swypable') this.keybuffer += e.target.textContent;
}
</script>
</head>
<body ontouchmove='event.preventDefault();' onload='init();'>
<div id='wrapper'>
<h1>Simple SWYPE demo</h1>
<p>english dictionary - AZERTY keyboard</p>
<p>Swype using your mouse: clickleft -> hold -> swype -> release</p>
<p>or use your iOS device</p>
<p>tested with Safari and Firefox both on OSX and Safari on iOS</p>
<iframe id='output' height=40></iframe>
<div id='keyboard' class='keyboard'>
<ul>
<li class='upper'>
<ul>
<li class='swypable'>a</li><li class='swypable'>z</li><li class='swypable'>e</li><li class='swypable'>r</li><li class='swypable'>t</li><li class='swypable'>y</li><li class='swypable'>u</li><li class='swypable'>i</li><li class='swypable'>o</li><li class='swypable'>p</li>
</ul>
</li>
<li class='middle'>
<ul>
<li class='swypable'>q</li><li class='swypable'>s</li><li class='swypable'>d</li><li class='swypable'>f</li><li class='swypable'>g</li><li class='swypable'>h</li><li class='swypable'>j</li><li class='swypable'>k</li><li class='swypable'>l</li><li class='swypable'>m</li>
</ul>
</li>
<li class='lower'>
<ul>
<li class='swypable'>w</li><li class='swypable'>x</li><li class='swypable'>c</li><li class='swypable'>v</li><li class='swypable'>b</li><li class='swypable'>n</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
|
Download
