mui_app_rails 0.0.1 → 0.0.2

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

@@ -1,157 +0,0 @@
-(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);

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

@@ -1,58 +0,0 @@
-/**
- * mui target(action>popover>modal>tab>toggle)
- */
-(function($, window, document) {
-	/**
-	 * targets
-	 */
-	$.targets = {};
-	/**
-	 * target handles
-	 */
-	$.targetHandles = [];
-	/**
-	 * register target
-	 * @param {type} target
-	 * @returns {$.targets}
-	 */
-	$.registerTarget = function(target) {
-
-		target.index = target.index || 1000;
-
-		$.targetHandles.push(target);
-
-		$.targetHandles.sort(function(a, b) {
-			return a.index - b.index;
-		});
-
-		return $.targetHandles;
-	};
-	window.addEventListener('touchstart', function(event) {
-		var target = event.target;
-		var founds = {};
-		for (; target && target !== document; target = target.parentNode) {
-			var isFound = false;
-			$.each($.targetHandles, function(index, targetHandle) {
-				var name = targetHandle.name;
-				if (!isFound && !founds[name] && targetHandle.hasOwnProperty('handle')) {
-					$.targets[name] = targetHandle.handle(event, target);
-					if ($.targets[name]) {
-						founds[name] = true;
-						if (targetHandle.isContinue !== true) {
-							isFound = true;
-						}
-					}
-				} else {
-					if (!founds[name]) {
-						if (targetHandle.isReset !== false)
-							$.targets[name] = false;
-					}
-				}
-			});
-			if (isFound) {
-				break;
-			}
-		}
-
-	});
-})(mui, window, document);

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

