dojox/layout/FloatingPane.js

  • Provides:

    • dojox.layout.FloatingPane

  • Requires:

    • dojo.window in common in project dojo
    • dijit._Templated in common in project dijit
    • dijit._Widget in common in project dijit
    • dojo.dnd.Moveable in common in project dojo
    • dojox.layout.ContentPane in common
    • dojox.layout.ResizeHandle in common

  • dojox.layout.FloatingPane

    • type
      Function
    • chains:
      • dojox.layout.ContentPane: (prototype)
      • dojox.layout.ContentPane: (call)
      • dijit._Templated: (call)
    • mixins:
      • dijit._Templated.prototype: (prototype)
    • summary
      A non-modal Floating window.
    • description
      Makes a `dojox.layout.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]

  • dojox.layout.FloatingPane.closable

    • type
      Boolean
    • summary
      Allow closure of this Node

  • dojox.layout.FloatingPane.dockable

    • type
      Boolean
    • summary
      Allow minimizing of pane if true

  • dojox.layout.FloatingPane.resizable

    • type
      Boolean
    • summary
      Allow resizing of pane true if true

  • dojox.layout.FloatingPane.maxable

    • type
      Boolean
    • summary
      Horrible param name for "Can you maximize this floating pane?"

  • dojox.layout.FloatingPane.resizeAxis

    • type
      String
    • summary
      One of: x | xy | y to limit pane's sizing direction

  • dojox.layout.FloatingPane.title

    • type
      String
    • summary
      Title to use in the header

  • dojox.layout.FloatingPane.dockTo

    • type
      DomNode
    • summary
      if empty, will create private layout.Dock that scrolls with viewport
on bottom span of viewport.

  • dojox.layout.FloatingPane.duration

    • type
      Integer
    • summary
      Time is MS to spend toggling in/out node

  • dojox.layout.FloatingPane.iconSrc

    • type
      String
    • summary
      [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?

  • dojox.layout.FloatingPane.contentClass

    • type
      String
    • summary
      The className to give to the inner node which has the content

  • dojox.layout.FloatingPane._showAnim

    • summary
  • dojox.layout.FloatingPane._hideAnim
       
    • summary
  • dojox.layout.FloatingPane._dockNode
       
    • summary
  • dojox.layout.FloatingPane._restoreState
       
    • type
      Object
    • summary
  • dojox.layout.FloatingPane._allFPs
       
    • summary
  • dojox.layout.FloatingPane._startZ
       
    • summary
  • dojox.layout.FloatingPane.templateString
       
    • summary
  • dojox.layout.FloatingPane.attributeMap
       
    • summary
  • dojox.layout.FloatingPane.postCreate
       
    • type
      Function
    • source: [view] 
                    
      

                      this.inherited(arguments);
        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{
         this.domNode.style.width = dojo.marginBox(this.domNode).w + "px";
        }
        this._allFPs.push(this);
        this.domNode.style.position = "absolute";

        
        this.bgIframe = new dijit.BackgroundIframe(this.domNode);
        this._naturalState = dojo.coords(this.domNode);
                    
      
                    
    • summary
  • dojox.layout.FloatingPane.startup
       
    • type
      Function
    • source: [view] 
                    
      

                      if(this._started){ return; }

        
        this.inherited(arguments);


        if(this.resizable){
         if(dojo.isIE){
          this.canvas.style.overflow = "auto";
         }else{
          this.containerNode.style.overflow = "auto";
         }

         
         this._resizeHandle = new dojox.layout.ResizeHandle({
          targetId: this.id,
          resizeAxis: this.resizeAxis
         },this.resizeHandle);


        }


        if(this.dockable){
         // FIXME: argh.
         var tmpName = this.dockTo;


         if(this.dockTo){
          this.dockTo = dijit.byId(this.dockTo);
         }else{
          this.dockTo = dijit.byId('dojoxGlobalFloatingDock');
         }


         if(!this.dockTo){
          var tmpId, tmpNode;
          // 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){
           tmpId = tmpName;
           tmpNode = dojo.byId(tmpName);
          }else{
           tmpNode = dojo.create('div', null, dojo.body());
           dojo.addClass(tmpNode,"dojoxFloatingDockDefault");
           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");


        // Initial resize to give child the opportunity to lay itself out
        this.resize(dojo.coords(this.domNode));

        
        this._started = true;
                    
      
                    
    • summary
  • dojox.layout.FloatingPane.setTitle
       
    • type
      Function
    • parameters: 
      • title: (typeof String)
    • source: [view] 
                    
      

                      dojo.deprecated("pane.setTitle", "Use pane.set('title', someTitle)", "2.0");
        this.set("title", title);
        // this.setTitle = dojo.hitch(this, "setTitle") ??
                    
      
                    
    • summary
      Update the Title bar with a new string
  • dojox.layout.FloatingPane.close
       
    • type
      Function
    • source: [view] 
                    
      

                      if(!this.closable){ return; }
        dojo.unsubscribe(this._listener);
        this.hide(dojo.hitch(this,function(){
         this.destroyRecursive();
        }));
                    
      
                    
    • summary
      Close and destroy this widget
  • dojox.layout.FloatingPane.hide
       
    • type
      Function
    • parameters: 
      • callback: (typeof Function)
    • source: [view] 
                    
      

                      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.dockable){
           this.dockTo._positionDock(null);
          }
          if(callback){
           callback();
          }
         })
        }).play();
                    
      
                    
    • summary
      Close, but do not destroy this FloatingPane
  • dojox.layout.FloatingPane.show
       
    • type
      Function
    • parameters: 
      • callback: (typeof Function)
    • source: [view] 
                    
      

                      var anim = dojo.fadeIn({node:this.domNode, duration:this.duration,
         beforeBegin: dojo.hitch(this,function(){
          this.domNode.style.display = "";
          this.domNode.style.visibility = "visible";
          if (this.dockTo && this.dockable) { 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));
        this._onShow(); // lazy load trigger
                    
      
                    
    • summary
      Show the FloatingPane
  • dojox.layout.FloatingPane.minimize
       
    • type
      Function
    • source: [view] 
                    
      

                      if(!this._isDocked){ this.hide(dojo.hitch(this,"_dock")); }
                    
      
                    
    • summary
      Hide and dock the FloatingPane
  • dojox.layout.FloatingPane.maximize
       
    • type
      Function
    • source: [view] 
                    
      

                      if(this._maximized){ return; }
        this._naturalState = dojo.position(this.domNode);
        if(this._isDocked){
         this.show();
         setTimeout(dojo.hitch(this,"maximize"),this.duration);
        }
        dojo.addClass(this.focusNode,"floatingPaneMaximized");
        this.resize(dojo.window.getBox());
        this._maximized = true;
                    
      
                    
    • summary
      Make this FloatingPane full-screen (viewport)
  • dojox.layout.FloatingPane._restore
       
    • type
      Function
    • source: [view] 
                    
      

                      if(this._maximized){
         this.resize(this._naturalState);
         dojo.removeClass(this.focusNode,"floatingPaneMaximized");
         this._maximized = false;
        }
                    
      
                    
    • summary
  • dojox.layout.FloatingPane._dock
       
    • type
      Function
    • source: [view] 
                    
      

                      if(!this._isDocked && this.dockable){
         this._dockNode = this.dockTo.addNode(this);
         this._isDocked = true;
        }
                    
      
                    
    • summary
  • dojox.layout.FloatingPane.resize
       
    • type
      Function
    • parameters: 
      • dim: (typeof Object)
    • source: [view] 
                    
      

                      dim = dim || this._naturalState;
        this._currentState = dim;


        // From the ResizeHandle we only get width and height information
        var dns = this.domNode.style;
        if("t" in dim){ dns.top = dim.t + "px"; 
                    
      
                    
    • summary
      Size the FloatingPane and place accordingly
  • dojox.layout.FloatingPane.bringToTop
       
    • type
      Function
    • source: [view] 
                    
      

                      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");
                    
      
                    
    • summary
      bring this FloatingPane above all other panes
  • dojox.layout.FloatingPane.destroy
       
    • type
      Function
    • source: [view] 
                    
      

                      this._allFPs.splice(dojo.indexOf(this._allFPs, this), 1);
        if(this._resizeHandle){
         this._resizeHandle.destroy();
        }
        this.inherited(arguments);
                    
      
                    
    • summary
      Destroy this FloatingPane completely
  • dojox.layout.FloatingPane.dockNode.style.display
       
    • summary
  • dojox.layout.FloatingPane.closeNode.style.display
       
    • summary
  • dojox.layout.FloatingPane.maxNode.style.display
       
    • summary
  • dojox.layout.FloatingPane.restoreNode.style.display
       
    • summary
  • dojox.layout.FloatingPane.resizeHandle.style.display
       
    • summary
  • dojox.layout.FloatingPane.domNode.style.width
       
    • summary
  • dojox.layout.FloatingPane.domNode.style.position
       
    • summary
  • dojox.layout.FloatingPane.bgIframe
       
    • summary
  • dojox.layout.FloatingPane._naturalState
       
    • summary
  • dojox.layout.FloatingPane.canvas.style.overflow
       
    • summary
  • dojox.layout.FloatingPane.containerNode.style.overflow
       
    • summary
  • dojox.layout.FloatingPane._resizeHandle
       
    • summary
  • dojox.layout.FloatingPane.domNode.style.display
       
    • summary
  • dojox.layout.FloatingPane._started
       
    • summary
  • dojox.layout.FloatingPane.domNode.style.visibility
       
    • summary
  • dojox.layout.FloatingPane._isDocked
       
    • summary
  • dojox.layout.FloatingPane._maximized
       
    • summary
  • dojox.layout.FloatingPane._currentState
       
    • summary
  • dojox.layout.Dock
       
    • type
      Function
    • chains: 
      • dijit._Widget: (prototype)
      • dijit._Widget: (call)
      • dijit._Templated: (call)
    • mixins: 
      • dijit._Templated.prototype: (prototype)
    • summary
      A widget that attaches to a node and keeps track of incoming / outgoing FloatingPanes
and handles layout
  • dojox.layout.Dock.templateString
       
    • summary
  • dojox.layout.Dock._docked
       
    • summary
  • dojox.layout.Dock._inPositioning
       
    • summary
  • dojox.layout.Dock.autoPosition
       
    • summary
  • dojox.layout.Dock.addNode
       
    • type
      Function
    • parameters: 
      • refNode: (typeof )
    • source: [view] 
                    
      

                      var div = dojo.create('li', null, this.containerNode),
         node = new dojox.layout._DockNode({
          title: refNode.title,
          paneRef: refNode
         }, div)
        ;
        node.startup();
        return node;
                    
      
                    
    • summary
      Instert a dockNode refernce into the dock
  • dojox.layout.Dock.startup
       
    • type
      Function
    • source: [view] 
                    
      

                      if (this.id == "dojoxGlobalFloatingDock" || this.isFixedDock) {
         // attach window.onScroll, and a position like in presentation/dialog
         this.connect(window, 'onresize', "_positionDock");
         this.connect(window, 'onscroll', "_positionDock");
         if(dojo.isIE){
          this.connect(this.domNode, "onresize", "_positionDock");
         }
        }
        this._positionDock(null);
        this.inherited(arguments);
                    
      
                    
    • summary
  • dojox.layout.Dock._positionDock
       
    • type
      Function
    • parameters: 
      • e: (typeof Event)
    • source: [view] 
                    
      

                      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 = dojo.window.getBox();
           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;
          }), 125);
         }
        }
                    
      
                    
    • summary
  • dojox.layout.Dock.id
       
    • summary
  • dojox.layout.Dock._inPositiononing
       
    • summary
  • dojox.layout._DockNode
       
    • type
      Function
    • chains: 
      • dijit._Widget: (prototype)
      • dijit._Widget: (call)
      • dijit._Templated: (call)
    • mixins: 
      • dijit._Templated.prototype: (prototype)
    • summary
      dojox.layout._DockNode is a private widget used to keep track of
which pane is docked.
  • dojox.layout._DockNode.title
       
    • type
      String
    • summary
      Shown in dock icon. should read parent iconSrc?
  • dojox.layout._DockNode.paneRef
       
    • type
      Widget
    • summary
      reference to the FloatingPane we reprasent in any given dock
  • dojox.layout._DockNode.templateString
       
    • summary
  • dojox.layout._DockNode.restore
       
    • type
      Function
    • source: [view] 
                    
      

                      this.paneRef.show();
        this.paneRef.bringToTop();
        this.destroy();
                    
      
                    
    • summary
      remove this dock item from parent dock, and call show() on reffed floatingpane
  • dojox.layout
       
    • type
      Object
    • summary
  • dojox
       
    • type
      Object
    • summary