From 936afe0c98ec3385d76b4d50ab72fa7b16ef9533 Mon Sep 17 00:00:00 2001
From: Narendra Sisodiya <narendra.sisodiya@gmail.com>
Date: Thu, 4 Jun 2009 07:13:31 +0000
Subject: [PATCH] Issue 2 : Upon clicking a flyout menu, the other flyout menus
 should collapse, patch by codedread

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@26 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 svg-editor.css  |  2 +-
 svg-editor.html |  4 ++--
 svg-editor.js   | 51 ++++++++++++++++++++++++-------------------------
 3 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/svg-editor.css b/svg-editor.css
index 8cd3f3d6..23e9a74d 100644
--- a/svg-editor.css
+++ b/svg-editor.css
@@ -116,7 +116,7 @@
 	border-bottom: 1px solid #808080;
 }
 
-#tools_rect, #tools_ellipse {
+.tools_flyout {
 	position: absolute;
 	display: none;
 	height: 28px;
diff --git a/svg-editor.html b/svg-editor.html
index 2ce5e17e..428746ab 100644
--- a/svg-editor.html
+++ b/svg-editor.html
@@ -23,13 +23,13 @@
 
 <div id="tools_rect">
 <div id="tool_square" title="Square"></div>
-<div id="tool_rect" title="Rectangle"></div>
+<div id="tool_rect" class="tools_flyout" title="Rectangle"></div>
 <div id="tool_fhrect" title="Free-Hand Rectangle"></div>
 </div>
 
 <div id="tools_ellipse">
 <div id="tool_circle" title="Circle"></div>
-<div id="tool_ellipse" title="Ellipse"></div>
+<div id="tool_ellipse" class="tools_flyout" title="Ellipse"></div>
 <div id="tool_fhellipse" title="Free-Hand Ellipse"></div>
 </div>
 
diff --git a/svg-editor.js b/svg-editor.js
index fcba2ddd..a142da8a 100644
--- a/svg-editor.js
+++ b/svg-editor.js
@@ -42,71 +42,66 @@ $(document).ready(function(){
 		}
 		SvgCanvas.setStrokeColor(color);
 	});
+	
+	// This is a common function used when a tool has been clicked (chosen)
+	// It does several common things:
+	// - hides any flyout menus
+	// - removes the tool_button_current class from whatever tool currently has it
+	// - adds the tool_button_current class to the button passed in
+	var toolButtonClick = function(button){
+		$('.tools_flyout').hide();
+		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
+		$(button).addClass('tool_button_current');
+	};
 
 	$('#tool_select').click(function(){
+		toolButtonClick(this);
 		SvgCanvas.setMode('select');
-		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-		$(this).addClass('tool_button_current');
 	});
 
 	$('#tool_path').click(function(){
+		toolButtonClick(this);
 		SvgCanvas.setMode('path');
-		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-		$(this).addClass('tool_button_current');
 	});
 
 	$('#tool_line').click(function(){
+		toolButtonClick(this);
 		SvgCanvas.setMode('line');
-		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-		$(this).addClass('tool_button_current');
 	});
 
 	$('#tool_square').click(function(){
+		toolButtonClick('#tools_rect_show');
 		SvgCanvas.setMode('square');
-		$('#tools_rect').hide();
-		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-		$('#tools_rect_show').addClass('tool_button_current');
 	});
 
 	$('#tool_rect').click(function(){
+		toolButtonClick('#tools_rect_show');
 		SvgCanvas.setMode('rect');
-		$('#tools_rect').hide();
-		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-		$('#tools_rect_show').addClass('tool_button_current');
 	});
 
 	$('#tool_fhrect').click(function(){
+		toolButtonClick('#tools_rect_show');
 		SvgCanvas.setMode('fhrect');
-		$('#tools_rect').hide();
-		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-		$('#tools_rect_show').addClass('tool_button_current');
 	});
 
 	$('#tool_circle').click(function(){
+		toolButtonClick('#tools_ellipse_show');
 		SvgCanvas.setMode('circle');
-		$('#tools_ellipse').hide();
-		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-		$('#tools_ellipse_show').addClass('tool_button_current');
 	});
 
 	$('#tool_ellipse').click(function(){
+		toolButtonClick('#tools_ellipse_show');
 		SvgCanvas.setMode('ellipse');
-		$('#tools_ellipse').hide();
-		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-		$('#tools_ellipse_show').addClass('tool_button_current');
 	});
 
 	$('#tool_fhellipse').click(function(){
+		toolButtonClick('#tools_ellipse_show');
 		SvgCanvas.setMode('fhellipse');
-		$('#tools_ellipse').hide();
-		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-		$('#tools_ellipse_show').addClass('tool_button_current');
 	});
 
 	$('#tool_delete').click(function(){
+		toolButtonClick(this);
 		SvgCanvas.setMode('delete');
-		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-		$(this).addClass('tool_button_current');
 	});
 
 	$('#tool_clear').click(function(){
@@ -155,7 +150,9 @@ $(document).ready(function(){
 		picker.setColor($(this).attr('value'));
 	});
 
+	// This hides any flyouts and then shows the rect flyout
 	$('#tools_rect_show').click(function(){
+		$('.tools_flyout').hide();
 		$('#tools_rect').show();
 	});
 /*
@@ -163,7 +160,9 @@ $(document).ready(function(){
 		$('#tools_rect').hide();
 	});
 */
+	// This hides any flyouts and then shows the circle flyout
 	$('#tools_ellipse_show').click(function(){
+		$('.tools_flyout').hide();
 		$('#tools_ellipse').show();
 	});
 /*