/*
Copyright (c) 2004-2011, 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.Button"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.drawing.ui.Button"] = true;
dojo.provide("dojox.drawing.ui.Button");
dojox.drawing.ui.Button = dojox.drawing.util.oo.declare(
// summary:
// Creates a clickable button in "UI" mode of the drawing.
// description:
// Creates a 4-state button: normal, hover, active, selected.
// Optionally may include button text or an icon.
function(options){
options.subShape = true;
dojo.mixin(this, options);
//console.log(" button:", this);
this.width = options.data.width || options.data.rx*2;
this.height = options.data.height || options.data.ry*2;
this.y = options.data.y || options.data.cy - options.data.ry;
//
this.id = this.id || this.util.uid(this.type);
this.util.attr(this.container, "id", this.id);
if(this.callback){
this.hitched = dojo.hitch(this.scope || window, this.callback, this);
}
// Rectangle itself must be "ui" for radio buttons to work.
// This is a work-around for messy code associated with drawingType;
// see http://www.andestutor.org/bugzilla/show_bug.cgi?id=1745
options.drawingType="ui";
// Choose between rectangle and ellipse based on options
if(options.data.width && options.data.height){
this.shape = new dojox.drawing.stencil.Rect(options);
}else{
this.shape = new dojox.drawing.stencil.Ellipse(options);
}
var setGrad = function(s, p, v){
dojo.forEach(["norm", "over", "down", "selected"], function(nm){
s[nm].fill[p] = v;
});
};
// for button backs, not for icons
setGrad(this.style.button, "y2", this.height + this.y);
setGrad(this.style.button, "y1", this.y);
if(options.icon && !options.icon.text){
var constr = this.drawing.getConstructor(options.icon.type);
var o = this.makeOptions(options.icon);
o.data = dojo.mixin(o.data, this.style.button.icon.norm);
if(o.data && o.data.borderWidth===0){
o.data.fill = this.style.button.icon.norm.fill = o.data.color;
}else if(options.icon.type=="line" || (options.icon.type=="path" && !options.icon.closePath)){
this.style.button.icon.selected.color = this.style.button.icon.selected.fill;
}else{
//o.data.fill = this.style.button.icon.norm.fill = o.data.color;
}
this.icon = new constr(o);
//console.log(" button:", this.toolType, this.style.button.icon)
}else if(options.text || (options.icon && options.icon.text)){
//console.warn("button text:", options.text || options.icon.text)
o = this.makeOptions(options.text || options.icon.text);
o.data.color = this.style.button.icon.norm.color; //= o.data.fill;
this.style.button.icon.selected.color = this.style.button.icon.selected.fill;
this.icon = new dojox.drawing.stencil.Text(o);
this.icon.attr({
height: this.icon._lineHeight,
y:((this.height-this.icon._lineHeight)/2)+this.y
});
}
var c = this.drawing.getConstructor(this.toolType);
if(c){
this.drawing.addUI("tooltip", {data:{text:c.setup.tooltip}, button:this});
}
this.onOut();
},{
callback:null,
scope:null,
hitched:null,
toolType:"",
onClick: function(/*Object*/button){
// summary:
// Stub to connect. Event is 'this'
// Alternatively can pass in a scope and a callback
// on creation.
},
makeOptions: function(/*Object*/d, /*Float*/s){
s = s || 1;
d = dojo.clone(d);
var o = {
util: this.util,
mouse: this.mouse,
container: this.container,
subShape:true
};
if(typeof(d)=="string"){
o.data = {
x:this.data.x - 5,
y: this.data.y + 2,
width:this.data.width,
height:this.data.height,
text:d,
makeFit:true
};
}else if(d.points){
//console.warn("points")
dojo.forEach(d.points, function(pt){
pt.x = pt.x * this.data.width * .01 * s + this.data.x;
pt.y = pt.y * this.data.height * .01 * s + this.data.y;
}, this);
o.data = {};
for(var n in d){
if(n!="points"){
o.data[n] = d[n];
}
}
o.points = d.points;
}else{
//console.warn("data")
for(n in d){
if(/x|width/.test(n)){
d[n] = d[n] * this.data.width * .01 * s;
}else if(/y|height/.test(n)){
d[n] = d[n] * this.data.height * .01 * s;
}
if(/x/.test(n) && !/r/.test(n)){
d[n] += this.data.x;
}else if(/y/.test(n) && !/r/.test(n)){
d[n] += this.data.y;
}
}
delete d.type;
o.data = d;
}
o.drawingType = "ui";
return o;
// do style
if(d.borderWidth!==undefined){
//console.log(" -------- bw data:", o.data)
o.data.borderWidth = d.borderWidth;
}
return o;
},
enabled:true,
selected:false,
type:"drawing.library.UI.Button",
// note:
// need to move the Stencil's shape to front, not
// its container. Therefore we can't use the Stencil's
// moveTo.. methods.
select: function(){
this.selected = true;
if(this.icon){this.icon.attr(this.style.button.icon.selected);}
this._change(this.style.button.selected);
this.shape.shadow && this.shape.shadow.hide();
},
deselect: function(){
this.selected = false;
if(this.icon){this.icon.attr(this.style.button.icon.norm);}
this.shape.shadow && this.shape.shadow.show();
this._change(this.style.button.norm);
},
disable: function(){
if(!this.enabled){ return; }
this.enabled = false;
this._change(this.style.button.disabled);
this.icon.attr({color:this.style.button.norm.color});
},
enable: function(){
if(this.enabled){ return; }
this.enabled = true;
this._change(this.style.button.norm);
this.icon.attr({color:this.style.button.icon.norm.color});
},
_change: function(/*Object*/sty){
this.shape.attr(sty);
this.shape.shadow && this.shape.shadow.container.moveToBack();
if(this.icon){this.icon.shape.moveToFront();};
},
onOver: function(){
//console.log("BUTTON OVER")
if(this.selected || !this.enabled){ return; }
this._change(this.style.button.over);
},
onOut: function(){
if(this.selected){ return; }
this._change(this.style.button.norm);
},
onDown: function(){
if(this.selected || !this.enabled){ return; }
this._change(this.style.button.selected);
},
onUp: function(){
//console.log("BUTTON UP")
if(!this.enabled){ return; }
this._change(this.style.button.over);
if(this.hitched){
this.hitched();
}
this.onClick(this);
},
attr: function(options){
if(this.icon){this.icon.attr(options);}
}
}
);
dojox.drawing.register({
name:"dojox.drawing.ui.Button"
}, "stencil");
}