analytics/webcontent/dojo17/dojox/mobile/FixedSplitter.js

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",
	"./FixedSplitterPane"
], function(array, declare, win, domClass, domGeometry, Contained, Container, WidgetBase, FixedSplitterPane){

/*=====
	var Contained = dijit._Contained;
	var Container = dijit._Container;
	var WidgetBase = dijit._WidgetBase;
=====*/

	// module:
	//		dojox/mobile/FixedSplitter
	// summary:
	//		A layout container that splits the window horizontally or vertically.

	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.
		//		A child of the widget should be FixedSplitterPane.
		//
		// example:
		// |	<div dojoType="dojox.mobile.FixedSplitter" orientation="H">
		// |		<div dojoType="dojox.mobile.FixedSplitterPane"
		// |			style="width:200px;border-right:1px solid black;">
		// |			pane #1 (width=200px)
		// |		</div>
		// |		<div dojoType="dojox.mobile.FixedSplitterPane">
		// |			pane #2
		// |		</div>
		// |	</div>

		// orientation: String
		//		The direction of split. If "H" is specified, panes are split
		//		horizontally. If "V" is specified, panes are split vertically.
		orientation: "H",


		buildRendering: function(){
			this.domNode = this.containerNode = this.srcNodeRef ? this.srcNodeRef : win.doc.createElement("DIV");
			domClass.add(this.domNode, "mblFixedSpliter");
		},

		startup: function(){
			if(this._started){ return; }
			var children = array.filter(this.domNode.childNodes, function(node){ return node.nodeType == 1; });
			array.forEach(children, function(node){
				domClass.add(node, "mblFixedSplitterPane"+this.orientation);
			}, this);
			this.inherited(arguments);
	
			var _this = this;
			setTimeout(function(){
				var parent = _this.getParent && _this.getParent();
				if(!parent || !parent.resize){ // top level widget
					_this.resize();
				}
			}, 0);
		},
	
		resize: function(){
			this.layout();
		},

		layout: function(){
			var sz = this.orientation == "H" ? "w" : "h";
			var children = array.filter(this.domNode.childNodes, function(node){ return node.nodeType == 1; });
			var offset = 0;
			for(var i = 0; i < children.length; i++){
				domGeometry.setMarginBox(children[i], this.orientation == "H" ? {l:offset} : {t:offset});
				if(i < children.length - 1){
					offset += domGeometry.getMarginBox(children[i])[sz];
				}
			}
	
			var h;
			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)[sz]) - offset;
			var props = {};
			props[sz] = l;
			domGeometry.setMarginBox(children[children.length - 1], props);
	
			array.forEach(this.getChildren(), function(child){
				if(child.resize){ child.resize(); }
			});
		},

		addChild: function(widget, /*Number?*/insertIndex){
			domClass.add(widget.domNode, "mblFixedSplitterPane"+this.orientation);
			this.inherited(arguments);
		}
	});
});