mui_app_rails 0.0.1

data/app/assets/javascripts/mui_app_rails/mui.fixed.classlist.js

@@ -0,0 +1,50 @@
+/**
+ * mui fixed classList
+ * @param {type} document
+ * @returns {undefined}
+ */
+(function(document) {
+    if (!("classList" in document.documentElement) && Object.defineProperty && typeof HTMLElement !== 'undefined') {
+
+        Object.defineProperty(HTMLElement.prototype, 'classList', {
+            get: function() {
+                var self = this;
+                function update(fn) {
+                    return function(value) {
+                        var classes = self.className.split(/\s+/),
+                                index = classes.indexOf(value);
+
+                        fn(classes, index, value);
+                        self.className = classes.join(" ");
+                    };
+                }
+
+                var ret = {
+                    add: update(function(classes, index, value) {
+                        ~index || classes.push(value);
+                    }),
+                    remove: update(function(classes, index) {
+                        ~index && classes.splice(index, 1);
+                    }),
+                    toggle: update(function(classes, index, value) {
+                        ~index ? classes.splice(index, 1) : classes.push(value);
+                    }),
+                    contains: function(value) {
+                        return !!~self.className.split(/\s+/).indexOf(value);
+                    },
+                    item: function(i) {
+                        return self.className.split(/\s+/)[i] || null;
+                    }
+                };
+
+                Object.defineProperty(ret, 'length', {
+                    get: function() {
+                        return self.className.split(/\s+/).length;
+                    }
+                });
+
+                return ret;
+            }
+        });
+    }
+})(document);

data/app/assets/javascripts/mui_app_rails/mui.fixed.fastclick.js

@@ -0,0 +1,64 @@
+/**
+ * fastclick(only for radio,checkbox)
+ */
+(function($, window, name) {
+	if (window.FastClick) {
+		return;
+	}
+
+	var handle = function(event, target) {
+		if (target.tagName === 'LABEL') {
+			if (target.parentNode) {
+				target = target.parentNode.querySelector('input');
+			}
+		}
+		if (target && (target.type === 'radio' || target.type === 'checkbox')) {
+			if (!target.disabled) { //disabled
+				return target;
+			}
+		}
+		return false;
+	};
+
+	$.registerTarget({
+		name: name,
+		index: 40,
+		handle: handle,
+		target: false
+	});
+	var dispatchEvent = function(event) {
+		var targetElement = $.targets.click;
+		if (targetElement) {
+			var clickEvent, touch;
+			// On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect
+			if (document.activeElement && document.activeElement !== targetElement) {
+				document.activeElement.blur();
+			}
+			touch = event.detail.gesture.changedTouches[0];
+			// Synthesise a click event, with an extra attribute so it can be tracked
+			clickEvent = document.createEvent('MouseEvents');
+			clickEvent.initMouseEvent('click', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
+			clickEvent.forwardedTouchEvent = true;
+			targetElement.dispatchEvent(clickEvent);
+		}
+	};
+	window.addEventListener('tap', dispatchEvent);
+	window.addEventListener('doubletap', dispatchEvent);
+	//捕获
+	window.addEventListener('click', function(event) {
+		if ($.targets.click) {
+			if (!event.forwardedTouchEvent) { //stop click
+				if (event.stopImmediatePropagation) {
+					event.stopImmediatePropagation();
+				} else {
+					// Part of the hack for browsers that don't support Event#stopImmediatePropagation
+					event.propagationStopped = true;
+				}
+				event.stopPropagation();
+				event.preventDefault();
+				return false;
+			}
+		}
+	}, true);
+
+})(mui, window, 'click');

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

@@ -0,0 +1,40 @@
+/**
+ * fixed trim
+ * @param {type} undefined
+ * @returns {undefined}
+ */
+(function(undefined) {
+	if (String.prototype.trim === undefined) { // fix for iOS 3.2
+		String.prototype.trim = function() {
+			return this.replace(/^\s+|\s+$/g, '');
+		};
+	}
+	Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) {
+		obj['__proto__'] = proto;
+		return obj;
+	};
+
+})();
+/**
+ * fixed CustomEvent
+ */
+(function() {
+	if (typeof window.CustomEvent === 'undefined') {
+		function CustomEvent(event, params) {
+			params = params || {
+				bubbles: false,
+				cancelable: false,
+				detail: undefined
+			};
+			var evt = document.createEvent('Events');
+			var bubbles = true;
+			for (var name in params) {
+				(name === 'bubbles') ? (bubbles = !!params[name]) : (evt[name] = params[name]);
+			}
+			evt.initEvent(event, bubbles, true);
+			return evt;
+		};
+		CustomEvent.prototype = window.Event.prototype;
+		window.CustomEvent = CustomEvent;
+	}
+})();