@@ -1,172 +0,0 @@
-/**
- * <div class=“mui-views">
-	<div class=“mui-view">
-		<div class=“mui-navbar">
-			<div class=“mui-navbar-inner”>
-				<div class=“mui-navbar-left”></div>
-			        <div class=“mui-navbar-center”></div>
-		        	<div class=“mui-navbar-right”></div>
-			 </div>
-			<div class=“mui-navbar-inner”>
-				<div class=“mui-navbar-left”></div>
-			        <div class=“mui-navbar-center”></div>
-		        	<div class=“mui-navbar-right”></div>
-			 </div>
-		</div>
-		<div class=“mui-pages”>
-		     <div class=“mui-page”>
-				<div class=“mui-page-content"></div>
-			 </div>
-		        <div class=“mui-page”>
-				<div class=“mui-page-content"></div>
-			 </div>
-		</div>
-	</div>
-</div>
- * @param {Object} $
- * @param {Object} window
- */
-(function($, window) {
-	var CLASS_PAGE_LEFT = $.className('page-left');
-	var CLASS_PAGE_CENTER = $.className('page-center');
-
-	var CLASS_TRANSITIONING = $.className('transitioning');
-
-	var SELECTOR_NAVBAR = $.classSelector('.navbar');
-	var SELECTOR_PAGES = $.classSelector('.pages');
-	var SELECTOR_PAGE_LEFT = '.' + CLASS_PAGE_LEFT;
-	var SELECTOR_PAGE_CENTER = '.' + CLASS_PAGE_CENTER;
-
-	var View = $.Class.extend({
-		init: function(element, options) {
-			this.view = this.element;
-
-			this.options = $.extend({
-				swipeBackPageActiveArea: 30,
-				hardwareAccelerated: true
-			}, options);
-
-			this.navbars = this.querySelector(SELECTOR_NAVBAR);
-			this.pages = this.querySelector(SELECTOR_PAGES);
-
-			this.maxScrollX = this.view.offsetWidth;
-			this.x = this.y = 0;
-			this.translateZ = this.options.hardwareAccelerated ? ' translateZ(0)' : '';
-			this.moved = this.dragging = false;
-			this.activePage = this.previousPage = null;
-
-			this.initEvent();
-		},
-		initEvent: function() {
-			this.view.addEventListener('drag', this);
-			this.view.addEventListener('dragend', this);
-		},
-		handleEvent: function(event) {
-			switch (e.type) {
-				case 'drag':
-					this._drag(event);
-					break;
-				case 'dragend':
-					this._dragend(event);
-					break;
-			}
-		},
-		_drag: function(event) {
-			var detail = event.detail;
-			if (!this.dragging) {
-				if ((detail.start.x - this.view.offsetLeft) < this.options.swipeBackPageActiveArea) {
-					this.previousPage = this.pages.querySelector(SELECTOR_PAGE_LEFT);
-					this.activePage = this.pages.querySelector(SELECTOR_PAGE_CENTER);
-					this.previousPageStyle = this.previousPage.style;
-					this.activePageStyle = this.activePage.style;
-
-					this.previousPage.classList.remove(CLASS_TRANSITIONING);
-					this.activePage.classList.remove(CLASS_TRANSITIONING);
-
-					if (this.previousPage && this.activePage) {
-						this.dragging = true;
-						$.gestures.touch.lockDirection = true; //锁定方向
-						$.gestures.touch.startDirection = detail.direction;
-					}
-				}
-			}
-			if (this.dragging) {
-				var deltaX = 0;
-				if (!this.moved) { //start
-					deltaX = detail.deltaX;
-				} else { //move
-					deltaX = detail.deltaX - detail.lastDeltaX;
-				}
-
-				var newX = this.x + deltaX;
-
-				if (newX > 0 || newX < this.maxScrollX) {
-					newX = newX > 0 ? 0 : this.maxScrollX;
-				}
-
-				event.stopPropagation();
-				detail.gesture.preventDefault();
-
-				if (!this.requestAnimationFrame) {
-					this._updateTranslate();
-				}
-
-				this.moved = true;
-				this.x = newX;
-				this.y = 0;
-			}
-		},
-		_dragend: function(event) {
-			if (!this.dragging) {
-				this.dragging = this.moved = false;
-
-				event.stopPropagation();
-
-				var detail = event.detail;
-
-				this._clearRequestAnimationFrame();
-
-				this.previousPage.classList.add(CLASS_TRANSITIONING);
-				this.activePage.classList.add(CLASS_TRANSITIONING);
-
-
-
-				return;
-			}
-		},
-		_clearRequestAnimationFrame: function() {
-			if (this.requestAnimationFrame) {
-				cancelAnimationFrame(this.requestAnimationFrame);
-				this.requestAnimationFrame = null;
-			}
-		},
-		_getTranslateStr: function(x, y) {
-			if (this.options.hardwareAccelerated) {
-				return 'translate3d(' + x + 'px,' + y + 'px,0px) ' + this.translateZ;
-			}
-			return 'translate(' + x + 'px,' + y + 'px) ';
-		},
-
-		_updateTranslate: function() {
-			var self = this;
-			if (self.x !== self.lastX || self.y !== self.lastY) {
-				self.setTranslate(self.x, self.y);
-			}
-			self.requestAnimationFrame = requestAnimationFrame(function() {
-				self._updateTranslate();
-			});
-		},
-		setTranslate: function(x, y) {
-			this.x = x;
-			this.y = y;
-			this.previousPageStyle['webkitTransform'] = this._getTranslateStr(x, y);
-			this.activePageStyle['webkitTransform'] = this._getTranslateStr(x, y);
-
-			if (this.navbars) {
-				this.navbars.setTranslate(x, y);
-			}
-			this.lastX = this.x;
-			this.lastY = this.y;
-		},
-	});
-})(mui, window);

data/app/assets/javascripts/mui_app_rails/popovers.js

