forked from dojo/dojox-oldmirror
/
PageIndicator.js
111 lines (101 loc) · 3.18 KB
/
PageIndicator.js
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
define([
"dojo/_base/connect",
"dojo/_base/declare",
"dojo/dom",
"dojo/dom-class",
"dojo/dom-construct",
"dijit/registry",
"dijit/_Contained",
"dijit/_WidgetBase"
], function(connect, declare, dom, domClass, domConstruct, registry, Contained, WidgetBase){
// module:
// dojox/mobile/PageIndicator
return declare("dojox.mobile.PageIndicator", [WidgetBase, Contained],{
// summary:
// A current page indicator.
// description:
// PageIndicator displays a series of gray and white dots to
// indicate which page is currently being viewed. It can typically
// be used with dojox/mobile/SwapView. It is also internally used
// in dojox/mobile/Carousel.
// refId: String
// An ID of a DOM node to be searched. Siblings of the reference
// node will be searched for views. If not specified, this.domNode
// will be the reference node.
refId: "",
// baseClass: String
// The name of the CSS class of this widget.
baseClass: "mblPageIndicator",
buildRendering: function(){
this.inherited(arguments);
this._tblNode = domConstruct.create("table", {className:"mblPageIndicatorContainer"}, this.domNode);
this._tblNode.insertRow(-1);
this._clickHandle = this.connect(this.domNode, "onclick", "_onClick");
this.subscribe("/dojox/mobile/viewChanged", function(view){
this.reset();
});
},
startup: function(){
var _this = this;
setTimeout(function(){ // to wait until views' visibility is determined
_this.reset();
}, 0);
},
reset: function(){
// summary:
// Updates the indicator.
var r = this._tblNode.rows[0];
var i, c, a = [], dot;
var refNode = (this.refId && dom.byId(this.refId)) || this.domNode;
var children = refNode.parentNode.childNodes;
for(i = 0; i < children.length; i++){
c = children[i];
if(this.isView(c)){
a.push(c);
}
}
if(r.cells.length !== a.length){
domConstruct.empty(r);
for(i = 0; i < a.length; i++){
c = a[i];
dot = domConstruct.create("div", {className:"mblPageIndicatorDot"});
r.insertCell(-1).appendChild(dot);
}
}
if(a.length === 0){ return; }
var currentView = registry.byNode(a[0]).getShowingView();
for(i = 0; i < r.cells.length; i++){
dot = r.cells[i].firstChild;
if(a[i] === currentView.domNode){
domClass.add(dot, "mblPageIndicatorDotSelected");
}else{
domClass.remove(dot, "mblPageIndicatorDotSelected");
}
}
},
isView: function(node){
// summary:
// Returns true if the given node is a view.
return (node && node.nodeType === 1 && domClass.contains(node, "mblView")); // Boolean
},
_onClick: function(e){
// summary:
// Internal handler for click events.
// tags:
// private
if(this.onClick(e) === false){ return; } // user's click action
if(e.target !== this.domNode){ return; }
if(e.layerX < this._tblNode.offsetLeft){
connect.publish("/dojox/mobile/prevPage", [this]);
}else if(e.layerX > this._tblNode.offsetLeft + this._tblNode.offsetWidth){
connect.publish("/dojox/mobile/nextPage", [this]);
}
},
onClick: function(/*Event*/ /*===== e =====*/){
// summary:
// User-defined function to handle clicks.
// tags:
// callback
}
});
});