Skip to content

Commit ce50655

Browse files
zhangxinxuzhangxinxu
committed
Merge pull request #164 from zhangxinxu/develop
Develop
2 parents b53f555 + 30293c9 commit ce50655

14 files changed

+223
-81
lines changed

‎docs/Mobilebone.handleTapEvent.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,16 @@
1212
<aside></aside>
1313
<div class="page out">
1414
<div class="content">
15-
<h2>Mobilebone.handleTapEvent(event)</h2>
16-
<p>一般用在自定义事件方法上，类似：<pre>document.body.addEventListener('myCustomTapEvent', Mobilebone.handleTapEvent, false);</pre></p>
15+
<h2>Mobilebone.handleTapEvent(event|element)</h2>
16+
<p><del>一般用在自定义事件方法上，类似：</del><pre><del>document.body.addEventListener('myCustomTapEvent', Mobilebone.handleTapEvent, false);</del></pre></p>
1717
<h3>参数</h3>
1818
<ul>
19-
<li><code>event</code> event对象。</li>
19+
<li><code>event</code> event对象或者<span style="color:#cd0000;">(v2.6.0+新增)</span> 也可以是元素对象，例如<code>&lt;a&gt;</code>元素，原生DOM对象，相当于执行点击该元素的行为表现。</li>
2020
</ul>
2121
<h3>使用示意</h3>
2222
<pre>document.body.addEventListener('myCustomTapEvent', Mobilebone.handleTapEvent, false);</pre>
23+
<p>v2.6.0+新增</p>
24+
<pre>Mobilebone.handleTapEvent(page.querySelector("a.btn"));</pre>
2325
</div>
2426
</div>
2527

‎docs/data-callbackKeys.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,13 @@ <h3>补充说明(<time>2015-04-15</time>)</h3>
3333
<pre>&lt;a href="load.html?id=111">页面111&lt;/a></pre>
3434
<p>111可能是你想传递的参数，然后，就可以通过下面一行脚本获得：</p>
3535
<pre>var id = options.target.href.replace(/\D/g, "");</pre>
36+
<h3>补充于2015-05-30(v2.5.8)</h3>
37+
<p>尤其当使用<code>data-callback</code>和<code>data-fallback</code>处理一些回调的时候，有可能前后两个页面结构一致，数据不一样，就很有可能出现<code>id</code>一致的情况，如果单纯使用<code>$("#ID")</code>或<code>document.querySelector("#ID")</code>, 则得到的元素并不是新页面你希望选择的元素。怎么办，请使用回调方法中的页面参数作为容器去获取对应的元素，例如：</p>
38+
<pre>Mobilebone.callback = function(<span style="color:#cd0000;">pagein</span>) {
39+
<del style="color:green;">// NOT: var element = document.querySelector("#ID");</del>
40+
var element = <span style="color:#cd0000;">pagein</span>.querySelector("#ID");
41+
<span style="color:green;">// do sth by using elememt...</span>
42+
};</pre>
3643
</div>
3744
</div>
3845

