Permalink
Browse files

added first draft of the rich-notifications, by Joe Marini

  • Loading branch information...
mangini committed Feb 26, 2013
1 parent 05d6561 commit 4ef7484b4fb02e8c52ef79e161e8d3b708afdcc9
@@ -0,0 +1,9 @@
+# Rich notifications
+
+This sample shows how to use the "templated" notifications API,
+aka Rich Notifications, which allows an app to show feature-rich notifications
+in the system tray. This API is still in experimental state.
+
+## Resources
+
+* Notification API (no documentation yet)
@@ -0,0 +1,3 @@
+chrome.app.runtime.onLaunched.addListener(function () {
+ chrome.app.window.create("window.html", {width:600, height:400});
+});
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
View
@@ -0,0 +1,120 @@
+// Declare a variable to generate unique notification IDs
+var notID = 0;
+
+// partial URLs to the images used in the example
+var asURLs = [
+ "/images/inbox-64x64.png",
+ "/images/inbox-08-64x64.png",
+ "/images/white-64x64.png",
+ "/images/africa-400x400.png",
+ "/images/antartica-400x400.png",
+ "/images/asia-400x400.png",
+ "/images/europe-400x400.png",
+ "/images/north-america-400x400.png",
+ "/images/oceania-400x400.png",
+ "/images/south-america-400x400.png"
+];
+
+// List of sample notifications. These are further customized
+// in the code according the UI settings.
+var notOptions = [
+ {
+ templateType : "simple",
+ title: "Simple Notification",
+ message: "Just a text message and icon"
+ },
+ {
+ templateType : "basic",
+ title: "Basic Notification",
+ message: "Short message part",
+ expandedMessage: "Longer part of the message",
+ },
+ {
+ templateType : "image",
+ title: "Image Notification",
+ message: "Short message plus an image",
+ },
+ {
+ templateType : "list",
+ title: "List Notification",
+ message: "List of items in a message",
+ items: [
+ { title: "Item1", message: "This is item 1"},
+ { title: "Item2", message: "This is item 2"},
+ { title: "Item3", message: "This is item 3"},
+ { title: "Item4", message: "This is item 4"},
+ { title: "Item5", message: "This is item 5"},
+ { title: "Item6", message: "This is item 6"},
+ ]
+ }
+];
+
+// Window initialization code. Set up the various event handlers
+window.addEventListener("load", function() {
+ document.getElementById("simple").addEventListener("click", doNotify);
+ document.getElementById("basic").addEventListener("click", doNotify);
+ document.getElementById("image").addEventListener("click", doNotify);
+ document.getElementById("list").addEventListener("click", doNotify);
+
+ // set up the event listeners
+ chrome.experimental.notification.onDisplayed.addListener(notificationDisplayed);
+ chrome.experimental.notification.onClosed.addListener(notificationClosed);
+ chrome.experimental.notification.onClicked.addListener(notificationClicked);
+ chrome.experimental.notification.onButtonClicked.addListener(notificationBtnClick);
+});
+
+// Create the notification with the given parameters as they are set in the UI
+function doNotify(evt) {
+ var path = chrome.runtime.getURL(asURLs[document.getElementById("img").options.selectedIndex]);
+ var options = null;
+ var sBtn1 = document.getElementById("btn1").value;
+ var sBtn2 = document.getElementById("btn2").value;
+ // Create the right notification for the selected type
+ if (evt.srcElement.id == "simple") {
+ options = notOptions[0];
+ }
+ else if (evt.srcElement.id == "basic") {
+ options = notOptions[1];
+ }
+ else if (evt.srcElement.id == "image") {
+ options = notOptions[2];
+ options.imageUrl = chrome.runtime.getURL("/images/tahoe-320x215.png");
+ }
+ else if (evt.srcElement.id == "list") {
+ options = notOptions[3];
+ }
+ options.iconUrl = path;
+ // priority is from -2 to 2. The API makes no guarantee about how notifications are
+ // visually handled by the OS - they simply represent hints that the OS can use to
+ // order or display them however it wishes.
+ options.priority = document.getElementById("pri").options.selectedIndex - 2;
+
+ options.buttons = [];
+ if (sBtn1.length)
+ options.buttons.push({ title: sBtn1 });
+ if (sBtn2.length)
+ options.buttons.push({ title: sBtn2 });
+
+ chrome.experimental.notification.create("id"+notID++, options, creationCallback);
+}
+
+function creationCallback(notID) {
+ console.log("Succesfully created " + notID + " notification");
+}
+
+// Event handlers for the various notification events
+function notificationDisplayed(notID) {
+ console.log("The notification '" + notID + "' was displayed to the user");
+}
+
+function notificationClosed(notID, bByUser) {
+ console.log("The notification '" + notID + "' was closed" + (bByUser ? " by the user" : ""));
+}
+
+function notificationClicked(notID) {
+ console.log("The notification '" + notID + "' was clicked");
+}
+
+function notificationBtnClick(notID, iBtn) {
+ console.log("The notification '" + notID + "' had button " + iBtn + " clicked");
+}
@@ -0,0 +1,14 @@
+{
+ "name": "Notify Test App",
+ "description": "Tests the notification API",
+ "manifest_version" : 2,
+ "version" : "0.1",
+ "app" : {
+ "background" : {
+ "scripts" : ["app.js"]
+ }
+ },
+ "permissions" : [
+ "experimental"
+ ]
+}
@@ -0,0 +1,23 @@
+#settings {
+ padding: 10px;
+ border: 1px solid silver;
+ margin-bottom: 5px;
+}
+
+h1, h3 {
+ margin-top: 0
+}
+
+body {
+ font-family: "Open Sans", Helvetica, Arial;
+ font-size: 10pt;
+}
+
+button {
+ width: 140px;
+ margin-right: 20px;
+}
+
+.sample {
+ margin-bottom:5px;
+}
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<!-- Copyright (c) 2013 The Chromium Authors. All rights reserved.
+ -- Use of this source code is governed by a BSD-style license that can be
+ -- found in the LICENSE file. -->
+<html>
+ <head>
+ <title>Rich Notifications Sample</title>
+ <link rel="stylesheet" href="styles.css">
+ </head>
+ <body>
+ <h1>Rich Notifications Sample</h1>
+ <p>This sample demonstrates the use of the Rich Notifications API. Use the controls and buttons below to create various different rich notifications.</p>
+ <div id="settings">
+ <h3>Settings</h3>
+ <div>
+ <label for="pri">Priority: </label>
+ <select id="pri">
+ <option>-2</option>
+ <option>-1</option>
+ <option selected>0</option>
+ <option>1</option>
+ <option>2</option>
+ </select>
+ <label for="img">Image: </label>
+ <select id="img">
+ <option>Mail</option>
+ <option>Multiple Mail</option>
+ <option>White</option>
+ <option>Africa</option>
+ <option>Antarctica</option>
+ </select>
+ </div>
+ <div>
+ <label for="btn1">Button 1: </label><input id="btn1" type="text">
+ <label for="btn2">Button 2: </label><input id="btn2" type="text">
+ </div>
+ </div>
+ <div class="sample">
+ <button id="simple">Simple Notification</button>
+ <span>A simple notification: icon, title, and message</span>
+ </div>
+ <div class="sample">
+ <button id="basic">Basic Notification</button>
+ <span>Basic notification: icon, title, and message, up to two buttons</span>
+ </div>
+ <div class="sample">
+ <button id="image">Image Notification</button>
+ <span>Image notification: icon, title, image, and message, up to two buttons</span>
+ </div>
+ <div class="sample">
+ <button id="list">List Notification</button>
+ <span>List notification: icon, title, list of items, up to two buttons</span>
+ </div>
+ <script src="main.js"></script>
+ </body>
+</html>

0 comments on commit 4ef7484

Please sign in to comment.