keyboard.html revision d9c6583f91a300de45f8166de9de85efb2a13246
0N/A<!DOCTYPE html>
553N/A<html>
0N/A <head>
0N/A <!-- reset the default browser styles -->
0N/A <style>
0N/A html, body{
553N/A width:100%;
0N/A height:100%;
553N/A }
0N/A
0N/A #output {
0N/A width:100%;
0N/A height:45%;
0N/A font-size:6em;
0N/A color:#666;
0N/A border:dotted;
0N/A font-family: Terminal, monospace;
0N/A }
0N/A
0N/A #keyboard{
553N/A width:100%;
553N/A text-align:center;
553N/A display:inline-block;
0N/A padding:10px;
0N/A background-color: #444444;
0N/A background-image: -webkit-linear-gradient(top, #ccc, #999); /* FF3.6 */
0N/A background-image: -moz-linear-gradient(top, #ccc, #999); /* FF3.6 */
0N/A position: absolute;
370N/A bottom: 0;
0N/A }
0N/A
370N/A body .yui3-button-selected {
0N/A background-color:#666;
0N/A color:white;
285N/A }
285N/A
0N/A body .yui3-button{
0N/A font-size:2em;
0N/A height:3em;
370N/A width:3em;
0N/A margin:3px;
0N/A }
366N/A
0N/A
0N/A body .yui3-button.wide {
0N/A width:6em;
0N/A margin:3px 6px 3px 6px;
0N/A }
0N/A
0N/A body .yui3-button.space {
0N/A width:34em;;
0N/A }
0N/A </style>
0N/A
0N/A <script src='/build/yui/yui-min.js'></script>
0N/A
0N/A <script>
0N/A
0N/A YUI({
0N/A debug: true,
0N/A combo: false,
0N/A filter: 'raw'
331N/A }).use('button', 'cssreset', 'cssfonts', function(Y){
331N/A
0N/A var caps = false;
0N/A var alt = false;
0N/A var i = 0;
0N/A var textarea = Y.one("#output");
370N/A
0N/A var keys = [
506N/A '`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', '[del]',
0N/A '[tab]', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\',
0N/A '[caps]', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', "'", '[return]',
0N/A '[shift]', 'z', 'x', 'c', 'v', 'b', 'n', ',', '.', '/', '[shift]',
370N/A '[space]'
0N/A ];
0N/A
0N/A var altKeys = [
577N/A // [orginal, replacement]
370N/A ['`', '~'],
0N/A ['1', '!'],
0N/A ['2', '@'],
577N/A ['3', '#'],
0N/A ['4', '$'],
0N/A ['5', '%'],
577N/A ['6', '^'],
370N/A ['7', '&amp;'],
0N/A ['8', '*'],
0N/A ['9', '('],
0N/A ['0', ')'],
0N/A ['-', '_'],
577N/A ['=', '+'],
577N/A ['[', '{'],
577N/A [']', '}'],
577N/A ['\\', '|'],
577N/A [';', ':'],
577N/A ['\'', '"'],
577N/A [',', '&lt;'],
577N/A ['.', '&gt;'],
0N/A ['/', '?']
0N/A ];
0N/A
0N/A Y.Array.each(keys, function(key){
0N/A var button = new Y.ButtonGenerator({
0N/A label: key,
0N/A name: key
370N/A });
370N/A
370N/A if (key[0] === "[" && key.length > 1) {
608N/A button.get('srcNode').addClass('wide');
608N/A }
0N/A
0N/A if (key === "[space]") {
370N/A button.get('srcNode').addClass('space');
370N/A }
370N/A
370N/A Y.one("#keyboard").append(button.get('srcNode'));
0N/A
370N/A if (i === 13 || i === 27 || i ===40 || i ===51) {
370N/A Y.one("#keyboard").append("<br>");
0N/A }
0N/A
370N/A if (key === '[caps]' || key === '[shift]') {
370N/A button.set('type', 'toggle');
370N/A }
370N/A i++;
0N/A });
370N/A
0N/A Y.one("#keyboard").delegate("click", function(e){
0N/A var key = e.target.getContent();
370N/A var content = Y.one("#output").get("value");
370N/A switch(key) {
370N/A case "[del]":
0N/A var newContent = content.substr(0, content.length-1);
0N/A newContent = Y.Lang.trimRight(newContent);
370N/A textarea.set('value', newContent);
0N/A break;
0N/A case "[tab]":
370N/A textarea.set('value', content + '\t');
370N/A break;
370N/A case "[space]":
0N/A textarea.set('value', content + ' ');
0N/A break;
370N/A case '[return]':
370N/A textarea.set('value', content + '\n');
370N/A break;
0N/A case '[shift]':
0N/A caps = !caps;
370N/A alt = !alt;
370N/A goAlt();
370N/A break;
0N/A case '[caps]':
0N/A caps = !caps;
370N/A goCaps();
370N/A break;
0N/A default:
0N/A if (caps) {
370N/A key = key.toUpperCase();
370N/A }
370N/A textarea.set('value', content + key);
0N/A break;
578N/A }
578N/A
578N/A }, '.yui3-button');
578N/A
449N/A
440N/A Y.one("#output").on(["keydown", "keyup"], function(e){
440N/A var pressed;
578N/A var node;
449N/A var codes = {
449N/A a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,
449N/A j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,
449N/A s:83,t:84,u:85,v:86,w:87,x:88,y:89,z:90
449N/A };
449N/A
449N/A Y.Object.some(codes, function(val, key){
449N/A if (e.button === val) {
449N/A pressed = key;
449N/A }
449N/A });
449N/A
449N/A node = Y.one('#keyboard .yui3-button[name='+ pressed +']');
449N/A
449N/A if (node){
440N/A node.toggleClass('yui3-button-selected');
370N/A }
370N/A });
370N/A
370N/A function goAlt() {
var nodeList = Y.all('#keyboard .yui3-button');
var x, y;
if (alt) {
x = 0;
y = 1;
}
else {
x = 1;
y = 0;
}
Y.Array.each(altKeys, function(pair){
nodeList.each(function(node){
if (node.getContent() === pair[x]) {
node.setContent(pair[y]);
}
})
});
}
function goCaps() {
var nodeList = Y.all('#keyboard .yui3-button');
nodeList.each(function(node){
var key = node.getContent();
if (key.length === 1) { // Only need to worry about the 1-character 'input' buttons
if (caps) {
key = key.toUpperCase();
}
else {
key = key.toLowerCase();
}
node.setContent(key);
}
});
}
});
</script>
</head>
<body>
<textarea id="output"></textarea>
<div id="keyboard"></div>
</body>
</html>