Fix Issue 907: Allow custom menu options (Apply patch from adambender)

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@2055 eee81c28-f429-11dd-99c0-75d572ba1ddd

Makefile

@@ -19,6 +19,7 @@ JS_FILES=\
 	path.js \
 	svgcanvas.js \
 	svg-editor.js \
+	contextmenu.js \
 	locale/locale.js
 
 JS_INPUT_FILES=$(addprefix editor/, $(JS_FILES))

editor/contextmenu.js

@@ -0,0 +1,67 @@
+/**
+ * Package: svgedit.contextmenu
+ * 
+ * Licensed under the Apache License, Version 2
+ * 
+ * Author: Adam Bender
+ */
+// Dependencies:
+// 1) jQuery (for dom injection of context menus)
+var svgedit = svgedit || {};
+(function() {
+	var self = this;
+	if (!svgedit.contextmenu) {
+		svgedit.contextmenu = {};
+	}
+	self.contextMenuExtensions = {}
+	var addContextMenuItem = function(menuItem) {
+		// menuItem: {id, label, shortcut, action}
+		if (!menuItemIsValid(menuItem)) {
+			console
+					.error("Menu items must be defined and have at least properties: id, label, action, where action must be a function");
+			return;
+		}
+		if (menuItem.id in self.contextMenuExtensions) {
+			console.error('Cannot add extension "' + menuItem.id
+					+ '", an extension by that name already exists"');
+			return;
+		}
+		// Register menuItem action, see below for deferred menu dom injection
+		console.log("Registed contextmenu item: {id:"+ menuItem.id+", label:"+menuItem.label+"}");
+		self.contextMenuExtensions[menuItem.id] = menuItem;
+		//TODO: Need to consider how to handle custom enable/disable behavior
+	}
+	var hasCustomHandler = function(handlerKey) {
+		return self.contextMenuExtensions[handlerKey] && true;
+	}
+	var getCustomHandler = function(handlerKey) {
+		return self.contextMenuExtensions[handlerKey].action;
+	}
+	var injectExtendedContextMenuItemIntoDom = function(menuItem) {
+		if (Object.keys(self.contextMenuExtensions).length == 0) {
+			// all menuItems appear at the bottom of the menu in their own container.
+			// if this is the first extension menu we need to add the separator.
+			$("#cmenu_canvas").append("<li class='separator'>");
+		}
+		var shortcut = menuItem.shortcut || "";
+		$("#cmenu_canvas").append("<li class='disabled'><a href='#" + menuItem.id + "'>"                   
+									+ menuItem.label + "<span class='shortcut'>"
+									+ shortcut + "</span></a></li>");
+	}
+
+	var menuItemIsValid = function(menuItem) {
+		return menuItem && menuItem.id && menuItem.label && menuItem.action && typeof menuItem.action == 'function';
+	}
+	
+	// Defer injection to wait out initial menu processing. This probably goes away once all context
+	// menu behavior is brought here.
+	svgEditor.ready(function() {
+		for (menuItem in contextMenuExtensions) {
+			injectExtendedContextMenuItemIntoDom(contextMenuExtensions[menuItem]);
+		}
+	});
+	svgedit.contextmenu.resetCustomMenus = function(){self.contextMenuExtensions = {}}
+	svgedit.contextmenu.add = addContextMenuItem;
+	svgedit.contextmenu.hasCustomHandler = hasCustomHandler;
+	svgedit.contextmenu.getCustomHandler = getCustomHandler;
+})();

editor/svg-editor.html

@@ -39,6 +39,7 @@
   <script type="text/javascript" src="svgcanvas.js"></script>
   <script type="text/javascript" src="svg-editor.js"></script>
   <script type="text/javascript" src="locale/locale.js"></script>
+  <script type="text/javascript" src="contextmenu.js"></script>
 <!--{endif}-->
 
 <!-- you can load extensions here -->

editor/svg-editor.js

@@ -4302,7 +4302,11 @@
 						case 'move_back':
 							moveToBottomSelected();
 							break;
