mui_app_rails 0.0.1

data/app/assets/javascripts/mui_app_rails/mui.offcanvas.js

@@ -0,0 +1,497 @@
+/**
+ * off-canvas
+ * @param {type} $
+ * @param {type} window
+ * @param {type} document
+ * @param {type} action
+ * @returns {undefined}
+ */
+(function($, window, document, name) {
+	var CLASS_OFF_CANVAS_LEFT = $.className('off-canvas-left');
+	var CLASS_OFF_CANVAS_RIGHT = $.className('off-canvas-right');
+	var CLASS_ACTION_BACKDEOP = $.className('off-canvas-backdrop');
+	var CLASS_OFF_CANVAS_WRAP = $.className('off-canvas-wrap');
+
+	var CLASS_SLIDE_IN = $.className('slide-in');
+	var CLASS_ACTIVE = $.className('active');
+
+
+	var CLASS_TRANSITIONING = $.className('transitioning');
+
+	var SELECTOR_INNER_WRAP = $.classSelector('.inner-wrap');
+
+
+	var OffCanvas = $.Class.extend({
+		init: function(element, options) {
+			this.wrapper = this.element = element;
+			this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
+			this.classList = this.wrapper.classList;
+			if (this.scroller) {
+				this.options = $.extend(true, {
+					dragThresholdX: 10
+				}, options);
+				document.body.classList.add($.className('fullscreen')); //fullscreen
+				this.refresh();
+				this.initEvent();
+			}
+		},
+		refresh: function(offCanvas) {
+			//			offCanvas && !offCanvas.classList.contains(CLASS_ACTIVE) && this.classList.remove(CLASS_ACTIVE);
+			this.slideIn = this.classList.contains(CLASS_SLIDE_IN);
+			this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
+			//			!offCanvas && this.scroller.classList.remove(CLASS_TRANSITIONING);
+			//			!offCanvas && this.scroller.setAttribute('style', '');
+			this.offCanvasLefts = this.wrapper.querySelectorAll('.' + CLASS_OFF_CANVAS_LEFT);
+			this.offCanvasRights = this.wrapper.querySelectorAll('.' + CLASS_OFF_CANVAS_RIGHT);
+			if (offCanvas) {
+				if (offCanvas.classList.contains(CLASS_OFF_CANVAS_LEFT)) {
+					this.offCanvasLeft = offCanvas;
+				} else if (offCanvas.classList.contains(CLASS_OFF_CANVAS_RIGHT)) {
+					this.offCanvasRight = offCanvas;
+				}
+			} else {
+				this.offCanvasRight = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT);
+				this.offCanvasLeft = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_LEFT);
+			}
+			this.offCanvasRightWidth = this.offCanvasLeftWidth = 0;
+			this.offCanvasLeftSlideIn = this.offCanvasRightSlideIn = false;
+			if (this.offCanvasRight) {
+				this.offCanvasRightWidth = this.offCanvasRight.offsetWidth;
+				this.offCanvasRightSlideIn = this.slideIn && (this.offCanvasRight.parentNode === this.wrapper);
+				//				this.offCanvasRight.classList.remove(CLASS_TRANSITIONING);
+				//				this.offCanvasRight.classList.remove(CLASS_ACTIVE);
+				//				this.offCanvasRight.setAttribute('style', '');
+			}
+			if (this.offCanvasLeft) {
+				this.offCanvasLeftWidth = this.offCanvasLeft.offsetWidth;
+				this.offCanvasLeftSlideIn = this.slideIn && (this.offCanvasLeft.parentNode === this.wrapper);
+				//				this.offCanvasLeft.classList.remove(CLASS_TRANSITIONING);
+				//				this.offCanvasLeft.classList.remove(CLASS_ACTIVE);
+				//				this.offCanvasLeft.setAttribute('style', '');
+			}
+			this.backdrop = this.scroller.querySelector('.' + CLASS_ACTION_BACKDEOP);
+
+			this.options.dragThresholdX = this.options.dragThresholdX || 10;
+
+			this.visible = false;
+			this.startX = null;
+			this.lastX = null;
+			this.offsetX = null;
+			this.lastTranslateX = null;
+		},
+		handleEvent: function(e) {
+			switch (e.type) {
+				case 'touchstart':
+					var tagName = e.target && e.target.tagName;
+					if (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT') {
+						e.preventDefault();
+					}
+					break;
+				case 'webkitTransitionEnd': //有个bug需要处理，需要考虑假设没有触发webkitTransitionEnd的情况
+					if (e.target === this.scroller) {
+						this._dispatchEvent();
+					}
+					break;
+				case 'drag':
+					var detail = e.detail;
+					if (!this.startX) {
+						this.startX = detail.move.x;
+						this.lastX = this.startX;
+					} else {
+						this.lastX = detail.move.x;
+					}
+					if (!this.isDragging && Math.abs(this.lastX - this.startX) > this.options.dragThresholdX && (detail.direction === 'left' || (detail.direction === 'right'))) {
+						if (this.slideIn) {
+							if (this.classList.contains(CLASS_ACTIVE)) {
+								this.scroller = this.offCanvasRight && this.offCanvasRight.classList.contains(CLASS_ACTIVE) ? this.offCanvasRight : this.offCanvasLeft;
+							} else {
+								if (detail.direction === 'left' && this.offCanvasRight) {
+									this.scroller = this.offCanvasRight;
+								} else if (detail.direction === 'right' && this.offCanvasLeft) {
+									this.scroller = this.offCanvasLeft;
+								} else {
+									this.scroller = null;
+								}
+							}
+						}
+						if (this.scroller) {
+							this.startX = this.lastX;
+							this.isDragging = true;
+
+							$.gestures.touch.lockDirection = true; //锁定方向
+							$.gestures.touch.startDirection = detail.direction;
+
+							this.scroller.classList.remove(CLASS_TRANSITIONING);
+							this.offsetX = this.getTranslateX();
+							this._initOffCanvasVisible();
+						}
+					}
+					if (this.isDragging) {
+						this.updateTranslate(this.offsetX + (this.lastX - this.startX));
+						detail.gesture.preventDefault();
+						e.stopPropagation();
+					}
+					break;
+				case 'dragend':
+					if (this.isDragging) {
+						var detail = e.detail;
+						var direction = detail.direction;
+						this.isDragging = false;
+						this.scroller.classList.add(CLASS_TRANSITIONING);
+						var ratio = 0;
+						var x = this.getTranslateX();
+
+						if (!this.slideIn) {
+							if (x >= 0) {
+								ratio = (this.offCanvasLeftWidth && (x / this.offCanvasLeftWidth)) || 0;
+							} else {
+								ratio = (this.offCanvasRightWidth && (x / this.offCanvasRightWidth)) || 0;
+							}
+							if (ratio === 0) {
+								this.openPercentage(0);
+								this._dispatchEvent(); //此处不触发webkitTransitionEnd,所以手动dispatch
+								return;
+							}
+							if (ratio > 0 && ratio < 0.5 && direction === 'right') {
+								this.openPercentage(0);
+							} else if (ratio > 0.5 && direction === 'left') {
+								this.openPercentage(100);
+							} else if (ratio < 0 && ratio > -0.5 && direction === 'left') {
+								this.openPercentage(0);
+							} else if (direction === 'right' && ratio < 0 && ratio > -0.5) {
+								this.openPercentage(0);
+							} else if (ratio < 0.5 && direction === 'right') {
+								this.openPercentage(-100);
+							} else if (direction === 'right' && ratio >= 0 && (ratio >= 0.5 || detail.flick)) {
+								this.openPercentage(100);
+							} else if (direction === 'left' && ratio <= 0 && (ratio <= -0.5 || detail.flick)) {
+								this.openPercentage(-100);
+							} else {
+								this.openPercentage(0);
+							}
+							if (ratio === 1 || ratio === -1) { //此处不触发webkitTransitionEnd,所以手动dispatch
+								this._dispatchEvent();
+							}
+						} else {
+							if (x >= 0) {
+								ratio = (this.offCanvasRightWidth && (x / this.offCanvasRightWidth)) || 0;
+							} else {
+								ratio = (this.offCanvasLeftWidth && (x / this.offCanvasLeftWidth)) || 0;
+							}
+							if (ratio >= 0.5 && direction === 'left') {
+								this.openPercentage(0);
+							} else if (ratio > 0 && ratio <= 0.5 && direction === 'left') {
+								this.openPercentage(-100);
+							} else if (ratio >= 0.5 && direction === 'right') {
+								this.openPercentage(0);
+							} else if (ratio >= -0.5 && ratio < 0 && direction === 'left') {
+								this.openPercentage(100);
+							} else if (ratio > 0 && ratio <= 0.5 && direction === 'right') {
+								this.openPercentage(-100);
+							} else if (ratio <= -0.5 && direction === 'right') {
+								this.openPercentage(0);
+							} else if (ratio >= -0.5 && direction === 'right') {
+								this.openPercentage(100);
+							} else if (ratio <= -0.5 && direction === 'left') {
+								this.openPercentage(0);
+							} else if (ratio >= -0.5 && direction === 'left') {
+								this.openPercentage(-100);
+							} else {
+								this.openPercentage(0);
+							}
+							if (ratio === 1 || ratio === -1 || ratio === 0) {
+								this._dispatchEvent();
+								return;
+							}
+
+						}
+					}
+					break;
+			}
+		},
+		_dispatchEvent: function() {
+			if (this.classList.contains(CLASS_ACTIVE)) {
+				$.trigger(this.wrapper, 'shown', this);
+			} else {
+				$.trigger(this.wrapper, 'hidden', this);
+			}
+		},
+		_initOffCanvasVisible: function() {
+			if (!this.visible) {
+				this.visible = true;
+				if (this.offCanvasLeft) {
+					this.offCanvasLeft.style.visibility = 'visible';
+				}
+				if (this.offCanvasRight) {
+					this.offCanvasRight.style.visibility = 'visible';
+				}
+			}
+		},
+		initEvent: function() {
+			var self = this;
+			if (self.backdrop) {
+				self.backdrop.addEventListener('tap', function(e) {
+					self.close();
+					e.detail.gesture.preventDefault();
+				});
+			}
+			if (this.classList.contains($.className('draggable'))) {
+				this.wrapper.addEventListener('touchstart', this); //临时处理
+				this.wrapper.addEventListener('drag', this);
+				this.wrapper.addEventListener('dragend', this);
+			}
+			this.wrapper.addEventListener('webkitTransitionEnd', this);
+		},
+		openPercentage: function(percentage) {
+			var p = percentage / 100;
+			if (!this.slideIn) {
+				if (this.offCanvasLeft && percentage >= 0) {
+					this.updateTranslate(this.offCanvasLeftWidth * p);
+					this.offCanvasLeft.classList[p !== 0 ? 'add' : 'remove'](CLASS_ACTIVE);
+				} else if (this.offCanvasRight && percentage <= 0) {
+					this.updateTranslate(this.offCanvasRightWidth * p);
+					this.offCanvasRight.classList[p !== 0 ? 'add' : 'remove'](CLASS_ACTIVE);
+				}
+				this.classList[p !== 0 ? 'add' : 'remove'](CLASS_ACTIVE);
+			} else {
+				if (this.offCanvasLeft && percentage >= 0) {
+					p = p === 0 ? -1 : 0;
+					this.updateTranslate(this.offCanvasLeftWidth * p);
+					this.offCanvasLeft.classList[percentage !== 0 ? 'add' : 'remove'](CLASS_ACTIVE);
+				} else if (this.offCanvasRight && percentage <= 0) {
+					p = p === 0 ? 1 : 0;
+					this.updateTranslate(this.offCanvasRightWidth * p);
+					this.offCanvasRight.classList[percentage !== 0 ? 'add' : 'remove'](CLASS_ACTIVE);
+				}
+				this.classList[percentage !== 0 ? 'add' : 'remove'](CLASS_ACTIVE);
+			}
+
+		},
+		updateTranslate: function(x) {
+			if (x !== this.lastTranslateX) {
+				if (!this.slideIn) {
+					if ((!this.offCanvasLeft && x > 0) || (!this.offCanvasRight && x < 0)) {
+						this.setTranslateX(0);
+						return;
+					}
+					if (this.leftShowing && x > this.offCanvasLeftWidth) {
+						this.setTranslateX(this.offCanvasLeftWidth);
+						return;
+					}
+					if (this.rightShowing && x < -this.offCanvasRightWidth) {
+						this.setTranslateX(-this.offCanvasRightWidth);
+						return;
+					}
+					this.setTranslateX(x);
+					if (x >= 0) {
+						this.leftShowing = true;
+						this.rightShowing = false;
+						if (x > 0) {
+							if (this.offCanvasLeft) {
+								$.each(this.offCanvasLefts, function(index, offCanvas) {
+									if (offCanvas === this.offCanvasLeft) {
+										this.offCanvasLeft.style.zIndex = 0;
+									} else {
+										offCanvas.style.zIndex = -1;
+									}
+								}.bind(this));
+							}
+							if (this.offCanvasRight) {
+								this.offCanvasRight.style.zIndex = -1;
+							}
+						}
+					} else {
+						this.rightShowing = true;
+						this.leftShowing = false;
+						if (this.offCanvasRight) {
+							$.each(this.offCanvasRights, function(index, offCanvas) {
+								if (offCanvas === this.offCanvasRight) {
+									offCanvas.style.zIndex = 0;
+								} else {
+									offCanvas.style.zIndex = -1;
+								}
+							}.bind(this));
+						}
+						if (this.offCanvasLeft) {
+							this.offCanvasLeft.style.zIndex = -1;
+						}
+					}
+				} else {
+					if (this.scroller.classList.contains(CLASS_OFF_CANVAS_RIGHT)) {
+						if (x < 0) {
+							this.setTranslateX(0);
+							return;
+						}
+						if (x > this.offCanvasRightWidth) {
+							this.setTranslateX(this.offCanvasRightWidth);
+							return;
+						}
+					} else {
+						if (x > 0) {
+							this.setTranslateX(0);
+							return;
+						}
+						if (x < -this.offCanvasLeftWidth) {
+							this.setTranslateX(-this.offCanvasLeftWidth);
+							return;
+						}
+					}
+					this.setTranslateX(x);
+				}
+				this.lastTranslateX = x;
+			}
+		},
+		setTranslateX: $.animationFrame(function(x) {
+			if (this.scroller) {
+				this.scroller.style.webkitTransform = 'translate3d(' + x + 'px,0,0)';
+			}
+		}),
+		getTranslateX: function() {
+			if (this.scroller) {
+				var result = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
+				return (result && result.x) || 0;
+			}
+			return 0;
+		},
+		isShown: function(direction) {
+			var shown = false;
+			if (!this.slideIn) {
+				var x = this.getTranslateX();
+				if (direction === 'right') {
+					shown = this.classList.contains(CLASS_ACTIVE) && x < 0;
+				} else if (direction === 'left') {
+					shown = this.classList.contains(CLASS_ACTIVE) && x > 0;
+				} else {
+					shown = this.classList.contains(CLASS_ACTIVE) && x !== 0;
+				}
+			} else {
+				if (direction === 'left') {
+					shown = this.classList.contains(CLASS_ACTIVE) && this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_LEFT + '.' + CLASS_ACTIVE);
+				} else if (direction === 'right') {
+					shown = this.classList.contains(CLASS_ACTIVE) && this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT + '.' + CLASS_ACTIVE);
+				} else {
+					shown = this.classList.contains(CLASS_ACTIVE) && (this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_LEFT + '.' + CLASS_ACTIVE) || this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT + '.' + CLASS_ACTIVE));
+				}
+			}
+			return shown;
+		},
+		close: function() {
+			this._initOffCanvasVisible();
+			if (this.slideIn) {
+				this.scroller = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT + '.' + CLASS_ACTIVE) || this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_LEFT + '.' + CLASS_ACTIVE);
+			}
+			if (this.scroller) {
+				this.scroller.classList.add(CLASS_TRANSITIONING);
+				this.openPercentage(0);
+			}
+		},
+		show: function(direction) {
+			this._initOffCanvasVisible();
+			if (this.isShown(direction)) {
+				return false;
+			}
+			if (!direction) {
+				direction = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT) ? 'right' : 'left';
+			}
+			if (this.slideIn) {
+				this.scroller = direction === 'right' ? this.offCanvasRight : this.offCanvasLeft;
+			}
+			if (this.scroller) {
+				this.scroller.classList.add(CLASS_TRANSITIONING);
+				this.openPercentage(direction === 'left' ? 100 : -100);
+			}
+			return true;
+		},
+		toggle: function(directionOrOffCanvas) {
+			var direction = directionOrOffCanvas;
+			if (directionOrOffCanvas && directionOrOffCanvas.classList) {
+				direction = directionOrOffCanvas.classList.contains(CLASS_OFF_CANVAS_LEFT) ? 'left' : 'right';
+				this.refresh(directionOrOffCanvas);
+			}
+			if (!this.show(direction)) {
+				this.close();
+			}
+		}
+	});
+
+	//hash to offcanvas
+	var findOffCanvasContainer = function(target) {
+		parentNode = target.parentNode;
+		if (parentNode) {
+			if (parentNode.classList.contains(CLASS_OFF_CANVAS_WRAP)) {
+				return parentNode;
+			} else {
+				parentNode = parentNode.parentNode;
+				if (parentNode.classList.contains(CLASS_OFF_CANVAS_WRAP)) {
+					return parentNode;
+				}
+			}
+		}
+	};
+	var handle = function(event, target) {
+		if (target.tagName === 'A' && target.hash) {
+			var offcanvas = document.getElementById(target.hash.replace('#', ''));
+			if (offcanvas) {
+				var container = findOffCanvasContainer(offcanvas);
+				if (container) {
+					$.targets._container = container;
+					return offcanvas;
+				}
+			}
+		}
+		return false;
+	};
+
+	$.registerTarget({
+		name: name,
+		index: 60,
+		handle: handle,
+		target: false,
+		isReset: false,
+		isContinue: true
+	});
+
+	window.addEventListener('tap', function(e) {
+		if (!$.targets.offcanvas) {
+			return;
+		}
+		//TODO 此处类型的代码后续考虑统一优化(target机制)，现在的实现费力不讨好
+		var target = e.target;
+		for (; target && target !== document; target = target.parentNode) {
+			if (target.tagName === 'A' && target.hash && target.hash === ('#' + $.targets.offcanvas.id)) {
+				e.detail.gesture.preventDefault(); //fixed hashchange
+				$($.targets._container).offCanvas().toggle($.targets.offcanvas);
+				$.targets.offcanvas = $.targets._container = null;
+				break;
+			}
+		}
+	});
+
+	$.fn.offCanvas = function(options) {
+		var offCanvasApis = [];
+		this.each(function() {
+			var offCanvasApi = null;
+			var self = this;
+			//hack old version
+			if (!self.classList.contains(CLASS_OFF_CANVAS_WRAP)) {
+				self = findOffCanvasContainer(self);
+			}
+			var id = self.getAttribute('data-offCanvas');
+			if (!id) {
+				id = ++$.uuid;
+				$.data[id] = offCanvasApi = new OffCanvas(self, options);
+				self.setAttribute('data-offCanvas', id);
+			} else {
+				offCanvasApi = $.data[id];
+			}
+			if (options === 'show' || options === 'close' || options === 'toggle') {
+				offCanvasApi.toggle();
+			}
+			offCanvasApis.push(offCanvasApi);
+		});
+		return offCanvasApis.length === 1 ? offCanvasApis[0] : offCanvasApis;
+	};
+	$.ready(function() {
+		$($.classSelector('.off-canvas-wrap')).offCanvas();
+	});
+})(mui, window, document, 'offcanvas');

