mui_app_rails 0.0.1

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

@@ -0,0 +1,58 @@
+/**
+ * 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

@@ -0,0 +1,172 @@
+/**
+ * <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

@@ -0,0 +1,278 @@
+/**
+ * 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');