231 lines
6.4 KiB
JavaScript
231 lines
6.4 KiB
JavaScript
|
//>>built
|
||
|
|
// wrapped by build app
|
||
|
|
define("dojox/drawing/ui/Button", ["dijit","dojo","dojox"], function(dijit,dojo,dojox){
|
||
|
|
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");
|
||
|
|
});
|