297 lines
10 KiB
JavaScript
297 lines
10 KiB
JavaScript
/**
|
|
* Created by jf on 2015/9/11.
|
|
* Modified by bear on 2016/9/7.
|
|
*/
|
|
$(function () {
|
|
var pageManager = {
|
|
$container: $('#container'),
|
|
_pageStack: [],
|
|
_configs: [],
|
|
_pageAppend: function(){},
|
|
_defaultPage: null,
|
|
_pageIndex: 1,
|
|
setDefault: function (defaultPage) {
|
|
this._defaultPage = this._find('name', defaultPage);
|
|
return this;
|
|
},
|
|
setPageAppend: function (pageAppend) {
|
|
this._pageAppend = pageAppend;
|
|
return this;
|
|
},
|
|
init: function () {
|
|
var self = this;
|
|
|
|
$(window).on('hashchange', function () {
|
|
var state = history.state || {};
|
|
var url = location.hash.indexOf('#') === 0 ? location.hash : '#';
|
|
var page = self._find('url', url) || self._defaultPage;
|
|
if (state._pageIndex <= self._pageIndex || self._findInStack(url)) {
|
|
self._back(page);
|
|
} else {
|
|
self._go(page);
|
|
}
|
|
});
|
|
|
|
if (history.state && history.state._pageIndex) {
|
|
this._pageIndex = history.state._pageIndex;
|
|
}
|
|
|
|
this._pageIndex--;
|
|
|
|
var url = location.hash.indexOf('#') === 0 ? location.hash : '#';
|
|
var page = self._find('url', url) || self._defaultPage;
|
|
this._go(page);
|
|
return this;
|
|
},
|
|
push: function (config) {
|
|
this._configs.push(config);
|
|
return this;
|
|
},
|
|
go: function (to) {
|
|
var config = this._find('name', to);
|
|
if (!config) {
|
|
return;
|
|
}
|
|
location.hash = config.url;
|
|
},
|
|
_go: function (config) {
|
|
this._pageIndex ++;
|
|
|
|
history.replaceState && history.replaceState({_pageIndex: this._pageIndex}, '', location.href);
|
|
|
|
var html = $(config.template).html();
|
|
var $html = $(html).addClass('slideIn').addClass(config.name);
|
|
$html.on('animationend webkitAnimationEnd', function(){
|
|
$html.removeClass('slideIn').addClass('js_show');
|
|
});
|
|
this.$container.append($html);
|
|
this._pageAppend.call(this, $html);
|
|
this._pageStack.push({
|
|
config: config,
|
|
dom: $html
|
|
});
|
|
|
|
if (!config.isBind) {
|
|
this._bind(config);
|
|
}
|
|
|
|
return this;
|
|
},
|
|
back: function () {
|
|
history.back();
|
|
},
|
|
_back: function (config) {
|
|
this._pageIndex --;
|
|
|
|
var stack = this._pageStack.pop();
|
|
if (!stack) {
|
|
return;
|
|
}
|
|
|
|
var url = location.hash.indexOf('#') === 0 ? location.hash : '#';
|
|
var found = this._findInStack(url);
|
|
if (!found) {
|
|
var html = $(config.template).html();
|
|
var $html = $(html).addClass('js_show').addClass(config.name);
|
|
$html.insertBefore(stack.dom);
|
|
|
|
if (!config.isBind) {
|
|
this._bind(config);
|
|
}
|
|
|
|
this._pageStack.push({
|
|
config: config,
|
|
dom: $html
|
|
});
|
|
}
|
|
|
|
stack.dom.addClass('slideOut').on('animationend webkitAnimationEnd', function () {
|
|
stack.dom.remove();
|
|
});
|
|
|
|
return this;
|
|
},
|
|
_findInStack: function (url) {
|
|
var found = null;
|
|
for(var i = 0, len = this._pageStack.length; i < len; i++){
|
|
var stack = this._pageStack[i];
|
|
if (stack.config.url === url) {
|
|
found = stack;
|
|
break;
|
|
}
|
|
}
|
|
return found;
|
|
},
|
|
_find: function (key, value) {
|
|
var page = null;
|
|
for (var i = 0, len = this._configs.length; i < len; i++) {
|
|
if (this._configs[i][key] === value) {
|
|
page = this._configs[i];
|
|
break;
|
|
}
|
|
}
|
|
return page;
|
|
},
|
|
_bind: function (page) {
|
|
var events = page.events || {};
|
|
for (var t in events) {
|
|
for (var type in events[t]) {
|
|
this.$container.on(type, t, events[t][type]);
|
|
}
|
|
}
|
|
page.isBind = true;
|
|
}
|
|
};
|
|
|
|
function fastClick(){
|
|
var supportTouch = function(){
|
|
try {
|
|
document.createEvent("TouchEvent");
|
|
return true;
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
}();
|
|
var _old$On = $.fn.on;
|
|
|
|
$.fn.on = function(){
|
|
if(/click/.test(arguments[0]) && typeof arguments[1] == 'function' && supportTouch){ // 只扩展支持touch的当前元素的click事件
|
|
var touchStartY, callback = arguments[1];
|
|
_old$On.apply(this, ['touchstart', function(e){
|
|
touchStartY = e.changedTouches[0].clientY;
|
|
}]);
|
|
_old$On.apply(this, ['touchend', function(e){
|
|
if (Math.abs(e.changedTouches[0].clientY - touchStartY) > 10) return;
|
|
|
|
e.preventDefault();
|
|
callback.apply(this, [e]);
|
|
}]);
|
|
}else{
|
|
_old$On.apply(this, arguments);
|
|
}
|
|
return this;
|
|
};
|
|
}
|
|
function preload(){
|
|
$(window).on("load", function(){
|
|
var imgList = [
|
|
"./images/layers/content.png",
|
|
"./images/layers/navigation.png",
|
|
"./images/layers/popout.png",
|
|
"./images/layers/transparent.gif"
|
|
];
|
|
for (var i = 0, len = imgList.length; i < len; ++i) {
|
|
new Image().src = imgList[i];
|
|
}
|
|
});
|
|
}
|
|
function androidInputBugFix(){
|
|
// .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
|
|
// 相关 issue: https://github.com/weui/weui/issues/15
|
|
// 解决方法:
|
|
// 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题
|
|
// 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
|
|
// Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
|
|
if (/Android/gi.test(navigator.userAgent)) {
|
|
window.addEventListener('resize', function () {
|
|
if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
|
|
window.setTimeout(function () {
|
|
document.activeElement.scrollIntoViewIfNeeded();
|
|
}, 0);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
function setJSAPI(){
|
|
var option = {
|
|
title: 'WeUI, 为微信 Web 服务量身设计',
|
|
desc: 'WeUI, 为微信 Web 服务量身设计',
|
|
link: "https://weui.io",
|
|
imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
|
|
};
|
|
|
|
$.getJSON('https://weui.io/api/sign?url=' + encodeURIComponent(location.href.split('#')[0]), function (res) {
|
|
wx.config({
|
|
beta: true,
|
|
debug: false,
|
|
appId: res.appid,
|
|
timestamp: res.timestamp,
|
|
nonceStr: res.nonceStr,
|
|
signature: res.signature,
|
|
jsApiList: [
|
|
'onMenuShareTimeline',
|
|
'onMenuShareAppMessage',
|
|
'onMenuShareQQ',
|
|
'onMenuShareWeibo',
|
|
'onMenuShareQZone',
|
|
// 'setNavigationBarColor',
|
|
'setBounceBackground'
|
|
]
|
|
});
|
|
wx.ready(function () {
|
|
/*
|
|
wx.invoke('setNavigationBarColor', {
|
|
color: '#F8F8F8'
|
|
});
|
|
*/
|
|
wx.invoke('setBounceBackground', {
|
|
'backgroundColor': '#F8F8F8',
|
|
'footerBounceColor' : '#F8F8F8'
|
|
});
|
|
wx.onMenuShareTimeline(option);
|
|
wx.onMenuShareQQ(option);
|
|
wx.onMenuShareAppMessage({
|
|
title: 'WeUI',
|
|
desc: '为微信 Web 服务量身设计',
|
|
link: location.href,
|
|
imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
|
|
});
|
|
});
|
|
});
|
|
}
|
|
function setPageManager(){
|
|
var pages = {}, tpls = $('script[type="text/html"]');
|
|
var winH = $(window).height();
|
|
|
|
for (var i = 0, len = tpls.length; i < len; ++i) {
|
|
var tpl = tpls[i], name = tpl.id.replace(/tpl_/, '');
|
|
pages[name] = {
|
|
name: name,
|
|
url: '#' + name,
|
|
template: '#' + tpl.id
|
|
};
|
|
}
|
|
pages.home.url = '#';
|
|
|
|
for (var page in pages) {
|
|
pageManager.push(pages[page]);
|
|
}
|
|
pageManager
|
|
.setPageAppend(function($html){
|
|
var $foot = $html.find('.page__ft');
|
|
if($foot.length < 1) return;
|
|
|
|
if($foot.position().top + $foot.height() < winH){
|
|
$foot.addClass('j_bottom');
|
|
}else{
|
|
$foot.removeClass('j_bottom');
|
|
}
|
|
})
|
|
.setDefault('home')
|
|
.init();
|
|
}
|
|
|
|
function init(){
|
|
preload();
|
|
fastClick();
|
|
androidInputBugFix();
|
|
setJSAPI();
|
|
setPageManager();
|
|
|
|
window.pageManager = pageManager;
|
|
window.home = function(){
|
|
location.hash = '';
|
|
};
|
|
}
|
|
init();
|
|
}); |