data/app/assets/javascripts/mui_app_rails/mui.fixed.keyboard.js

@@ -0,0 +1,56 @@
+(function($, document) {
+	$(function() {
+		if (!$.os.ios) {
+			return;
+		}
+		var CLASS_FOCUSIN = $.className('focusin');
+		var CLASS_BAR_TAB = $.className('bar-tab');
+		var CLASS_BAR_FOOTER = $.className('bar-footer');
+		var CLASS_BAR_FOOTER_SECONDARY = $.className('bar-footer-secondary');
+		var CLASS_BAR_FOOTER_SECONDARY_TAB = $.className('bar-footer-secondary-tab');
+		// var content = document.querySelector('.' + CLASS_CONTENT);
+		// if (content) {
+		// 	document.body.insertBefore(content, document.body.firstElementChild);
+		// }
+		document.addEventListener('focusin', function(e) {
+			if ($.os.plus) { //在父webview里边不fix
+				if (window.plus) {
+					if (plus.webview.currentWebview().children().length > 0) {
+						return;
+					}
+				}
+			}
+			var target = e.target;
+			if (target.tagName && target.tagName === 'INPUT' && target.type === 'text') {
+				if (target.disabled || target.readOnly) {
+					return;
+				}
+				document.body.classList.add(CLASS_FOCUSIN);
+				var isFooter = false;
+				for (; target && target !== document; target = target.parentNode) {
+					var classList = target.classList;
+					if (classList && classList.contains(CLASS_BAR_TAB) || classList.contains(CLASS_BAR_FOOTER) || classList.contains(CLASS_BAR_FOOTER_SECONDARY) || classList.contains(CLASS_BAR_FOOTER_SECONDARY_TAB)) {
+						isFooter = true;
+						break;
+					}
+				}
+				if (isFooter) {
+					var scrollTop = document.body.scrollHeight;
+					var scrollLeft = document.body.scrollLeft;
+					setTimeout(function() {
+						window.scrollTo(scrollLeft, scrollTop);
+					}, 20);
+				}
+			}
+		});
+		document.addEventListener('focusout', function(e) {
+			var classList = document.body.classList;
+			if (classList.contains(CLASS_FOCUSIN)) {
+				classList.remove(CLASS_FOCUSIN);
+				setTimeout(function() {
+					window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
+				}, 20);
+			}
+		});
+	});
+})(mui, document);

data/app/assets/javascripts/mui_app_rails/mui.gestures.drag.js

@@ -0,0 +1,48 @@
+/**
+ * mui gesture drag[start|left|right|up|down|end]
+ * @param {type} $
+ * @param {type} name
+ * @returns {undefined}
+ */
+(function($, name) {
+	var handle = function(event, touch) {
+		switch (event.type) {
+			case $.EVENT_MOVE:
+				if (touch.direction) { //drag
+					//修正direction
+					//默认锁定单向drag(后续可能需要额外配置支持)
+					if (touch.lockDirection && touch.startDirection) {
+						if (touch.startDirection && touch.startDirection !== touch.direction) {
+							if (touch.startDirection === 'up' || touch.startDirection === 'down') {
+								touch.direction = touch.deltaY < 0 ? 'up' : 'down';
+							} else {
+								touch.direction = touch.deltaX < 0 ? 'left' : 'right';
+							}
+						}
+					}
+					if (!touch.drag) {
+						touch.drag = true;
+						$.trigger(event.target, name + 'start', touch);
+					}
+					$.trigger(event.target, name, touch);
+					$.trigger(event.target, name + touch.direction, touch);
+				}
+				break;
+			case $.EVENT_END:
+			case $.EVENT_CANCEL:
+				if (touch.drag) {
+					$.trigger(event.target, name + 'end', touch);
+				}
+				break;
+		}
+	};
+	/**
+	 * mui gesture drag
+	 */
+	$.registerGesture({
+		name: name,
+		index: 20,
+		handle: handle,
+		options: {}
+	});
+})(mui, 'drag');

