Mynotifications---------------
Url     : http://codes-sources.commentcamarche.net/source/54302-mynotificationsAuteur  : inweboDate    : 06/08/2013
Licence :
=========

Ce document intitul  Mynotifications  issu de CommentCaMarche
(codes-sources.commentcamarche.net) est mis  disposition sous les termes de
la licence Creative Commons. Vous pouvez copier, modifier des copies de cette
source, dans les conditions fixes par la licence, tant que cette note
apparat clairement.

Description :
=============

Plug in Jquery de notification visuel d'&eacute;v&eacute;nements.
<br />N&eacut
e;cessaire
<br />
<br />    Jquery 1.6.4+
<br />    Le plug in (plugin.mynoti
fications.js)
<br />    Eventuellement une feuille de style
<br />    Navigate
ur moderne
<br />
<br />Pour inclure Jquery le plus simple est d'utiliser Goog
le Librairies et de copier/coller ces lignes dans votre header
<br />
<br />&l
t;script type=&quot;text/javascript&quot; src=&quot;<a href='https://ajax.google
apis.com/ajax/libs/jquery/1.6.4/jquery.min.js' target='_blank'>https://ajax.goog
leapis.com/ajax/libs/jquery/1.6.4/jquery.min.js</a>&quot;&gt;&lt;/script&gt;
<b
r />
<br />Objectifs
<br />
<br />    Simple d'utilisation
<br />    Ind&eac
ute;pendant d'un balisage particulier
<br />    Compatible navigateurs modernes

<br />
<br />Il sert &agrave; afficher dans le navigateur des messages pour l
'utilisateur. Nous avons le m&ecirc;me fonctionnement avec nos diff&eacute;rents
 OS. Ainsi que sur un r&eacute;seau social tr&egrave;s connu.
<br />Principe
<
br />
<br />Le plugin recherche un container dans le DOM de la page courante. S
i il n'est pas pr&eacute;sent il est ajout&eacute;. Les messages seront contenus
 dans une liste non ordonn&eacute;e ajout&eacute;e automatiquement. Chaque item 
de cette liste sera une notification pour l'utilisateur, de dur&eacute;e d'affic
hage, d'apparence configurable. Les items peuvent &ecirc;tre supprim&eacute;s lo
rs d'un clic sur ceux ci, automatiquement ou au clic sur un bouton de fermeture.

<br />Container
<br />
<br />Le container est une simple div avec un id html
 unique. Il sera le dernier noeud de body
<br />
<br />&lt;div id=&quot;contai
ner&quot;&gt;&lt;/div&gt;
<br />
<br />Liste
<br />
<br />Est dans le contai
ner, toutes les notifications seront ajout&eacute;es dans ce noeud.
<br />
<br
 />&lt;ul&gt;&lt;/ul&gt;
<br />
<br />Item
<br />
<br />Est un item de liste
 avec un id unique et une classe CSS.
<br />
<br />&lt;li id=&quot;message-0&q
uot; style=&quot;display: block;&quot; class=&quot;my-notifications-error&quot;&
gt;
<br />    &lt;h6&gt;Error&lt;a class=&quot;my-notifications-close&quot; hre
f=&quot;#&quot; onclick=&quot;return false;&quot;&gt;x&lt;/a&gt;&lt;/h6&gt;
<br
 />    &lt;p&gt;Message d'erreur.&lt;/p&gt;
<br />&lt;/li&gt;
<br />
<br />Co
nstructeur
<br />
<br />L'objet MyNotifications peut s'instancier de deux mani
&egrave;res.
<br />
<br />L'instanciation par d&eacute;fauts
<br />
<br />//
 Constructeur par d&eacute;fauts
<br />var myplugin = new $.myNotifications();


<br />
<br />Lors de l'instanciation de l'objet le debug est activ&eacute;, le
 container principal se nomme container, le selecteur CSS est un #, son id CSS c
