tests/manual/keyboard.html

	keyboard.html revision 4679bde12548e75a51abcb9c51cde874e70427a8
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin<!DOCTYPE html>
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin<html>
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin    <head>
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin        <!-- reset the default browser styles -->
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin        <style>
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            html, body{
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                width:100%;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                height:100%;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            }
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            #output {
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                width:100%;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                height:45%;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                font-size:6em;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                color:#666;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                border:dotted;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                font-family: Terminal, monospace;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            }
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            #keyboard{
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                width:100%;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                text-align:center;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                display:inline-block;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                padding:10px;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                background-color: #444444;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                background-image: -webkit-linear-gradient(top, #ccc, #999);
b00c1cf9d61ccd9b0f7bc131f01d80bb5736af0dZbigniew Jędrzejewski-Szmek                background-image: -moz-linear-gradient(top, #ccc, #999);
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                position: absolute;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                bottom: 0;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            }
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            body .yui3-button-selected {
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                background-color:#666;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                color:white;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            }
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            body .yui3-button{
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                font-size:2em;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                height:3em;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                width:3em;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                margin:3px;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            }
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            body .yui3-button.wide {
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                width:6em;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                margin:3px 6px 3px 6px;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            }
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            body .yui3-button.space {
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin                width:34em;;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            }
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin        </style>
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin        <script src='/build/yui/yui-min.js'></script>
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin        <script>
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin        /*globals YUI */
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin        YUI({
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            debug: true,
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            combo: false,
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            filter: 'raw'
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin        }).use('button', 'cssreset', 'cssfonts', function(Y){
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            var caps, alt, i, textarea, keys, altKeys;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            caps = false;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            alt = false;
e4f246b1b512c68260581c4976d2eb01cf7febdcEvgeny Vereshchagin            i = 0;
            textarea = Y.one("#output");

            keys = [
                '`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', '[del]',
                '[tab]', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\',
                '[caps]', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', "'", '[return]',
                '[shift]', 'z', 'x', 'c', 'v', 'b', 'n', ',', '.', '/', '[shift]',
                '[space]'];

            altKeys = [
                // [orginal, replacement]
                ['`', '~'],
                ['1', '!'],
                ['2', '@'],
                ['3', '#'],
                ['4', '$'],
                ['5', '%'],
                ['6', '^'],
                ['7', '&amp;'],
                ['8', '*'],
                ['9', '('],
                ['0', ')'],
                ['-', '_'],
                ['=', '+'],
                ['[', '{'],
                [']', '}'],
                ['\\', '|'],
                [';', ':'],
                ['\'', '"'],
                [',', '&lt;'],
                ['.', '&gt;'],
                ['/', '?']
            ];

            Y.Array.each(keys, function(key){
                var button = new Y.Button({
                    label: key
                });
                var node = button.getNode();
                node.set('name', key);
                if (key[0] === "[" && key.length > 1) {
                    node.addClass('wide');
                }

                if (key === "[space]") {
                    node.addClass('space');
                }

                Y.one("#keyboard").append(node);

                if (i === 13 || i === 27 || i ===40 || i ===51) {
                    Y.one("#keyboard").append("<br>");
                }

                if (key === '[caps]' || key === '[shift]') {
                    button.set('type', 'toggle');
                }
                i+=1;
            });


            function goAlt() {
                var x, y, nodeList;

                nodeList = Y.all('#keyboard .yui3-button');

                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);
                    }
                });
            }

            Y.one("#keyboard").delegate("click", function(e){
                var key, content, newContent;

                key = e.target.getContent();
                content = Y.one("#output").get("value");

                switch(key) {
                    case "[del]":
                         newContent = content.substr(0, content.length-1);
                         newContent = Y.Lang.trimRight(newContent);
                         textarea.set('value', newContent);
                         break;
                    case "[tab]":
                         textarea.set('value', content + '\t');
                         break;
                    case "[space]":
                         textarea.set('value', content + ' ');
                         break;
                     case '[return]':
                        textarea.set('value', content + '\n');
                        break;
                    case '[shift]':
                        caps = !caps;
                        alt = !alt;
                        goAlt();
                        break;
                    case '[caps]':
                        caps = !caps;
                        goCaps();
                        break;
                    default:
                        if (caps) {
                            key = key.toUpperCase();
                        }
                        textarea.set('value', content + key);
                        break;
                }

            }, '.yui3-button');

            Y.one("#output").on(["keydown", "keyup"], function(e){
                var pressed, node, codes;

                codes = {
                    a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,
                    j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,
                    s:83,t:84,u:85,v:86,w:87,x:88,y:89,z:90
                };

                Y.Object.some(codes, function(val, key){
                    if (e.button === val) {
                        pressed = key;
                        return true; // exit `some`
                    }
                });

                node = Y.one('#keyboard .yui3-button[name='+ pressed +']');
                if (node){
                    node.toggleClass('yui3-button-selected');
                }
            });
        });
        </script>
    </head>

    <body>
        <textarea id="output">... typed text will appear here</textarea>
        <div id="keyboard"></div>
    </body>
</html>