Mynotifications

Télécharger le projet
Commenter

Description

Plug in Jquery de notification visuel d'événements.
Nécessaire

Jquery 1.6.4+
Le plug in (plugin.mynotifications.js)
Eventuellement une feuille de style
Navigateur moderne

Pour inclure Jquery le plus simple est d'utiliser Google Librairies et de copier/coller ces lignes dans votre header

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Objectifs

Simple d'utilisation
Indépendant d'un balisage particulier
Compatible navigateurs modernes

Il sert à afficher dans le navigateur des messages pour l'utilisateur. Nous avons le même fonctionnement avec nos différents OS. Ainsi que sur un réseau social très connu.
Principe

Le plugin recherche un container dans le DOM de la page courante. Si il n'est pas présent il est ajouté. Les messages seront contenus dans une liste non ordonnée ajoutée automatiquement. Chaque item de cette liste sera une notification pour l'utilisateur, de durée d'affichage, d'apparence configurable. Les items peuvent être supprimés lors d'un clic sur ceux ci, automatiquement ou au clic sur un bouton de fermeture.
Container

Le container est une simple div avec un id html unique. Il sera le dernier noeud de body

<div id="container"></div>

Liste

Est dans le container, toutes les notifications seront ajoutées dans ce noeud.

<ul></ul>

Item

Est un item de liste avec un id unique et une classe CSS.

<li id="message-0" style="display: block;" class="my-notifications-error">
<h6>Error<a class="my-notifications-close" href="#" onclick="return false;">x</a></h6>
<p>Message d'erreur.</p>
</li>

Constructeur

L'objet MyNotifications peut s'instancier de deux manières.

L'instanciation par défauts

// Constructeur par défauts
var myplugin = new $.myNotifications();

Lors de l'instanciation de l'objet le debug est activé, le container principal se nomme container, le selecteur CSS est un #, son id CSS complet est donc #container, les notifications s'affichent pour une durée de 3000 ms. Le prefix des id CSS est message. les notifications se ferment lors d'un click elles et elles possédent également un bouton de fermeture.

Les class CSS par défaut des notifications est :

Pour les erreurs : my-notifications-error, la forme compléte est .my-notifications-error
Pour les avertissements : my-notifications-warning, la forme compléte est .my-notifications-warning
Pour les informations : my-notifications-info, la forme compléte est .my-notifications-info
Pour les validations : my-notifications-okay, la forme compléte est .my-notifications-okay
Du bouton de fermeture des notifications : my-notifications-close, la forme compléte est .my-notifications-close

L'instanciation avec paramètres

// Constructeur avec paramètres (tableau)
var myplugin = new $.myNotifications({
'delay':-1,
'containerId': 'notifications'
});

Même chose que précedemment mais les notifications s'affichent perpetuellement, et le container principal se nomme désormais notifications

Plugin

Attributs

Arguments Values Description
debug True Affiche le déroulement du process dans la console de debug.
False Silencieux
Container name string Nom du container principal
containerSelectorType string Un selecteur CSS, #, .
containerSelector string Selecteur CSS
listName string Selecteur type
listSelectorType string Un selecteur CSS, #, .
itemDisplayDelay int Durée d'affichage des notifications en ms.Un entier négatif donne un affichage perpetuel
itemDisplayDelay int Nombre ajouts de notifications total dans la liste
itemName string Préfixe des notifications
itemCount int Nombre de notifications présentes dans le DOM
itemCloseByClick True Les notifications se ferment lors d'un click.
False Les notifications ne se ferment pas lors d'un click.
itemCloseByButton True Bouton de fermeture ajouté à chaques notifications.
False Pas de bouton
itemClassError string Class CSS des notifications d erreurs
itemClassWarning string Class CSS des notifications avertissement
itemClassInfo string Class CSS des notifications d information
itemClassOkay string Class CSS des notifications validation
itemClassClose string Class CSS du bouton fermeture de notification
Méthodes privées

init() : Construit les attributs manquants de l'objet, s'assure de la présence dans le DOM du container
buildContainerSelector() : Construit le selecteur CSS du container principal. eg : #container
buildChildsAttributs() : Mets à jour l'index des notifications. Elles conservent comme ceci un nom unique
containerIsSet() : Le container est il présent
buildContainer() : Si le container n'est pas présent, on l'ajoute au DOM
listenerClose() : Ecouteur d'évenement sur les notifications

Méthodes publics

Le plugin posséde une méthode principale :

msg('title', 'text') : title est le type de notifications info | warning | error | okay Si title n'est pas un des 4 choix précédents, la notification sera de type custom, ayant pour titre de fenêtre title et comme texte text.

Alias

Les méthodes suivantes sont simplement des alias de msg() le paramétre de title est déjà assigné.

msgError('text')
msgWarning('text')
msgOkay('text')
msgInfo('text')

Installation

Le plugin pour fonctionner nécessite :

Jquery 1.6.8+
Une feuille de style (non nécessaire)
Le plugin