omplet est donc #container, les notifications s'affichent pour une dur&eacute;e 
de 3000 ms. Le prefix des id CSS est message. les notifications se ferment lors 
d'un click elles et elles poss&eacute;dent &eacute;galement un bouton de fermetu
re.
<br />
<br />Les class CSS par d&eacute;faut des notifications est :
<br 
/>
<br />    Pour les erreurs : my-notifications-error, la forme compl&eacute;t
e est .my-notifications-error
<br />    Pour les avertissements : my-notificati
ons-warning, la forme compl&eacute;te est .my-notifications-warning
<br />    P
our les informations : my-notifications-info, la forme compl&eacute;te est .my-n
otifications-info
<br />    Pour les validations : my-notifications-okay, la fo
rme compl&eacute;te est .my-notifications-okay
<br />    Du bouton de fermeture
 des notifications : my-notifications-close, la forme compl&eacute;te est .my-no
tifications-close
<br />
<br />L'instanciation avec param&egrave;tres
<br />


<br />// Constructeur avec param&egrave;tres (tableau)
<br />var myplugin = ne
w $.myNotifications({
<br />                                        'delay':-1,

<br />                                        'containerId': 'notifications'

<br />                                     });
<br />
<br />M&ecirc;me chose q
ue pr&eacute;cedemment mais les notifications s'affichent perpetuellement, et le
 container principal se nomme d&eacute;sormais notifications
<br />
<br />Plug
in
<br />
<br />Attributs
<br />
<br />Arguments 	Values 	Description
<br /
>debug 	True 	Affiche le d&eacute;roulement du process dans la console de debug.

<br />False 	Silencieux
<br />Container name 	string 	Nom du container princi
pal
<br />containerSelectorType 	string 	Un selecteur CSS, #, .
<br />containe
rSelector 	string 	Selecteur CSS
<br />listName 	string 	Selecteur type
<br />
listSelectorType 	string 	Un selecteur CSS, #, .
<br />itemDisplayDelay 	int 	D
ur&eacute;e d'affichage des notifications en ms.Un entier n&eacute;gatif donne u
n affichage perpetuel
<br />itemDisplayDelay 	int 	Nombre ajouts de notificatio
ns total dans la liste
<br />itemName 	string 	Pr&eacute;fixe des notifications

<br />itemCount 	int 	Nombre de notifications pr&eacute;sentes dans le DOM
<b
r />itemCloseByClick 	True 	Les notifications se ferment lors d'un click.
<br /
>False 	Les notifications ne se ferment pas lors d'un click.
<br />itemCloseByB
utton 	True 	Bouton de fermeture ajout&eacute; &agrave; chaques notifications.

<br />False 	Pas de bouton
<br />itemClassError 	string 	Class CSS des notifica
tions d erreurs
<br />itemClassWarning 	string 	Class CSS des notifications ave
rtissement
<br />itemClassInfo 	string 	Class CSS des notifications d informati
on
<br />itemClassOkay 	string 	Class CSS des notifications validation
<br />i
temClassClose 	string 	Class CSS du bouton fermeture de notification
<br />M&ea
cute;thodes priv&eacute;es
<br />
<br />    init() : Construit les attributs m
anquants de l'objet, s'assure de la pr&eacute;sence dans le DOM du container
<b
r />    buildContainerSelector() : Construit le selecteur CSS du container princ
ipal. eg : #container
<br />    buildChildsAttributs() : Mets &agrave; jour l'i
ndex des notifications. Elles conservent comme ceci un nom unique
<br />    con
tainerIsSet() : Le container est il pr&eacute;sent
<br />    buildContainer() :
 Si le container n'est pas pr&eacute;sent, on l'ajoute au DOM
<br />    listene
rClose() : Ecouteur d'&eacute;venement sur les notifications
<br />
<br />M&ea
cute;thodes publics
<br />
<br />Le plugin poss&eacute;de une m&eacute;thode p
rincipale :
<br />
<br />    msg('title', 'text') : title est le type de notif
ications info | warning | error | okay Si title n'est pas un des 4 choix pr&eacu
te;c&eacute;dents, la notification sera de type custom, ayant pour titre de fen&
ecirc;tre title et comme texte text.
<br />
<br />Alias
<br />
<br />Les m&e
acute;thodes suivantes sont simplement des alias de msg() le param&eacute;tre de
 title est d&eacute;j&agrave; assign&eacute;.
