Merge pull request #139 from zhangxinxu/develop

Develop

Author: zhangxinxu

docs/Mobilebone.createPage.html

@@ -18,10 +18,29 @@ <h3>参数</h3>
         <ul>
             <li><code>dom_or_html</code> DOM元素或字符串。必须参数。生成创建页面的主内容。</li>
             <li><code>element_or_options</code> DOM元素或者对象。可选参数，可以是<code>&lt;a></code>元素，page元素，也可以是第3个<code>options</code>参数。此参数主要用来获得触发元素上绑定的一些属性值，例如<code>data-title</code>。</li>
-            <li><code>options</code> 键值序列对象。可选参数。此参数多内部触发，基本上来自Ajax请求的参数。主要作用是获得response返回数据。</li>
+            <li><code>options</code> 键值序列对象。可选参数。</li>
         </ul>
         <h3>返回值</h3>
         <p>-</p>
+        <h3>更多说明 <time>(add on 2015-05-04)</time></h3>
+        <ol>
+        	<li>当<code>options</code>参数缺省的时候，第二个参数<code>element_or_options</code>可以作为<code>options</code>参数使用；</li>
+            <li>目前，常用<code>options</code>选项有：
+                <ul>
+                    <li><code>options.history</code> 是否增加历史记录；</li>
+                    <li><code>options.remove</code> 是否移除重复的页面元素；</li>
+                    <li><code>options.target</code> 点击触发过场的元素；</li>
+                </ul>
+                <p>其他选项，还包括：</p>
+                <ul>
+                    <li><code>options.title</code> 新页面标题；</li>
+                    <li><code>options.container</code> 装载新页面的容器；</li>
+                    <li><code>options.classPage</code> 内切换的类名；</li>
+                    <li><code>options.back</code> 布尔型。是否过场是返回类型；</li>
+                </ul>
+                
+            </li>
+        </ol>
         <h3>使用示例</h3>
         <pre>Mobilebone.createPage(pageDom);
 Mobilebone.createPage(generalDom);

docs/Mobilebone.evalScript.html

@@ -21,13 +21,40 @@ <h3>使用</h3>
         <h3>效果</h3>
         <p>Ajax请求的HTML字符串中内联的script脚本会执行。</p>
         <h3>其他说明</h3>
-        <ul>
+        <ol>
         	<li>只会执行内联JS脚本，<code>src</code>外链JS忽略。如下面会执行：
                 <pre>&lt;script>console.log("script excuted!");&lt;/script></pre>
                 <p>但是下面这个1.js会忽略：</p>
                 <pre>&lt;script src="1.js">&lt;/script></pre>
+                <p>如果你需要外链JS执行，可以使用内联JS做处理，例如：</p>
+                <pre>var script = document.createElement("script");
+script.src = "a.js";
+document.body.appendChild(script);</pre>
             </li>
-        </ul>
+            <li><time>(add on 2015-05-04)</time> 关于脚本执行的时机。内联JavaScript在页面即将载入的一瞬间就会进行。注意，此时可能存在两个结构和ID均一致的页面，例如，从分页1页面切换到分页2页面，此时，例如，给某元素绑定事件，例如：
+            	<pre>document.getElementById("test").addEventListener("click", function() {
+    console.log("clicked!");	
+});	</pre>
+				<p>则，绑定的事件可能在之前一个元素上。然后造成新页面元素没事件，之前页面元素重复绑定。</p>
+                <p>避免此问题方法很多（测试页面<code>/test/ajax-html/index.html</code>均有示意）：</p>
+                <ol>
+                	<li>加一个延迟，例如350毫秒。</li>
+                    <li>使用Mobilebone内置回调方法，例如<code>animationend</code>, 或者<code>onpagefirstinto</code>的参数限制（如下）：
+                    	<pre>var fun_firstinto = function(pagein) {
+    pagein.querySelector("#test").addEventListener("click", function() {
+        console.log("clicked!");	
+    });
+}</pre>
+						<p>这样，事件就准确绑定在对应页面元素上了！</p>
+                    </li>
+                    <li>
+                    	或者使用动态id，如：<pre>id="test&lt;?php echo $_GET['id']; ?&gt;
+                        
+document.getElementById("test&lt;?php echo $_GET['id']; ?&gt;")</pre>
+                    </li>
+                </ol>
+            </li>
+        </ol>
     </div>
 </div>
 

docs/data-callbackKeys.html

@@ -16,12 +16,12 @@ <h2>data-callbackKeys</h2>
         <p>这里的<code>callbackKeys</code>只是一种统称，实际没有这个自定义属性的，指的是一系列回调写法，因为除了长相不一样，其他都类似，所以合在一起讲了。</p>
         <p>其家庭成员包括：</p>
         <ul>
