source: Dev/branches/rest-dojo-ui/client/dojox/drawing/ui/Button.js @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

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