mui_app_rails 0.0.1

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

@@ -0,0 +1,150 @@
+(function($, window, document, undefined) {
+
+	var CLASS_VISIBILITY = $.className('visibility');
+	var CLASS_HIDDEN = $.className('hidden');
+
+	var PullRefresh = $.Scroll.extend($.extend({
+		handleEvent: function(e) {
+			this._super(e);
+			if (e.type === 'scrollbottom') {
+				if (e.target === this.scroller) {
+					this._scrollbottom();
+				}
+			}
+		},
+		_scrollbottom: function() {
+			if (!this.pulldown && !this.loading) {
+				this.pulldown = false;
+				this._initPullupRefresh();
+				this.pullupLoading();
+			}
+		},
+		_start: function(e) {
+			if (!this.loading) {
+				this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
+			}
+			this._super(e);
+		},
+		_drag: function(e) {
+			this._super(e);
+			if (!this.pulldown && !this.loading && this.topPocket && e.detail.direction === 'down' && this.y >= 0) {
+				this._initPulldownRefresh();
+			}
+			if (this.pulldown) {
+				this._setCaption(this.y > this.options.down.height ? this.options.down.contentover : this.options.down.contentdown);
+			}
+		},
+
+		_reLayout: function() {
+			this.hasVerticalScroll = true;
+			this._super();
+		},
+		//API
+		resetPosition: function(time) {
+			if (this.pulldown && this.y >= this.options.down.height) {
+				this.pulldownLoading(0, time || 0);
+				return true;
+			}
+			return this._super(time);
+		},
+		pulldownLoading: function(x, time) {
+			x = x || 0;
+			this.scrollTo(x, this.options.down.height, time, this.options.bounceEasing);
+			if (this.loading) {
+				return;
+			}
+			//			if (!this.pulldown) {
+			this._initPulldownRefresh();
+			//			}
+			this._setCaption(this.options.down.contentrefresh);
+			this.loading = true;
+			this.indicators.map(function(indicator) {
+				indicator.fade(0);
+			});
+			var callback = this.options.down.callback;
+			callback && callback.call(this);
+		},
+		endPulldownToRefresh: function() {
+			var self = this;
+			if (self.topPocket && self.loading && this.pulldown) {
+				self.scrollTo(0, 0, self.options.bounceTime, self.options.bounceEasing);
+				self.loading = false;
+				self._setCaption(self.options.down.contentdown, true);
+				setTimeout(function() {
+					self.loading || self.topPocket.classList.remove(CLASS_VISIBILITY);
+				}, 350);
+			}
+		},
+		pullupLoading: function(callback, x, time) {
+			x = x || 0;
+			this.scrollTo(x, this.maxScrollY, time, this.options.bounceEasing);
+			if (this.loading) {
+				return;
+			}
+			this._initPullupRefresh();
+			this._setCaption(this.options.up.contentrefresh);
+			this.indicators.map(function(indicator) {
+				indicator.fade(0);
+			});
+			this.loading = true;
+			callback = callback || this.options.up.callback;
+			callback && callback.call(this);
+		},
+		endPullupToRefresh: function(finished) {
+			var self = this;
+			if (self.bottomPocket && self.loading && !this.pulldown) {
+				self.loading = false;
+				if (finished) {
+					this.finished = true;
+					self._setCaption(self.options.up.contentnomore);
+					//					self.bottomPocket.classList.remove(CLASS_VISIBILITY);
+					//					self.bottomPocket.classList.add(CLASS_HIDDEN);
+					self.wrapper.removeEventListener('scrollbottom', self);
+				} else {
+					self._setCaption(self.options.up.contentdown);
+					setTimeout(function() {
+						self.loading || self.bottomPocket.classList.remove(CLASS_VISIBILITY);
+					}, 350);
+				}
+			}
+		},
+		refresh: function(isReset) {
+			if (isReset && this.finished) {
+				if (this.pulldown !== false) {
+					this._initPullupRefresh();
+				}
+				this.bottomPocket.classList.remove(CLASS_HIDDEN);
+				this._setCaption(this.options.up.contentdown);
+				this.wrapper.addEventListener('scrollbottom', this);
+				this.finished = false;
+			}
+			this._super();
+		},
+	}, $.PullRefresh));
+	$.fn.pullRefresh = function(options) {
+		if (this.length === 1) {
+			var self = this[0];
+			var pullRefreshApi = null;
+			options = options || {};
+			var id = self.getAttribute('data-pullrefresh');
+			if (!id) {
+				id = ++$.uuid;
+				$.data[id] = pullRefreshApi = new PullRefresh(self, options);
+				self.setAttribute('data-pullrefresh', id);
+			} else {
+				pullRefreshApi = $.data[id];
+			}
+			if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
+				pullRefreshApi.pullupLoading();
+			}
+			//暂不提供这种调用方式吧			
+			//			if (typeof options === 'string') {
+			//				var methodValue = pullRefreshApi[options].apply(pullRefreshApi, $.slice.call(arguments, 1));
+			//				if (methodValue !== undefined) {
+			//					return methodValue;
+			//				}
+			//			}
+			return pullRefreshApi;
+		}
+	};
+})(mui, window, document);