-        	<li>data-onpagefirstinto</li>
-        	<li>data-callback</li>
-            <li>data-fallback</li>
-            <li>data-animationstart</li>
-            <li>data-animationend</li>
-            <li>data-preventdefault</li>
+        	<li><code>data-onpagefirstinto</code> 页面第一次载入执行，过场刚开始即执行。</li>
+        	<li><code>data-callback</code> 页面每次进入都会执行，过场刚开始即执行。</li>
+            <li><code>data-fallback</code> 页面每次离开都会执行，过场刚开始即执行。</li>
+            <li><code>data-animationstart</code> 页面动画即将开始执行的回调，离开页面，进入页面均会触发。</li>
+            <li><code>data-animationend</code> 页面动画结束之后执行的回调，离开页面，进入页面均会触发。</li>
+            <li><code>data-preventdefault</code> 介入回调，可以用来中断Mobilebone的一些默认行为，再过场等行为触发之前实现一些自定义行为。</li>
         </ul>
         <p>每个回调的作用于使用场景可参见博文说明：<a href="http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/" class="link">点击这里</a>。</p>
         <p>其中，<code>data-preventdefault</code>并非<code>page</code>元素专有，<code>a</code>元素，<code>form</code>元素也支持此回调，具体可<a href="data-preventDefault.html" class="link">点击这里</a>。</p>

docs/docs.css

