CSSActif - Code à CC "Interargir avec le clavier de l'utilisateur"

Développement du code http://www.css-actif.com/t11333-interargir-avec-le-clavier-de-l-utilisateur

by espeon

HTML

<div class="well">
    <ul>
        <li class="lead">Bloc bleu <small class="muted">configuration par défaut</small>

        </li>
        <dl class="dl-horizontal"> <dt>Sélecteur</dt>

            <dd><code>#hiro-bloc</code>

            </dd> <dt>Afficher</dt>

            <dd><code>s</code> ou <code>Enter</code>

            </dd> <dt>Masquer</dt>

            <dd><code>h</code> ou <code>Esc</code> (ou cliquer ailleurs)</dd> <dt>Durée de trantion</dt>

            <dd>200 ms</dd>
        </dl>
        <li class="lead">Blocs indigo</li>
        <dl class="dl-horizontal"> <dt>Sélecteur</dt>

            <dd><code>.espeon-bloc</code>

            </dd> <dt>Afficher</dt>

            <dd><code>&larr;</code>

            </dd> <dt>Masquer</dt>

            <dd><code>&rarr;</code> (ou cliquer ailleurs)</dd> <dt>Durée de trantion</dt>

            <dd>1200 ms</dd>
        </dl>
        <li class="lead">Bloc spécial <small class="muted">konami code</small></li>
        <dl class="dl-horizontal"> <dt>Sélecteur</dt>

            <dd><code>#konami-bloc</code>

            </dd> <dt>Afficher</dt>

            <dd>Tapez <code>plop</code>

            </dd> <dt>Masquer</dt>

            <dd><code>h</code> ou <code>Esc</code> (ou cliquer ailleurs)</dd> <dt>Durée de trantion</dt>

            <dd>200 ms</dd>
        </dl>
    </ul>
</div>

<div id="hiro-bloc">Hey ! Je suis la div cachée (cliquez autre part pour me fermer)</div>

<div class="espeon-bloc">Hey ! Je suis une autre div cachée (cliquez ailleurs pour me fermer)</div>

<div class="espeon-bloc">Hey ! Je suis une autre div cachée (cliquez ailleurs pour me fermer)</div>

<div id="konami-bloc">Hey ! C'est la div spéciale (cliquez ailleurs pour me fermer)</div>

CSS

body {
	min-height: 700px;    
}

#hiro-bloc, .espeon-bloc, #konami-bloc {
    display: none;
    padding: 10px;
    margin-top: 30px;
}
#hiro-bloc {
    border: 1px solid deepskyblue;
    color: deepskyblue;
}
.espeon-bloc {
    border: 1px solid indigo;
    color: indigo;
}
#konami-bloc {
    border: 1px solid green;
    color: green;
}
/*!
 * Bootstrap v2.2.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
 .clearfix {
    *zoom:1;
}
.clearfix:before, .clearfix:after {
    display:table;
    content:"";
    line-height:0;
}
.clearfix:after {
    clear:both;
}
.hide-text {
    font:0/0 a;
    color:transparent;
    text-shadow:none;
    background-color:transparent;
    border:0;
}
.input-block-level {
    display:block;
    width:100%;
    min-height:30px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display:block;
}
audio, canvas, video {
    display:inline-block;
    *display:inline;
    *zoom:1;
}
audio:not([controls]) {
    display:none;
}
html {
    font-size:100%;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
}
a:focus {
    outline:thin dotted #333;
    outline:5px auto -webkit-focus-ring-color;
    outline-offset:-2px;
}
a:hover, a:active {
    outline:0;
}
sub, sup {
    position:relative;
    font-size:75%;
    line-height:0;
    vertical-align:baseline;
}
sup {
    top:-0.5em;
}
sub {
    bottom:-0.25em;
}
img {
    max-width:100%;
    width:auto\9;
    height:auto;
    vertical-align:middle;
    border:0;
    -ms-interpolation-mode:bicubic;
}
#map_canvas img, .google-maps img {
    max-width:none;
}
button, input, select, textarea {
    margin:0;
    font-size:100%;
    vertical-align:middle;
}
button, input {
    *overflow:visible;
 ...

JavaScript

/**
 * Codé par Hiro pour CSSActif
 * Pluginisé par Espeon
 * (http://www.css-actif.com)
 */

(function ($) {
    $.fn.keyListener = function (options) {
        var defaults = {
            selector: '#hiro-bloc',
            keyShow: [13, 83],
            keyHide: [27, 72],
            duration: 200,
            type: ''
        };

        var options = $.extend(defaults, options);

        // Variables KONAMI
        var konami = {
            keys: [],
            string: options.keyShow.toString()
        };

        $(options.selector).bind({
            click: function (e) {
                e.stopPropagation();
            }
        });

        return this.bind({
            keydown: function (e) {
                if (options.type == 'konami') {
                    konami.keys.push(e.keyCode);
                    if (konami.keys.toString().indexOf(konami.string) >= 0) {
                        $(options.selector).fadeIn(options.duration);
                        konami.keys = [];
                    } else if ($.inArray(e.keyCode, options.keyHide) != -1) {
                        $(options.selector).stop().fadeOut(options.duration);
                    }
                } else {
                    if ($.inArray(e.keyCode, options.keyShow) != -1) {
                        $(options.selector).fadeIn(options.duration);
                    } else if ($.inArray(e.keyCode, options.keyHide) != -1) {
                        $(options.selector).stop().fadeOut(options.duration);
                    }
                }
            },
            click: function (e) {
                $(options.selector).stop().fadeOut(options.duration);
            }
        });
    };
})(jQuery);

$(function () {
    $(document).keyListener();
    $(document).keyListener({
        selector: '.espeon-bloc',
        keyShow: [37, 15, 25],
        keyHide: [39],
        duration: 1200
    });
    $(document).keyListener({
        selector: '#konami-bloc',
        keyShow: [80, 76,...