Cycymomo/chromeRichNotifications.html

## chromeRichNotifications.html
<!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>
	<!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>