Generate tool's markup automatically

js/ToolSelector.js

@@ -20,6 +20,7 @@ pskl.ToolSelector = (function() {
         "rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
         "shapeSelect" : new pskl.drawingtools.ShapeSelect()
     };
+
     var currentSelectedTool = toolInstances.simplePen;
     var previousSelectedTool = toolInstances.simplePen;
 
@@ -53,13 +54,26 @@ pskl.ToolSelector = (function() {
                     selectTool_(toolInstances[tool]);
 
                     // Show tool as selected:
-                    $("#tools-container .tool-icon.selected").removeClass("selected");
-                    clickedTool.addClass("selected");
+                    $('#menubar .tool-icon.selected').removeClass('selected');
+                    clickedTool.addClass('selected');
                 }
             }
         }
     };
 
+    /**
+     * @private
+     */
+    var createToolMarkup_ = function() {
+        var currentTool, toolMarkup = '';
+        for (var toolKey in toolInstances) {
+            currentTool = toolInstances[toolKey];
+            toolMarkup += '<li class="tool-icon ' + currentTool.toolId + '" data-tool-id="' + currentTool.toolId 
+                            + '" title="' + currentTool.helpText + '"></li>';
+        }
+        $('#tools-container').html(toolMarkup);
+    };
+
     /**
      * Get state for the checkbox that control the display of the grid
      * on the drawing canvas.
@@ -74,11 +88,13 @@ pskl.ToolSelector = (function() {
     return {
         init: function() {
             
+            createToolMarkup_();
+
             // Initialize tool:
             // Set SimplePen as default selected tool:
             selectTool_(toolInstances.simplePen);
             // Activate listener on tool panel:
-            $("#tools-container").click(onToolIconClicked_);
+            $("#menubar").click(onToolIconClicked_);
 
             // Show/hide the grid on drawing canvas:
             $.publish(Events.GRID_DISPLAY_STATE_CHANGED, [isShowGridChecked_()]);
@@ -88,7 +104,4 @@ pskl.ToolSelector = (function() {
             });
         }
     };
-})();
-
-
-
+})();

js/drawingtools/Circle.js

@@ -7,7 +7,8 @@
 	var ns = $.namespace("pskl.drawingtools");
 
 	ns.Circle = function() {
-		this.toolId = "tool-circle"
+		this.toolId = "tool-circle";
+		this.helpText = "Circle tool";
 		
 		// Circle's first point coordinates (set in applyToolAt)
 		this.startCol = null;

js/drawingtools/Eraser.js

@@ -9,6 +9,7 @@
 
 	ns.Eraser = function() {
 		this.toolId = "tool-eraser";
+		this.helpText = "Eraser tool";
 	};
 
 	pskl.utils.inherit(ns.Eraser, ns.SimplePen);

js/drawingtools/Move.js

@@ -8,6 +8,7 @@
 
 	ns.Move = function() {
 		this.toolId = "tool-move"
+		this.helpText = "Move tool";
 		
 		// Stroke's first point coordinates (set in applyToolAt)
 		this.startCol = null;

js/drawingtools/PaintBucket.js

@@ -7,7 +7,8 @@
 	var ns = $.namespace("pskl.drawingtools");
 
 	ns.PaintBucket = function() {
-		this.toolId = "tool-paint-bucket"
+		this.toolId = "tool-paint-bucket";
+		this.helpText = "Paint bucket tool";
 	};
 
 	pskl.utils.inherit(ns.PaintBucket, ns.BaseTool);

js/drawingtools/Rectangle.js

@@ -7,7 +7,8 @@
 	var ns = $.namespace("pskl.drawingtools");
 
 	ns.Rectangle = function() {
-		this.toolId = "tool-rectangle"
+		this.toolId = "tool-rectangle";
+		this.helpText = "Rectangle tool";
 		
 		// Rectangle's first point coordinates (set in applyToolAt)
 		this.startCol = null;

js/drawingtools/SimplePen.js

@@ -8,6 +8,7 @@
 
 	ns.SimplePen = function() {
 		this.toolId = "tool-pen";
+		this.helpText = "Pen tool"
 	};
 
 	this.previousCol = null;

js/drawingtools/Stroke.js

@@ -7,8 +7,9 @@
 	var ns = $.namespace("pskl.drawingtools");
 
 	ns.Stroke = function() {
-		this.toolId = "tool-stroke"
-		
+		this.toolId = "tool-stroke";
+		this.helpText = "Stroke tool";
+
 		// Stroke's first point coordinates (set in applyToolAt)
 		this.startCol = null;
 		this.startRow = null;

js/drawingtools/selectiontools/RectangleSelect.js

@@ -8,6 +8,7 @@
 
 	ns.RectangleSelect = function() {
 		this.toolId = "tool-rectangle-select";
+		this.helpText = "Rectangle selection tool";
 		
 		ns.BaseSelect.call(this);
 	};

js/drawingtools/selectiontools/ShapeSelect.js

@@ -8,6 +8,7 @@
 
 	ns.ShapeSelect = function() {
 		this.toolId = "tool-shape-select";
+		this.helpText = "Shape selection tool";
 		
 		ns.BaseSelect.call(this);
 	};