Skip to content
Browse files

Update context menu sample to show per-window menus

  • Loading branch information...
1 parent 0e40a9e commit 71651bddf706964bab5dca54a9493b30838fd010 @mihaip mihaip committed Jul 2, 2012
Showing with 99 additions and 28 deletions.
  1. +3 −0 context-menu/README.md
  2. +11 −0 context-menu/a.html
  3. +36 −0 context-menu/a.js
  4. +11 −0 context-menu/b.html
  5. +36 −0 context-menu/b.js
  6. +0 −8 context-menu/index.html
  7. +2 −20 context-menu/main.js
View
3 context-menu/README.md
@@ -0,0 +1,3 @@
+Sample that shows how to use the [contex menu API](http://developer.chrome.com/trunk/apps/contextMenus.html) in an app to achieve per-window windows.
+
+Context menus are normally global to the entire app, and thus all windows would have the same menu. This sample uses a `focus` event handler in each window to detect when a window is brought to the foreground. When it is, the contents of the context menu are updated with that window's commands. The `chrome.contextMenus.onClicked` event handler also only handles events that occur in that window.
View
11 context-menu/a.html
@@ -0,0 +1,11 @@
+<html>
+ <head>
+ <script src="a.js"></script>
+ </head>
+ <body>
+ <h1>Window A</h1>
+ <p>Right click to see the context menu.</p>
+ <p>Log:</p>
+ <pre id="log"></pre>
+ </body>
+</html>
View
36 context-menu/a.js
@@ -0,0 +1,36 @@
+var CONTEXT_MENU_COMMANDS = ['foo', 'bar', 'baz'];
+
+function log(message) {
+ document.getElementById('log').textContent += message + '\n';
+}
+
+function setUpContextMenu() {
+ chrome.contextMenus.removeAll(function() {
+ CONTEXT_MENU_COMMANDS.forEach(function(commandId) {
+ chrome.contextMenus.create({
+ title: 'A: ' + commandId,
+ id: commandId,
+ contexts: ['all']
+ });
+ });
+ });
+}
+
+chrome.contextMenus.onClicked.addListener(function(info) {
+ if (!document.hasFocus()) {
+ log('Ignoring context menu click that happened in another window');
+ return;
+ }
+
+ log('Item selected in A: ' + info.menuItemId);
+});
+
+onload = function() {
+ log('A is loaded');
+ setUpContextMenu();
+}
+
+onfocus = function() {
+ log('A is focused');
+ setUpContextMenu();
+}
View
11 context-menu/b.html
@@ -0,0 +1,11 @@
+<html>
+ <head>
+ <script src="b.js"></script>
+ </head>
+ <body>
+ <h1>Window B</h1>
+ <p>Right click to see the context menu.</p>
+ <p>Log:</p>
+ <pre id="log"></pre>
+ </body>
+</html>
View
36 context-menu/b.js
@@ -0,0 +1,36 @@
+var CONTEXT_MENU_COMMANDS = ['foo', 'bar', 'baz'];
+
+function log(message) {
+ document.getElementById('log').textContent += message + '\n';
+}
+
+function setUpContextMenu() {
+ chrome.contextMenus.removeAll(function() {
+ CONTEXT_MENU_COMMANDS.forEach(function(commandId) {
+ chrome.contextMenus.create({
+ title: 'B: ' + commandId,
+ id: commandId,
+ contexts: ['all']
+ });
+ });
+ });
+}
+
+chrome.contextMenus.onClicked.addListener(function(info) {
+ if (!document.hasFocus()) {
+ log('Ignoring context menu click that happened in another window');
+ return;
+ }
+
+ log('Item selected in B: ' + info.menuItemId);
+});
+
+onload = function() {
+ log('B is loaded');
+ setUpContextMenu();
+}
+
+onfocus = function() {
+ log('B is focused');
+ setUpContextMenu();
+}
View
8 context-menu/index.html
@@ -1,8 +0,0 @@
-<html>
- <head>
- <title>Context Menu Demo</title>
- </head>
- <body>
- <p>Right click to see the context menu</p>
- </body>
-</html>
View
22 context-menu/main.js
@@ -1,22 +1,4 @@
-// The click hander will get called when a context menu item is clicked
-function click_handler(info, tab) {
- console.log("You clicked the '" + info.menuItemId + "' menu item");
-}
-// Populate some entries in the context menu
-function populate_context_menu() {
- // Create one test item for each context type.
- var contexts = ["cut","snarf","paste","send","pipe","defer"];
- for (var i = 0; i < contexts.length; i++) {
- var context = contexts[i];
- var title = "The '" + context + "' menu item";
- var id = chrome.contextMenus.create({"title": title, "id": context/* , "onclick": function (){} */ } );
- console.log("'" + context + "' item:" + id);
- }
- // Attach a listener for clicks on the menu
- chrome.contextMenus.onClicked.addListener(click_handler);
-}
-// Add a listener that sets up the applicaation ofter launch
chrome.experimental.app.onLaunched.addListener(function() {
- chrome.appWindow.create('index.html');
- populate_context_menu();
+ chrome.appWindow.create('a.html', {top: 0, left: 0, width: 300, height: 300});
+ chrome.appWindow.create('b.html', {top: 0, left: 310, width: 300, height: 300});
});

0 comments on commit 71651bd

Please sign in to comment.
Something went wrong with that request. Please try again.