1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
//>>built
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);
}
});
});
|