Dépôt Gihub

Fork me i'm famous

https://github.com/inwebo/MyNotifications-Jquery-plugin/

WIKI

https://github.com/inwebo/MyNotifications-Jquery-plugin/wiki

Source / Exemple : 


/**


     
  •  My.Notifications

 *


     
  •  Plugin Jquery de notification visuel d'événements. Simple et configurable

 *


     
  •  LICENCE

 *


     
  •  Vous êtes libre de :

 *


     
  •  Partager : reproduire, distribuer et communiquer l'oeuvre

    •  
  •  Remixer  : adapter l'oeuvre

 *


     
  •  Selon les conditions suivantes :

 *


     
  •  Attribution : Vous devez attribuer l'oeuvre de la manière indiquée par

    •  
  •  l'auteur de l'oeuvre ou le titulaire des droits (mais pas d'une manière

    •  
  •  qui suggérerait qu'ils vous soutiennent ou approuvent votre utilisation

    •  
  •  de l'oeuvre).

 *


     
  •  Pas d&#8217;Utilisation Commerciale : Vous n'avez pas le droit d'utiliser cette

    •  
  •  oeuvre à des fins commerciales.

 *


     
  •  Partage à l'Identique : Si vous modifiez, transformez ou adaptez cette

    •  
  •  oeuvre, vous n'avez le droit de distribuer votre création que sous une

    •  
  •  licence identique ou similaire à celle-ci.

 *


     
  •  Remarque : A chaque réutilisation ou distribution de cette oeuvre, vous

    •  
  •  devez faire apparaître clairement au public la licence selon laquelle elle

    •  
  •  est mise à disposition. La meilleure manière de l'indiquer est un lien vers

    •  
  •  cette page web.

 *


;(function ($){
    $.Notification = function (title, text, options) {

            var defaults = {
                debug:true,
                selectors: {
                    i:"#notification-"
                },
                id:-1,
                life:-1,
                closeSelf:true,
                closeButton:true,
                style: {
                    main:"notification",
                    error:"error",
                    warning:"warning",
                    info:"info",
                    success:"success",
                    custom:"custom",
                    button:"close"
                }
            };

        var plugin = this;

        plugin.settings = {};

        var init = function() {
            plugin.settings = $.extend( {}, defaults, options );
            plugin.settings.name = 'MyItems';
            plugin.settings.version = '12-2012';
            plugin.settings.id = plugin.settings.selectors.i + plugin.settings.id;
            plugin.settings.selectors.button = plugin.settings.id + " a." + plugin.settings.style.button;
            plugin.title = title;
            plugin.text = text;
            plugin.cache = {
                container : $("<li></li>").attr( 'id', plugin.settings.id.substring( 1, plugin.settings.id.length ) ).attr('class', plugin.settings.style.main),
                header    : $("<h6></h6>").html( plugin.title ),
                body      : $("<p></p>").html( plugin.text ),
                button    : $("<a></a>").attr( 'class', plugin.settings.style.button ).attr('href', '#').attr('onClick', 'return false;').html('x')
            };
            plugin.cache.object = _Factory();
        };

        var _Factory = function() {
            _Title();
            return $( plugin.cache.container ).append(
                $( plugin.cache.header )
                ).append(
                $( plugin.cache.body )
                )
        };

        var _Title = function() {
            switch( plugin.title ) {
                case 'error' :
                    plugin.cache.container.addClass( plugin.settings.style.error );
                    break;
                case 'warning' :
                    plugin.cache.container.addClass( plugin.settings.style.warning );
                    break;
                case 'info' :
                    plugin.cache.container.addClass( plugin.settings.style.info );
                    break;
                case 'success' :
                    plugin.cache.container.addClass( plugin.settings.style.success );
                    break;
                default :
                    plugin.cache.container.addClass( plugin.settings.style.custom );
                    break;
            }

            if( plugin.settings.closeButton === true ) {
                $( plugin.cache.header ).append( $( plugin.cache.button ) );
            }
        };

        plugin.Remove = function() {
            $( plugin.settings.id ).remove();
        };

        plugin.ToString = function() {
            return plugin.cache.object[0].outerHTML;
        };

        plugin.To$ = function() {
            return plugin.cache.object;
        };

        plugin.Handler = function() {
            // Self close by click
            if( plugin.settings.closeSelf === true ) {
                $( plugin.settings.id ).bind( 'click',  function() {
                    plugin.Remove();
                } );
            }

            // Close by button
            if( plugin.settings.closeButton === true ) {
                $( plugin.settings.selectors.button ).bind( 'click', function() {
                    plugin.Remove();
                });
            }

            // Auto fade
            if(plugin.settings.life > 0) {
                $( plugin.settings.id ).delay( plugin.settings.life ).fadeOut( 'fast',function(){
                    plugin.Remove();
                });
            }
        };

        init();
    };

    $.myNotifications = function( options, notificationDefaults ) {

        // Arguments
        var defaults = {
            // Affiche dans la console de firebug le déroulement du processus
            debug: true,

            // selecteurs CSS
            selectors : {
                // Container principal
                container : "#notifications",
                // Current list
                list: "#list"
            },

            // Entier unique
            seed:-1
        };

       /*


            
  •  Surcharge du constructeur par defaut d'une notification. Voir $.Notification

    •         
  • /

        var notification = {
            debug:true,
            selectors: {
                i:"#notification-"
            },
            id:-1,
            life:-1,
            closeSelf:true,
            closeButton:true,
            style: {
                main:"notification",
                error:"error",
                warning:"warning",
                info:"info",
                success:"success",
                custom:"custom",
                button:"close"
            }

        };

        var plugin = this;

        plugin.settings = {};

       /*


            
  •  Constructeur de l'objet

    •         
  • /

        var init = function() {

            // Construction des attributs
            plugin.settings                   = $.extend({}, defaults, options);
            plugin.notification               = $.extend({}, notification, notificationDefaults);
            plugin.settings.name              = 'MyNotifications';
            plugin.settings.version           = '11-2012';
            plugin.settings.listItemSelector  = plugin.settings.listSelectorType + plugin.settings.listName + ' li';

            plugin.cache = {
                container:$( plugin.settings.selectors.container ),
                list:$(plugin.settings.selectors.list)
            };

            ( !_DomReady() ) ? _DomBuild() : null;

        };

       /*


            
  •  Le container principal est il présent dans le DOM

        *


            
  •  @return true si il est déjà présent sinon false

        *


            
  • /

        var _DomReady = function() {
            if( plugin.cache.container.length === 0 )   {
                debug( 'Container ' + plugin.settings.selectors.container + ' doesn\'t exist' );
                return false;
            }
            else {
                debug( 'Container ' + plugin.settings.selectors.container + ' found' );
                return true;
            }
        };

       /*


            
  •  Le container principal n'est pas présent, on l'ajoute au DOM

    •         
  •  Cela sera le dernier noeud enfant du noeud body

        *


            
  •  @return void

    •         
  • /

        var _DomBuild = function() {
            var c = $( '<div></div>' ).attr( 'id' , plugin.settings.selectors.container.substring(1,plugin.settings.selectors.container.length) );
            var l = $(  '<ul></ul>' ).attr( 'id' , plugin.settings.selectors.list.substring(1,plugin.settings.selectors.list.length) );
            $('body').append( c.append( l ) );
            debug('Container id : '+ plugin.settings.selectors.container +' and list '+plugin.settings.selectors.list+' added to dom.');
        };

       /*


            
  •  Ajout un objet jquery $.Notification dans la liste courante

    •         
  •  Cela sera le dernier noeud enfant du noeud body

        *


            
  •  @param obj L'objet Jquery à ajouter

        *


            
  •  @return void

    •         
  • /

        var _AddItem = function( obj ) {
            $( plugin.settings.selectors.list ).append( obj );
        };

       /*


            
  •  Affiche une notification ayant comme titre title et avec comme

    •         
  •  text text

        *


            
  •  @param title  Un type prédéfini parmi okay | warning | error | info

    •         
  •                peut être défini par l'utilisateur, la notifications

    •         
  •                sera un message

        *


            
  •  @param text  Le text à afficher

        *


            
  •  @param notificationDefaults object Objet de configuration de notifications

    •         
  •                                      voir le constructeur $.Notification

        *


            
  •  @return void

        *


    	
  • /

        plugin.Notification = function ( title, text, notificationDefaults ) {
            plugin.settings.seed++;
            var settings = $.extend({}, plugin.notification, notificationDefaults,{id:plugin.settings.seed});
            var item = new $.Notification(title, text, settings);
            _AddItem( item.To$() );
            $( plugin.settings.selectors.list ).append( item.To$() );
            item.Handler();
        };

       /*


    	
  •  Alias de Notice('error', text)

    •         
  • /

        plugin.E = function( text ) {
            plugin.Notification( 'error' , text);
        };

       /*


            
  •  Alias de Notice('warning', text)

    •         
  • /

        plugin.W = function( text ) {
            plugin.Notification('warning' , text);
        };

       /*


    	
  •  Alias de Notice('info', text)

    •         
  • /

        plugin.I = function( text ) {
            plugin.Notification( 'info' , text);
        };

       /*


    	
  •  Alias de Notice('success', text)

    • 	
  • /

        plugin.S = function( text ) {
            plugin.Notification( 'success' , text);
        };

       /*


    	
  •  Debug

    • 	
  • /

        var debug = function( text ) {
            // Verifie que ce n'est pas internet explorer
            if( (window['console'] !== undefined) ){
                console.info( text );
            }
        };

        // Construteur
        init();

    }

})(jQuery);

Conclusion :


La source est je pense assez clair et commentée. /!\ La documentation n'est plus à jour

Démonstration

http://www.inwebo.net/demo/plugin.mynotifications/
Télécharger le projet

Codes Sources

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (inwebo)