<br />
<br />    msgError('text'
)
<br />    msgWarning('text')
<br />    msgOkay('text')
<br />    msgInfo('t
ext')
<br />
<br />Installation
<br />
<br />Le plugin pour fonctionner n&ea
cute;cessite :
<br />
<br />    Jquery 1.6.8+
<br />    Une feuille de style 
(non n&eacute;cessaire)
<br />    Le plugin
<br />
<br />D&eacute;p&ocirc;t G
ihub
<br />
<br />Fork me i'm famous
<br />
<br /><a href='https://github.co
m/inwebo/MyNotifications-Jquery-plugin/' target='_blank'>https://github.com/inwe
bo/MyNotifications-Jquery-plugin/</a>
<br />
<br />WIKI
<br />
<br /><a href
='https://github.com/inwebo/MyNotifications-Jquery-plugin/wiki' target='_blank'>
https://github.com/inwebo/MyNotifications-Jquery-plugin/wiki</a>
<br /><a name=
'source-exemple'></a><h2> Source / Exemple : </h2>

<br /><pre class='code' dat
a-mode='basic'>
/**

<ul> <li> My.Notifications</li></ul>
 *

<ul> <li> Pl
ugin Jquery de notification visuel d'vnements. Simple et configurable</li></ul
>
 *

<ul> <li> LICENCE</li></ul>
 *

<ul> <li> Vous tes libre de :</li><
/ul>
 *

<ul> <li> Partager : reproduire, distribuer et communiquer l'oeuvre


</li> <li> Remixer  : adapter l'oeuvre</li></ul>
 *

<ul> <li> Selon les con
ditions suivantes :</li></ul>
 *

<ul> <li> Attribution : Vous devez attribue
r l'oeuvre de la manire indique par
</li> <li> l'auteur de l'oeuvre ou le tit
ulaire des droits (mais pas d'une manire
</li> <li> qui suggrerait qu'ils vou
s soutiennent ou approuvent votre utilisation
</li> <li> de l'oeuvre).</li></ul
>
 *

<ul> <li> Pas d&amp;#8217;Utilisation Commerciale : Vous n'avez pas le 
droit d'utiliser cette
</li> <li> oeuvre  des fins commerciales.</li></ul>
 *


<ul> <li> Partage  l'Identique : Si vous modifiez, transformez ou adaptez c
ette
</li> <li> oeuvre, vous n'avez le droit de distribuer votre cration que s
ous une
</li> <li> licence identique ou similaire  celle-ci.</li></ul>
 *


<ul> <li> Remarque : A chaque rutilisation ou distribution de cette oeuvre, vou
s
</li> <li> devez faire apparatre clairement au public la licence selon laque
lle elle
</li> <li> est mise  disposition. La meilleure manire de l'indiquer 
est un lien vers
</li> <li> cette page web.</li></ul>
 *

<ul> <li> @categor
y  Jquery
</li> <li> @package   Plugin
</li> <li> @copyright Copyright (c) 200
5-2012 Inwebo (<a href='http://www.inwebo.net)' target='_blank'>http://www.inweb
o.net)</a>
</li> <li> @author    Julien Hannotin
</li> <li> @license   <a href
='http://creativecommons.org/licenses/by-nc-sa/2.0/fr/' target='_blank'>http://c
reativecommons.org/licenses/by-nc-sa/2.0/fr/</a>
</li> <li> @version   0112-201
2
</li> <li> @link      git://github.com/inwebo/MyNotifications-Jquery-plugin.g
it
</li> <li>/</li></ul>
;(function ($){
    $.Notification = function (title
, text, options) {

            var defaults = {
                debug:true,


                selectors: {
                    i:&quot;#notification-&quot;


                },
                id:-1,
                life:-1,
         
       closeSelf:true,
                closeButton:true,
                style
: {
                    main:&quot;notification&quot;,
                    err
or:&quot;error&quot;,
                    warning:&quot;warning&quot;,
       
             info:&quot;info&quot;,
                    success:&quot;success&q
uot;,
                    custom:&quot;custom&quot;,
                    butto
n:&quot;close&quot;
                }
            };

        var plugin = t
his;

        plugin.settings = {};

        var init = function() {
      
      plugin.settings = $.extend( {}, defaults, options );
            plugin.s
ettings.name = 'MyItems';
            plugin.settings.version = '12-2012';
   
         plugin.settings.id = plugin.settings.selectors.i + plugin.settings.id;


            plugin.settings.selectors.button = plugin.settings.id + &quot; a.&q
uot; + plugin.settings.style.button;
            plugin.title = title;
       
     plugin.text = text;
            plugin.cache = {
                containe
r : $(&quot;&lt;li&gt;&lt;/li&gt;&quot;).attr( 'id', plugin.settings.id.substrin
g( 1, plugin.settings.id.length ) ).attr('class', plugin.settings.style.main),

                header    : $(&quot;&lt;h6&gt;&lt;/h6&gt;&quot;).html( plugin.ti
tle ),
                body      : $(&quot;&lt;p&gt;&lt;/p&gt;&quot;).html( plu
gin.text ),
                button    : $(&quot;&lt;a&gt;&lt;/a&gt;&quot;).attr
( 'class', plugin.settings.style.button ).attr('href', '#').attr('onClick', 'ret
urn false;').html('x')
            };
            plugin.cache.object = _Facto
ry();
        };

        var _Factory = function() {
            _Title();


            return $( plugin.cache.container ).append(
                $( plug
in.cache.header )
                ).append(
                $( plugin.cache.bo
dy )
                )
        };

        var _Title = function() {
      
      switch( plugin.title ) {
                case 'error' :
                
    plugin.cache.container.addClass( plugin.settings.style.error );
           
         break;
                case 'warning' :
                    plugin.ca
che.container.addClass( plugin.settings.style.warning );
                    br
eak;
                case 'info' :
                    plugin.cache.container.
addClass( plugin.settings.style.info );
                    break;
           
     case 'success' :
                    plugin.cache.container.addClass( plug
in.settings.style.success );
                    break;
                defaul
t :
                    plugin.cache.container.addClass( plugin.settings.style.
custom );
                    break;
            }

            if( plugin.s
ettings.closeButton === true ) {
                $( plugin.cache.header ).appen
d( $( plugin.cache.button ) );
            }
        };

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


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

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

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

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

            // Auto fade
            if(plugin.settings.life &gt; 0) {
  
              $( plugin.settings.id ).delay( plugin.settings.life ).fadeOut( 'fa
st',function(){
                    plugin.Remove();
                });
    
        }
        };

        init();
    };

    $.myNotifications = func
tion( options, notificationDefaults ) {

        // Arguments
        var def
aults = {
            // Affiche dans la console de firebug le droulement du p
rocessus
            debug: true,

            // selecteurs CSS
           
 selectors : {
                // Container principal
                containe
r : &quot;#notifications&quot;,
                // Current list
              
  list: &quot;#list&quot;
            },

            // Entier unique
     
       seed:-1
        };

       /*

<ul>        <li> Surcharge du constru
cteur par defaut d'une notification. Voir $.Notification
</li>        <li>/</li
></ul>
        var notification = {
            debug:true,
            selec
tors: {
                i:&quot;#notification-&quot;
            },
         
   id:-1,
            life:-1,
            closeSelf:true,
            closeB
utton:true,
            style: {
                main:&quot;notification&quot;
,
                error:&quot;error&quot;,
                warning:&quot;warni
ng&quot;,
                info:&quot;info&quot;,
                success:&quot
;success&quot;,
                custom:&quot;custom&quot;,
                but
ton:&quot;close&quot;
            }

        };

        var plugin = this;


        plugin.settings = {};

       /*

<ul>        <li> Constructeur 
de l'objet
</li>        <li>/</li></ul>
        var init = function() {

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

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


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

        };

       /*



<ul>        <li> Le container principal est il prsent dans le DOM</li></ul>


        *

<ul>        <li> @return true si il est dj prsent sinon false</
li></ul>
        *

<ul>        <li>/</li></ul>
        var _DomReady = func
tion() {
            if( plugin.cache.container.length === 0 )   {
           
     debug( 'Container ' + plugin.settings.selectors.container + ' doesn\'t exis
t' );
                return false;
            }
            else {
       
         debug( 'Container ' + plugin.settings.selectors.container + ' found' );

                return true;
            }
        };

       /*

<ul>  
      <li> Le container principal n'est pas prsent, on l'ajoute au DOM
</li>  
      <li> Cela sera le dernier noeud enfant du noeud body</li></ul>
        *



<ul>        <li> @return void
</li>        <li>/</li></ul>
        var _Dom
Build = function() {
            var c = $( '&lt;div&gt;&lt;/div&gt;' ).attr( '
id' , plugin.settings.selectors.container.substring(1,plugin.settings.selectors.
container.length) );
            var l = $(  '&lt;ul&gt;&lt;/ul&gt;' ).attr( 'i
d' , plugin.settings.selectors.list.substring(1,plugin.settings.selectors.list.l
ength) );
            $('body').append( c.append( l ) );
            debug('Co
ntainer id : '+ plugin.settings.selectors.container +' and list '+plugin.setting
s.selectors.list+' added to dom.');
        };

       /*

<ul>        <li>
 Ajout un objet jquery $.Notification dans la liste courante
</li>        <li> 
Cela sera le dernier noeud enfant du noeud body</li></ul>
        *

<ul>    
    <li> @param obj L'objet Jquery  ajouter</li></ul>
        *

<ul>       
 <li> @return void
</li>        <li>/</li></ul>
        var _AddItem = functio
n( obj ) {
            $( plugin.settings.selectors.list ).append( obj );
    
    };

       /*

<ul>        <li> Affiche une notification ayant comme tit
re title et avec comme
</li>        <li> text text</li></ul>
        *

<ul>
        <li> @param title  Un type prdfini parmi okay | warning | error | info

</li>        <li>               peut tre dfini par l'utilisateur, la notific
ations
</li>        <li>               sera un message</li></ul>
        *


<ul>        <li> @param text  Le text  afficher</li></ul>
        *

<ul>   
     <li> @param notificationDefaults object Objet de configuration de notificat
ions
</li>        <li>                                     voir le constructeur
 $.Notification</li></ul>
        *

<ul>        <li> @return void</li></ul>


        *

<ul>	<li>/</li></ul>
        plugin.Notification = function ( tit
le, text, notificationDefaults ) {
            plugin.settings.seed++;
       
     var settings = $.extend({}, plugin.notification, notificationDefaults,{id:p
lugin.settings.seed});
            var item = new $.Notification(title, text, s
ettings);
            _AddItem( item.To$() );
            $( plugin.settings.s
electors.list ).append( item.To$() );
            item.Handler();
        };


       /*

<ul>	<li> Alias de Notice('error', text)
</li>        <li>/</li>
</ul>
        plugin.E = function( text ) {
            plugin.Notification( '
error' , text);
        };

       /*

<ul>        <li> Alias de Notice('wa
rning', text)
</li>        <li>/</li></ul>
        plugin.W = function( text )
 {
            plugin.Notification('warning' , text);
        };

       /*



<ul>	<li> Alias de Notice('info', text)
</li>        <li>/</li></ul>
      
  plugin.I = function( text ) {
            plugin.Notification( 'info' , text)
;
        };

       /*

<ul>	<li> Alias de Notice('success', text)
</li>	
<li>/</li></ul>
        plugin.S = function( text ) {
            plugin.Notif
ication( 'success' , text);
        };

       /*

<ul>	<li> Debug
</li>	<
li>/</li></ul>
        var debug = function( text ) {
            // Verifie q
ue ce n'est pas internet explorer
            if( (window['console'] !== undefi
ned) ){
                console.info( text );
            }
        };

   
     // Construteur
        init();

    }

})(jQuery);
</pre>
<br /><a n
ame='conclusion'></a><h2> Conclusion : </h2>

<br />La source est je pense asse
z clair et comment&eacute;e. /!\ La documentation n'est plus &agrave; jour
<br 
/>
<br />D&eacute;monstration
<br />
<br /><a href='http://www.inwebo.net/dem
o/plugin.mynotifications/' target='_blank'>http://www.inwebo.net/demo/plugin.myn
otifications/</a>
