250 lines
7.8 KiB
JavaScript
250 lines
7.8 KiB
JavaScript
//>>built
|
|
define("dojox/mobile/_ItemBase", [
|
|
"dojo/_base/kernel",
|
|
"dojo/_base/config",
|
|
"dojo/_base/declare",
|
|
"dijit/registry", // registry.getEnclosingWidget
|
|
"dijit/_Contained",
|
|
"dijit/_Container",
|
|
"dijit/_WidgetBase",
|
|
"./TransitionEvent",
|
|
"./View"
|
|
], function(kernel, config, declare, registry, Contained, Container, WidgetBase, TransitionEvent, View){
|
|
|
|
/*=====
|
|
var Contained = dijit._Contained;
|
|
var Container = dijit._Container;
|
|
var WidgetBase = dijit._WidgetBase;
|
|
var TransitionEvent = dojox.mobile.TransitionEvent;
|
|
var View = dojox.mobile.View;
|
|
=====*/
|
|
|
|
// module:
|
|
// dojox/mobile/_ItemBase
|
|
// summary:
|
|
// A base class for item classes (e.g. ListItem, IconItem, etc.)
|
|
|
|
return declare("dojox.mobile._ItemBase", [WidgetBase, Container, Contained],{
|
|
// summary:
|
|
// A base class for item classes (e.g. ListItem, IconItem, etc.)
|
|
// description:
|
|
// _ItemBase is a base class for widgets that have capability to
|
|
// make a view transition when clicked.
|
|
|
|
// icon: String
|
|
// An icon image to display. The value can be either a path for an
|
|
// image file or a class name of a DOM button. If icon is not
|
|
// specified, the iconBase parameter of the parent widget is used.
|
|
icon: "",
|
|
|
|
// iconPos: String
|
|
// The position of an aggregated icon. IconPos is comma separated
|
|
// values like top,left,width,height (ex. "0,0,29,29"). If iconPos
|
|
// is not specified, the iconPos parameter of the parent widget is
|
|
// used.
|
|
iconPos: "", // top,left,width,height (ex. "0,0,29,29")
|
|
|
|
// alt: String
|
|
// An alt text for the icon image.
|
|
alt: "",
|
|
|
|
// href: String
|
|
// A URL of another web page to go to.
|
|
href: "",
|
|
|
|
// hrefTarget: String
|
|
// A target that specifies where to open a page specified by
|
|
// href. The value will be passed to the 2nd argument of
|
|
// window.open().
|
|
hrefTarget: "",
|
|
|
|
// moveTo: String
|
|
// The id of the transition destination view which resides in the
|
|
// current page.
|
|
//
|
|
// If the value has a hash sign ('#') before the id (e.g. #view1)
|
|
// and the dojo.hash module is loaded by the user application, the
|
|
// view transition updates the hash in the browser URL so that the
|
|
// user can bookmark the destination view. In this case, the user
|
|
// can also use the browser's back/forward button to navigate
|
|
// through the views in the browser history.
|
|
//
|
|
// If null, transitions to a blank view.
|
|
// If '#', returns immediately without transition.
|
|
moveTo: "",
|
|
|
|
// scene: String
|
|
// The name of a scene. Used from dojox.mobile.app.
|
|
scene: "",
|
|
|
|
// clickable: Boolean
|
|
// If true, this item becomes clickable even if a transition
|
|
// destination (moveTo, etc.) is not specified.
|
|
clickable: false,
|
|
|
|
// url: String
|
|
// A URL of an html fragment page or JSON data that represents a
|
|
// new view content. The view content is loaded with XHR and
|
|
// inserted in the current page. Then a view transition occurs to
|
|
// the newly created view. The view is cached so that subsequent
|
|
// requests would not load the content again.
|
|
url: "",
|
|
|
|
// urlTarget: String
|
|
// Node id under which a new view will be created according to the
|
|
// url parameter. If not specified, The new view will be created as
|
|
// a sibling of the current view.
|
|
urlTarget: "",
|
|
|
|
// transition: String
|
|
// A type of animated transition effect. You can choose from the
|
|
// standard transition types, "slide", "fade", "flip", or from the
|
|
// extended transition types, "cover", "coverv", "dissolve",
|
|
// "reveal", "revealv", "scaleIn", "scaleOut", "slidev",
|
|
// "swirl", "zoomIn", "zoomOut". If "none" is specified, transition
|
|
// occurs immediately without animation.
|
|
transition: "",
|
|
|
|
// transitionDir: Number
|
|
// The transition direction. If 1, transition forward. If -1,
|
|
// transition backward. For example, the slide transition slides
|
|
// the view from right to left when dir == 1, and from left to
|
|
// right when dir == -1.
|
|
transitionDir: 1,
|
|
|
|
// transitionOptions: Object
|
|
// A hash object that holds transition options.
|
|
transitionOptions: null,
|
|
|
|
// callback: Function|String
|
|
// A callback function that is called when the transition has been
|
|
// finished. A function reference, or name of a function in
|
|
// context.
|
|
callback: null,
|
|
|
|
// sync: Boolean
|
|
// If true, XHR for the view content specified with the url
|
|
// parameter is performed synchronously. If false, it is done
|
|
// asynchronously and the progress indicator is displayed while
|
|
// loading the content. This parameter is effective only when the
|
|
// url parameter is used.
|
|
sync: true,
|
|
|
|
// label: String
|
|
// A label of the item. If the label is not specified, innerHTML is
|
|
// used as a label.
|
|
label: "",
|
|
|
|
// toggle: Boolean
|
|
// If true, the item acts like a toggle button.
|
|
toggle: false,
|
|
|
|
// _duration: Number
|
|
// Duration of selection, milliseconds.
|
|
_duration: 800,
|
|
|
|
|
|
inheritParams: function(){
|
|
var parent = this.getParent();
|
|
if(parent){
|
|
if(!this.transition){ this.transition = parent.transition; }
|
|
if(this.icon && parent.iconBase &&
|
|
parent.iconBase.charAt(parent.iconBase.length - 1) === '/'){
|
|
this.icon = parent.iconBase + this.icon;
|
|
}
|
|
if(!this.icon){ this.icon = parent.iconBase; }
|
|
if(!this.iconPos){ this.iconPos = parent.iconPos; }
|
|
}
|
|
},
|
|
|
|
select: function(){
|
|
// summary:
|
|
// Makes this widget in the selected state.
|
|
// description:
|
|
// Subclass must implement.
|
|
},
|
|
|
|
deselect: function(){
|
|
// summary:
|
|
// Makes this widget in the deselected state.
|
|
// description:
|
|
// Subclass must implement.
|
|
},
|
|
|
|
defaultClickAction: function(e){
|
|
if(this.toggle){
|
|
if(this.selected){
|
|
this.deselect();
|
|
}else{
|
|
this.select();
|
|
}
|
|
}else if(!this.selected){
|
|
this.select();
|
|
if(!this.selectOne){
|
|
var _this = this;
|
|
setTimeout(function(){
|
|
_this.deselect();
|
|
}, this._duration);
|
|
}
|
|
var transOpts;
|
|
if(this.moveTo || this.href || this.url || this.scene){
|
|
transOpts = {moveTo: this.moveTo, href: this.href, url: this.url, scene: this.scene, transition: this.transition, transitionDir: this.transitionDir};
|
|
}else if(this.transitionOptions){
|
|
transOpts = this.transitionOptions;
|
|
}
|
|
if(transOpts){
|
|
return new TransitionEvent(this.domNode,transOpts,e).dispatch();
|
|
}
|
|
}
|
|
},
|
|
|
|
getParent: function(){
|
|
// summary:
|
|
// Gets the parent widget.
|
|
// description:
|
|
// Almost equivalent to _Contained#getParent, but this method
|
|
// does not cause a script error even if this widget has no
|
|
// parent yet.
|
|
var ref = this.srcNodeRef || this.domNode;
|
|
return ref && ref.parentNode ? registry.getEnclosingWidget(ref.parentNode) : null;
|
|
},
|
|
|
|
setTransitionPos: function(e){
|
|
// summary:
|
|
// Stores the clicked position for later use.
|
|
// description:
|
|
// Some of the transition animations (e.g. ScaleIn) needs the
|
|
// clicked position.
|
|
var w = this;
|
|
while(true){
|
|
w = w.getParent();
|
|
if(!w || w instanceof View){ break; }
|
|
}
|
|
if(w){
|
|
w.clickedPosX = e.clientX;
|
|
w.clickedPosY = e.clientY;
|
|
}
|
|
},
|
|
|
|
transitionTo: function(moveTo, href, url, scene){
|
|
// summary:
|
|
// Performs a view transition.
|
|
// description:
|
|
// Given a transition destination, this method performs a view
|
|
// transition. This method is typically called when this item
|
|
// is clicked.
|
|
if(config.isDebug){
|
|
var alreadyCalledHash = arguments.callee._ach || (arguments.callee._ach = {}),
|
|
caller = (arguments.callee.caller || "unknown caller").toString();
|
|
if(!alreadyCalledHash[caller]){
|
|
kernel.deprecated(this.declaredClass + "::transitionTo() is deprecated." +
|
|
caller, "", "2.0");
|
|
alreadyCalledHash[caller] = true;
|
|
}
|
|
}
|
|
new TransitionEvent(this.domNode, {moveTo: moveTo, href: href, url: url, scene: scene,
|
|
transition: this.transition, transitionDir: this.transitionDir}).dispatch();
|
|
}
|
|
});
|
|
});
|