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

Rev	Line
[483]	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: