tests/manual/keyboard.html

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