add fallback and Mobilebone.mergeCallback API

add fallback and Mobilebone.mergeCallback API

Author: zhangxinxu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobilebone",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Bone main for mobile web APP with a sigle page mode.",
   "main": "src/mobilebone.js",
   "directories": {

src/mobilebone.js

@@ -38,7 +38,7 @@
 	 *
 	 * @type string
 	**/
-	Mobilebone.VERSION = '1.1.3';
+	Mobilebone.VERSION = '1.1.4';
 
 	/**
 	 * Whether bind events when dom ready
@@ -76,7 +76,14 @@
 	Mobilebone.rootTransition = root;
 
 	/**
-	 * className for mark page element
+	 * Whether merge(vs cover) global callback and local callback
+	 *
+	 * @type boolean
+	**/
+	Mobilebone.mergeCallback = true;
+	
+	/**
+	 *  for mark page element
 	 *
 	 * @type string
 	**/
@@ -133,6 +140,7 @@
 			onpagefirstinto: this.onpagefirstinto,
 			animationstart: this.animationstart,
 			animationend: this.animationend,
+			fallback: this.fallback,
 			callback: this.callback
 		}, params = function(element) {
 			if (!element || !element.getAttribute) return {};
@@ -141,14 +149,39 @@
 
 			// rules as follow:
 			// data-* > data-params > options > defaults	
-			["title", "root", "form", "onpagefirstinto", "callback", "animationstart", "animationend"].forEach(function(key) {
+			["title", "root", "form"].forEach(function(key) {
+				
 				_params[key] = element.getAttribute("data-" + key) || _dataparams[key] || options[key] || defaults[key];
 			});
 
 			if (typeof _params.root == "string") {
 				_params.root = Mobilebone.getFunction(_params.root);
 			}
 
+			["onpagefirstinto", "callback", "fallback", "animationstart", "animationend"].forEach(function(key) {
+				if (Mobilebone.mergeCallback == true && typeof defaults[key] == "function") {
+					// merge global callback
+					var local_function_key = element.getAttribute("data-" + key) || _dataparams[key];
+					if (typeof _params.root[local_function_key] == "function") {		
+						_params[key] = function() {
+							defaults[key].apply(null, arguments);
+							_params.root[local_function_key].apply(null, arguments);
+						}
+					} else if (typeof options[key] == "function") {
+						_params[key] = function() {
+							defaults[key].apply(null, arguments);
+							options[key].apply(null, arguments);
+						}
+					} else {
+						_params[key] = defaults[key];
+					}
+				} else {
+					// replace global callback
+					_params[key] = element.getAttribute("data-" + key) || _dataparams[key] || options[key] || defaults[key];
+				}
+			});
+			
+			
 			return _params;
 		};
 
@@ -162,7 +195,10 @@
 			pageOut.classList.remove("in");
 			// if reverse direction
 			pageOut.classList[back? "add": "remove"]("reverse");
-			
+			// do fallback every time
+			var fallback = params_out.fallback;
+			if (typeof fallback == "string") fallback = params_out.root[fallback];
+			if (typeof fallback == "function") fallback(pageInto, pageOut, options.response);
 		}
 		if (pageInto != null && pageInto.classList) {		
 			// for title change

test/callback/index.html

@@ -19,6 +19,7 @@ <h2>主页</h2>
         <li><a href="#page1">页面1</a></li>
         <li><a href="#page2">页面2</a></li>
         <li><a href="#page3">页面3</a></li>
+        <li><a href="#page4">页面4 - mergeCallback测试</a></li>
     </ul>
     <ul>
         <li><a href="../index.html" data-ajax="false">&laquo; 返回测试引导首页</a></li>
@@ -37,6 +38,11 @@ <h2>主页</h2>
     <a href="#pageHome" data-rel="back">&laquo;返回3</a>
     <p class="text-shadow">预期效果为每次动画载入随机灰度背景色</p> 
 </div>
+<div id="page4" class="page out" data-root="window" data-fallback="fallbackJoin">
+    <a href="#pageHome" data-rel="back">&laquo;返回4</a>
+    <div><input type="checkbox" id="mergeCallback" checked style="width:16px; height:16px;"><label for="mergeCallback">mergeCallback为true</label></div>
+    <p></p> 
+</div>
 
 <script src="../../src/mobilebone.js"></script>
 <script>
@@ -74,6 +80,23 @@ <h2>主页</h2>
 };
 
 Mobilebone.rootTransition = FUN;
+
+var flag_fallback = "not";
+Mobilebone.fallback = function(pagein, pageout) {
+	if (pageout.id == "page4") {
+		flag_fallback = "page4";
+	} else {
+		flag_fallback = "not";
+	}
+};
+var fallbackJoin = function(pagein, pageout) {
+	flag_fallback += '-merge';
+	pageout.querySelector("p").innerHTML = flag_fallback;
+};
+
+document.getElementById("mergeCallback").onclick = function() {
+	Mobilebone.mergeCallback = Boolean(this.checked);
+};
 </script>
 </body>
 </html>