Page MenuHomeCode
Files F392411

FloatingPane.js
No OneTemporary
Actions

FloatingPane.js
View Options

if(!dojo._hasResource["dojox.layout.FloatingPane"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.layout.FloatingPane"] = true;
dojo.provide("dojox.layout.FloatingPane");
dojo.experimental("dojox.layout.FloatingPane");
dojo.require("dojox.layout.ContentPane");
dojo.require("dijit._Templated");
dojo.require("dijit._Widget");
dojo.require("dojo.dnd.move");
dojo.require("dojox.layout.ResizeHandle");
dojo.declare("dojox.layout.FloatingPane",
[ dojox.layout.ContentPane, dijit._Templated ],
{
// summary:
//
// Makes a dijit.ContentPane float and draggable by it's title [similar to TitlePane]
// and over-rides onClick to onDblClick for wipeIn/Out of containerNode
// provides minimize(dock) / show() and hide() methods, and resize [almost]
// closable: Boolean
// allow closure of this Node
closable: true,
// dockable: Boolean
// allow minimizing of pane true/false
dockable: true,
// resizable: Boolean
// allow resizing of pane true/false
resizable: false,
// maxable: Boolean
// horrible param name for "Can you maximize this floating pane"
maxable: false,
// resizeAxis: String
// x | xy | y to limit pane's sizing direction
resizeAxis: "xy",
// title: String
// title to put in titlebar
title: "",
// dockTo: DomNode || null
// if null, will create private layout.Dock that scrolls with viewport
// on bottom span of viewport.
dockTo: null,
// duration: Integer
// time is MS to spend toggling in/out node
duration: 400,
// animation holders for toggle
_showAnim: null,
_hideAnim: null,
// node in the dock (if docked)
_dockNode: null,
// iconSrc: String
// [not implemented yet] will be either icon in titlepane to left
// of Title, and/or icon show when docked in a fisheye-like dock
// or maybe dockIcon would be better?
iconSrc: null,
contentClass: "dojoxFloatingPaneContent",
templateString: null,
templateString:"<div class=\"dojoxFloatingPane\" id=\"${id}\">\n\t<div tabindex=\"0\" waiRole=\"button\" class=\"dojoxFloatingPaneTitle\" dojoAttachPoint=\"focusNode\">\n\t\t<span dojoAttachPoint=\"closeNode\" dojoAttachEvent=\"onclick: close\" class=\"dojoxFloatingCloseIcon\"></span>\n\t\t<span dojoAttachPoint=\"maxNode\" dojoAttachEvent=\"onclick: maximize\" class=\"dojoxFloatingMaximizeIcon\"></span>\n\t\t<span dojoAttachPoint=\"restoreNode\" dojoAttachEvent=\"onclick: _restore\" class=\"dojoxFloatingRestoreIcon\"></span>\t\n\t\t<span dojoAttachPoint=\"dockNode\" dojoAttachEvent=\"onclick: minimize\" class=\"dojoxFloatingMinimizeIcon\"></span>\n\t\t<span dojoAttachPoint=\"titleNode\" class=\"dijitInline dijitTitleNode\"></span>\n\t</div>\n\t<div dojoAttachPoint=\"canvas\" class=\"dojoxFloatingPaneCanvas\">\n\t\t<div dojoAttachPoint=\"containerNode\" waiRole=\"region\" tabindex=\"-1\" class=\"${contentClass}\">\n\t\t</div>\n\t\t<span dojoAttachPoint=\"resizeHandle\" class=\"dojoxFloatingResizeHandle\"></span>\n\t</div>\n</div>\n",
_restoreState: {},
_allFPs: [],
postCreate: function(){
// summary:
this.setTitle(this.title);
this.inherited("postCreate",arguments);
var move = new dojo.dnd.Moveable(this.domNode,{ handle: this.focusNode });
//this._listener = dojo.subscribe("/dnd/move/start",this,"bringToTop");
if(!this.dockable){ this.dockNode.style.display = "none"; }
if(!this.closable){ this.closeNode.style.display = "none"; }
if(!this.maxable){
this.maxNode.style.display = "none";
this.restoreNode.style.display = "none";
}
if(!this.resizable){
this.resizeHandle.style.display = "none";
}else{
var foo = dojo.marginBox(this.domNode);
this.domNode.style.width = foo.w+"px";
}
this._allFPs.push(this);
},
startup: function(){
this.inherited("startup",arguments);
if(this.resizable){
if(dojo.isIE){
this.canvas.style.overflow = "auto";
} else {
this.containerNode.style.overflow = "auto";
}
var tmp = new dojox.layout.ResizeHandle({
//targetContainer: this.containerNode,
targetId: this.id,
resizeAxis: this.resizeAxis
},this.resizeHandle);
}
if(this.dockable){
// FIXME: argh.
tmpName = this.dockTo;
if(this.dockTo){
this.dockTo = dijit.byId(this.dockTo);
}else{
this.dockTo = dijit.byId('dojoxGlobalFloatingDock');
}
if(!this.dockTo){
// we need to make our dock node, and position it against
// .dojoxDockDefault .. this is a lot. either dockto="node"
// and fail if node doesn't exist or make the global one
// once, and use it on empty OR invalid dockTo="" node?
if(tmpName){
var tmpId = tmpName;
var tmpNode = dojo.byId(tmpName);
}else{
var tmpNode = document.createElement('div');
dojo.body().appendChild(tmpNode);
dojo.addClass(tmpNode,"dojoxFloatingDockDefault");
var tmpId = 'dojoxGlobalFloatingDock';
}
this.dockTo = new dojox.layout.Dock({ id: tmpId, autoPosition: "south" },tmpNode);
this.dockTo.startup();
}
if((this.domNode.style.display == "none")||(this.domNode.style.visibility == "hidden")){
// If the FP is created dockable and non-visible, start up docked.
this.minimize();
}
}
this.connect(this.focusNode,"onmousedown","bringToTop");
this.connect(this.domNode, "onmousedown","bringToTop");
},
setTitle: function(/* String */ title){
// summary: Update the string in the titleNode
this.titleNode.innerHTML = title;
},
close: function(){
// summary: close and destroy this widget
if(!this.closable){ return; }
dojo.unsubscribe(this._listener);
this.hide(dojo.hitch(this,"destroy"));
},
hide: function(/* Function? */ callback){
// summary: close but do not destroy this widget
dojo.fadeOut({
node:this.domNode,
duration:this.duration,
onEnd: dojo.hitch(this,function() {
this.domNode.style.display = "none";
this.domNode.style.visibility = "hidden";
if(this.dockTo){
this.dockTo._positionDock(null);
}
if(callback){
callback();
}
})
}).play();
},
show: function(/* Function? */callback){
// summary: show the FloatingPane
var anim = dojo.fadeIn({node:this.domNode, duration:this.duration,
beforeBegin: dojo.hitch(this,function(){
this.domNode.style.display = "";
this.domNode.style.visibility = "visible";
this.dockTo._positionDock(null);
if (this.dockTo) { this.dockTo._positionDock(null); }
if (typeof callback == "function") { callback(); }
this._isDocked = false;
if (this._dockNode) {
this._dockNode.destroy();
this._dockNode = null;
}
})
}).play();
this.resize(dojo.coords(this.domNode));
},
minimize: function(){
// summary: hide and dock the FloatingPane
if(!this._isDocked){
this.hide(dojo.hitch(this,"_dock"));
}
},
maximize: function(){
// summary: Make this floatingpane fullscreen (viewport)
if(this._maximized){ return; }
this._naturalState = dojo.coords(this.domNode);
if(this._isDocked){
this.show();
setTimeout(dojo.hitch(this,"maximize"),this.duration);
}
dojo.addClass(this.focusNode,"floatingPaneMaximized");
this.resize(dijit.getViewport());
this._maximized = true;
},
_restore: function(){
if(this._maximized){
this.resize(this._naturalState);
dojo.removeClass(this.focusNode,"floatingPaneMaximized");
this._maximized = false;
}
},
_dock: function(){
if(!this._isDocked){
this._dockNode = this.dockTo.addNode(this);
this._isDocked = true;
}
},
resize: function(/* Object */dim){
// summary: size the widget and place accordingly
this._currentState = dim;
var dns = this.domNode.style;
dns.top = dim.t+"px";
dns.left = dim.l+"px";
dns.width = dim.w+"px";
this.canvas.style.width = dim.w+"px";
dns.height = dim.h+"px";
this.canvas.style.height = (dim.h - this.focusNode.offsetHeight)+"px";
},
_startZ: 100,
bringToTop: function(){
// summary: bring this FloatingPane above all other panes
var windows = dojo.filter(
this._allFPs,
function(i){
return i !== this;
},
this);
windows.sort(function(a, b){
return a.domNode.style.zIndex - b.domNode.style.zIndex;
});
windows.push(this);
dojo.forEach(windows, function(w, x){
w.domNode.style.zIndex = (this._startZ + x * 2);
dojo.removeClass(w.domNode, "dojoxFloatingPaneFg");
}, this);
dojo.addClass(this.domNode, "dojoxFloatingPaneFg");
},
destroy: function(){
// summary: Destroy this FloatingPane completely
this._allFPs.splice(dojo.indexOf(this._allFPs, this), 1);
this.inherited("destroy", arguments);
}
});
dojo.declare("dojox.layout.Dock", [dijit._Widget,dijit._Templated], {
// summary:
// a widget that attaches to a node and keeps track of incoming / outgoing FloatingPanes
// and handles layout
templateString: '<div class="dojoxDock"><ul dojoAttachPoint="containerNode" class="dojoxDockList"></ul></div>',
// private _docked: array of panes currently in our dock
_docked: [],
_inPositioning: false,
autoPosition: false,
addNode: function(refNode){
// summary: instert a dockNode refernce into the dock
var div = document.createElement('li');
this.containerNode.appendChild(div);
var node = new dojox.layout._DockNode({ title: refNode.title, paneRef: refNode },div);
node.startup();
return node;
},
startup: function(){
// summary: attaches some event listeners
if (this.id == "dojoxGlobalFloatingDock" || this.isFixedDock) {
// attach window.onScroll, and a position like in presentation/dialog
dojo.connect(window,'onresize',this,"_positionDock");
dojo.connect(window,'onscroll',this,"_positionDock");
if(dojo.isIE){
dojo.connect(this.domNode,'onresize', this,"_positionDock");
}
}
this._positionDock(null);
this.inherited("startup",arguments);
},
_positionDock: function(/* Event? */e){
if(!this._inPositioning){
if(this.autoPosition == "south"){
// Give some time for scrollbars to appear/disappear
setTimeout(dojo.hitch(this, function() {
this._inPositiononing = true;
var viewport = dijit.getViewport();
var s = this.domNode.style;
s.left = viewport.l + "px";
s.width = (viewport.w-2) + "px";
s.top = (viewport.h + viewport.t) - this.domNode.offsetHeight + "px";
this._inPositioning = false;
}), 500);
}
}
}
});
dojo.declare("dojox.layout._DockNode", [dijit._Widget,dijit._Templated], {
// summary:
// dojox.layout._DockNode is a private widget used to keep track of
// which pane is docked.
// title: String
// shown in dock icon. should read parent iconSrc?
title: "",
// paneRef: Widget
// reference to the FloatingPane we reprasent in any given dock
paneRef: null,
templateString: '<li dojoAttachEvent="onclick: restore" class="dojoxDockNode">'+
'<span dojoAttachPoint="restoreNode" class="dojoxDockRestoreButton" dojoAttachEvent="onclick: restore"></span>'+
'<span class="dojoxDockTitleNode" dojoAttachPoint="titleNode">${title}</span>'+
'</li>',
restore: function(){
// summary: remove this dock item from parent dock, and call show() on reffed floatingpane
this.paneRef.show();
this.paneRef.bringToTop();
this.destroy();
}
});
}

File Metadata

Mime Type
text/plain
Expires
Sat, Feb 22, 20:27 (2 d, 13 h ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
24615
Default Alt Text
FloatingPane.js (10 KB)

Event Timeline