Last active
December 19, 2015 13:59
-
-
Save Cycymomo/5966124 to your computer and use it in GitHub Desktop.
Chrome rich notifications
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment