pulldown.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. define(function(require, exports, module) {
  2. "use strict";
  3. var Util = require('../util');
  4. var Base = require('../base');
  5. var clsPrefix;
  6. var containerCls;
  7. var content = "Pull Down To Refresh";
  8. var loadingContent = "Loading...";
  9. /**
  10. * A pulldown to refresh plugin for xscroll.
  11. * @constructor
  12. * @param {object} cfg
  13. * @param {number} cfg.height
  14. * @param {string} cfg.content default html for pulldown
  15. * @param {string} cfg.downContent html for pulldown when scrollTop is smaller than cfg.height
  16. * @param {string} cfg.upContent html for pulldown when scrollTop is larger than cfg.height
  17. * @param {string} cfg.loadingContent html for pulldown when released
  18. * @param {string} cfg.clsPrefix class prefix which default value is "xs-plugin-pulldown-"
  19. * @extends {Base}
  20. */
  21. var PullDown = function(cfg) {
  22. PullDown.superclass.constructor.call(this, cfg);
  23. this.userConfig = Util.mix({
  24. content: content,
  25. height: 60,
  26. autoRefresh: true,
  27. downContent: "Pull Down To Refresh",
  28. upContent: "Release To Refresh",
  29. loadingContent: loadingContent,
  30. clsPrefix: "xs-plugin-pulldown-"
  31. }, cfg);
  32. }
  33. Util.extend(PullDown, Base, {
  34. /**
  35. * a pluginId
  36. * @memberOf PullDown
  37. * @type {string}
  38. */
  39. pluginId: "pulldown",
  40. /**
  41. * plugin initializer
  42. * @memberOf PullDown
  43. * @override Base
  44. * @return {PullDown}
  45. */
  46. pluginInitializer: function(xscroll) {
  47. var self = this;
  48. self.xscroll = xscroll.render();
  49. clsPrefix = self.userConfig.clsPrefix;
  50. self.render();
  51. return self;
  52. },
  53. /**
  54. * detroy the plugin
  55. * @memberOf PullDown
  56. * @override Base
  57. * @return {PullDown}
  58. */
  59. pluginDestructor: function() {
  60. var self = this;
  61. Util.remove(self.pulldown);
  62. self.xscroll.off("panstart", self._panStartHandler, self);
  63. self.xscroll.off("pan", self._panHandler, self);
  64. self.xscroll.off("panend", self._panEndHandler, self);
  65. self.__isRender = false;
  66. self._evtBinded = false;
  67. },
  68. /**
  69. * render pulldown plugin
  70. * @memberOf PullDown
  71. * @return {PullDown}
  72. */
  73. render: function() {
  74. var self = this;
  75. if (self.__isRender) return;
  76. self.__isRender = true;
  77. if (!self.userConfig.container) {
  78. var containerCls = clsPrefix + "container";
  79. var height = self.userConfig.height || 60;
  80. var pulldown = self.pulldown = document.createElement("div");
  81. pulldown.className = containerCls;
  82. pulldown.style.position = "absolute";
  83. pulldown.style.width = "100%";
  84. pulldown.style.height = height + "px";
  85. pulldown.style.lineHeight = height + "px";
  86. pulldown.style.top = -height + "px";
  87. pulldown.style.textAlign = "center";
  88. self.xscroll.container.appendChild(pulldown);
  89. self.status = 'up';
  90. Util.addClass(pulldown, clsPrefix + self.status);
  91. pulldown.innerHTML = self.userConfig[self.status + "Content"] || self.userConfig.content;
  92. } else {
  93. // has customed container
  94. self.pulldown = self.userConfig.container
  95. }
  96. self._bindEvt();
  97. return self;
  98. },
  99. _bindEvt: function() {
  100. var self = this;
  101. if (self._evtBinded) return;
  102. self._evtBinded = true;
  103. var pulldown = self.pulldown;
  104. var xscroll = self.xscroll;
  105. xscroll.on("pan", self._panHandler, self);
  106. xscroll.on("panstart", self._panStartHandler, self);
  107. xscroll.on("panend", self._panEndHandler, self);
  108. },
  109. _changeStatus: function(status) {
  110. var prevVal = this.status;
  111. this.status = status;
  112. if (!this.userConfig.container) {
  113. Util.removeClass(this.pulldown, clsPrefix + prevVal)
  114. Util.addClass(this.pulldown, clsPrefix + status);
  115. if (this.userConfig[status + "Content"]) {
  116. this.pulldown.innerHTML = this.userConfig[status + "Content"];
  117. }
  118. }
  119. if (prevVal != status) {
  120. this.trigger("statuschange", {
  121. prevVal: prevVal,
  122. newVal: status
  123. });
  124. if (status == "loading") {
  125. this.trigger("loading");
  126. }
  127. }
  128. },
  129. /**
  130. * reset the pulldown plugin
  131. * @memberOf PullDown
  132. * @param {function} callback
  133. * @return {PullDown}
  134. */
  135. reset: function(callback) {
  136. this.xscroll.boundry.resetTop()
  137. this.xscroll.boundryCheckY(callback);
  138. this._expanded = false;
  139. return this;
  140. },
  141. _panStartHandler: function(e) {
  142. clearTimeout(this.loadingItv);
  143. },
  144. _panHandler: function(e) {
  145. var self = this;
  146. var scrollTop = self.xscroll.getScrollTop();
  147. if (scrollTop > 0) return;
  148. self._changeStatus(Math.abs(scrollTop) < self.userConfig.height ? "down" : "up");
  149. },
  150. _panEndHandler: function(e) {
  151. var self = this;
  152. var xscroll = self.xscroll;
  153. var height = self.userConfig.height || 60;
  154. var scrollTop = xscroll.getScrollTop();
  155. if (scrollTop < -height) {
  156. //prevent default bounce
  157. e.preventDefault();
  158. xscroll.boundry.resetTop();
  159. self._changeStatus("loading");
  160. xscroll.boundry.expandTop(height);
  161. xscroll.boundryCheckY(function() {
  162. });
  163. if (self.userConfig.autoRefresh) {
  164. clearTimeout(self.loadingItv);
  165. self.loadingItv = setTimeout(function() {
  166. xscroll.boundry.resetTop();
  167. xscroll.boundryCheckY(function() {
  168. window.location.reload();
  169. })
  170. }, 800);
  171. }
  172. }
  173. }
  174. });
  175. if (typeof module == 'object' && module.exports) {
  176. module.exports = PullDown;
  177. }
  178. /** ignored by jsdoc **/
  179. else if (window.XScroll && window.XScroll.Plugins) {
  180. return XScroll.Plugins.PullDown = PullDown;
  181. }
  182. });