source: Dev/trunk/src/client/dojox/layout/FloatingPane.js @ 529

Last change on this file since 529 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 9.1 KB
Line 
1define(["dojo/_base/kernel","dojo/_base/lang","dojo/_base/window","dojo/_base/declare",
2                "dojo/_base/fx","dojo/_base/connect","dojo/_base/array","dojo/_base/sniff",
3                "dojo/window","dojo/dom","dojo/dom-class","dojo/dom-geometry","dojo/dom-construct",
4                "dijit/_TemplatedMixin","dijit/_Widget","dijit/BackgroundIframe","dojo/dnd/Moveable",
5                "./ContentPane","./ResizeHandle","dojo/text!./resources/FloatingPane.html","./Dock"], function(
6        kernel, lang, winUtil, declare, baseFx, connectUtil, arrayUtil,
7        has, windowLib, dom, domClass, domGeom, domConstruct, TemplatedMixin, Widget, BackgroundIframe,
8        Moveable, ContentPane, ResizeHandle, template,Dock){
9       
10kernel.experimental("dojox.layout.FloatingPane");
11var FloatingPane = declare("dojox.layout.FloatingPane", [ ContentPane, TemplatedMixin ],{
12        // summary:
13        //              A non-modal Floating window.
14        // description:
15        //              Makes a `dojox.layout.ContentPane` float and draggable by it's title [similar to TitlePane]
16        //              and over-rides onClick to onDblClick for wipeIn/Out of containerNode
17        //              provides minimize(dock) / show() and hide() methods, and resize [almost]
18
19        // closable: Boolean
20        //              Allow closure of this Node
21        closable: true,
22
23        // dockable: Boolean
24        //              Allow minimizing of pane if true
25        dockable: true,
26
27        // resizable: Boolean
28        //              Allow resizing of pane true if true
29        resizable: false,
30
31        // maxable: Boolean
32        //              Horrible param name for "Can you maximize this floating pane?"
33        maxable: false,
34
35        // resizeAxis: String
36        //              One of: x | xy | y to limit pane's sizing direction
37        resizeAxis: "xy",
38
39        // title: String
40        //              Title to use in the header
41        title: "",
42
43        // dockTo: DomNode?
44        //              if empty, will create private layout.Dock that scrolls with viewport
45        //              on bottom span of viewport.
46        dockTo: "",
47
48        // duration: Integer
49        //              Time is MS to spend toggling in/out node
50        duration: 400,
51
52        /*=====
53        // iconSrc: String
54        //              [not implemented yet] will be either icon in titlepane to left
55        //              of Title, and/or icon show when docked in a fisheye-like dock
56        //              or maybe dockIcon would be better?
57        iconSrc: null,
58        =====*/
59
60        // contentClass: String
61        //              The className to give to the inner node which has the content
62        contentClass: "dojoxFloatingPaneContent",
63
64        // animation holders for toggle
65        _showAnim: null,
66        _hideAnim: null,
67        // node in the dock (if docked)
68        _dockNode: null,
69
70        // privates:
71        _restoreState: {},
72        _allFPs: [],
73        _startZ: 100,
74
75        templateString: template,
76       
77        attributeMap: lang.delegate(Widget.prototype.attributeMap, {
78                title: { type:"innerHTML", node:"titleNode" }
79        }),
80       
81        postCreate: function(){
82                this.inherited(arguments);
83                new Moveable(this.domNode,{ handle: this.focusNode });
84                //this._listener = dojo.subscribe("/dnd/move/start",this,"bringToTop");
85
86                if(!this.dockable){ this.dockNode.style.display = "none"; }
87                if(!this.closable){ this.closeNode.style.display = "none"; }
88                if(!this.maxable){
89                        this.maxNode.style.display = "none";
90                        this.restoreNode.style.display = "none";
91                }
92                if(!this.resizable){
93                        this.resizeHandle.style.display = "none";
94                }else{
95                        this.domNode.style.width = domGeom.getMarginBox(this.domNode).w + "px";
96                }
97                this._allFPs.push(this);
98                this.domNode.style.position = "absolute";
99               
100                this.bgIframe = new BackgroundIframe(this.domNode);
101                this._naturalState = domGeom.position(this.domNode);
102        },
103       
104        startup: function(){
105                if(this._started){ return; }
106               
107                this.inherited(arguments);
108
109                if(this.resizable){
110                        if(has("ie")){
111                                this.canvas.style.overflow = "auto";
112                        }else{
113                                this.containerNode.style.overflow = "auto";
114                        }
115                       
116                        this._resizeHandle = new ResizeHandle({
117                                targetId: this.id,
118                                resizeAxis: this.resizeAxis
119                        },this.resizeHandle);
120
121                }
122
123                if(this.dockable){
124                        // FIXME: argh.
125                        var tmpName = this.dockTo;
126
127                        if(this.dockTo){
128                                this.dockTo = dijit.byId(this.dockTo);
129                        }else{
130                                this.dockTo = dijit.byId('dojoxGlobalFloatingDock');
131                        }
132
133                        if(!this.dockTo){
134                                var tmpId, tmpNode;
135                                // we need to make our dock node, and position it against
136                                // .dojoxDockDefault .. this is a lot. either dockto="node"
137                                // and fail if node doesn't exist or make the global one
138                                // once, and use it on empty OR invalid dockTo="" node?
139                                if(tmpName){
140                                        tmpId = tmpName;
141                                        tmpNode = dom.byId(tmpName);
142                                }else{
143                                        tmpNode = domConstruct.create('div', null, winUtil.body());
144                                        domClass.add(tmpNode,"dojoxFloatingDockDefault");
145                                        tmpId = 'dojoxGlobalFloatingDock';
146                                }
147                                this.dockTo = new Dock({ id: tmpId, autoPosition: "south" }, tmpNode);
148                                this.dockTo.startup();
149                        }
150                       
151                        if((this.domNode.style.display == "none")||(this.domNode.style.visibility == "hidden")){
152                                // If the FP is created dockable and non-visible, start up docked.
153                                this.minimize();
154                        }
155                }
156                this.connect(this.focusNode,"onmousedown","bringToTop");
157                this.connect(this.domNode,      "onmousedown","bringToTop");
158
159                // Initial resize to give child the opportunity to lay itself out
160                this.resize(domGeom.position(this.domNode));
161               
162                this._started = true;
163        },
164
165        setTitle: function(/* String */ title){
166                // summary:
167                //              Update the Title bar with a new string
168                kernel.deprecated("pane.setTitle", "Use pane.set('title', someTitle)", "2.0");
169                this.set("title", title);
170        },
171               
172        close: function(){
173                // summary:
174                //              Close and destroy this widget
175                if(!this.closable){ return; }
176                connectUtil.unsubscribe(this._listener);
177                this.hide(lang.hitch(this,function(){
178                        this.destroyRecursive();
179                }));
180        },
181
182        hide: function(/* Function? */ callback){
183                // summary:
184                //              Close, but do not destroy this FloatingPane
185                baseFx.fadeOut({
186                        node:this.domNode,
187                        duration:this.duration,
188                        onEnd: lang.hitch(this,function() {
189                                this.domNode.style.display = "none";
190                                this.domNode.style.visibility = "hidden";
191                                if(this.dockTo && this.dockable){
192                                        this.dockTo._positionDock(null);
193                                }
194                                if(callback){
195                                        callback();
196                                }
197                        })
198                }).play();
199        },
200
201        show: function(/* Function? */callback){
202                // summary:
203                //              Show the FloatingPane
204                var anim = baseFx.fadeIn({node:this.domNode, duration:this.duration,
205                        beforeBegin: lang.hitch(this,function(){
206                                this.domNode.style.display = "";
207                                this.domNode.style.visibility = "visible";
208                                if (this.dockTo && this.dockable) { this.dockTo._positionDock(null); }
209                                if (typeof callback == "function") { callback(); }
210                                this._isDocked = false;
211                                if (this._dockNode) {
212                                        this._dockNode.destroy();
213                                        this._dockNode = null;
214                                }
215                        })
216                }).play();
217                // use w / h from content box dimensions and x / y from position
218                var contentBox = domGeom.getContentBox(this.domNode)
219                this.resize(lang.mixin(domGeom.position(this.domNode), {w: contentBox.w, h: contentBox.h}));
220                this._onShow(); // lazy load trigger
221        },
222
223        minimize: function(){
224                // summary:
225                //              Hide and dock the FloatingPane
226                if(!this._isDocked){ this.hide(lang.hitch(this,"_dock")); }
227        },
228
229        maximize: function(){
230                // summary:
231                //              Make this FloatingPane full-screen (viewport)
232                if(this._maximized){ return; }
233                this._naturalState = domGeom.position(this.domNode);
234                if(this._isDocked){
235                        this.show();
236                        setTimeout(lang.hitch(this,"maximize"),this.duration);
237                }
238                domClass.add(this.focusNode,"floatingPaneMaximized");
239                this.resize(windowLib.getBox());
240                this._maximized = true;
241        },
242
243        _restore: function(){
244                if(this._maximized){
245                        this.resize(this._naturalState);
246                        domClass.remove(this.focusNode,"floatingPaneMaximized");
247                        this._maximized = false;
248                }
249        },
250
251        _dock: function(){
252                if(!this._isDocked && this.dockable){
253                        this._dockNode = this.dockTo.addNode(this);
254                        this._isDocked = true;
255                }
256        },
257       
258        resize: function(/* Object */dim){
259                // summary:
260                //              Size the FloatingPane and place accordingly
261                dim = dim || this._naturalState;
262                this._currentState = dim;
263
264                // From the ResizeHandle we only get width and height information
265                var dns = this.domNode.style;
266                if("t" in dim){ dns.top = dim.t + "px"; }
267                else if("y" in dim){ dns.top = dim.y + "px"; }
268                if("l" in dim){ dns.left = dim.l + "px"; }
269                else if("x" in dim){ dns.left = dim.x + "px"; }
270                dns.width = dim.w + "px";
271                dns.height = dim.h + "px";
272
273                // Now resize canvas
274                var mbCanvas = { l: 0, t: 0, w: dim.w, h: (dim.h - this.focusNode.offsetHeight) };
275                domGeom.setMarginBox(this.canvas, mbCanvas);
276
277                // If the single child can resize, forward resize event to it so it can
278                // fit itself properly into the content area
279                this._checkIfSingleChild();
280                if(this._singleChild && this._singleChild.resize){
281                        this._singleChild.resize(mbCanvas);
282                }
283        },
284       
285        bringToTop: function(){
286                // summary:
287                //              bring this FloatingPane above all other panes
288                var windows = arrayUtil.filter(
289                        this._allFPs,
290                        function(i){
291                                return i !== this;
292                        },
293                this);
294                windows.sort(function(a, b){
295                        return a.domNode.style.zIndex - b.domNode.style.zIndex;
296                });
297                windows.push(this);
298               
299                arrayUtil.forEach(windows, function(w, x){
300                        w.domNode.style.zIndex = this._startZ + (x * 2);
301                        domClass.remove(w.domNode, "dojoxFloatingPaneFg");
302                }, this);
303                domClass.add(this.domNode, "dojoxFloatingPaneFg");
304        },
305       
306        destroy: function(){
307                // summary:
308                //              Destroy this FloatingPane completely
309                this._allFPs.splice(arrayUtil.indexOf(this._allFPs, this), 1);
310                if(this._resizeHandle){
311                        this._resizeHandle.destroy();
312                }
313                this.inherited(arguments);
314        }
315});
316
317return FloatingPane;
318});
Note: See TracBrowser for help on using the repository browser.