data/app/assets/javascripts/mui_app_rails/mui.gestures.flick.js

@@ -0,0 +1,30 @@
+/**
+ * mui gesture flick[left|right|up|down]
+ * @param {type} $
+ * @param {type} name
+ * @returns {undefined}
+ */
+(function($, name) {
+	var handle = function(event, touch) {
+		if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
+			var options = this.options;
+			if (touch.direction && options.flickMaxTime > touch.flickTime && touch.distance > options.flickMinDistince) {
+				touch.flick = true;
+				$.trigger(event.target, name, touch);
+				$.trigger(event.target, name + touch.direction, touch);
+			}
+		}
+	};
+	/**
+	 * mui gesture flick
+	 */
+	$.registerGesture({
+		name: name,
+		index: 5,
+		handle: handle,
+		options: {
+			flickMaxTime: 200,
+			flickMinDistince: 10
+		}
+	});
+})(mui, 'flick');

data/app/assets/javascripts/mui_app_rails/mui.gestures.hold.js

@@ -0,0 +1,41 @@
+/**
+ * mui gesture hold
+ * @param {type} $
+ * @param {type} name
+ * @returns {undefined}
+ */
+(function($, name) {
+	var timer;
+	var handle = function(event, touch) {
+		var options = this.options;
+		switch (event.type) {
+			case $.EVENT_START:
+				clearTimeout(timer);
+				timer = setTimeout(function() {
+					touch.hold = true;
+					$.trigger(event.target, name, touch);
+				}, options.holdTimeout);
+				break;
+			case $.EVENT_MOVE:
+				break;
+			case $.EVENT_END:
+			case $.EVENT_CANCEL:
+				clearTimeout(timer);
+				if ($.options.gestureConfig.hold && touch.hold) {
+					$.trigger(event.target, 'release', touch);
+				}
+				break;
+		}
+	};
+	/**
+	 * mui gesture hold
+	 */
+	$.registerGesture({
+		name: name,
+		index: 10,
+		handle: handle,
+		options: {
+			holdTimeout: 0
+		}
+	});
+})(mui, 'hold');

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

