mui_app_rails 0.0.1

data/app/assets/javascripts/mui_app_rails/mui.init.5+.js

@@ -0,0 +1,441 @@
+/**
+ * mui.init 5+
+ * @param {type} $
+ * @returns {undefined}
+ */
+(function($) {
+	var defaultOptions = {
+		swipeBack: false,
+		preloadPages: [], //5+ lazyLoad webview
+		preloadLimit: 10, //预加载窗口的数量限制(一旦超出，先进先出)
+		keyEventBind: {
+			backbutton: true,
+			menubutton: true
+		}
+	};
+
+	//默认页面动画
+	var defaultShow = {
+		autoShow: true,
+		duration: $.os.ios ? 200 : 100,
+		aniShow: 'slide-in-right'
+	};
+	//若执行了显示动画初始化操作，则要覆盖默认配置
+	if ($.options.show) {
+		defaultShow = $.extend(true, defaultShow, $.options.show);
+	}
+
+	$.currentWebview = null;
+	$.isHomePage = false;
+
+	$.extend(true, $.global, defaultOptions);
+	$.extend(true, $.options, defaultOptions);
+	/**
+	 * 等待动画配置
+	 * @param {type} options
+	 * @returns {Object}
+	 */
+	$.waitingOptions = function(options) {
+		return $.extend({
+			autoShow: true,
+			title: ''
+		}, options);
+	};
+	/**
+	 * 窗口显示配置
+	 * @param {type} options
+	 * @returns {Object}
+	 */
+	$.showOptions = function(options) {
+		return $.extend(defaultShow, options);
+	};
+	/**
+	 * 窗口默认配置
+	 * @param {type} options
+	 * @returns {Object}
+	 */
+	$.windowOptions = function(options) {
+		return $.extend({
+			scalable: false,
+			bounce: "" //vertical
+		}, options);
+	};
+	/**
+	 * plusReady
+	 * @param {type} callback
+	 * @returns {_L6.$}
+	 */
+	$.plusReady = function(callback) {
+		if (window.plus) {
+			callback();
+		} else {
+			document.addEventListener("plusready", function() {
+				callback();
+			}, false);
+		}
+		return this;
+	};
+	/**
+	 * 5+ event(5+没提供之前我自己实现)
+	 * @param {type} webview
+	 * @param {type} eventType
+	 * @param {type} data
+	 * @returns {undefined}
+	 */
+	$.fire = function(webview, eventType, data) {
+		if (webview) {
+			webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "','" + JSON.stringify(data || {}).replace(/\'/g, "\\u0027").replace(/\\/g, "\\u005c") + "')");
+		}
+	};
+	/**
+	 * 5+ event(5+没提供之前我自己实现)
+	 * @param {type} eventType
+	 * @param {type} data
+	 * @returns {undefined}
+	 */
+	$.receive = function(eventType, data) {
+		if (eventType) {
+			data = JSON.parse(data);
+			$.trigger(document, eventType, data);
+		}
+	};
+	var triggerPreload = function(webview) {
+		if (!webview.preloaded) {
+			$.fire(webview, 'preload');
+			var list = webview.children();
+			for (var i = 0; i < list.length; i++) {
+				$.fire(list[i], 'preload');
+			}
+			webview.preloaded = true;
+		}
+	};
+	var trigger = function(webview, eventType, timeChecked) {
+		if (timeChecked) {
+			if (!webview[eventType + 'ed']) {
+				$.fire(webview, eventType);
+				var list = webview.children();
+				for (var i = 0; i < list.length; i++) {
+					$.fire(list[i], eventType);
+				}
+				webview[eventType + 'ed'] = true;
+			}
+		} else {
+			$.fire(webview, eventType);
+			var list = webview.children();
+			for (var i = 0; i < list.length; i++) {
+				$.fire(list[i], eventType);
+			}
+		}
+
+	};
+	/**
+	 * 打开新窗口
+	 * @param {string} url 要打开的页面地址
+	 * @param {string} id 指定页面ID
+	 * @param {object} options 可选:参数,等待,窗口,显示配置{params:{},waiting:{},styles:{},show:{}}
+	 */
+	$.openWindow = function(url, id, options) {
+
+		if (!window.plus) {
+			return;
+		}
+		if (typeof url === 'object') {
+			options = url;
+			url = options.url;
+			id = options.id || url;
+		} else {
+			if (typeof id === 'object') {
+				options = id;
+				id = url;
+			} else {
+				id = id || url;
+			}
+		}
+		options = options || {};
+		var params = options.params || {};
+		var webview, nShow, nWaiting;
+		if ($.webviews[id]) { //已缓存
+			var webviewCache = $.webviews[id];
+			webview = webviewCache.webview;
+			//需要处理用户手动关闭窗口的情况，此时webview应该是空的；
+			if (!webview || !webview.getURL()) {
+				//再次新建一个webview；
+				options = $.extend(options, {
+					id: id,
+					url: url,
+					preload: true
+				}, true);
+				webview = $.createWindow(options);
+			}
+			//每次show都需要传递动画参数；
+			//预加载的动画参数优先级：openWindow配置>preloadPages配置>mui默认配置；
+			nShow = webviewCache.show;
+			nShow = options.show ? $.extend(nShow, options.show) : nShow;
+			webview.show(nShow.aniShow, nShow.duration, function() {
+				triggerPreload(webview);
+				trigger(webview, 'pagebeforeshow', false);
+			});
+
+			webviewCache.afterShowMethodName && webview.evalJS(webviewCache.afterShowMethodName + '(\'' + JSON.stringify(params) + '\')');
+			return webview;
+		} else { //新窗口
+			//显示waiting
+			var waitingConfig = $.waitingOptions(options.waiting);
+			if (waitingConfig.autoShow) {
+				nWaiting = plus.nativeUI.showWaiting(waitingConfig.title, waitingConfig.options);
+			}
+			//创建页面
+			options = $.extend(options, {
+				id: id,
+				url: url
+			});
+			webview = $.createWindow(options);
+			//显示
+			nShow = $.showOptions(options.show);
+			if (nShow.autoShow) {
+				webview.addEventListener("loaded", function() {
+					//关闭等待框
+					if (nWaiting) {
+						nWaiting.close();
+					}
+					//显示页面
+					webview.show(nShow.aniShow, nShow.duration, function() {
+						triggerPreload(webview);
+						trigger(webview, 'pagebeforeshow', false);
+					});
+					webview.showed = true;
+					options.afterShowMethodName && webview.evalJS(options.afterShowMethodName + '(\'' + JSON.stringify(params) + '\')');
+				}, false);
+			}
+		}
+		return webview;
+	};
+	/**
+	 * 根据配置信息创建一个webview
+	 * @param {type} options
+	 * @param {type} isCreate
+	 * @returns {webview}
+	 */
+	$.createWindow = function(options, isCreate) {
+		if (!window.plus) {
+			return;
+		}
+		var id = options.id || options.url;
+		var webview;
+		if (options.preload) {
+			if ($.webviews[id] && $.webviews[id].webview.getURL()) { //已经cache
+				webview = $.webviews[id].webview;
+			} else { //新增预加载窗口
+				//preload
+				webview = plus.webview.create(options.url, id, $.windowOptions(options.styles), $.extend({
+					preload: true
+				}, options.extras));
+				if (options.subpages) {
+					$.each(options.subpages, function(index, subpage) {
+						//TODO 子窗口也可能已经创建，比如公用模板的情况；
+						var subWebview = plus.webview.create(subpage.url, subpage.id || subpage.url, $.windowOptions(subpage.styles), $.extend({
+							preload: true
+						}, subpage.extras));
+						webview.append(subWebview);
+					});
+				}
+			}
+
+			//TODO 理论上，子webview也应该计算到预加载队列中，但这样就麻烦了，要退必须退整体，否则可能出现问题；
+			$.webviews[id] = {
+				webview: webview, //目前仅preload的缓存webview
+				preload: true,
+				show: $.showOptions(options.show),
+				afterShowMethodName: options.afterShowMethodName //就不应该用evalJS。应该是通过事件消息通讯
+			};
+			//索引该预加载窗口
+			var preloads = $.data.preloads;
+			var index = preloads.indexOf(id);
+			if (~index) { //删除已存在的(变相调整插入位置)
+				preloads.splice(index, 1);
+			}
+			preloads.push(id);
+			if (preloads.length > $.options.preloadLimit) {
+				//先进先出
+				var first = $.data.preloads.shift();
+				var webviewCache = $.webviews[first];
+				if (webviewCache && webviewCache.webview) {
+					//需要将自己打开的所有页面，全部close；
+					//关闭该预加载webview	
+					$.closeAll(webviewCache.webview);
+				}
+				//删除缓存
+				delete $.webviews[first];
+			}
+		} else {
+			if (isCreate !== false) { //直接创建非预加载窗口
+				webview = plus.webview.create(options.url, id, $.windowOptions(options.styles), options.extras);
+				if (options.subpages) {
+					$.each(options.subpages, function(index, subpage) {
+						var subWebview = plus.webview.create(subpage.url, subpage.id || subpage.url, $.windowOptions(subpage.styles), subpage.extras);
+						webview.append(subWebview);
+					});
+				}
+			}
+		}
+		return webview;
+	};
+
+	/**
+	 * 预加载
+	 */
+	$.preload = function(options) {
+		//调用预加载函数，不管是否传递preload参数，强制变为true
+		if (!options.preload) {
+			options.preload = true;
+		}
+		return $.createWindow(options);
+	};
+
+	/**
+	 *关闭当前webview打开的所有webview；
+	 */
+	$.closeOpened = function(webview) {
+		var opened = webview.opened();
+		if (opened) {
+			for (var i = 0, len = opened.length; i < len; i++) {
+				var openedWebview = opened[i];
+				var open_open = openedWebview.opened();
+				if (open_open && open_open.length > 0) {
+					$.closeOpened(openedWebview);
+				} else {
+					//如果直接孩子节点，就不用关闭了，因为父关闭的时候，会自动关闭子；
+					if (openedWebview.parent() !== webview) {
+						openedWebview.close('none');
+					}
+				}
+			}
+		}
+	};
+	$.closeAll = function(webview, aniShow) {
+		$.closeOpened(webview);
+		if (aniShow) {
+			webview.close(aniShow);
+		} else {
+			webview.close();
+		}
+	};
+
+	/**
+	 * 批量创建webview
+	 * @param {type} options
+	 * @returns {undefined}
+	 */
+	$.createWindows = function(options) {
+		$.each(options, function(index, option) {
+			//初始化预加载窗口(创建)和非预加载窗口(仅配置，不创建)
+			$.createWindow(option, false);
+		});
+	};
+	/**
+	 * 创建当前页面的子webview
+	 * @param {type} options
+	 * @returns {webview}
+	 */
+	$.appendWebview = function(options) {
+		if (!window.plus) {
+			return;
+		}
+		var id = options.id || options.url;
+		var webview;
+		if (!$.webviews[id]) { //保证执行一遍
+			//TODO 这里也有隐患，比如某个webview不是作为subpage创建的，而是作为target webview的话；
+			webview = plus.webview.create(options.url, id, options.styles, options.extras);
+			//之前的实现方案：子窗口loaded之后再append到父窗口中；
+			//问题：部分子窗口loaded事件发生较晚，此时执行父窗口的children方法会返回空，导致父子通讯失败；
+			//     比如父页面执行完preload事件后，需触发子页面的preload事件，此时未append的话，就无法触发；
+			//修改方式：不再监控loaded事件，直接append
+			//by chb@20150521
+			// webview.addEventListener('loaded', function() {
+				plus.webview.currentWebview().append(webview);
+			// });
+			$.webviews[id] = options;
+		}
+		return webview;
+	};
+
+	//全局webviews
+	$.webviews = {};
+	//预加载窗口索引
+	$.data.preloads = [];
+	//$.currentWebview
+	$.plusReady(function() {
+		$.currentWebview = plus.webview.currentWebview();
+	});
+	$.registerInit({
+		name: '5+',
+		index: 100,
+		handle: function() {
+			var options = $.options;
+			var subpages = options.subpages || [];
+			if ($.os.plus) {
+				$.plusReady(function() {
+					//TODO  这里需要判断一下，最好等子窗口加载完毕后，再调用主窗口的show方法；
+					//或者：在openwindow方法中，监听实现；
+					$.each(subpages, function(index, subpage) {
+						$.appendWebview(subpage);
+					});
+					//判断是否首页
+					if (plus.webview.currentWebview() === plus.webview.getWebviewById(plus.runtime.appid)) {
+						$.isHomePage = true;
+						//首页需要自己激活预加载；
+						//timeout因为子页面loaded之后才append的，防止子页面尚未append、从而导致其preload未触发的问题；
+						setTimeout(function() {
+							triggerPreload(plus.webview.currentWebview());
+						}, 300);
+					}
+					//设置ios顶部状态栏颜色；
+					if ($.os.ios && $.options.statusBarBackground) {
+						plus.navigator.setStatusBarBackground($.options.statusBarBackground);
+					}
+					if ($.os.android && parseFloat($.os.version) < 4.4) {
+						//解决Android平台4.4版本以下，resume后，父窗体标题延迟渲染的问题；
+						if (plus.webview.currentWebview().parent() == null) {
+							document.addEventListener("resume", function() {
+								var body = document.body;
+								body.style.display = 'none';
+								setTimeout(function() {
+									body.style.display = '';
+								}, 10);
+							});
+						}
+					}
+				});
+			} else {
+				if (subpages.length > 0) {
+					var err = document.createElement('div');
+					err.className = 'mui-error';
+					//文字描述
+					var span = document.createElement('span');
+					span.innerHTML = '在该浏览器下，不支持创建子页面，具体参考';
+					err.appendChild(span);
+					var a = document.createElement('a');
+					a.innerHTML = '"mui框架适用场景"';
+					a.href = 'http://ask.dcloud.net.cn/article/113';
+					err.appendChild(a);
+					document.body.appendChild(err);
+					console.log('在该浏览器下，不支持创建子页面');
+				}
+
+			}
+
+		}
+	});
+	window.addEventListener('preload', function() {
+		//处理预加载部分
+		var webviews = $.options.preloadPages || [];
+		$.plusReady(function() {
+			$.each(webviews, function(index, webview) {
+				$.createWindow($.extend(webview, {
+					preload: true
+				}));
+			});
+
+		});
+	});
+})(mui);

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

