diff options
Diffstat (limited to 'js/dojo/dojox/drawing/ui/Button.js')
| -rw-r--r-- | js/dojo/dojox/drawing/ui/Button.js | 230 |
1 files changed, 230 insertions, 0 deletions
diff --git a/js/dojo/dojox/drawing/ui/Button.js b/js/dojo/dojox/drawing/ui/Button.js new file mode 100644 index 0000000..7407610 --- /dev/null +++ b/js/dojo/dojox/drawing/ui/Button.js @@ -0,0 +1,230 @@ +//>>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"); +}); |