@@ -0,0 +1,207 @@
+/**
+ * mui gestures
+ * @param {type} $
+ * @param {type} window
+ * @returns {undefined}
+ */
+(function($, window) {
+	$.EVENT_START = 'touchstart';
+	$.EVENT_MOVE = 'touchmove';
+	$.EVENT_END = 'touchend';
+	$.EVENT_CANCEL = 'touchcancel';
+	$.EVENT_CLICK = 'click';
+	/**
+	 * Gesture preventDefault
+	 * @param {type} e
+	 * @returns {undefined}
+	 */
+	$.preventDefault = function(e) {
+		e.preventDefault();
+	};
+	/**
+	 * Gesture stopPropagation
+	 * @param {type} e
+	 * @returns {undefined}
+	 */
+	$.stopPropagation = function(e) {
+		e.stopPropagation();
+	};
+
+	/**
+	 * register gesture
+	 * @param {type} gesture
+	 * @returns {$.gestures}
+	 */
+	$.registerGesture = function(gesture) {
+		return $.registerHandler('gestures', gesture);
+
+	};
+	/**
+	 * distance
+	 * @param {type} p1
+	 * @param {type} p2
+	 * @returns {Number}
+	 */
+	var getDistance = function(p1, p2) {
+		var x = p2.x - p1.x;
+		var y = p2.y - p1.y;
+		return Math.sqrt((x * x) + (y * y));
+	};
+	/**
+	 * angle
+	 * @param {type} p1
+	 * @param {type} p2
+	 * @returns {Number}
+	 */
+	var getAngle = function(p1, p2) {
+		return Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
+	};
+	/**
+	 * direction
+	 * @param {type} angle
+	 * @returns {unresolved}
+	 */
+	var getDirectionByAngle = function(angle) {
+		if (angle < -45 && angle > -135) {
+			return 'up';
+		} else if (angle >= 45 && angle < 135) {
+			return 'down';
+		} else if (angle >= 135 || angle <= -135) {
+			return 'left';
+		} else if (angle >= -45 && angle <= 45) {
+			return 'right';
+		}
+		return null;
+	};
+	/**
+	 * detect gestures
+	 * @param {type} event
+	 * @param {type} touch
+	 * @returns {undefined}
+	 */
+	var detect = function(event, touch) {
+		if ($.gestures.stoped) {
+			return;
+		}
+		$.each($.gestures, function(index, gesture) {
+			if (!$.gestures.stoped) {
+				if ($.options.gestureConfig[gesture.name] !== false) {
+					gesture.handle(event, touch);
+				}
+			}
+		});
+	};
+	var detectTouchStart = function(event) {
+		$.gestures.stoped = false;
+		var now = $.now();
+		var point = event.touches ? event.touches[0] : event;
+		$.gestures.touch = {
+			target: event.target,
+			lastTarget: ($.gestures.touch && $.gestures.touch.lastTarget ? $.gestures.touch.lastTarget : null),
+			startTime: now,
+			touchTime: 0,
+			flickStartTime: now,
+			lastTapTime: ($.gestures.touch && $.gestures.touch.lastTapTime ? $.gestures.touch.lastTapTime : 0),
+			start: {
+				x: point.pageX,
+				y: point.pageY
+			},
+			flickStart: {
+				x: point.pageX,
+				y: point.pageY
+			},
+			flickDistanceX: 0,
+			flickDistanceY: 0,
+			move: {
+				x: 0,
+				y: 0
+			},
+			deltaX: 0,
+			deltaY: 0,
+			lastDeltaX: 0,
+			lastDeltaY: 0,
+			angle: '',
+			direction: '',
+			lockDirection: false,
+			startDirection: '',
+			distance: 0,
+			drag: false,
+			swipe: false,
+			hold: false,
+			gesture: event
+		};
+
+		detect(event, $.gestures.touch);
+	};
+	var detectTouchMove = function(event) {
+		if ($.gestures.stoped) {
+			return;
+		}
+		var touch = $.gestures.touch;
+		if (event.target != touch.target) {
+			return;
+		}
+		var now = $.now();
+		var point = event.touches ? event.touches[0] : event;
+		touch.touchTime = now - touch.startTime;
+		touch.move = {
+			x: point.pageX,
+			y: point.pageY
+		};
+		if (now - touch.flickStartTime > 300) {
+			touch.flickStartTime = now;
+			touch.flickStart = touch.move;
+		}
+		touch.distance = getDistance(touch.start, touch.move);
+		touch.angle = getAngle(touch.start, touch.move);
+		touch.direction = getDirectionByAngle(touch.angle);
+		touch.lastDeltaX = touch.deltaX;
+		touch.lastDeltaY = touch.deltaY;
+		touch.deltaX = touch.move.x - touch.start.x;
+		touch.deltaY = touch.move.y - touch.start.y;
+		touch.gesture = event;
+
+		detect(event, touch);
+	};
+	var detectTouchEnd = function(event) {
+		if ($.gestures.stoped) {
+			return;
+		}
+		var touch = $.gestures.touch;
+		if (event.target != touch.target) {
+			return;
+		}
+		var now = $.now();
+		touch.touchTime = now - touch.startTime;
+		touch.flickTime = now - touch.flickStartTime;
+		touch.flickDistanceX = touch.move.x - touch.flickStart.x;
+		touch.flickDistanceY = touch.move.y - touch.flickStart.y;
+		touch.gesture = event;
+
+		detect(event, touch);
+	};
+
+	window.addEventListener($.EVENT_START, detectTouchStart);
+	window.addEventListener($.EVENT_MOVE, detectTouchMove);
+	window.addEventListener($.EVENT_END, detectTouchEnd);
+	window.addEventListener($.EVENT_CANCEL, detectTouchEnd);
+	//fixed hashchange(android)
+	window.addEventListener($.EVENT_CLICK, function(e) {
+		//TODO 应该判断当前target是不是在targets.popover内部，而不是非要相等
+		if (($.targets.popover && e.target === $.targets.popover) || ($.targets.tab) || $.targets.offcanvas || $.targets.modal) {
+			e.preventDefault();
+		}
+	}, true);
+
+	
+	//增加原生滚动识别
+	$.isScrolling = false;
+	var scrollingTimeout = null;
+	window.addEventListener('scroll', function() {
+		$.isScrolling = true;
+		scrollingTimeout && clearTimeout(scrollingTimeout);
+		scrollingTimeout = setTimeout(function() {
+			$.isScrolling = false;
+		}, 250);
+	});
+})(mui, window);

