{% extends '../base.html.twig' %}

{% block body %}
  <div class="container-fluid">
    <div class="row flex-xl-nowrap">
      {% include '../../documentation/navbar.html.twig' with {
        'route' : nodefony.route
      } %}
      <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5" style="top: 5rem;">
        <h1> Notifications Center </h1>
        <hr>

        <div class="alert alert-info" role="alert">
          <strong>
          A notification center can manage all events off a composant in nodefony .</br>
          A notification center is a wrapper of node.js <a href="https://nodejs.org/dist/latest-v7.x/docs/api/events.html">Events</a> .</br>
          This wrapper add some particularities and assumes backward compatibility with old version of events manager.
          </strong>
        </div>


        <h2>Create Notifications Center : </h2>

        <p>

        </p>
        <pre><code class="hljs javascript">#!/usr/bin/env node

        const nodefony = require("nodefony");

        // create([settings], [context], [nbListener]) {
        const notificationsCenter = nodefony.notificationsCenter.create();

        // or with class ([settings], [context], [nbListener]) {
        const notificationsCenter = new nodefony.notificationsCenter.notification();

        console.log(notificationsCenter);

        /*Notification {
          _events: [Object: null prototype] {},
          _eventsCount: 0,
          _maxListeners: 20
        }*/
        </code></pre>

        <h2>Listen an event of Notification Center : </h2>
        <p>
        wrapper of addListener
        </p>
        <pre><code class="hljs javascript">//listen an event of notification center   : (eventName, callback)
        notificationsCenter.on( "ready", (myArg) => {

          console.log(myArg);
        });

        // The next time eventName is triggered, this listener is removed and then invoked.
        notificationsCenter.once( "ready", (myArg) => {

          console.log(myArg);
        });

        // change context  (autobinding in context) (context, eventName, callback)
        notificationsCenter.listen( context, "ready", function(myArg) {

          console.log(this);
        });

        </code></pre>


        <h2>Fire an event of Notification Center :  </h2>
        <p>
        Wrapper of emitter.emit
        </p>
        <pre><code class="hljs javascript"> //Fire an event of notification center   : (eventName, argument ...)

        notificationsCenter.emit("ready", myArg);

        // or

        notificationsCenter.fire("ready", myArg);
        </code></pre>


        <h2>Automatically add events in Notification Center : </h2>
        <p>
          Is useful to Automatically add events when you you have somme settings (configurations ).</br>
          settingsToListen find all EventsName who begin by "on" on the setting object
        </p>

        <pre><code class="hljs javascript"> #!/usr/bin/env node

        const nodefony = require("nodefony");

        const notificationsCenter = nodefony.notificationsCenter.create();

        //Add events with settings in notification center   : (localSettings, context)
        notificationsCenter.settingsToListen({

          display: true,
          <h3>onBoot</h3>: function() {
            // here context is mycontext
            console.log("EVENT : onBoot");
          },
          <h3>onInitialize</h3>: function() {
            // here context is mycontext
            console.log("EVENT : onInitialize");
          }
        }, mycontext);

        notificationsCenter.emit("onBoot", {});
        notificationsCenter.emit("onInitialize", {});
        /*
        EVENT : onBoot
        EVENT : onInitialize
        */

        // All in One
        const notificationsCenter = nodefony.notificationsCenter.create({

          display: true,
          <h3>onBoot</h3>: function() {
            // here context this is mycontext
            console.log("EVENT : onBoot");
          },
          <h3>onInitialize</h3>: function() {
            // here context this is mycontext
            console.log("EVENT : onInitialize");
          }, mycontext, 50);

        /**
          * Notification {
          * _events:
          *  [Object: null prototype] {
          *    onBoot: [Function: bound onBoot],
          *    onInitialize: [Function: bound onInitialize] },
          * _eventsCount: 2,
          * _maxListeners: 50
          *}
        */

        </code></pre>

        <h2>removeListener  event of Notification Center : </h2>

        <pre><code class="hljs javascript">#!/usr/bin/env node
        const nodefony = require("nodefony");

        const notificationsCenter = nodefony.notificationsCenter.create();

        const callback = function(myArg1, myArg2) {
          console.log(`my callback  ${myArg1} : ${myArg2}`);
        };

        // listen
        notificationsCenter.on("ready", callback);

        // listen
        notificationsCenter.on("ready", (myArg1, myArg2) => {
          console.log(`my callback2  ${myArg1} : ${myArg2}`);
        });

        console.log(notificationsCenter);

        // emit
        notificationsCenter.emit("ready", "arg1", "arg1");

        /*
        my callback  arg1 : arg1
        my callback2  arg1 : arg1

        Notification {
          _events:
           [Object: null prototype] { ready: [ [Function: callback], [Function] ] },
          _eventsCount: 1,
          _maxListeners: 20
        }
        */

        //removeListener  ready  callback of notification center   : (eventName, listener)
        notificationsCenter.removeListener("ready", callback);

        console.log(notificationsCenter);


        // emit
        notificationsCenter.emit("ready", "arg1", "arg1");

        /*
        my callback2  arg1 : arg1

        Notification {
          _events: [Object: null prototype] { ready: [Function] },
          _eventsCount: 1,
          _maxListeners: 20
        }
        */
        </code></pre>


        <h2>remove All Listeners of an event of Notification Center : </h2>

        <pre><code class="hljs javascript">
        //Unlisten all listeners   of an event Name  notification center   : ([eventName])
        notificationsCenter.removeAllListeners("ready");

        </code></pre>

      </main>
    </div>
  </div>
{% endblock %}