Transformez un simple menu en tableau de bord dynamique

Je crois que ce que j'aime le plus dans mon métier, c'est de modifier radicalement, grâce à Css et Javascript, l'aspect et les fonctionnalités d'un élément d'une page web à priori sans intérêt. Aujourd'hui je m'amuse à booster un menu en liste non-ordonnée tout ce qu'il y a de plus bête en un tableau de bord dynamique.

Voir la démo

Ce que je veux

Dans mon application, j'ai un menu qui mène à divers parties stratégiques et très souvent en mouvement, comme par exemple une gestion de commentaires ou de messages privés.

<ul id="menu">
    <li class="comments"><a href="/comments">Commentaires</a></li>
    <li class="messages"><a href="/messages">Messages</a></li>
    <li class="favorites"><a href="/favorites">Favoris</a></li>
    <li class="files"><a href="/files">Fichiers</a></li>
    <li class="trash"><a href="/trash">Corbeille</a></li>
</ul>

L'utilisateur doit constamment cliquer sur l'un des liens accessibles pour savoir si un nouveau message est arrivé, un commentaire posté, etc.... L'idéal serait d'avoir en permanence un compteur d'éléments, toujours à jour, à côté de chaque lien. Ainsi, l'utilisateur est informé en tant réel des nouveaux éléments dans son application. Pour parfaire l'idée, on travaillera également le look and feel pour le rendre le menu un peu plus sexy et en adéquation avec sa nouvelle fonction de tableau de bord.

Mise en forme initiale

Internet regorge de librairies d'icônes libre d'utilisation (Veillez à bien lire et respecter les licences). Mon choix s'est arrêté sur ces icônes réalisés par Jonas Rask.

Armé de ces jolis icônes, on peut maintenant attaquer la feuille de style :

#menu li {
    float:left;
    list-style:none;
    margin:10px;
    position:relative;
}
#menu a {
    display:block;
    text-indent:-9999px;
    width:32px; height:32px;
}
#menu .comments {
    background:url(images/comments.png);
}
#menu .messages {
    background:url(images/messages.png);
}
#menu .favorites {
    background:url(images/favorites.png);
}
#menu .files {
    background:url(images/files.png);
}
#menu .trash {
    background:url(images/trash.png);
}

On place les éléments de la liste côte à côte (float:left) et on supprime la puce par défaut (list-style:none). Chaque lien est remplacé par une image. Rien de bien nouveau, ces techniques ont déjà été abordées plus en détail dans un article précédent. On en arrive au résultat suivant :

La Logique

Attaquons-nous maintenant à la logique. En pratique, l'idée est d'interroger les nouveaux résultats formaté Json sur le serveur par une requête Ajax lancée toutes les X secondes. Les résultats renvoyés par le serveur auront cette forme :

{   comments:  4,
    messages:  5,
    favorites: 0,
    trash:     25,
    files:     4
}

Côté serveur

Je ne vais pas m'étendre sur l'aspect serveur car il est à votre convenance. Dans mon exemple j'utilise Php. Créez donc un fichier data.php et à vous de jouer pour extraire les résultats de votre base de données.

<?php
    // Ajoutez ici votre connexion à votre base de données ainsi que votre logique 
    // de comptage des éléments selon les besoins de votre application.
?>
{   comments:  <?php echo $counter['comments'] ?>,
    messages:  <?php echo $counter['messages'] ?>,
    favorites: <?php echo $counter['favorites'] ?>,
    trash:     <?php echo $counter['trash'] ?>,
    files:     <?php echo $counter['files'] ?>,
}

Côté client

Côté client, un script jQuery va appeler le fichier data.php et en récupérer les données. Les lignes de notre menu/liste seront itérées, on y ajoute un span contenant le nombre d'éléments qui nous est donné par le fichier Json précédemment généré en Php. Chaque entrée sera retrouvée grâce au nom de sa classe. Ainsi li avec la classe messages se verra attribuer la valeur Json messages:5, et ainsi de suite.

