keysweeper

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="Description" content=""/>
    <link rel="shortcut icon" href=""/>
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--
    <link href="css/style.css" rel="stylesheet"/>
    -->
    <link href="css/jquery.terminal.css" rel="stylesheet"/>
    <link href="jquery-ui/jquery-ui-1.10.4.custom.min.css" rel="stylesheet"/>
    <link href="keyboard/keyboard.css" rel="stylesheet"/>
    
    <style>
body {
    margin: 0;
    padding: 0;
}
#keyboard-wrapper {
    position: relative;
}
#keyboard-wrapper textarea {
    position: absolute;
    clip: rect(0,0,0,0);
}
.ui-keyboard {
    border-width: 1px 0 0 0;
    border-radius: 0;
}
button {
    outline: none;
}
textarea {
    position: absolute;
    clip: rect(0,0,0,0);
}
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/jquery.mousewheel-min.js"></script>
    <script src="js/jquery.terminal-min.js"></script>
    <script src="jquery-ui/jquery-ui-1.10.4.custom.min.js"></script>
    <script src="keyboard/jquery.keyboard.min.js"></script>
    <script src="keyboard/jquery.keyboard.extension-typing.min.js"></script>
    <script>

var lastid = 0;

function is_touch_device() {
    return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}


var xx = '██╗  ██╗███████╗██╗   ██╗███████╗██╗    ██╗███████╗███████╗██████╗ ███████╗██████╗ \n██║ ██╔╝██╔════╝╚██╗ ██╔╝██╔════╝██║    ██║██╔════╝██╔════╝██╔══██╗██╔════╝██╔══██╗\n█████╔╝ █████╗   ╚████╔╝ ███████╗██║ █╗ ██║█████╗  █████╗  ██████╔╝█████╗  ██████╔╝\n██╔═██╗ ██╔══╝    ╚██╔╝  ╚════██║██║███╗██║██╔══╝  ██╔══╝  ██╔═══╝ ██╔══╝  ██╔══██╗\n██║  ██╗███████╗   ██║   ███████║╚███╔███╔╝███████╗███████╗██║     ███████╗██║  ██║\n╚═╝  ╚═╝╚══════╝   ╚═╝   ╚══════╝ ╚══╝╚══╝ ╚══════╝╚══════╝╚═╝     ╚══════╝╚═╝  ╚═╝\n\nby Samy Kamkar\n';

$(function() {
    $.keyboard.keyaction.pageup = function() {
        term.scroll(-10);
    };
    $.keyboard.keyaction.pagedown = function() {
        term.scroll(10);
    };
    $.keyboard.keyaction.foo = function() {
        console.log('foo');
    };
    var keyboard = $('textarea').keyboard({
        layout: 'custom',
        customLayout: {
            'default': [
                '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
                '{tab} q w e r t y u i o p [ ] \\',
                'a s d f g h j k l ; \' {enter}',
                '{shift} z x c v b n m , . / {shift} {pageup}',
                '{sp:2} {alt} {space} {sp:1} {left} {right} {pagedown}'
            ],
            'shift': [
                '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
                '{tab} Q W E R T Y U I O P { } |',
                'A S D F G H J K L : " {enter}',
                '{shift} Z X C V B N M < > ? {shift}',
                '{space} {left} {right}'
            ]
        },
        display: { 'pageup': 'pgUp', 'pagedown': 'pgDown' },
        usePreview: false,
        alwaysOpen: true,
        stayOpen: true,
        appendTo: '#keyboard-wrapper'
    }).getkeyboard().reveal();


 var keyboard = $('textarea').getkeyboard();
    $('.ui-keyboard-input').addTyping();

/*
  keyboard
    .reveal()
    .typeIn(' ', 500, function(kb) {
    });
    $('.ui-keyboard-input').addTyping();
*/

setInterval(function()
{
    $.ajax({
      type: "POST",
      dataType: "json",
      url: "r.php",
      data: "id="+lastid,
      success: function(data) {
		if (data["lastid"])
        	lastid = data["lastid"];

        if (data["chars"].length > 0)
		{
			if (!keyboard) keyboard = $('textarea').getkeyboard();
			if (!keyboard) $('textarea').keyboard();
			if (!keyboard) keyboard = $('textarea').getkeyboard();
    		$('.ui-keyboard-input').addTyping();
			keyboard.reveal().typeIn(data["chars"], 100, function(kb) { });
		}
      }
    });
}, 2000);

    // there is no other easy way to make cursor working with keyboard
    // the result of this is that textarea can have garbage
    (function(insertText) {
        keyboard.insertText = function(text) {
            if (text == 'bksp') {
                //var e = $.Event("keydown");
                //e.which = 8;
                //$root.trigger(e);
            } else {
                term.insert(text);
            }
            //return insertText.apply(keyboard, [].slice.call(arguments));
        };
    })(keyboard.insertText);
    
    var $root = $(document.documentElement || window);
    // proper use of API
    $.extend($.keyboard.keyaction, {
        enter: function(base, el, e) {
            var event = $.Event("keydown");
            event.which = event.keyCode = 13;
            event.shiftKey = e.shiftKey;
            $root.trigger(event);
        },
        tab: function(base, el, e) {
            var event = $.Event("keydown");
            event.which = 9;
            event.shiftKey = e.shiftKey;
            $root.trigger(event);
            return false;
        },
        left: (function(left) {
            return function(base, el, e) {
                // match terminal postion with 
                var cmd = term.cmd();
                cmd.position(-1, true);
                left.apply(this, [].slice.call(arguments));
            };
        })($.keyboard.keyaction.left),
        right: (function(right) {
            return function(base, el, e) {
                var cmd = term.cmd();
                cmd.position(1, true);
                right.apply(this, [].slice.call(arguments));
            };
        })($.keyboard.keyaction.right)
    });
    var intepreter = {
        foo: function() {
            this.echo('bar');
        },
        help: function() {
            this.echo('Avaiable commands: ' + Object.keys(intepreter).join(', '));
        }
    };
    var term = $('#term').terminal(intepreter, {
        name: 'virtual',
        greetings: xx,
		keypress: function() { return false; },
        completion: false,
        onBlur: function() {
            return false;
        }
    });
//term.disable();
});



</script>



</head>
<body>
    <div id="term"></div>
    <div id="keyboard-wrapper">
        <textarea></textarea>
    </div>
<form action="r.php" class="js-ajax-php-json" method="post" accept-charset="utf-8">
  <input type="hidden" name="id" value="" />
</form>
</body>
</html>