data/app/assets/javascripts/mui_app_rails/mui.class.scroll.slider.js

@@ -0,0 +1,361 @@
+/**
+ * snap 重构
+ * @param {Object} $
+ * @param {Object} window
+ */
+(function($, window) {
+	var CLASS_SLIDER = $.className('slider');
+	var CLASS_SLIDER_GROUP = $.className('slider-group');
+	var CLASS_SLIDER_LOOP = $.className('slider-loop');
+	var CLASS_SLIDER_INDICATOR = $.className('slider-indicator');
+	var CLASS_ACTION_PREVIOUS = $.className('action-previous');
+	var CLASS_ACTION_NEXT = $.className('action-next');
+	var CLASS_SLIDER_ITEM = $.className('slider-item');
+
+	var CLASS_ACTIVE = $.className('active');
+
+	var SELECTOR_SLIDER_ITEM = '.' + CLASS_SLIDER_ITEM;
+	var SELECTOR_SLIDER_INDICATOR = '.' + CLASS_SLIDER_INDICATOR;
+	var SELECTOR_SLIDER_PROGRESS_BAR = $.classSelector('.slider-progress-bar');
+
+
+	var Slider = $.Scroll.extend({
+		init: function(element, options) {
+			this._super(element, $.extend(true, {
+				interval: 0, //设置为0，则不定时轮播
+				scrollY: false,
+				scrollX: true,
+				indicators: false,
+				bounceTime: 200,
+				startX: false,
+				snap: SELECTOR_SLIDER_ITEM
+			}, options));
+			if (this.options.startX) {
+				//				$.trigger(this.wrapper, 'scrollend', this);
+			}
+		},
+		_init: function() {
+			var groups = this.wrapper.querySelectorAll('.' + CLASS_SLIDER_GROUP);
+			for (var i = 0, len = groups.length; i < len; i++) {
+				if (groups[i].parentNode === this.wrapper) {
+					this.scroller = groups[i];
+					break;
+				}
+			}
+			if (this.scroller) {
+				this.scrollerStyle = this.scroller.style;
+				this.progressBar = this.wrapper.querySelector(SELECTOR_SLIDER_PROGRESS_BAR);
+				if (this.progressBar) {
+					this.progressBarWidth = this.progressBar.offsetWidth;
+					this.progressBarStyle = this.progressBar.style;
+				}
+				//忘记这个代码是干什么的了？
+				//				this.x = this._getScroll();
+				//				if (this.options.startX === false) {
+				//					this.options.startX = this.x;
+				//				}
+				//根据active修正startX
+
+				this._super();
+				this._initTimer();
+			}
+		},
+		_initEvent: function() {
+			var self = this;
+			self._super();
+			self.wrapper.addEventListener('swiperight', $.stopPropagation);
+			self.wrapper.addEventListener('scrollend', function() {
+				self.isInTransition = false;
+				var page = self.currentPage;
+				var oldSlideNumber = self.slideNumber;
+				self.slideNumber = self._fixedSlideNumber();
+				if (self.loop) {
+					if (self.slideNumber === 0) {
+						self.setTranslate(self.pages[1][0].x, 0);
+					} else if (self.slideNumber === self.itemLength - 3) {
+						self.setTranslate(self.pages[self.itemLength - 2][0].x, 0);
+					}
+				}
+				if (oldSlideNumber != self.slideNumber) {
+					$.trigger(self.wrapper, 'slide', {
+						slideNumber: self.slideNumber
+					});
+				}
+			});
+
+			self.wrapper.addEventListener('slide', function(e) {
+				if (e.target !== self.wrapper) {
+					return;
+				}
+				var detail = e.detail;
+				detail.slideNumber = detail.slideNumber || 0;
+				var items = self.scroller.querySelectorAll(SELECTOR_SLIDER_ITEM);
+				var _slideNumber = detail.slideNumber;
+				if (self.loop) {
+					_slideNumber += 1;
+				}
+				if (!self.wrapper.classList.contains($.className('segmented-control'))) {
+					for (var i = 0, len = items.length; i < len; i++) {
+						var item = items[i];
+						if (item.parentNode === self.scroller) {
+							if (i === _slideNumber) {
+								item.classList.add(CLASS_ACTIVE);
+							} else {
+								item.classList.remove(CLASS_ACTIVE);
+							}
+						}
+					}
+				}
+				var indicatorWrap = self.wrapper.querySelector($.classSelector('.slider-indicator'));
+				if (indicatorWrap) {
+					if (indicatorWrap.getAttribute('data-scroll')) { //scroll
+						$(indicatorWrap).scroll().gotoPage(detail.slideNumber);
+					}
+					var indicators = indicatorWrap.querySelectorAll($.classSelector('.indicator'));
+					if (indicators.length > 0) { //图片轮播
+						for (var i = 0, len = indicators.length; i < len; i++) {
+							indicators[i].classList[i === detail.slideNumber ? 'add' : 'remove'](CLASS_ACTIVE);
+						}
+					} else {
+						var number = indicatorWrap.querySelector($.classSelector('.number span'));
+						if (number) { //图文表格
+							number.innerText = (detail.slideNumber + 1);
+						} else { //segmented controls
+							var controlItems = self.wrapper.querySelectorAll($.classSelector('.control-item'));
+							for (var i = 0, len = controlItems.length; i < len; i++) {
+								controlItems[i].classList[i === detail.slideNumber ? 'add' : 'remove'](CLASS_ACTIVE);
+							}
+						}
+					}
+				}
+				e.stopPropagation();
+			});
+
+			self.wrapper.addEventListener($.eventName('shown', 'tab'), function(e) { //tab
+				self.gotoItem((e.detail.tabNumber || 0), self.options.bounceTime);
+			});
+			//indicator
+			var indicator = self.wrapper.querySelector(SELECTOR_SLIDER_INDICATOR);
+			if (indicator) {
+				indicator.addEventListener('tap', function(event) {
+					var target = event.target;
+					if (target.classList.contains(CLASS_ACTION_PREVIOUS) || target.classList.contains(CLASS_ACTION_NEXT)) {
+						self[target.classList.contains(CLASS_ACTION_PREVIOUS) ? 'prevItem' : 'nextItem']();
+						event.stopPropagation();
+					}
+				});
+			}
+		},
+		_drag: function(e) {
+			this._super(e);
+			var direction = e.detail.direction;
+			if (direction === 'left' || direction === 'right') {
+				e.stopPropagation();
+			}
+		},
+		_initTimer: function() {
+			var self = this;
+			var slider = self.wrapper;
+			var interval = self.options.interval;
+			var slidershowTimer = slider.getAttribute('data-slidershowTimer');
+			slidershowTimer && window.clearTimeout(slidershowTimer);
+			if (interval) {
+				slidershowTimer = window.setTimeout(function() {
+					if (!slider) {
+						return;
+					}
+					//仅slider显示状态进行自动轮播
+					if (!!(slider.offsetWidth || slider.offsetHeight)) {
+						self.nextItem(true);
+						//下一个
+					}
+					self._initTimer();
+				}, interval);
+				slider.setAttribute('data-slidershowTimer', slidershowTimer);
+			}
+		},
+
+		_fixedSlideNumber: function(page) {
+			page = page || this.currentPage;
+			var slideNumber = page.pageX;
+			if (this.loop) {
+				if (page.pageX === 0) {
+					slideNumber = this.itemLength - 3;
+				} else if (page.pageX === (this.itemLength - 1)) {
+					slideNumber = 0;
+				} else {
+					slideNumber = page.pageX - 1;
+				}
+			}
+			return slideNumber;
+		},
+		_reLayout: function() {
+			this.hasHorizontalScroll = true;
+			this.loop = this.scroller.classList.contains(CLASS_SLIDER_LOOP);
+			this._super();
+		},
+		_getScroll: function() {
+			var result = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
+			return result ? result.x : 0;
+		},
+		_transitionEnd: function(e) {
+			if (e.target !== this.scroller || !this.isInTransition) {
+				return;
+			}
+			this._transitionTime();
+			this.isInTransition = false;
+			$.trigger(this.wrapper, 'scrollend', this);
+		},
+		_flick: function(e) {
+			if (!this.moved) { //无moved
+				return;
+			}
+			var detail = e.detail;
+			var direction = detail.direction;
+			this._clearRequestAnimationFrame();
+			this.isInTransition = true;
+			//			if (direction === 'up' || direction === 'down') {
+			//				this.resetPosition(this.options.bounceTime);
+			//				return;
+			//			}
+			if (e.type === 'flick') {
+				if (detail.touchTime < 200) { //flick，太容易触发，额外校验一下touchtime
+					this.x = this._getPage((this.slideNumber + (direction === 'right' ? -1 : 1)), true).x;
+				}
+				this.resetPosition(this.options.bounceTime);
+			} else if (e.type === 'dragend' && !detail.flick) {
+				this.resetPosition(this.options.bounceTime);
+			}
+			e.stopPropagation();
+		},
+		_initSnap: function() {
+			this.scrollerWidth = this.itemLength * this.scrollerWidth;
+			this.maxScrollX = Math.min(this.wrapperWidth - this.scrollerWidth, 0);
+			this._super();
+			if (!this.currentPage.x) {
+				//当slider处于隐藏状态时，导致snap计算是错误的，临时先这么判断一下，后续要考虑解决所有scroll在隐藏状态下初始化属性不正确的问题
+				var currentPage = this.pages[this.loop ? 1 : 0];
+				currentPage = currentPage || this.pages[0];
+				if (!currentPage) {
+					return;
+				}
+				this.currentPage = currentPage[0];
+				this.slideNumber = 0;
+			} else {
+				this.slideNumber = this._fixedSlideNumber();
+			}
+			this.options.startX = this.currentPage.x || 0;
+		},
+		_getSnapX: function(offsetLeft) {
+			return Math.max(-offsetLeft, this.maxScrollX);
+		},
+		_getPage: function(slideNumber, isFlick) {
+			if (this.loop) {
+				if (slideNumber > (this.itemLength - (isFlick ? 2 : 3))) {
+					slideNumber = 1;
+					time = 0;
+				} else if (slideNumber < (isFlick ? -1 : 0)) {
+					slideNumber = this.itemLength - 2;
+					time = 0;
+				} else {
+					slideNumber += 1;
+				}
+			} else {
+				if (!isFlick) {
+					if (slideNumber > (this.itemLength - 1)) {
+						slideNumber = 0;
+						time = 0;
+					} else if (slideNumber < 0) {
+						slideNumber = this.itemLength - 1;
+						time = 0;
+					}
+				}
+				slideNumber = Math.min(Math.max(0, slideNumber), this.itemLength - 1);
+			}
+			return this.pages[slideNumber][0];
+		},
+		_gotoItem: function(slideNumber, time) {
+			this.currentPage = this._getPage(slideNumber, true); //此处传true。可保证程序切换时，动画与人手操作一致(第一张，最后一张的切换动画)
+			this.scrollTo(this.currentPage.x, 0, time, this.options.bounceEasing);
+			if (time === 0) {
+				$.trigger(this.wrapper, 'scrollend', this);
+			}
+			this._initTimer();
+		},
+		//API
+		setTranslate: function(x, y) {
+			this._super(x, y);
+			var progressBar = this.progressBar;
+			if (progressBar) {
+				this.progressBarStyle.webkitTransform = this._getTranslateStr((-x * (this.progressBarWidth / this.wrapperWidth)), 0);
+			}
+		},
+		resetPosition: function(time) {
+			time = time || 0;
+			if (this.x > 0) {
+				this.x = 0;
+			} else if (this.x < this.maxScrollX) {
+				this.x = this.maxScrollX;
+			}
+			this.currentPage = this._nearestSnap(this.x);
+			this.scrollTo(this.currentPage.x, 0, time);
+			return true;
+		},
+		gotoItem: function(slideNumber, time) {
+			this._gotoItem(slideNumber, time || this.options.bounceTime);
+		},
+		nextItem: function() {
+			this._gotoItem(this.slideNumber + 1, this.options.bounceTime);
+		},
+		prevItem: function() {
+			this._gotoItem(this.slideNumber - 1, this.options.bounceTime);
+		},
+		getSlideNumber: function() {
+			return this.slideNumber || 0;
+		},
+		refresh: function(options) {
+			if (options) {
+				$.extend(this.options, options);
+				this._super();
+				this.nextItem();
+			} else {
+				this._super();
+			}
+		}
+	});
+	$.fn.slider = function(options) {
+		var slider = null;
+		this.each(function() {
+			var sliderElement = this;
+			if (!this.classList.contains(CLASS_SLIDER)) {
+				sliderElement = this.querySelector('.' + CLASS_SLIDER);
+			}
+			if (sliderElement && sliderElement.querySelector(SELECTOR_SLIDER_ITEM)) {
+				var id = sliderElement.getAttribute('data-slider');
+				if (!id) {
+					id = ++$.uuid;
+					$.data[id] = slider = new Slider(sliderElement, options);
+					sliderElement.setAttribute('data-slider', id);
+				} else {
+					slider = $.data[id];
+					if (slider && options) {
+						slider.refresh(options);
+					}
+				}
+			}
+		});
+		return slider;
+	};
+	$.ready(function() {
+		//		setTimeout(function() {
+		$($.classSelector('.slider')).slider();
+		$($.classSelector('.scroll-wrapper.slider-indicator.segmented-control')).scroll({
+			scrollY: false,
+			scrollX: true,
+			indicators: false,
+			snap: $.classSelector('.control-item')
+		});
+		//		}, 500); //临时处理slider宽度计算不正确的问题(初步确认是scrollbar导致的)
+
+	});
+})(mui, window);