Concrètement la fonction de base donne ceci :

$(function() {
    function dashboard() {
        $.getJSON('data.php', function(data) {
            // Itère toutes les lignes du menu #dashboard
            $('#menuli').each(function() { 
                var li    = $(this),
                    value = data[ li.attr('class') ],
                    span  = $('<span>'+ value +'</span>');
                li.find('span')
                  .remove()
                  .end()
                  .append(span);
            });
        });
        setTimeout(dashboard, 10000); // rappel toutes les 10 secondes
    }
    dashboard();
});

Vous remarquerez que, comme la fonction est appelée en boucle toutes les 10 secondes, les éventuels span déjà présents dans le li sont supprimés avant d'en ajouter de nouveaux. Sinon on se retrouverait avec autant de compteur par ligne qu'il y a eu d'appel.

Pour que l'effet soit sympa, stylons maintenant les span nouvellement insérés.

#menu span {
    border-radius:10em; 
    -moz-border-radius:10em; 
    -webkit-border-radius:10em;
    border:1px solid #999;
    background:#EFEFEF;
    padding:2px 5px 2px 6px;
    font:bold 9px Verdana, sans-serif;
    color:#222;
    position:absolute; 
    bottom:0; 
    right:0;
    margin:-7px;
}

Le résultat finale devrait s'approcher de celui-ci.

Et enfin un plugin

Pour finir, tirons partie de la puissance de jQuery et de son système de plugin. Pour plus d'informations sur la réalisation de plugin jQuery, référez-vous à cet article.

Je profite du passage à l'état de plugin pour enrichir un peu le concept : Les compteurs apparaitrons avec une effet de fondu et les résultats qui changent du tour précédent seront indiqués plus clairement. Bien évidemment, j'ajoute les paramètres de configuration d'usage qui rendront le plugin flexible.

/**
 * Tableau de bord
 * par Jay Salvat - http://blog.jaysalvat.com/
 */
(function($) {
    $.fn.dashboard = function(path, settings) {
        var options =  {
            delay: 10000
        };
        $.extend(options, settings);
            
        return this.each(function(){
            var $$ = $(this);
            pull();
			
            function pull() {
                $.getJSON(path, function(data) {
                    $('li', $$).each(function() { 
                        var li       = $(this),
                            span     = $('span', li),
                            value    = span.text(),
                            newValue = data[ li.attr('class') ],
                            newSpan  = $('<span>'+ newValue +'</span>');
            
                        span.remove();
                        
                        if (newValue) {
                            if (newValue != value) {
                                newSpan.addClass('new');                
                            }
                            li.append(newSpan.fadeIn('slow'));
                        }
                    });
                });
                setTimeout(pull, options.delay);
            }
        });
    };
})(jQuery);

Puis la feuille de style complète.

#menu li {
    float:left;
    list-style:none;
    margin:10px;
    position:relative;
}
#menu a {
    display:block;
    text-indent:-9999px;
    width:32px; height:32px;
}
#menu .comments {
    background:url(images/comments.png);
}
#menu .messages {
    background:url(images/messages.png);
}
#menu .favorites {
    background:url(images/favorites.png);
}
#menu .files {
    background:url(images/files.png);
}
#menu .trash {
    background:url(images/trash.png);
}
#menu span {
    border-radius:10em; 
    -moz-border-radius:10em; 
    -webkit-border-radius:10em;
    border:1px solid #999;
    background:#EFEFEF;
    padding:2px 5px 2px 6px;
    font:bold 9px Verdana, sans-serif;
    color:#222;
    position:absolute; bottom:0; right:0;
    margin:-7px;
}
#menu .new {
    border:1px solid #F00;
    background:#F00;
    color:#FFF;
}

Usage

Comme d'habitude, il faut inclure jQuery et appliquer le plugin à votre liste (ici avec l'id #menu).

$(function() {
    $('#menu').dashboard('data.php', { delay:10000 });
});