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 @@
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();
});
/*