‎docs/data-classPage.html

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<div class="page out">
1414
<div class="content">
1515
<h2>data-classPage (v2.3.0+)</h2>
16-
<p>内部过场（局部过场）效果的关键类名，性质等同于全局的<code>Mobilebone.classPage</code>.</p>
16+
<p>内部过场（局部过场）效果的关键类名，性质等同于全局的<code>Mobilebone.classPage</code>，v2.6.0+支持ajax局部过场.</p>
1717
<h3>使用</h3>
1818
<p>此参数若想要生效，必须和<a href="data-container.html" data-rel="auto" class="link">data-container</a>配合使用。</p>
1919
<p>例如，下面这个选项卡效果：</p>
@@ -66,11 +66,7 @@ <h3>使用</h3>
6666
if (eleAcive) eleAcive.classList.remove("active");
6767
if (target) target.classList.add("active");
6868
};</pre>
69-
<p>非<code>page</code>页面的过场效果是不会触发<code>history</code>变化的，其他规则跟主<code>page</code>切换一致，包括各种回调接口的使用等等。</p>
70-
71-
72-
73-
69+
<p>非<code>page</code>页面的过场效果是不会触发<code>history</code>变化的，也不会改变页面的<code>title</code>(v2.6.0+), 其他规则跟主<code>page</code>切换一致，包括各种回调接口的使用等等。</p>
7470
</div>
7571
</div>
7672

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mobilebone",
3-
"version": "2.5.7",
3+
"version": "2.6.0",
44
"description": "Bone main for mobile web APP with a sigle page mode.",
55
"main": "src/mobilebone.js",
66
"directories": {

‎src/mobilebone.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,12 @@ html, body, .page {
7474
}
7575

7676
/* Default animation - slide, you can visit 'src/mobilebone.aniamte.css' to get more styles of animation */
77+
.slide.out, .slide.in {
78+
-webkit-animation-timing-function: ease-out;
79+
-webkit-animation-duration: 250ms;
80+
animation-timing-function: ease-out;
81+
animation-duration: 250ms;
82+
}
7783
.slide.in {
7884
-webkit-animation-name: slideinfromright;
7985
animation-name: slideinfromright;

‎src/mobilebone.js

Lines changed: 103 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
*
4747
* @type string
4848
**/
49-
Mobilebone.VERSION = '2.5.7';
49+
Mobilebone.VERSION = '2.6.0';
5050

5151
/**
5252
* Whether catch attribute of href from element with tag 'a'
@@ -252,6 +252,43 @@
252252
return false;
253253
}
254254

255+
// set animation callback as a method
256+
var fun_animationCall = function(page, data) {
257+
if (page.flagAniBind == true) return;
258+
// do callback when animation start/end
259+
["animationstart", "animationend"].forEach(function(animationkey, index) {
260+
var animition = params_in[animationkey], webkitkey = "webkit" + animationkey.replace(/^a|s|e/g, function(matchs) {
261+
return matchs.toUpperCase();
262+
});
263+
var animateEventName = isWebkit? webkitkey: animationkey;
264+
// if it's the out element, hide it when 'animationend'
265+
index && page.addEventListener(animateEventName, function() {
266+
if (this.classList.contains("in") == false) {
267+
this.style.display = "none";
268+
// add on v2.5.5
269+
// move here on v2.5.8
270+
if (this.removeSelf == true) {
271+
this.parentElement.removeChild(this);
272+
this.removeSelf = null;
273+
}
274+
}
275+
this.classList.remove(params(this).form);
276+
});
277+
// bind animation events
278+
if (typeof animition == "string" && params_in.root[animition]) {
279+
page.addEventListener(animateEventName, function() {
280+
data.root[animition].call(data.root, this, this.classList.contains("in")? "into": "out", options);
281+
});
282+
} else if (typeof animition == "function") {
283+
page.addEventListener(animateEventName, function() {
284+
animition.call(data.root, this, this.classList.contains("in")? "into": "out", options);
285+
});
286+
}
287+
// set a flag
288+
page.flagAniBind = true;
289+
});
290+
};
291+
255292
if (pageOut != null && pageOut.classList) {
256293
// do transition if there are no 'prevent'
257294
if (isPreventOut != true) {
@@ -266,7 +303,11 @@
266303
pageOut.classList[back? "add": "remove"]("reverse");
267304

268305
// add on v2.5.5
269-
pageOut.removeSelf = null;
306+
pageOut.removeSelf = pageOut.removeSelf || null;
307+
308+
// set animation callback for 'pageInto'
309+
// for issues #153
310+
fun_animationCall(pageOut, params_out);
270311

271312
// do fallback every time
272313
var fallback = params_out.fallback;
@@ -282,7 +323,7 @@
282323
first_page = document.querySelector("." + this.classPage);
283324

284325
// do title change
285-
if (title) {
326+
if (title && options.title !== false) {
286327
document.title = title;
287328
if (header) {
288329
header.innerHTML = title;
@@ -300,16 +341,23 @@
300341
pageid = pageid.split("?")[0];
301342
}
302343
var relid = store["_" + pageid];
303-
if (options.remove !== false && store[pageid] && store[pageid] != pageInto && store[pageid].parentElement) {
344+
345+
if (options.remove !== false && store[pageid] && store[pageid] != pageInto) {
304346
// hashid may store the same page, we should delete also
305347
// when data-reload not 'false' or null
306348
// v2.4.4+
307349
if (relid && store[relid] && options.reload == true) {
308350
delete store[relid];
309351
delete store["_" + pageid];
310352
}
353+
354+
if (options.reload == true) {
355+
// v2.5.8 for issues #147
356+
pageInto.removeSelf = true;
357+
}
358+
311359
if (store[pageid] != pageOut) {
312-
store[pageid].parentElement.removeChild(store[pageid]);
360+
store[pageid].parentElement && store[pageid].parentElement.removeChild(store[pageid]);
313361
} else {
314362
pageOut.removeSelf = true;
315363
}
@@ -347,38 +395,8 @@
347395
pageInto.firstintoBind = true;
348396
}
349397

350-
// do callback when animation start/end
351-
["animationstart", "animationend"].forEach(function(animationkey, index) {
352-
var animition = params_in[animationkey], webkitkey = "webkit" + animationkey.replace(/^a|s|e/g, function(matchs) {
353-
return matchs.toUpperCase();
354-
});
355-
if (!store[pageid]) {
356-
var animateEventName = isWebkit? webkitkey: animationkey;
357-
// if it's the out element, hide it when 'animationend'
358-
index && pageInto.addEventListener(animateEventName, function() {
359-
if (this.classList.contains("in") == false) {
360-
this.style.display = "none";
361-
}
362-
this.classList.remove(params(this).form);
363-
364-
// add on v2.5.5
365-
if (this.removeSelf == true) {
366-
this.parentElement.removeChild(this);
367-
this.removeSelf = null;
368-
}
369-
});
370-
// bind animation events
371-
if (typeof animition == "string" && params_in.root[animition]) {
372-
pageInto.addEventListener(animateEventName, function() {
373-
params_in.root[animition].call(params_in.root, this, this.classList.contains("in")? "into": "out", options);
374-
});
375-
} else if (typeof animition == "function") {
376-
pageInto.addEventListener(animateEventName, function() {
377-
animition.call(params_in.root, this, this.classList.contains("in")? "into": "out", options);
378-
});
379-
}
380-
}
381-
});
398+
// set animation callback for 'pageInto'
399+
fun_animationCall(pageInto, params_in);
382400

383401
// history
384402
// hashid should a full url address
@@ -580,6 +598,11 @@
580598
// v2.5.2
581599
// is back? for issues #128
582600
optionsTransition.back = eleOrObj.getAttribute("data-rel") == "back";
601+
602+
// v2.6.0 history
603+
if (eleOrObj.getAttribute("data-history") == "false") {
604+
optionsTransition.history = false;
605+
}
583606
} else {
584607
response = eleOrObj.response || options.response;
585608
page_title = eleOrObj.title || options.title;
@@ -660,6 +683,9 @@
660683
if (typeof options.target != "undefined") {
661684
optionsTransition.target = options.target;
662685
}
686+
if (typeof options.title != "undefined") {
687+
optionsTransition.title = options.title;
688+
}
663689
}
664690
if (classPage == classPageInside) {
665691
optionsTransition.history = false;
@@ -756,7 +782,18 @@
756782
params.type = aOrFormOrObj.method;
757783

758784
formData = new FormData(aOrFormOrObj);
759-
}
785+
} else if (tagName == "a") {
786+
// v2.5.8 for issues #157
787+
var idContainer = aOrFormOrObj.getAttribute("data-container"),
788+
classPageInside = aOrFormOrObj.getAttribute("data-classpage"),
789+
container = idContainer && document.getElementById(idContainer);
790+
if (container && classPageInside && classPageInside != Mobilebone.classPage) {
791+
// inner ajax no history change
792+
params.history = false;
793+
// title do not change
794+
params.title = false;
795+
}
796+
}
760797

761798
// get mask element
762799
attr_mask = aOrFormOrObj.getAttribute("data-mask");
@@ -784,8 +821,9 @@
784821

785822
// do ajax
786823
// get mask and loading element
824+
var body = container || document.body;
787825
if (typeof attr_mask != "string") {
788-
ele_mask = document.querySelector("body > ." + this.classMask);
826+
ele_mask = body.querySelector("." + this.classMask);
789827
}
790828
if (ele_mask == null) {
791829
ele_mask = document.createElement("div");
@@ -794,11 +832,11 @@
794832
if (typeof attr_mask == "string") {
795833
aOrFormOrObj.appendChild(ele_mask);
796834
} else {
797-
document.body.appendChild(ele_mask);
835+
body.appendChild(ele_mask);
798836
}
799837
}
800838
// show loading
801-
ele_mask.style.visibility = "visible";
839+
ele_mask.style.display = "block";
802840

803841
// ajax request
804842
var xhr = new XMLHttpRequest();
@@ -821,10 +859,12 @@
821859
}
822860
} else if (params.dataType == "unknown") {
823861
// ajax send by url
824-
// no history hush
825-
// no element remove
862+
// no history hush
826863
params.history = false;
827-
params.remove = false;
864+
// I don't remember why add 'params.remove = false' here,
865+
// but it seems that this will cause issues #147
866+
// no element remove
867+
// del → v2.5.8 // params.remove = false;
828868
try {
829869
// as json
830870
response = JSON.parse(xhr.response);
@@ -849,21 +889,21 @@
849889
params.complete.call(params, xhr, xhr.status);
850890

851891
// hide loading
852-
ele_mask.style.visibility = "hidden";
892+
ele_mask.style.display = "none";
853893
}
854894

855895
xhr.onerror = function(e) {
856896
params.message = "Illegal request address or an unexpected network error!";
857897
params.error.call(params, xhr, xhr.status);
858898
// hide loading
859-
ele_mask.style.visibility = "hidden";
899+
ele_mask.style.display = "none";
860900
}
861901

862902
xhr.ontimeout = function() {
863903
params.message = "The request timeout!";
864904
params.error.call(params, xhr, xhr.status);
865905
// hide loading
866-
ele_mask.style.visibility = "hidden";
906+
ele_mask.style.display = "none";
867907
};
868908

869909
// set request header for server
@@ -1017,7 +1057,7 @@
10171057
/**
10181058
* If 'a' element has href, slide auto when tapping~
10191059
**/
1020-
Mobilebone.handleTapEvent = function(event) {
1060+
Mobilebone.handleTapEvent = function(event) {
10211061
/**
10221062
// iscroll(set tap: true) may cause twice tap problem
10231063
// which is none of Mobilebone's business
@@ -1033,8 +1073,14 @@
10331073
}
10341074
store.timerTap = Date.now();
10351075
*/
1076+
var target = null;
1077+
// you can pass target as params directly
1078+
if (event && event.nodeType == 1) {
1079+
target = event;
1080+
target.preventDefault = function() {};
1081+
}
10361082
// get target and href
1037-
var target = event.target || event.touches[0], href = target.href;
1083+
target = target || event.target || event.touches[0], href = target.href;
10381084
if ((!href || /a/i.test(target.tagName) == false) && (target = target.getParentElementByTag("a"))) {
10391085
href = target.href;
10401086
}
@@ -1061,7 +1107,7 @@
10611107

10621108
// if mask element exist and displaying, prevent double trigger
10631109
var ele_mask = target.getElementsByClassName(Mobilebone.classMask)[0];
1064-
if (ele_mask && ele_mask.style.visibility != "hidden") {
1110+
if (ele_mask && ele_mask.style.display != "none") {
10651111
event.preventDefault();
10661112
return false;
10671113
}
@@ -1071,8 +1117,9 @@
10711117
container = idContainer && document.getElementById(idContainer);
10721118
if (container && classPageInside && classPageInside != Mobilebone.classPage) {
10731119
self_page = container.querySelector(".in." + classPageInside) || container.querySelector(classPageInside);
1074-
if (self_page == null) return false;
1120+
// if (self_page == null) return false;
10751121
options.history = false;
1122+
options.title = false;
10761123
options.classPage = classPageInside;
10771124
}
10781125

@@ -1137,8 +1184,11 @@
11371184
back = Mobilebone.isBack(store[clean_url], self_page);
11381185
}
11391186
options.id = clean_url;
1140-
if (document.body.contains(store[clean_url]) == false) {
1141-
document.body.appendChild(store[clean_url]);
1187+
1188+
var body = container || document.body;
1189+
1190+
if (body.contains(store[clean_url]) == false) {
1191+
body.appendChild(store[clean_url]);
11421192
}
11431193
Mobilebone.transition(store[clean_url], self_page, back, options);
11441194
} else {

0 commit comments

Comments
 (0)