data/app/assets/javascripts/mui_app_rails/mui.pullrefresh.js

@@ -0,0 +1,157 @@
+(function($, document, undefined) {
+	var CLASS_PULL_TOP_POCKET = $.className('pull-top-pocket');
+	var CLASS_PULL_BOTTOM_POCKET = $.className('pull-bottom-pocket');
+	var CLASS_PULL = $.className('pull');
+	var CLASS_PULL_LOADING = $.className('pull-loading');
+	var CLASS_PULL_CAPTION = $.className('pull-caption');
+
+	var CLASS_ICON = $.className('icon');
+	var CLASS_SPINNER = $.className('spinner');
+	var CLASS_ICON_PULLDOWN = $.className('icon-pulldown');
+
+	var CLASS_BLOCK = $.className('block');
+	var CLASS_HIDDEN = $.className('hidden');
+	var CLASS_VISIBILITY = $.className('visibility');
+
+	var CLASS_LOADING_UP = CLASS_PULL_LOADING + ' ' + CLASS_ICON + ' ' + CLASS_ICON_PULLDOWN;
+	var CLASS_LOADING_DOWN = CLASS_PULL_LOADING + ' ' + CLASS_ICON + ' ' + CLASS_ICON_PULLDOWN;
+	var CLASS_LOADING = CLASS_PULL_LOADING + ' ' + CLASS_ICON + ' ' + CLASS_SPINNER;
+
+	var pocketHtml = ['<div class="' + CLASS_PULL + '">', '<div class="{icon}"></div>', '<div class="' + CLASS_PULL_CAPTION + '">{contentrefresh}</div>', '</div>'].join('');
+
+	var PullRefresh = {
+		init: function(element, options) {
+			this._super(element, $.extend(true, {
+				scrollY: true,
+				scrollX: false,
+				indicators: true,
+				down: {
+					height: 50,
+					contentdown: '下拉可以刷新',
+					contentover: '释放立即刷新',
+					contentrefresh: '正在刷新...'
+				},
+				up: {
+					height: 50,
+					auto: false,
+					contentdown: '上拉显示更多',
+					contentrefresh: '正在加载...',
+					contentnomore: '没有更多数据了',
+					duration: 300
+				}
+			}, options));
+		},
+		_init: function() {
+			this._super();
+			this._initPocket();
+		},
+		_initPulldownRefresh: function() {
+			this.pulldown = true;
+			this.pullPocket = this.topPocket;
+			this.pullPocket.classList.add(CLASS_BLOCK);
+			this.pullPocket.classList.add(CLASS_VISIBILITY);
+			this.pullCaption = this.topCaption;
+			this.pullLoading = this.topLoading;
+		},
+		_initPullupRefresh: function() {
+			this.pulldown = false;
+			this.pullPocket = this.bottomPocket;
+			this.pullPocket.classList.add(CLASS_BLOCK);
+			this.pullPocket.classList.add(CLASS_VISIBILITY);
+			this.pullCaption = this.bottomCaption;
+			this.pullLoading = this.bottomLoading;
+		},
+		_initPocket: function() {
+			var options = this.options;
+			if (options.down && options.down.hasOwnProperty('callback')) {
+				this.topPocket = this.scroller.querySelector('.' + CLASS_PULL_TOP_POCKET);
+				if (!this.topPocket) {
+					this.topPocket = this._createPocket(CLASS_PULL_TOP_POCKET, options.down, CLASS_LOADING_DOWN);
+					this.wrapper.insertBefore(this.topPocket, this.wrapper.firstChild);
+				}
+				this.topLoading = this.topPocket.querySelector('.' + CLASS_PULL_LOADING);
+				this.topCaption = this.topPocket.querySelector('.' + CLASS_PULL_CAPTION);
+			}
+			if (options.up && options.up.hasOwnProperty('callback')) {
+				this.bottomPocket = this.scroller.querySelector('.' + CLASS_PULL_BOTTOM_POCKET);
+				if (!this.bottomPocket) {
+					this.bottomPocket = this._createPocket(CLASS_PULL_BOTTOM_POCKET, options.up, CLASS_LOADING);
+					this.scroller.appendChild(this.bottomPocket);
+				}
+				this.bottomLoading = this.bottomPocket.querySelector('.' + CLASS_PULL_LOADING);
+				this.bottomCaption = this.bottomPocket.querySelector('.' + CLASS_PULL_CAPTION);
+				//TODO only for h5
+				this.wrapper.addEventListener('scrollbottom', this);
+			}
+		},
+		_createPocket: function(clazz, options, iconClass) {
+			var pocket = document.createElement('div');
+			pocket.className = clazz;
+			pocket.innerHTML = pocketHtml.replace('{contentrefresh}', options.contentrefresh).replace('{icon}', iconClass);
+			return pocket;
+		},
+		_resetPullDownLoading: function() {
+			var loading = this.pullLoading;
+			if (loading) {
+				this.pullCaption.innerHTML = this.options.down.contentdown;
+				loading.style.webkitTransition = "";
+				loading.style.webkitTransform = "";
+				loading.style.webkitAnimation = "";
+				loading.className = CLASS_LOADING_DOWN;
+			}
+		},
+		_setCaption: function(title, reset) {
+			if (this.loading) {
+				return;
+			}
+			var options = this.options;
+			var pocket = this.pullPocket;
+			var caption = this.pullCaption;
+			var loading = this.pullLoading;
+			var isPulldown = this.pulldown;
+			if (pocket) {
+				if (reset) {
+					var self = this;
+					setTimeout(function() {
+						caption.innerHTML = self.lastTitle = title;
+						if (isPulldown) {
+							loading.className = CLASS_LOADING_DOWN;
+						} else {
+							loading.className = CLASS_LOADING;
+						}
+						loading.style.webkitAnimation = "";
+						loading.style.webkitTransition = "";
+						loading.style.webkitTransform = "";
+					}, 100);
+				} else {
+					if (title !== this.lastTitle) {
+						caption.innerHTML = title;
+						if (isPulldown) {
+							if (title === options.down.contentrefresh) {
+								loading.className = CLASS_LOADING;
+								loading.style.webkitAnimation = "spinner-spin 1s step-end infinite";
+							} else if (title === options.down.contentover) {
+								loading.className = CLASS_LOADING_UP;
+								loading.style.webkitTransition = "-webkit-transform 0.3s ease-in";
+								loading.style.webkitTransform = "rotate(180deg)";
+							} else if (title === options.down.contentdown) {
+								loading.className = CLASS_LOADING_DOWN;
+								loading.style.webkitTransition = "-webkit-transform 0.3s ease-in";
+								loading.style.webkitTransform = "rotate(0deg)";
+							}
+						} else {
+							if (title === options.up.contentrefresh) {
+								loading.className = CLASS_LOADING + ' ' + CLASS_VISIBILITY;
+							} else {
+								loading.className = CLASS_LOADING + ' ' + CLASS_HIDDEN;
+							}
+						}
+						this.lastTitle = title;
+					}
+				}
+
+			}
+		}
+	};
+	$.PullRefresh = PullRefresh;
+})(mui, document);