Context Navigation

source: Dev/trunk/src/client/dojox/drawing/ui/Button.js

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 6.4 KB

Line
1	define(["dojo", "../util/oo", "../stencil/Rect", "../stencil/Ellipse",
2	"../stencil/Text", "../manager/_registry"],
3	function(dojo, oo, Rect, Ellipse, Text, registry){
4
5	//dojox.drawing.ui.Button =
6	var Button = oo.declare(
7	function(options){
8	options.subShape = true;
9	dojo.mixin(this, options);
10	//console.log(" button:", this);
11	this.width = options.data.width \|\| options.data.rx*2;
12	this.height = options.data.height \|\| options.data.ry*2;
13	this.y = options.data.y \|\| options.data.cy - options.data.ry;
14
15	this.id = this.id \|\| this.util.uid(this.type);
16	this.util.attr(this.container, "id", this.id);
17	if(this.callback){
18	this.hitched = dojo.hitch(this.scope \|\| window, this.callback, this);
19	}
20
21	// Rectangle itself must be "ui" for radio buttons to work.
22	// This is a work-around for messy code associated with drawingType;
23	// see http://www.andestutor.org/bugzilla/show_bug.cgi?id=1745
24	options.drawingType="ui";
25	// Choose between rectangle and ellipse based on options
26	if(options.data.width && options.data.height){
27	this.shape = new Rect(options);
28	}else{
29	this.shape = new Ellipse(options);
30	}
31
32	var setGrad = function(s, p, v){
33	dojo.forEach(["norm", "over", "down", "selected"], function(nm){
34	s[nm].fill[p] = v;
35	});
36	};
37	// for button backs, not for icons
38	setGrad(this.style.button, "y2", this.height + this.y);
39	setGrad(this.style.button, "y1", this.y);
40
41	if(options.icon && !options.icon.text){
42	var constr = this.drawing.getConstructor(options.icon.type);
43	var o = this.makeOptions(options.icon);
44	o.data = dojo.mixin(o.data, this.style.button.icon.norm);
45
46	if(o.data && o.data.borderWidth===0){
47	o.data.fill = this.style.button.icon.norm.fill = o.data.color;
48	}else if(options.icon.type=="line" \|\| (options.icon.type=="path" && !options.icon.closePath)){
49	this.style.button.icon.selected.color = this.style.button.icon.selected.fill;
50	}else{
51	//o.data.fill = this.style.button.icon.norm.fill = o.data.color;
52	}
53	this.icon = new constr(o);
54	//console.log(" button:", this.toolType, this.style.button.icon)
55	}else if(options.text \|\| (options.icon && options.icon.text)){
56	//console.warn("button text:", options.text \|\| options.icon.text)
57	o = this.makeOptions(options.text \|\| options.icon.text);
58	o.data.color = this.style.button.icon.norm.color; //= o.data.fill;
59	this.style.button.icon.selected.color = this.style.button.icon.selected.fill;
60	this.icon = new Text(o);
61	this.icon.attr({
62	height: this.icon._lineHeight,
63	y:((this.height-this.icon._lineHeight)/2)+this.y
64	});
65	}
66
67	var c = this.drawing.getConstructor(this.toolType);
68	if(c){
69	this.drawing.addUI("tooltip", {data:{text:c.setup.tooltip}, button:this});
70	}
71
72	this.onOut();
73
74	},{
75	// summary:
76	// Creates a clickable button in "UI" mode of the drawing.
77	// description:
78	// Creates a 4-state button: normal, hover, active, selected.
79	// Optionally may include button text or an icon.
80
81	callback:null,
82	scope:null,
83	hitched:null,
84	toolType:"",
85
86	onClick: function(/Object/button){
87	// summary:
88	// Stub to connect. Event is 'this'
89	// Alternatively can pass in a scope and a callback
90	// on creation.
91	},
92
93	makeOptions: function(/Object/d, /Float/s){
94
95	s = s \|\| 1;
96	d = dojo.clone(d);
97	var o = {
98	util: this.util,
99	mouse: this.mouse,
100	container: this.container,
101	subShape:true
102	};
103
104	if(typeof(d)=="string"){
105
106	o.data = {
107	x:this.data.x - 5,
108	y: this.data.y + 2,
109	width:this.data.width,
110	height:this.data.height,
111	text:d,
112	makeFit:true
113	};
114
115	}else if(d.points){
116	//console.warn("points")
117	dojo.forEach(d.points, function(pt){
118	pt.x = pt.x * this.data.width * .01 * s + this.data.x;
119	pt.y = pt.y * this.data.height * .01 * s + this.data.y;
120	}, this);
121	o.data = {};
122	for(var n in d){
123	if(n!="points"){
124	o.data[n] = d[n];
125	}
126	}
127	o.points = d.points;
128
129	}else{
130	//console.warn("data")
131	for(n in d){
132	if(/x\|width/.test(n)){
133	d[n] = d[n] * this.data.width * .01 * s;
134	}else if(/y\|height/.test(n)){
135	d[n] = d[n] * this.data.height * .01 * s;
136	}
137	if(/x/.test(n) && !/r/.test(n)){
138	d[n] += this.data.x;
139	}else if(/y/.test(n) && !/r/.test(n)){
140	d[n] += this.data.y;
141	}
142	}
143	delete d.type;
144	o.data = d;
145
146	}
147	o.drawingType = "ui";
148	return o;
149
150	// do style
151	if(d.borderWidth!==undefined){
152	//console.log(" -------- bw data:", o.data)
153	o.data.borderWidth = d.borderWidth;
154	}
155
156	return o;
157	},
158
159	enabled:true,
160	selected:false,
161	type:"drawing.library.UI.Button",
162
163	// note:
164	// need to move the Stencil's shape to front, not
165	// its container. Therefore we can't use the Stencil's
166	// moveTo.. methods.
167	select: function(){
168	this.selected = true;
169	if(this.icon){this.icon.attr(this.style.button.icon.selected);}
170	this._change(this.style.button.selected);
171	this.shape.shadow && this.shape.shadow.hide();
172	},
173	deselect: function(){
174	this.selected = false;
175	if(this.icon){this.icon.attr(this.style.button.icon.norm);}
176	this.shape.shadow && this.shape.shadow.show();
177	this._change(this.style.button.norm);
178
179	},
180	disable: function(){
181	if(!this.enabled){ return; }
182	this.enabled = false;
183	this._change(this.style.button.disabled);
184	this.icon.attr({color:this.style.button.norm.color});
185	},
186	enable: function(){
187	if(this.enabled){ return; }
188	this.enabled = true;
189	this._change(this.style.button.norm);
190	this.icon.attr({color:this.style.button.icon.norm.color});
191	},
192
193	_change: function(/Object/sty){
194	this.shape.attr(sty);
195	this.shape.shadow && this.shape.shadow.container.moveToBack();
196	if(this.icon){this.icon.shape.moveToFront();};
197	},
198	onOver: function(){
199	//console.log("BUTTON OVER")
200	if(this.selected \|\| !this.enabled){ return; }
201	this._change(this.style.button.over);
202	},
203	onOut: function(){
204	if(this.selected){ return; }
205	this._change(this.style.button.norm);
206	},
207	onDown: function(){
208	if(this.selected \|\| !this.enabled){ return; }
209	this._change(this.style.button.selected);
210	},
211	onUp: function(){
212	//console.log("BUTTON UP")
213	if(!this.enabled){ return; }
214	this._change(this.style.button.over);
215	if(this.hitched){
216	this.hitched();
217	}
218	this.onClick(this);
219	},
220	attr: function(options){
221	if(this.icon){this.icon.attr(options);}
222	}
223	}
224
225	);
226
227	dojo.setObject("dojox.drawing.ui.Button", Button);
228
229	registry.register({
230	name:"dojox.drawing.ui.Button"
231	}, "stencil");
232
233	return Button;
234	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: