analytics/webcontent/dojo16/dojox/drawing/ui/dom/Toolbar.js

/*
	Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
	Available via Academic Free License >= 2.1 OR the modified BSD license.
	see: http://dojotoolkit.org/license for details
*/


if(!dojo._hasResource["dojox.drawing.ui.dom.Toolbar"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.drawing.ui.dom.Toolbar"] = true;
dojo.provide("dojox.drawing.ui.dom.Toolbar");
dojo.deprecated("dojox.drawing.ui.dom.Toolbar", "It may not even make it to the 1.4 release.", 1.4);

(function(){
	
	dojo.declare("dojox.drawing.ui.dom.Toolbar", [], {
		// NOTE:
		//			dojox.drawing.Toolbar is DEPRECATED.
		//			The intention never was to use HTML as buttons for a Drawing.
		//			This was implemented in order to finish the project for which
		//			Drawing was developed.
		//			Instead use: drawing/ui/Toolbar.js
		//
		// summary:
		//	Creates a Toolbar to be used with a DojoX Drawing.
		// description:
		//	Currently works in markup only. A class is required with
		//	either horizontal or vertical as a class (IE prevented using
		//	either as a default). Assign an attribute of 'drawingId' with
		//	the id of the DojoX Drawing to which this is assigned.
		//	The node children will be assigned as the Tools in the toolbar.
		//	Plugins can also be assigned.
		//	The Toolbar is largely self contained and has no real public
		//	methods or events. the Drawing object should be used.
		//
		// example:
		//	|	<div dojoType="dojox.drawing.Toolbar" drawingId="drawing" class="drawingToolbar vertical">
		//	|		<div tool="dojox.drawing.tools.Line" 				selected="false">	Line</div>
		//	|		<div tool="dojox.drawing.tools.Rect" 				selected="true">	Rect</div>
		//	|		<div plugin="dojox.drawing.plugins.tools.Zoom" options="{zoomInc:.1,minZoom:.5,maxZoom:2}">Zoom</div>
		//	|	</div>
		//
		// TODO: Toolbar works in markup only. Need programmatic.
		// NOTE: There are plans to make the toolbar out of dojox.gfx vectors.
		//		 This may change the APIs in the future.
		//
		//	baseClass:String
		//		The CSS style to apply to the toolbar node
		baseClass:"drawingToolbar",
		//	buttonClass:String
		//		The CSS style to apply to each button node
		buttonClass:"drawingButton",
		//	iconClass:String
		//		The CSS style to apply to each button icon node
		iconClass:"icon",
		//
		constructor: function(props, node){
			// props is null from markup
			dojo.addOnLoad(this, function(){
				this.domNode = dojo.byId(node);
				dojo.addClass(this.domNode, this.baseClass);
				this.parse();
			});
		},
		
		createIcon: function(/*HTMLNode*/node, /* ? Function*/constr){
			// summary:
			//	Internal. Creates an icon node for each button.
			// arguments:
			//	node: HTMLNode
			//		The button node.
			//	constr: [optional] Function
			//		Optional. If not supplied, an icon is not created.
			//		Information for each icon is derived from
			//		the ToolsSetup object defined at the end
			//		of each tool. See: stencil._Base
			//
			var setup = constr && constr.setup ? constr.setup : {};
			if(setup.iconClass){
				var icon = setup.iconClass ? setup.iconClass : "iconNone";
				var tip = setup.tooltip ? setup.tooltip : "Tool";
				
				var iNode = dojo.create("div", {title:tip}, node);
				dojo.addClass(iNode, this.iconClass);
				dojo.addClass(iNode, icon);
			
				dojo.connect(node, "mouseup", function(evt){
					dojo.stopEvent(evt);
					dojo.removeClass(node, "active");
				});
				dojo.connect(node, "mouseover", function(evt){
					dojo.stopEvent(evt);
					dojo.addClass(node, "hover");
				});
				dojo.connect(node, "mousedown", this, function(evt){
					dojo.stopEvent(evt);
					dojo.addClass(node, "active");
				});
				
				dojo.connect(node, "mouseout", this, function(evt){
					dojo.stopEvent(evt);
					dojo.removeClass(node, "hover");
				});
			}
		},
		
		createTool: function(/*HTMLNode*/node){
			// summary:
			//	Creates a button on the Toolbar that is
			//  a Tool, not a Plugin. Tools draw Stencils,
			//	Plugins do actions.
			// arguments:
			//	node: HTMLNode
			//		The button node.
			//
			node.innerHTML = "";
			var type = dojo.attr(node, "tool");
			this.toolNodes[type] = node;
			dojo.attr(node, "tabIndex", 1);
			var constr = dojo.getObject(type);
			
			this.createIcon(node, constr);
			
			this.drawing.registerTool(type, constr);
			dojo.connect(node, "mouseup", this, function(evt){
				dojo.stopEvent(evt);
				dojo.removeClass(node, "active");
				this.onClick(type);
			});
			dojo.connect(node, "mouseover", function(evt){
				dojo.stopEvent(evt);
				dojo.addClass(node, "hover");
			});
			dojo.connect(node, "mousedown", this, function(evt){
				dojo.stopEvent(evt);
				dojo.addClass(node, "active");
			});
			
			dojo.connect(node, "mouseout", this, function(evt){
				dojo.stopEvent(evt);
				dojo.removeClass(node, "hover");
			});
		},
		
		parse: function(){
			// summary:
			//	Initializing method that reads the dom node and its
			//	children for tools and plugins.
			//
			var drawingId = dojo.attr(this.domNode, "drawingId");
			this.drawing = dojox.drawing.util.common.byId(drawingId);
			!this.drawing && console.error("Drawing not found based on 'drawingId' in Toolbar. ");
			this.toolNodes = {};
			var _sel;
			dojo.query(">", this.domNode).forEach(function(node, i){
				node.className = this.buttonClass;
				var tool = dojo.attr(node, "tool");
				var action = dojo.attr(node, "action");
				var plugin = dojo.attr(node, "plugin");
				if(tool){
					if(i==0 || dojo.attr(node, "selected")=="true"){
						_sel = tool;
					}
					this.createTool(node);
					
				}else if(plugin){
					
					
					
					
					var p = {name:plugin, options:{}},
						opt = dojo.attr(node, "options");
					if(opt){
						p.options = eval("("+opt+")");
					}
					p.options.node = node;
					node.innerHTML = "";
			this.drawing.addPlugin(p);
					
					
					
					
					
					this.createIcon(node, dojo.getObject(dojo.attr(node, "plugin")));
				}
				
			}, this);
			this.drawing.initPlugins();
			dojo.connect(this.drawing, "setTool", this, "onSetTool");
			this.drawing.setTool(_sel);
		},
		onClick: function(/*String*/type){
			// summary:
			//	Event fired from clicking a Tool, not a PLugin.
			//	Plugin clicks are handled within the plugin's class.
			// arguments:
			//	type: Fully qualified name of class. ex:
			//			dojox.drawing.tools.Ellipse
			//
			this.drawing.setTool(type);
		},
		onSetTool: function(/*String*/type){
			// summary:
			// handles buttons clicks and selects or deselects
			for(var n in this.toolNodes){
				if(n == type){
					dojo.addClass(this.toolNodes[type], "selected");
					this.toolNodes[type].blur();
				}else{
					dojo.removeClass(this.toolNodes[n], "selected");
				}
				
			}
		}
	});
	
})();

}