@@ -0,0 +1,100 @@
+/**
+ * mui.init
+ * @param {type} $
+ * @returns {undefined}
+ */
+(function($) {
+	$.global = $.options = {
+		gestureConfig: {
+			tap: true,
+			doubletap: false,
+			longtap: false,
+			hold: false,
+			flick: true,
+			swipe: true,
+			drag: true
+		}
+	};
+	/**
+	 *
+	 * @param {type} options
+	 * @returns {undefined}
+	 */
+	$.initGlobal = function(options) {
+		$.options = $.extend(true, $.global, options);
+		return this;
+	};
+	var inits = {};
+
+	var isInitialized = false;
+	//TODO 自动调用init?因为用户自己调用init的时机可能不确定，如果晚于自动init，则会有潜在问题
+	//	$.ready(function() {
+	//		setTimeout(function() {
+	//			if (!isInitialized) {
+	//				$.init();
+	//			}
+	//		}, 300);
+	//	});
+	/**
+	 * 单页配置 初始化
+	 * @param {object} options
+	 */
+	$.init = function(options) {
+		isInitialized = true;
+		$.options = $.extend(true, $.global, options || {});
+		$.ready(function() {
+			$.each($.inits, function(index, init) {
+				var isInit = !!(!inits[init.name] || init.repeat);
+				if (isInit) {
+					init.handle.call($);
+					inits[init.name] = true;
+				}
+			});
+		});
+		return this;
+	};
+
+	/**
+	 * 增加初始化执行流程
+	 * @param {function} init
+	 */
+	$.registerInit = function(init) {
+		return $.registerHandler('inits', init);
+	};
+	$(function() {
+		var classList = document.body.classList;
+		var os = [];
+		if ($.os.ios) {
+			os.push({
+				os: 'ios',
+				version: $.os.version
+			});
+			classList.add($.className('ios'));
+		} else if ($.os.android) {
+			os.push({
+				os: 'android',
+				version: $.os.version
+			});
+			classList.add($.className('android'));
+		}
+		if ($.os.wechat) {
+			os.push({
+				os: 'wechat',
+				version: $.os.wechat.version
+			});
+			classList.add($.className('wechat'));
+		}
+		if (os.length) {
+			$.each(os, function(index, osObj) {
+				var version = '';
+				var classArray = [];
+				if (osObj.version) {
+					$.each(osObj.version.split('.'), function(i, v) {
+						version = version + (version ? '-' : '') + v;
+						classList.add($.className(osObj.os + '-' + version));
+					});
+				}
+			});
+		}
+	});
+})(mui);

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

