_ItemBase.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. define("dojox/mobile/_ItemBase", [
  2. "dojo/_base/kernel",
  3. "dojo/_base/config",
  4. "dojo/_base/declare",
  5. "dijit/registry", // registry.getEnclosingWidget
  6. "dijit/_Contained",
  7. "dijit/_Container",
  8. "dijit/_WidgetBase",
  9. "./TransitionEvent",
  10. "./View"
  11. ], function(kernel, config, declare, registry, Contained, Container, WidgetBase, TransitionEvent, View){
  12. /*=====
  13. var Contained = dijit._Contained;
  14. var Container = dijit._Container;
  15. var WidgetBase = dijit._WidgetBase;
  16. var TransitionEvent = dojox.mobile.TransitionEvent;
  17. var View = dojox.mobile.View;
  18. =====*/
  19. // module:
  20. // dojox/mobile/_ItemBase
  21. // summary:
  22. // A base class for item classes (e.g. ListItem, IconItem, etc.)
  23. return declare("dojox.mobile._ItemBase", [WidgetBase, Container, Contained],{
  24. // summary:
  25. // A base class for item classes (e.g. ListItem, IconItem, etc.)
  26. // description:
  27. // _ItemBase is a base class for widgets that have capability to
  28. // make a view transition when clicked.
  29. // icon: String
  30. // An icon image to display. The value can be either a path for an
  31. // image file or a class name of a DOM button. If icon is not
  32. // specified, the iconBase parameter of the parent widget is used.
  33. icon: "",
  34. // iconPos: String
  35. // The position of an aggregated icon. IconPos is comma separated
  36. // values like top,left,width,height (ex. "0,0,29,29"). If iconPos
  37. // is not specified, the iconPos parameter of the parent widget is
  38. // used.
  39. iconPos: "", // top,left,width,height (ex. "0,0,29,29")
  40. // alt: String
  41. // An alt text for the icon image.
  42. alt: "",
  43. // href: String
  44. // A URL of another web page to go to.
  45. href: "",
  46. // hrefTarget: String
  47. // A target that specifies where to open a page specified by
  48. // href. The value will be passed to the 2nd argument of
  49. // window.open().
  50. hrefTarget: "",
  51. // moveTo: String
  52. // The id of the transition destination view which resides in the
  53. // current page.
  54. //
  55. // If the value has a hash sign ('#') before the id (e.g. #view1)
  56. // and the dojo.hash module is loaded by the user application, the
  57. // view transition updates the hash in the browser URL so that the
  58. // user can bookmark the destination view. In this case, the user
  59. // can also use the browser's back/forward button to navigate
  60. // through the views in the browser history.
  61. //
  62. // If null, transitions to a blank view.
  63. // If '#', returns immediately without transition.
  64. moveTo: "",
  65. // scene: String
  66. // The name of a scene. Used from dojox.mobile.app.
  67. scene: "",
  68. // clickable: Boolean
  69. // If true, this item becomes clickable even if a transition
  70. // destination (moveTo, etc.) is not specified.
  71. clickable: false,
  72. // url: String
  73. // A URL of an html fragment page or JSON data that represents a
  74. // new view content. The view content is loaded with XHR and
  75. // inserted in the current page. Then a view transition occurs to
  76. // the newly created view. The view is cached so that subsequent
  77. // requests would not load the content again.
  78. url: "",
  79. // urlTarget: String
  80. // Node id under which a new view will be created according to the
  81. // url parameter. If not specified, The new view will be created as
  82. // a sibling of the current view.
  83. urlTarget: "",
  84. // transition: String
  85. // A type of animated transition effect. You can choose from the
  86. // standard transition types, "slide", "fade", "flip", or from the
  87. // extended transition types, "cover", "coverv", "dissolve",
  88. // "reveal", "revealv", "scaleIn", "scaleOut", "slidev",
  89. // "swirl", "zoomIn", "zoomOut". If "none" is specified, transition
  90. // occurs immediately without animation.
  91. transition: "",
  92. // transitionDir: Number
  93. // The transition direction. If 1, transition forward. If -1,
  94. // transition backward. For example, the slide transition slides
  95. // the view from right to left when dir == 1, and from left to
  96. // right when dir == -1.
  97. transitionDir: 1,
  98. // transitionOptions: Object
  99. // A hash object that holds transition options.
  100. transitionOptions: null,
  101. // callback: Function|String
  102. // A callback function that is called when the transition has been
  103. // finished. A function reference, or name of a function in
  104. // context.
  105. callback: null,
  106. // sync: Boolean
  107. // If true, XHR for the view content specified with the url
  108. // parameter is performed synchronously. If false, it is done
  109. // asynchronously and the progress indicator is displayed while
  110. // loading the content. This parameter is effective only when the
  111. // url parameter is used.
  112. sync: true,
  113. // label: String
  114. // A label of the item. If the label is not specified, innerHTML is
  115. // used as a label.
  116. label: "",
  117. // toggle: Boolean
  118. // If true, the item acts like a toggle button.
  119. toggle: false,
  120. // _duration: Number
  121. // Duration of selection, milliseconds.
  122. _duration: 800,
  123. inheritParams: function(){
  124. var parent = this.getParent();
  125. if(parent){
  126. if(!this.transition){ this.transition = parent.transition; }
  127. if(this.icon && parent.iconBase &&
  128. parent.iconBase.charAt(parent.iconBase.length - 1) === '/'){
  129. this.icon = parent.iconBase + this.icon;
  130. }
  131. if(!this.icon){ this.icon = parent.iconBase; }
  132. if(!this.iconPos){ this.iconPos = parent.iconPos; }
  133. }
  134. },
  135. select: function(){
  136. // summary:
  137. // Makes this widget in the selected state.
  138. // description:
  139. // Subclass must implement.
  140. },
  141. deselect: function(){
  142. // summary:
  143. // Makes this widget in the deselected state.
  144. // description:
  145. // Subclass must implement.
  146. },
  147. defaultClickAction: function(e){
  148. if(this.toggle){
  149. if(this.selected){
  150. this.deselect();
  151. }else{
  152. this.select();
  153. }
  154. }else if(!this.selected){
  155. this.select();
  156. if(!this.selectOne){
  157. var _this = this;
  158. setTimeout(function(){
  159. _this.deselect();
  160. }, this._duration);
  161. }
  162. var transOpts;
  163. if(this.moveTo || this.href || this.url || this.scene){
  164. transOpts = {moveTo: this.moveTo, href: this.href, url: this.url, scene: this.scene, transition: this.transition, transitionDir: this.transitionDir};
  165. }else if(this.transitionOptions){
  166. transOpts = this.transitionOptions;
  167. }
  168. if(transOpts){
  169. return new TransitionEvent(this.domNode,transOpts,e).dispatch();
  170. }
  171. }
  172. },
  173. getParent: function(){
  174. // summary:
  175. // Gets the parent widget.
  176. // description:
  177. // Almost equivalent to _Contained#getParent, but this method
  178. // does not cause a script error even if this widget has no
  179. // parent yet.
  180. var ref = this.srcNodeRef || this.domNode;
  181. return ref && ref.parentNode ? registry.getEnclosingWidget(ref.parentNode) : null;
  182. },
  183. setTransitionPos: function(e){
  184. // summary:
  185. // Stores the clicked position for later use.
  186. // description:
  187. // Some of the transition animations (e.g. ScaleIn) needs the
  188. // clicked position.
  189. var w = this;
  190. while(true){
  191. w = w.getParent();
  192. if(!w || w instanceof View){ break; }
  193. }
  194. if(w){
  195. w.clickedPosX = e.clientX;
  196. w.clickedPosY = e.clientY;
  197. }
  198. },
  199. transitionTo: function(moveTo, href, url, scene){
  200. // summary:
  201. // Performs a view transition.
  202. // description:
  203. // Given a transition destination, this method performs a view
  204. // transition. This method is typically called when this item
  205. // is clicked.
  206. if(config.isDebug){
  207. var alreadyCalledHash = arguments.callee._ach || (arguments.callee._ach = {}),
  208. caller = (arguments.callee.caller || "unknown caller").toString();
  209. if(!alreadyCalledHash[caller]){
  210. kernel.deprecated(this.declaredClass + "::transitionTo() is deprecated." +
  211. caller, "", "2.0");
  212. alreadyCalledHash[caller] = true;
  213. }
  214. }
  215. new TransitionEvent(this.domNode, {moveTo: moveTo, href: href, url: url, scene: scene,
  216. transition: this.transition, transitionDir: this.transitionDir}).dispatch();
  217. }
  218. });
  219. });