230 lines
6.7 KiB
JavaScript
230 lines
6.7 KiB
JavaScript
//>>built
|
|
define("dojox/mobile/SwapView", [
|
|
"dojo/_base/array",
|
|
"dojo/_base/connect",
|
|
"dojo/_base/declare",
|
|
"dojo/dom",
|
|
"dojo/dom-class",
|
|
"dijit/registry", // registry.byNode
|
|
"./View",
|
|
"./_ScrollableMixin"
|
|
], function(array, connect, declare, dom, domClass, registry, View, ScrollableMixin){
|
|
|
|
/*=====
|
|
var View = dojox.mobile.View;
|
|
var ScrollableMixin = dojox.mobile._ScrollableMixin;
|
|
=====*/
|
|
|
|
// module:
|
|
// dojox/mobile/SwapView
|
|
// summary:
|
|
// A container that can be flipped horizontally.
|
|
|
|
return declare("dojox.mobile.SwapView", [View, ScrollableMixin], {
|
|
// summary:
|
|
// A container that can be flipped horizontally.
|
|
// description:
|
|
// SwapView is a container widget that represents entire mobile
|
|
// device screen, and can be swiped horizontally. (In dojo-1.6, it
|
|
// was called 'FlippableView'.) SwapView is a subclass of
|
|
// dojox.mobile.View. SwapView allows the user to swipe the screen
|
|
// left or right to move between the views. When SwapView is
|
|
// swiped, it finds an adjacent SwapView to open it.
|
|
|
|
/* internal properties */
|
|
scrollDir: "f",
|
|
weight: 1.2,
|
|
|
|
buildRendering: function(){
|
|
this.inherited(arguments);
|
|
domClass.add(this.domNode, "mblSwapView");
|
|
this.setSelectable(this.domNode, false);
|
|
this.containerNode = this.domNode;
|
|
connect.subscribe("/dojox/mobile/nextPage", this, "handleNextPage");
|
|
connect.subscribe("/dojox/mobile/prevPage", this, "handlePrevPage");
|
|
this.findAppBars();
|
|
},
|
|
|
|
resize: function(){
|
|
// summary:
|
|
// Calls resize() of each child widget.
|
|
this.inherited(arguments); // scrollable#resize() will be called
|
|
array.forEach(this.getChildren(), function(child){
|
|
if(child.resize){ child.resize(); }
|
|
});
|
|
},
|
|
|
|
onTouchStart: function(e){
|
|
// summary:
|
|
// Internal function to handle touchStart events.
|
|
var fromTop = this.domNode.offsetTop;
|
|
var nextView = this.nextView(this.domNode);
|
|
if(nextView){
|
|
nextView.stopAnimation();
|
|
domClass.add(nextView.domNode, "mblIn");
|
|
// Temporarily add padding to align with the fromNode while transition
|
|
nextView.containerNode.style.paddingTop = fromTop + "px";
|
|
}
|
|
var prevView = this.previousView(this.domNode);
|
|
if(prevView){
|
|
prevView.stopAnimation();
|
|
domClass.add(prevView.domNode, "mblIn");
|
|
// Temporarily add padding to align with the fromNode while transition
|
|
prevView.containerNode.style.paddingTop = fromTop + "px";
|
|
}
|
|
this.inherited(arguments);
|
|
},
|
|
|
|
handleNextPage: function(/*Widget*/w){
|
|
// summary:
|
|
// Called when the "/dojox/mobile/nextPage" topic is published.
|
|
var refNode = w.refId && dom.byId(w.refId) || w.domNode;
|
|
if(this.domNode.parentNode !== refNode.parentNode){ return; }
|
|
if(this.getShowingView() !== this){ return; }
|
|
this.goTo(1);
|
|
},
|
|
|
|
handlePrevPage: function(/*Widget*/w){
|
|
// summary:
|
|
// Called when the "/dojox/mobile/prevPage" topic is published.
|
|
var refNode = w.refId && dom.byId(w.refId) || w.domNode;
|
|
if(this.domNode.parentNode !== refNode.parentNode){ return; }
|
|
if(this.getShowingView() !== this){ return; }
|
|
this.goTo(-1);
|
|
},
|
|
|
|
goTo: function(/*Number*/dir){
|
|
// summary:
|
|
// Moves to the next or previous view.
|
|
var w = this.domNode.offsetWidth;
|
|
var view = (dir == 1) ? this.nextView(this.domNode) : this.previousView(this.domNode);
|
|
if(!view){ return; }
|
|
view._beingFlipped = true;
|
|
view.scrollTo({x:w*dir});
|
|
view._beingFlipped = false;
|
|
view.domNode.style.display = "";
|
|
domClass.add(view.domNode, "mblIn");
|
|
this.slideTo({x:0}, 0.5, "ease-out", {x:-w*dir});
|
|
},
|
|
|
|
isSwapView: function(node){
|
|
// summary:
|
|
// Returns true if the given node is a SwapView widget.
|
|
return (node && node.nodeType === 1 && domClass.contains(node, "mblSwapView"));
|
|
},
|
|
|
|
nextView: function(node){
|
|
// summary:
|
|
// Returns the next view.
|
|
for(var n = node.nextSibling; n; n = n.nextSibling){
|
|
if(this.isSwapView(n)){ return registry.byNode(n); }
|
|
}
|
|
return null;
|
|
},
|
|
|
|
previousView: function(node){
|
|
// summary:
|
|
// Returns the previous view.
|
|
for(var n = node.previousSibling; n; n = n.previousSibling){
|
|
if(this.isSwapView(n)){ return registry.byNode(n); }
|
|
}
|
|
return null;
|
|
},
|
|
|
|
scrollTo: function(/*Object*/to){
|
|
// summary:
|
|
// Overrides dojox.mobile.scrollable.scrollTo().
|
|
if(!this._beingFlipped){
|
|
var newView, x;
|
|
if(to.x < 0){
|
|
newView = this.nextView(this.domNode);
|
|
x = to.x + this.domNode.offsetWidth;
|
|
}else{
|
|
newView = this.previousView(this.domNode);
|
|
x = to.x - this.domNode.offsetWidth;
|
|
}
|
|
if(newView){
|
|
newView.domNode.style.display = "";
|
|
newView._beingFlipped = true;
|
|
newView.scrollTo({x:x});
|
|
newView._beingFlipped = false;
|
|
}
|
|
}
|
|
this.inherited(arguments);
|
|
},
|
|
|
|
slideTo: function(/*Object*/to, /*Number*/duration, /*String*/easing, fake_pos){
|
|
// summary:
|
|
// Overrides dojox.mobile.scrollable.slideTo().
|
|
if(!this._beingFlipped){
|
|
var w = this.domNode.offsetWidth;
|
|
var pos = fake_pos || this.getPos();
|
|
var newView, newX;
|
|
if(pos.x < 0){ // moving to left
|
|
newView = this.nextView(this.domNode);
|
|
if(pos.x < -w/4){ // slide to next
|
|
if(newView){
|
|
to.x = -w;
|
|
newX = 0;
|
|
}
|
|
}else{ // go back
|
|
if(newView){
|
|
newX = w;
|
|
}
|
|
}
|
|
}else{ // moving to right
|
|
newView = this.previousView(this.domNode);
|
|
if(pos.x > w/4){ // slide to previous
|
|
if(newView){
|
|
to.x = w;
|
|
newX = 0;
|
|
}
|
|
}else{ // go back
|
|
if(newView){
|
|
newX = -w;
|
|
}
|
|
}
|
|
}
|
|
|
|
if(newView){
|
|
newView._beingFlipped = true;
|
|
newView.slideTo({x:newX}, duration, easing);
|
|
newView._beingFlipped = false;
|
|
|
|
if(newX === 0){ // moving to another view
|
|
dojox.mobile.currentView = newView;
|
|
}
|
|
newView.domNode._isShowing = (newView && newX === 0);
|
|
}
|
|
this.domNode._isShowing = !(newView && newX === 0);
|
|
}
|
|
this.inherited(arguments);
|
|
},
|
|
|
|
onFlickAnimationEnd: function(e){
|
|
// summary:
|
|
// Overrides dojox.mobile.scrollable.onFlickAnimationEnd().
|
|
if(e && e.animationName && e.animationName !== "scrollableViewScroll2"){ return; }
|
|
// Hide all the views other than the currently showing one.
|
|
// Otherwise, when the orientation is changed, other views
|
|
// may appear unexpectedly.
|
|
var children = this.domNode.parentNode.childNodes;
|
|
for(var i = 0; i < children.length; i++){
|
|
var c = children[i];
|
|
if(this.isSwapView(c)){
|
|
domClass.remove(c, "mblIn");
|
|
if(!c._isShowing){
|
|
c.style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
this.inherited(arguments);
|
|
if(this.getShowingView() === this){
|
|
connect.publish("/dojox/mobile/viewChanged", [this]);
|
|
// Reset the temporary padding
|
|
this.containerNode.style.paddingTop = "";
|
|
}
|
|
}
|
|
});
|
|
});
|