-
+  						default:
+ 							if(svgedit.contextmenu && svgedit.contextmenu.hasCustomHandler(action)){
+ 								svgedit.contextmenu.getCustomHandler(action).call();
+  							}
+  							break;
 					}
 					
 					if(svgCanvas.clipBoard.length) {

test/all_tests.html

@@ -7,6 +7,7 @@
   <h1>All SVG-edit Tests</h1>
   <p>This file frames all SVG-edit test pages.  This should only include tests known to work.  These tests are known to pass 100% in the following:  Firefox 3.6, Chrome 7, IE9 Preview 6 (1.9.8006.6000), Opera 10.63.  If a test is broken in this page, it is possible that <em>YOU</em> broke it.  Please do not submit code that breaks any of these tests.</p>
   <iframe src='svgtransformlist_test.html' width='100%' height='300'></iframe>
+  <iframe src='contextmenu_test.html' width='100%' height='300'></iframe>
   <iframe src='math_test.html' width='100%' height='300'></iframe>
   <iframe src='svgutils_test.html' width='100%' height='300'></iframe>
   <iframe src='history_test.html' width='100%' height='300'></iframe>

test/contextmenu_test.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>  
+<head>  
+  <link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>  
+  <script src='../editor/jquery.js'></script>
+  <script>
+    // Mock for browser.js
+    window.svgedit = {};
+    window.svgEditor = {ready:function(){}};
+  </script>
+  <script type='text/javascript' src='../editor/contextmenu.js'></script>
+  <script type='text/javascript' src='qunit/qunit.js'></script>  
+  <script type='text/javascript'>
+  $(function() {
+  	// log function
+  	QUnit.log = function(result, message) {
+		if (window.console && window.console.log) {
+			window.console.log(result +' :: '+ message);
+		}
+	};
+
+	function tearDown(){
+		svgedit.contextmenu.resetCustomMenus();
+	}
+	
+	module('svgedit.contextmenu');
+	
+	test('Test svgedit.contextmenu package', function() {
+		expect(4);
+		
+		ok(svgedit.contextmenu,"contextmenu registered correctly");
+		ok(svgedit.contextmenu.add,"contextmenu.add registered correctly");
+		ok(svgedit.contextmenu.hasCustomHandler,"contextmenu hasCustomHandler registered correctly");
+		ok(svgedit.contextmenu.getCustomHandler,"contextmenu getCustomHandler registered correctly");
+	});
+	
+	test('Test svgedit.contextmenu does not add invalid menu item', function() {
+		expect(3);
+		
+		svgedit.contextmenu.add({id:"justanid"});
+		ok(!svgedit.contextmenu.hasCustomHandler("justanid"),"menu item with just an id is invalid");
+		
+		svgedit.contextmenu.add({id:"idandlabel",label:"anicelabel"});
+		ok(!svgedit.contextmenu.hasCustomHandler("idandlabel"),"menu item with just an id and label is invalid");
+		
+		svgedit.contextmenu.add({id:"idandlabel",label:"anicelabel",action:'notafunction'});
+		ok(!svgedit.contextmenu.hasCustomHandler("idandlabel"),"menu item with action that is not a function is invalid");
+	});
+	
+	test('Test svgedit.contextmenu adds valid menu item', function() {
+		expect(2);
+		
+		var validItem = {id:"valid",label:"anicelabel",action:function(){alert('testing')}};
+		svgedit.contextmenu.add(validItem);
+		
+		ok(svgedit.contextmenu.hasCustomHandler("valid"),"Valid menu item is added.");
+		equals(svgedit.contextmenu.getCustomHandler("valid"),validItem.action,"Valid menu action is added.");
+		tearDown();
+	});
+	
+	test('Test svgedit.contextmenu rejects valid duplicate menu item id', function() {
+		expect(1);
+		
+		var validItem1 = {id:"valid",label:"anicelabel",action:function(){alert('testing')}};
+		var validItem2 = {id:"valid",label:"anicelabel",action:function(){alert('testingtwice')}};
+		svgedit.contextmenu.add(validItem1);
+		svgedit.contextmenu.add(validItem2);
+		
+		equals(svgedit.contextmenu.getCustomHandler("valid"),validItem1.action,"duplicate menu item is rejected.");
+		tearDown();
+	});
+  }); 
+  </script>  
+</head>  
+<body>  
+  <h1 id='qunit-header'>Unit Tests for contextmenu.js</h1>
+  <h2 id='qunit-banner'></h2>
+  <h2 id='qunit-userAgent'></h2>
+  <ol id='qunit-tests'>
+  </ol>
+  <div id='svgroot' style='visibility:hidden'></div>
+</body>  
+</html>