define("dojox/mobile/FixedSplitter", [ "dojo/_base/array", "dojo/_base/declare", "dojo/_base/window", "dojo/dom-class", "dojo/dom-geometry", "dijit/_Contained", "dijit/_Container", "dijit/_WidgetBase" ], function(array, declare, win, domClass, domGeometry, Contained, Container, WidgetBase){ // module: // dojox/mobile/FixedSplitter return declare("dojox.mobile.FixedSplitter", [WidgetBase, Container, Contained], { // summary: // A layout container that splits the window horizontally or // vertically. // description: // FixedSplitter is a very simple container widget that layouts its // child DOM nodes side by side either horizontally or // vertically. An example usage of this widget would be to realize // the split view on iPad. There is no visual splitter between the // children, and there is no function to resize the child panes // with drag-and-drop. If you need a visual splitter, you can // specify a border of a child DOM node with CSS. // // FixedSplitter has no knowledge of its child widgets. // dojox/mobile/Container (formerly known as FixedSplitterPane), // dojox/mobile/Pane, or dojox/mobile/ContentPane can be used as a // child widget of FixedSplitter. // // - Use dojox/mobile/Container if your content consists of ONLY // Dojo widgets. // - Use dojox/mobile/Pane if your content is an inline HTML // fragment (may or may not include Dojo widgets). // - Use dojox/mobile/ContentPane if your content is an external // HTML fragment (may or may not include Dojo widgets). // // example: // |
// |
// | pane #1 (width=200px) // |
// |
// | pane #2 // |
// |
// orientation: String // The direction of split. If "H" is specified, panes are split // horizontally. If "V" is specified, panes are split vertically. orientation: "H", // variablePane: Number // The index of a pane that fills the remainig space. // If -1, the last child pane fills the remaining space. variablePane: -1, // screenSizeAware: Boolean // If true, dynamically load a screen-size-aware module. screenSizeAware: false, // screenSizeAwareClass: String // A screen-size-aware module to load. screenSizeAwareClass: "dojox/mobile/ScreenSizeAware", /* internal properties */ // baseClass: String // The name of the CSS class of this widget. baseClass: "mblFixedSplitter", startup: function(){ if(this._started){ return; } domClass.add(this.domNode, this.baseClass + this.orientation); var parent = this.getParent(), f; if(!parent || !parent.resize){ // top level widget var _this = this; f = function(){ setTimeout(function(){ _this.resize(); }, 0); }; } if(this.screenSizeAware){ require([this.screenSizeAwareClass], function(module){ module.getInstance(); f && f(); }); }else{ f && f(); } this.inherited(arguments); }, resize: function(){ var wh = this.orientation === "H" ? "w" : "h", // width/height tl = this.orientation === "H" ? "l" : "t", // top/left props1 = {}, props2 = {}, i, c, h, a = [], offset = 0, total = 0, children = array.filter(this.domNode.childNodes, function(node){ return node.nodeType == 1; }), idx = this.variablePane == -1 ? children.length - 1 : this.variablePane; for(i = 0; i < children.length; i++){ if(i != idx){ a[i] = domGeometry.getMarginBox(children[i])[wh]; total += a[i]; } } if(this.orientation == "V"){ if(this.domNode.parentNode.tagName == "BODY"){ if(array.filter(win.body().childNodes, function(node){ return node.nodeType == 1; }).length == 1){ h = (win.global.innerHeight||win.doc.documentElement.clientHeight); } } } var l = (h || domGeometry.getMarginBox(this.domNode)[wh]) - total; props2[wh] = a[idx] = l; c = children[idx]; domGeometry.setMarginBox(c, props2); c.style[this.orientation === "H" ? "height" : "width"] = ""; for(i = 0; i < children.length; i++){ c = children[i]; props1[tl] = offset; domGeometry.setMarginBox(c, props1); c.style[this.orientation === "H" ? "top" : "left"] = ""; offset += a[i]; } array.forEach(this.getChildren(), function(child){ if(child.resize){ child.resize(); } }); }, _setOrientationAttr: function(/*String*/orientation){ // summary: // Sets the direction of split. // description: // The value must be either "H" or "V". // If "H" is specified, panes are split horizontally. // If "V" is specified, panes are split vertically. // tags: // private var s = this.baseClass; domClass.replace(this.domNode, s + orientation, s + this.orientation); this.orientation = orientation; if(this._started){ this.resize(); } } }); });