Subversion Repositories Applications.papyrus

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();
        }

});

}