data/app/assets/javascripts/mui_app_rails/mui.gestures.longtap.js

@@ -0,0 +1,43 @@
+/**
+ * mui gesture longtap
+ * @param {type} $
+ * @param {type} name
+ * @returns {undefined}
+ */
+(function($, name) {
+	var timer;
+	var handle = function(event, touch) {
+		var options = this.options;
+		switch (event.type) {
+			case $.EVENT_START:
+				clearTimeout(timer);
+				timer = setTimeout(function() {
+					if (!touch.drag) {
+						$.trigger(event.target, name, touch);
+					}
+				}, options.holdTimeout);
+				break;
+			case $.EVENT_MOVE:
+				if (touch.distance > options.holdThreshold) {
+					clearTimeout(timer);
+				}
+				break;
+			case $.EVENT_END:
+			case $.EVENT_CANCEL:
+				clearTimeout(timer);
+				break;
+		}
+	};
+	/**
+	 * mui gesture longtap
+	 */
+	$.registerGesture({
+		name: name,
+		index: 10,
+		handle: handle,
+		options: {
+			holdTimeout: 500,
+			holdThreshold: 2
+		}
+	});
+})(mui, 'longtap');

data/app/assets/javascripts/mui_app_rails/mui.gestures.swipe.js

@@ -0,0 +1,29 @@
+/**
+ * mui gesture swipe[left|right|up|down]
+ * @param {type} $
+ * @param {type} name
+ * @returns {undefined}
+ */
+(function($, name) {
+	var handle = function(event, touch) {
+		if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
+			var options = this.options;
+			if (touch.direction && options.swipeMaxTime > touch.touchTime && touch.distance > options.swipeMinDistince) {
+				touch.swipe = true;
+				$.trigger(event.target, name + touch.direction, touch);
+			}
+		}
+	};
+	/**
+	 * mui gesture swipe
+	 */
+	$.registerGesture({
+		name: name,
+		index: 10,
+		handle: handle,
+		options: {
+			swipeMaxTime: 300,
+			swipeMinDistince: 18
+		}
+	});
+})(mui, 'swipe');

data/app/assets/javascripts/mui_app_rails/mui.gestures.tap.js

@@ -0,0 +1,40 @@
+/**
+ * mui gesture tap and doubleTap
+ * @param {type} $
+ * @param {type} name
+ * @returns {undefined}
+ */
+(function($, name) {
+	var handle = function(event, touch) {
+		//if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
+		if (event.type === $.EVENT_END) { //ignore touchcancel
+			var options = this.options;
+			if (touch.distance < options.tapMaxDistance && touch.touchTime < options.tapMaxTime) {
+				if ($.options.gestureConfig.doubletap && touch.lastTarget && (touch.lastTarget === event.target)) { //same target
+					if (touch.lastTapTime && (touch.startTime - touch.lastTapTime) < options.tapMaxInterval) {
+						$.trigger(event.target, 'doubletap', touch);
+						touch.lastTapTime = $.now();
+						touch.lastTarget = event.target;
+						return;
+					}
+				}
+				$.trigger(event.target, name, touch);
+				touch.lastTapTime = $.now();
+				touch.lastTarget = event.target;
+			}
+		}
+	};
+	/**
+	 * mui gesture tap
+	 */
+	$.registerGesture({
+		name: name,
+		index: 30,
+		handle: handle,
+		options: {
+			tapMaxInterval: 300,
+			tapMaxDistance: 5,
+			tapMaxTime: 250
+		}
+	});
+})(mui, 'tap');