| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- define(function(require, exports, module) {
- "use strict";
- var Util = require('../util');
- var Base = require('../base');
- var clsPrefix;
- var containerCls;
- var content = "Pull Down To Refresh";
- var loadingContent = "Loading...";
- /**
- * A pulldown to refresh plugin for xscroll.
- * @constructor
- * @param {object} cfg
- * @param {number} cfg.height
- * @param {string} cfg.content default html for pulldown
- * @param {string} cfg.downContent html for pulldown when scrollTop is smaller than cfg.height
- * @param {string} cfg.upContent html for pulldown when scrollTop is larger than cfg.height
- * @param {string} cfg.loadingContent html for pulldown when released
- * @param {string} cfg.clsPrefix class prefix which default value is "xs-plugin-pulldown-"
- * @extends {Base}
- */
- var PullDown = function(cfg) {
- PullDown.superclass.constructor.call(this, cfg);
- this.userConfig = Util.mix({
- content: content,
- height: 60,
- autoRefresh: true,
- downContent: "Pull Down To Refresh",
- upContent: "Release To Refresh",
- loadingContent: loadingContent,
- clsPrefix: "xs-plugin-pulldown-"
- }, cfg);
- }
- Util.extend(PullDown, Base, {
- /**
- * a pluginId
- * @memberOf PullDown
- * @type {string}
- */
- pluginId: "pulldown",
- /**
- * plugin initializer
- * @memberOf PullDown
- * @override Base
- * @return {PullDown}
- */
- pluginInitializer: function(xscroll) {
- var self = this;
- self.xscroll = xscroll.render();
- clsPrefix = self.userConfig.clsPrefix;
- self.render();
- return self;
- },
- /**
- * detroy the plugin
- * @memberOf PullDown
- * @override Base
- * @return {PullDown}
- */
- pluginDestructor: function() {
- var self = this;
- Util.remove(self.pulldown);
- self.xscroll.off("panstart", self._panStartHandler, self);
- self.xscroll.off("pan", self._panHandler, self);
- self.xscroll.off("panend", self._panEndHandler, self);
- self.__isRender = false;
- self._evtBinded = false;
- },
- /**
- * render pulldown plugin
- * @memberOf PullDown
- * @return {PullDown}
- */
- render: function() {
- var self = this;
- if (self.__isRender) return;
- self.__isRender = true;
- if (!self.userConfig.container) {
- var containerCls = clsPrefix + "container";
- var height = self.userConfig.height || 60;
- var pulldown = self.pulldown = document.createElement("div");
- pulldown.className = containerCls;
- pulldown.style.position = "absolute";
- pulldown.style.width = "100%";
- pulldown.style.height = height + "px";
- pulldown.style.lineHeight = height + "px";
- pulldown.style.top = -height + "px";
- pulldown.style.textAlign = "center";
- self.xscroll.container.appendChild(pulldown);
- self.status = 'up';
- Util.addClass(pulldown, clsPrefix + self.status);
- pulldown.innerHTML = self.userConfig[self.status + "Content"] || self.userConfig.content;
- } else {
- // has customed container
- self.pulldown = self.userConfig.container
- }
-
- self._bindEvt();
- return self;
- },
- _bindEvt: function() {
- var self = this;
- if (self._evtBinded) return;
- self._evtBinded = true;
- var pulldown = self.pulldown;
- var xscroll = self.xscroll;
- xscroll.on("pan", self._panHandler, self);
- xscroll.on("panstart", self._panStartHandler, self);
- xscroll.on("panend", self._panEndHandler, self);
- },
- _changeStatus: function(status) {
- var prevVal = this.status;
- this.status = status;
- if (!this.userConfig.container) {
- Util.removeClass(this.pulldown, clsPrefix + prevVal)
- Util.addClass(this.pulldown, clsPrefix + status);
- if (this.userConfig[status + "Content"]) {
- this.pulldown.innerHTML = this.userConfig[status + "Content"];
- }
- }
- if (prevVal != status) {
- this.trigger("statuschange", {
- prevVal: prevVal,
- newVal: status
- });
- if (status == "loading") {
- this.trigger("loading");
- }
- }
- },
- /**
- * reset the pulldown plugin
- * @memberOf PullDown
- * @param {function} callback
- * @return {PullDown}
- */
- reset: function(callback) {
- this.xscroll.boundry.resetTop()
- this.xscroll.boundryCheckY(callback);
- this._expanded = false;
- return this;
- },
- _panStartHandler: function(e) {
- clearTimeout(this.loadingItv);
- },
- _panHandler: function(e) {
- var self = this;
- var scrollTop = self.xscroll.getScrollTop();
- if (scrollTop > 0) return;
- self._changeStatus(Math.abs(scrollTop) < self.userConfig.height ? "down" : "up");
- },
- _panEndHandler: function(e) {
- var self = this;
- var xscroll = self.xscroll;
- var height = self.userConfig.height || 60;
- var scrollTop = xscroll.getScrollTop();
- if (scrollTop < -height) {
- //prevent default bounce
- e.preventDefault();
- xscroll.boundry.resetTop();
- self._changeStatus("loading");
- xscroll.boundry.expandTop(height);
- xscroll.boundryCheckY(function() {
- });
- if (self.userConfig.autoRefresh) {
- clearTimeout(self.loadingItv);
- self.loadingItv = setTimeout(function() {
- xscroll.boundry.resetTop();
- xscroll.boundryCheckY(function() {
- window.location.reload();
- })
- }, 800);
- }
- }
- }
- });
- if (typeof module == 'object' && module.exports) {
- module.exports = PullDown;
- }
- /** ignored by jsdoc **/
- else if (window.XScroll && window.XScroll.Plugins) {
- return XScroll.Plugins.PullDown = PullDown;
- }
- });
|