@@ -4,6 +4,7 @@ body { line-height: 1.5; font-size: 14px; font-family: "Helvetica Neue", Helveti
 	-ms-touch-action: auto;
 }
 a { text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
+time { opacity: .75; }
 aside { position: absolute; left: 0; top: 0; bottom: 0; width: 250px; background-color: #0C121A; box-shadow: 2px 0 1px rgba(0,0,0,.3); color: #fff; overflow: auto; z-index: 1; }
 aside > h2 { font-size: 1.2em; }
 aside a { display: block; padding: 5px 10px; color: #fff; position: relative; }

package.json

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

src/mobilebone.js

@@ -31,6 +31,9 @@
 	// Is it a id selector
 	var isSimple = /^#?\w+(?:[\-_]\w+)*$/i;
 
+	// Is it webkit
+	var isWebkit = 'WebkitAppearance' in document.documentElement.style || typeof document.webkitHidden != "undefined";
+	
 	// Is it suppory history API
 	var supportHistory = "pushState" in history && "replaceState" in history;
 
@@ -43,7 +46,7 @@
 	 *
 	 * @type string
 	**/
-	Mobilebone.VERSION = '2.5.4';
+	Mobilebone.VERSION = '2.5.5';
 
 	/**
 	 * Whether catch attribute of href from element with tag 'a'
@@ -262,6 +265,9 @@
 				// if reverse direction
 				pageOut.classList[back? "add": "remove"]("reverse");
 
+				// add on v2.5.5
+				pageOut.removeSelf = null;
+				
 				// do fallback every time
 				var fallback = params_out.fallback;
 				if (typeof fallback == "string") fallback = params_out.root[fallback];
@@ -295,16 +301,21 @@
 			}
 			var relid = store["_" + pageid];
 			if (options.remove !== false && store[pageid] && store[pageid] != pageInto && store[pageid].parentElement) {
-				store[pageid].parentElement.removeChild(store[pageid]);
-				delete store[pageid];
 				// hashid may store the same page, we should delete also
 				// when data-reload not 'false' or null
 				// v2.4.4+
 				if (relid && store[relid] && options.reload == true) {
 					delete store[relid];
 					delete store["_" + pageid];
 				}
-			}
+				if (store[pageid] != pageOut) {
+					store[pageid].parentElement.removeChild(store[pageid]);					
+				} else {
+					pageOut.removeSelf = true;
+				}
+				delete store[pageid];
+			}	
+			
 
 			// do transition
 			if (pageOut) pageInto.classList.add(params_in.form);
@@ -320,7 +331,9 @@
 
 			// do callback when come in first time
 			var onpagefirstinto = params_in.onpagefirstinto;
-			if (!store[pageid] && !store[hashid]) {
+			// first judge change to pageInto store
+			// v2.5.5 add for fix issues #138
+			if (!pageInto.firstintoBind) {
 				if (typeof onpagefirstinto == "string" && params_in.root[onpagefirstinto]) {
 					params_in.root[onpagefirstinto](pageInto, pageOut, options);
 				} else if (typeof onpagefirstinto == "function") {
@@ -329,11 +342,12 @@
 				// capture form submit
 				slice.call(pageInto.querySelectorAll("form")).forEach(function(form) {
 					Mobilebone.submit(form);
-				});		
+				});	
+				
+				pageInto.firstintoBind = true;
 			}
 
 			// do callback when animation start/end
-			var isWebkit = 'WebkitAppearance' in document.documentElement.style || typeof document.webkitHidden != "undefined";
 			["animationstart", "animationend"].forEach(function(animationkey, index) {
 				var animition = params_in[animationkey], webkitkey = "webkit" + animationkey.replace(/^a|s|e/g, function(matchs) {
 					return matchs.toUpperCase();
@@ -346,6 +360,12 @@
 							this.style.display = "none";
 						}
 						this.classList.remove(params(this).form);
+						
+						// add on v2.5.5
+						if (this.removeSelf == true) {
+							this.parentElement.removeChild(this);	
+							this.removeSelf = null;		
+						}
 					});
 					// bind animation events
 					if (typeof animition == "string" && params_in.root[animition]) {
@@ -529,6 +549,9 @@
 		// 'eleOrObj' can '.page element', or 'a element', or 'options'
 		// basically, options = ajax options, of course, u can custom it!		
 		if (!domHtml) return;
+		if (typeof options == "undefined" && typeof eleOrObj == "object") {
+			options = eleOrObj;
+		}
 		options = options || {};
 
 		// 'options' that 'Mobilebone.transition()' needs
@@ -584,7 +607,7 @@
 		}
 
 		// excute inline JavaScript
-		if (Mobilebone.evalScript == true) {
+		if (Mobilebone.evalScript == true && domHtml.firstintoBind != true) {
 			slice.call(create.getElementsByTagName("script")).forEach(function(originScript) {
 				var scriptContent = originScript.innerHTML.trim(), type = originScript.getAttribute("type");
 				if (scriptContent.trim() == "" || originScript.src) return;
@@ -595,9 +618,10 @@
 				setTimeout(function() {
 					head.insertBefore(script, head.firstChild);
 					head.removeChild(script);
-				}, 16);
+					script = null;
+				}, 17);
 				originScript = null;
-			});	
+			});
 		}
 
 		var create_title = create.getElementsByTagName("title")[0];
@@ -639,6 +663,7 @@
 			optionsTransition.history = false;
 			optionsTransition.classPage = classPage;
 		}
+		
 		// do transition
 		this.transition(create_page, current_page, optionsTransition);
 	};
@@ -1195,7 +1220,7 @@
 		} else {
 			page_in = store[hash];
 
-			if (isSimple.test(hash) == false) {
+			if (page_in && isSimple.test(hash) == false) {
 				// ajax store
 				Mobilebone.createPage(page_in, {
 					url: hash,

test/ajax-html/index.html

@@ -72,8 +72,12 @@
 		location.href = this.href;
 	});
 };
-var page_root_first = function() {
-	// console.log("root?");
+var page_root_first = function(pageinto) {
+	console.log("firstinto excuted!");
+	pageinto.querySelector("#ajaxFirstInto").addEventListener("click", function() {
+		console.log("should console only once!");
+		this.style.color = "#" + (Math.random() + "").slice(-6)	;
+	});
 };
 
 Mobilebone.evalScript = true;

test/ajax-html/root-reload.php

@@ -7,16 +7,21 @@
 <body>
 <div class="page out" data-callback="root_reload" data-onpagefirstinto="page_root_first">
 	<p>document.getElementById("idShow").innerHTML是：<strong id="idShow">&nbsp;</strong>，应该结果是<strong id="idShould"><?php echo $_GET['id']; ?></strong>.</p>
+    <p><button id="ajaxFirstInto">pagefirstinto与Ajax载入测试</button></p>
 	<ul>
-        <li><a href="#pageHome" id="scriptTest" data-rel="back" data-ajax="true">返回</a></li>
+        <li><a href="#pageHome" id="scriptTest<?php echo $_GET['id']; ?>" data-rel="back" data-ajax="true">返回</a></li>
         <li><a href="root-reload.php?id=8" data-ajax="true">id不一样的页面</a></li>
     </ul>
     <script>
-	document.getElementById("scriptTest").style.backgroundColor = "#" + (Math.random() + "").slice(-6);
-	document.getElementById("idShow").parentNode.addEventListener("touchstart", function() {
-		document.getElementById("scriptTest").style.backgroundColor = "#" + (Math.random() + "").slice(-6);	
-	});
-	console.log("script excuted!");
+	document.getElementById("scriptTest<?php echo $_GET['id']; ?>").style.backgroundColor = "#" + (Math.random() + "").slice(-6);
+	setTimeout(function() {
+		
+		document.getElementById("idShow").parentNode.addEventListener("touchstart", function() {
+			console.log("inline script should once!");
+			document.getElementById("scriptTest").style.backgroundColor = "#" + (Math.random() + "").slice(-6);	
+		});	
+	}, 350);
+	console.log("<?php echo $_GET['id']; ?>: script excuted!");
 	</script>
     <script type="text/template">
 	console.log("should not excute!");