Cycymomo
7/10/2013 - 1:05 PM

Chrome rich notifications

Chrome rich notifications

chromeRichNotifications.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <title>Exemple des Notifications Riches de Chrome</title>
  <script>
    /*
    * Liste des callbacks
    */
    var notificationCreated = function(seqID) {
          console.log("Notification '" + seqID + "' créée avec succès !");
        }
      , notificationDisplayed = function(seqID) {
          console.log("Notification '" + seqID + "' affichée avec succès !");
        }
      , notificationClosed = function(seqID, actionUser) {
          console.log("Notification '" + seqID + "' fermée" + (actionUser ? " par l'utilisateur" : ""));
        }
      , notificationClicked = function(seqID) {
    	    console.log("Notification '" + seqID + "' clickée");
        }
      , notificationBtnClick = function(seqID, boutonID) {
    	    console.log("Notification '" + seqID + "' contient un bouton '" + boutonID + "' qui a été clické");
        }
      , seqID = 0
    /*
    * Les différents types de notifications
    */
      , notOptions = {
          "simple": {
            type : "simple",
          	title: "Notification Simple",
          	message: "Juste un petit message"
          }
        , "basic": {
            type : "basic",
          	title: "Notification Basique",
          	message: "Première partie message",
          	expandedMessage: "la suite du message",
          }
        , "image": {
        		type : "image",
        		title: "Notification Image",
        		message: "Juste un petit message avec une image",
        	}
        , "progress": {
            type: 'progress',
          	title: "Notification Progress",
          	message: "Juste un petit message avec une barre de progression",
            progress: 30
          }
        , "list": {
        		type : "list",
        		title: "Notification List",
        		message: "Voici une liste d'objet",
        		items: [
        			{ title: "Objet1", message: "La réponse A"}
        		, { title: "Objet2", message: "La réponse B"}
        		, { title: "Objet3", message: "La réponse C"}
        		]
        	}
      };

    // Création des notifications
    function notifier(evt) {
    	chrome.notifications.create("id"+seqID++, notOptions[evt.srcElement.id], notificationCreated);
    }

    // Affectation des événements
    window.addEventListener("load", function() {
      document.getElementById("simple").addEventListener("click", notifier);
    	document.getElementById("basic").addEventListener("click", notifier);
    	document.getElementById("image").addEventListener("click", notifier);
    	document.getElementById("list").addEventListener("click", notifier);
      document.getElementById("progress").addEventListener("click", notifier);

    	chrome.notifications.onDisplayed.addListener(notificationDisplayed);
    	chrome.notifications.onClosed.addListener(notificationClosed);
    	chrome.notifications.onClicked.addListener(notificationClicked);
    	chrome.notifications.onButtonClicked.addListener(notificationBtnClick);
    });
  </script>
</head>
<body>
<h1>Exemple des Notifications Riches de Chrome</h1>
<button id="simple">simple</button>
<button id="basic">basic</button>
<button id="image">image</button>
<button id="list">list</button>
<button id="progress">progress</button>
</body>
</html>