@@ -0,0 +1,57 @@
+/**
+ * mui.init pulldownRefresh
+ * @param {type} $
+ * @returns {undefined}
+ */
+(function($) {
+	$.registerInit({
+		name: 'pullrefresh',
+		index: 1000,
+		handle: function() {
+			var options = $.options;
+			var pullRefreshOptions = options.pullRefresh || {};
+			var hasPulldown = pullRefreshOptions.down && pullRefreshOptions.down.hasOwnProperty('callback');
+			var hasPullup = pullRefreshOptions.up && pullRefreshOptions.up.hasOwnProperty('callback');
+			if (hasPulldown || hasPullup) {
+				var container = pullRefreshOptions.container;
+				if (container) {
+					var $container = $(container);
+					if ($container.length === 1) {
+						if ($.os.plus && $.os.android) { //android 5+
+							$.plusReady(function() {
+								var webview = plus.webview.currentWebview();
+								if (hasPullup) {
+									//当前页面初始化pullup
+									var upOptions = {};
+									upOptions.up = pullRefreshOptions.up;
+									upOptions.webviewId = webview.id || webview.getURL();
+									$container.pullRefresh(upOptions);
+								}
+								if (hasPulldown) {
+									var parent = webview.parent();
+									var id = webview.id || webview.getURL();
+									if (parent) {
+										if (!hasPullup) { //如果没有上拉加载，需要手动初始化一个默认的pullRefresh，以便当前页面容器可以调用endPulldownToRefresh等方法
+											$container.pullRefresh({
+												webviewId: id
+											});
+										}
+										var downOptions = {
+											webviewId: id
+										};
+										downOptions.down = $.extend({}, pullRefreshOptions.down);
+										downOptions.down.callback = '_CALLBACK';
+										//父页面初始化pulldown
+										parent.evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify(downOptions) + "')");
+									}
+								}
+							});
+						} else {
+							$container.pullRefresh(pullRefreshOptions);
+						}
+					}
+				}
+			}
+		}
+	});
+})(mui);