@@ -1,278 +0,0 @@
-/**
- * Popovers
- * @param {type} $
- * @param {type} window
- * @param {type} document
- * @param {type} name
- * @param {type} undefined
- * @returns {undefined}
- */
-(function($, window, document, name) {
-
-	var CLASS_POPOVER = $.className('popover');
-	var CLASS_POPOVER_ARROW = $.className('popover-arrow');
-	var CLASS_ACTION_POPOVER = $.className('popover-action');
-	var CLASS_BACKDROP = $.className('backdrop');
-	var CLASS_BAR_POPOVER = $.className('bar-popover');
-	var CLASS_BAR_BACKDROP = $.className('bar-backdrop');
-	var CLASS_ACTION_BACKDROP = $.className('backdrop-action');
-	var CLASS_ACTIVE = $.className('active');
-	var CLASS_BOTTOM = $.className('bottom');
-
-
-
-	var handle = function(event, target) {
-		if (target.tagName === 'A' && target.hash) {
-			$.targets._popover = document.getElementById(target.hash.replace('#', ''));
-			if ($.targets._popover && $.targets._popover.classList.contains(CLASS_POPOVER)) {
-				return target;
-			} else {
-				$.targets._popover = null;
-			}
-		}
-		return false;
-	};
-
-	$.registerTarget({
-		name: name,
-		index: 60,
-		handle: handle,
-		target: false,
-		isReset: false,
-		isContinue: true
-	});
-
-	var fixedPopoverScroll = function(isPopoverScroll) {
-		//		if (isPopoverScroll) {
-		//			document.body.setAttribute('style', 'overflow:hidden;');
-		//		} else {
-		//			document.body.setAttribute('style', '');
-		//		}
-	};
-	var onPopoverShown = function(e) {
-		this.removeEventListener('webkitTransitionEnd', onPopoverShown);
-		this.addEventListener('touchmove', $.preventDefault);
-		$.trigger(this, 'shown', this);
-	}
-	var onPopoverHidden = function(e) {
-		setStyle(this,'none');
-		this.removeEventListener('webkitTransitionEnd', onPopoverHidden);
-		this.removeEventListener('touchmove', $.preventDefault);
-		fixedPopoverScroll(false);
-		$.trigger(this, 'hidden', this);
-	};
-
-	var backdrop = (function() {
-		var element = document.createElement('div');
-		element.classList.add(CLASS_BACKDROP);
-		element.addEventListener('touchmove', $.preventDefault);
-		element.addEventListener('tap', function(e) {
-			var popover = $.targets._popover;
-			if (popover) {
-				popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
-				popover.classList.remove(CLASS_ACTIVE);
-				removeBackdrop(popover);
-				document.body.setAttribute('style', ''); //webkitTransitionEnd有时候不触发？
-			}
-		});
-
-		return element;
-	}());
-	var removeBackdrop = function(popover) {
-		backdrop.setAttribute('style', 'opacity:0');
-		$.targets.popover = $.targets._popover = null; //reset
-		setTimeout(function() {
-			if (!popover.classList.contains(CLASS_ACTIVE) && backdrop.parentNode && backdrop.parentNode === document.body) {
-				document.body.removeChild(backdrop);
-			}
-		}, 350);
-	};
-	window.addEventListener('tap', function(e) {
-		if (!$.targets.popover) {
-			return;
-		}
-		var toggle = false;
-		var target = e.target;
-		for (; target && target !== document; target = target.parentNode) {
-			if (target === $.targets.popover) {
-				toggle = true;
-			}
-		}
-		if (toggle) {
-			e.detail.gesture.preventDefault(); //fixed hashchange
-			togglePopover($.targets._popover, $.targets.popover);
-		}
-
-	});
-
-	var togglePopover = function(popover, anchor) {
-		//remove一遍，以免来回快速切换，导致webkitTransitionEnd不触发，无法remove
-		popover.removeEventListener('webkitTransitionEnd', onPopoverShown);
-		popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
-		backdrop.classList.remove(CLASS_BAR_BACKDROP);
-		backdrop.classList.remove(CLASS_ACTION_BACKDROP);
-		var _popover = document.querySelector($.classSelector('.popover.active'));
-		if (_popover) {
-			//			_popover.setAttribute('style', '');
-			_popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
-			_popover.classList.remove(CLASS_ACTIVE);
-			//			_popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
-			//			fixedPopoverScroll(false);
-			//同一个弹出则直接返回，解决同一个popover的toggle
-			if (popover === _popover) {
-				removeBackdrop(_popover);
-				return;
-			}
-		}
-		var isActionSheet = false;
-		if (popover.classList.contains(CLASS_BAR_POPOVER) || popover.classList.contains(CLASS_ACTION_POPOVER)) { //navBar
-			if (popover.classList.contains(CLASS_ACTION_POPOVER)) { //action sheet popover
-				isActionSheet = true;
-				backdrop.classList.add(CLASS_ACTION_BACKDROP);
-			} else { //bar popover
-				backdrop.classList.add(CLASS_BAR_BACKDROP);
-				//				if (anchor) {
-				//					if (anchor.parentNode) {
-				//						var offsetWidth = anchor.offsetWidth;
-				//						var offsetLeft = anchor.offsetLeft;
-				//						var innerWidth = window.innerWidth;
-				//						popover.style.left = (Math.min(Math.max(offsetLeft, defaultPadding), innerWidth - offsetWidth - defaultPadding)) + "px";
-				//					} else {
-				//						//TODO anchor is position:{left,top,bottom,right}
-				//					}
-				//				}
-			}
-		}
-		setStyle(popover, 'block'); //actionsheet transform
-		popover.offsetHeight;
-		popover.classList.add(CLASS_ACTIVE);
-		backdrop.setAttribute('style', '');
-		document.body.appendChild(backdrop);
-		fixedPopoverScroll(true);
-		calPosition(popover, anchor, isActionSheet); //position
-		backdrop.classList.add(CLASS_ACTIVE);
-		popover.addEventListener('webkitTransitionEnd', onPopoverShown);
-	};
-	var setStyle = function(popover, display, top, left) {
-		var style = popover.style;
-		if (typeof display !== 'undefined')
-			style.display = display;
-		if (typeof top !== 'undefined')
-			style.top = top + 'px';
-		if (typeof left !== 'undefined')
-			style.left = left + 'px';
-	};
-	var calPosition = function(popover, anchor, isActionSheet) {
-		if (!popover || !anchor) {
-			return;
-		}
-		var wWidth = window.innerWidth;
-		var wHeight = window.innerHeight;
-
-		var pWidth = popover.offsetWidth;
-		var pHeight = popover.offsetHeight;
-		if (isActionSheet) { //actionsheet
-			setStyle(popover, 'block', (wHeight - pHeight + window.pageYOffset), (wWidth - pWidth) / 2)
-			return;
-		}
-		var aWidth = anchor.offsetWidth;
-		var aHeight = anchor.offsetHeight;
-		var offset = $.offset(anchor);
-
-		var arrow = popover.querySelector('.' + CLASS_POPOVER_ARROW);
-		if (!arrow) {
-			arrow = document.createElement('div');
-			arrow.className = CLASS_POPOVER_ARROW;
-			popover.appendChild(arrow);
-		}
-		var arrowSize = arrow && arrow.offsetWidth / 2 || 0;
-
-
-
-		var pTop = 0;
-		var pLeft = 0;
-		var diff = 0;
-		var arrowLeft = 0;
-		var defaultPadding = popover.classList.contains(CLASS_ACTION_POPOVER) ? 0 : 5;
-
-		var position = 'top';
-		if ((pHeight + arrowSize) < (offset.top - window.pageYOffset)) { //top
-			pTop = offset.top - pHeight - arrowSize;
-		} else if ((pHeight + arrowSize) < (wHeight - (offset.top - window.pageYOffset) - aHeight)) { //bottom
-			position = 'bottom';
-			pTop = offset.top + aHeight + arrowSize;
-		} else { //middle
-			position = 'middle';
-			pTop = Math.max((wHeight - pHeight) / 2 + window.pageYOffset, 0);
-			pLeft = Math.max((wWidth - pWidth) / 2 + window.pageXOffset, 0);
-		}
-		if (position === 'top' || position === 'bottom') {
-			pLeft = aWidth / 2 + offset.left - pWidth / 2;
-			diff = pLeft;
-			if (pLeft < defaultPadding) pLeft = defaultPadding;
-			if (pLeft + pWidth > wWidth) pLeft = wWidth - pWidth - defaultPadding;
-
-			if (arrow) {
-				if (position === 'top') {
-					arrow.classList.add(CLASS_BOTTOM);
-				} else {
-					arrow.classList.remove(CLASS_BOTTOM);
-				}
-				diff = diff - pLeft;
-				arrowLeft = (pWidth / 2 - arrowSize / 2 + diff);
-				arrowLeft = Math.max(Math.min(arrowLeft, pWidth - arrowSize * 2 - 6), 6);
-				arrow.setAttribute('style', 'left:' + arrowLeft + 'px');
-			}
-		} else if (position === 'middle') {
-			arrow.setAttribute('style', 'display:none');
-		}
-		setStyle(popover, 'block', pTop, pLeft);
-	};
-
-	$.createMask = function(callback) {
-		var element = document.createElement('div');
-		element.classList.add(CLASS_BACKDROP);
-		element.addEventListener('touchmove', $.preventDefault);
-		element.addEventListener('tap', function() {
-			mask.close();
-		});
-		var mask = [element];
-		mask._show = false;
-		mask.show = function() {
-			mask._show = true;
-			element.setAttribute('style', 'opacity:1');
-			document.body.appendChild(element);
-			return mask;
-		};
-		mask._remove = function() {
-			if (mask._show) {
-				mask._show = false;
-				element.setAttribute('style', 'opacity:0');
-				setTimeout(function() {
-					document.body.removeChild(element);
-				}, 350);
-			}
-			return mask;
-		};
-		mask.close = function() {
-			if (callback) {
-				if (callback() !== false) {
-					mask._remove();
-				}
-			} else {
-				mask._remove();
-			}
-		};
-		return mask;
-	};
-	$.fn.popover = function() {
-		var args = arguments;
-		this.each(function() {
-			$.targets._popover = this;
-			if (args[0] === 'show' || args[0] === 'hide' || args[0] === 'toggle') {
-				togglePopover(this, args[1]);
-			}
-		});
-	};
-
-})(mui, window, document, 'popover');