修正time过滤器的变量定义;修正触摸模块的适配;修正路由组件的适配
宇天
parent
4684ffa4b8
commit
c0f5d3395c
|
|
@ -5725,7 +5725,9 @@
|
||||||
time: function(str) {
|
time: function(str) {
|
||||||
str = str >> 0
|
str = str >> 0
|
||||||
var s = str % 60
|
var s = str % 60
|
||||||
;(m = Math.floor(str / 60)), (h = Math.floor(m / 60)), (m = m % 60)
|
var m = Math.floor(str / 60)
|
||||||
|
var h = Math.floor(m / 60)
|
||||||
|
m = m % 60
|
||||||
m = m < 10 ? '0' + m : m
|
m = m < 10 ? '0' + m : m
|
||||||
s = s < 10 ? '0' + s : s
|
s = s < 10 ? '0' + s : s
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@ const close = function(id) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const reapeat = function(str, num) {
|
const repeat = function(str, num) {
|
||||||
var idx = 0,
|
var idx = 0,
|
||||||
result = ''
|
result = ''
|
||||||
while (idx < num) {
|
while (idx < num) {
|
||||||
|
|
@ -77,15 +77,15 @@ const fixOffset = function(val) {
|
||||||
return val
|
return val
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const __layer__ = function(conf) {
|
const __layer__ = function(opt) {
|
||||||
if (conf) {
|
if (opt) {
|
||||||
let { yes, no, success } = conf
|
let { yes, no, success } = opt
|
||||||
delete conf.yes
|
delete opt.yes
|
||||||
delete conf.no
|
delete opt.no
|
||||||
delete conf.success
|
delete opt.success
|
||||||
|
|
||||||
this.construct({
|
this.construct({
|
||||||
state: { ...conf },
|
state: { ...opt },
|
||||||
props: { yes, no, success }
|
props: { yes, no, success }
|
||||||
})
|
})
|
||||||
.append()
|
.append()
|
||||||
|
|
@ -130,27 +130,35 @@ const _layer = {
|
||||||
}
|
}
|
||||||
return _layer.open(opt)
|
return _layer.open(opt)
|
||||||
},
|
},
|
||||||
msg: function(msg, conf) {
|
toast: function(content, type, timeout, cb) {
|
||||||
if (typeof conf !== 'object') {
|
// if (typeof opt !== 'object') {
|
||||||
var tmp = conf
|
// var tmp = opt
|
||||||
conf = { timeout: 2500 }
|
// opt = { timeout: 2500 }
|
||||||
if (typeof tmp === 'number') {
|
// if (typeof tmp === 'number') {
|
||||||
conf.icon = tmp
|
// opt.icon = tmp
|
||||||
}
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (typeof type === 'number') {
|
||||||
|
timeout = type
|
||||||
|
type = 'info'
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!conf.hasOwnProperty('timeout')) {
|
// if (!opt.hasOwnProperty('timeout')) {
|
||||||
conf.timeout = 2500
|
// opt.timeout = 2500
|
||||||
|
// }
|
||||||
|
|
||||||
|
let opt = {
|
||||||
|
content: `<mark class="toast-box">${content}</mark>`,
|
||||||
|
menubar: false,
|
||||||
|
mask: false,
|
||||||
|
type: 7,
|
||||||
|
fixed: true
|
||||||
}
|
}
|
||||||
|
|
||||||
conf.specialMode = true //特殊模式
|
opt.toast = true // toast模式
|
||||||
conf.content = '<p class="msg-box">' + msg + '</p>'
|
|
||||||
conf.type = 7
|
return _layer.open(opt)
|
||||||
conf.fixed = true
|
|
||||||
conf.shade = false
|
|
||||||
conf.menubar = false
|
|
||||||
conf.radius = '5px'
|
|
||||||
return _layer.open(conf)
|
|
||||||
},
|
},
|
||||||
loading: function(style, time, cb) {
|
loading: function(style, time, cb) {
|
||||||
style = style >>> 0
|
style = style >>> 0
|
||||||
|
|
@ -174,34 +182,34 @@ const _layer = {
|
||||||
fixed: true
|
fixed: true
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
tips: function(content, container, conf) {
|
tips: function(content, container, opt) {
|
||||||
if (!(container instanceof HTMLElement)) {
|
if (!(container instanceof HTMLElement)) {
|
||||||
return Anot.error('tips类型必须指定一个目标容器')
|
return Anot.error('tips类型必须指定一个目标容器')
|
||||||
}
|
}
|
||||||
if (typeof conf !== 'object') {
|
if (typeof opt !== 'object') {
|
||||||
var tmp = conf
|
var tmp = opt
|
||||||
conf = { timeout: 2500 }
|
opt = { timeout: 2500 }
|
||||||
if (typeof tmp === 'number') {
|
if (typeof tmp === 'number') {
|
||||||
conf.icon = tmp
|
opt.icon = tmp
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!conf.hasOwnProperty('timeout')) {
|
if (!opt.hasOwnProperty('timeout')) {
|
||||||
conf.timeout = 2500
|
opt.timeout = 2500
|
||||||
}
|
}
|
||||||
if (!conf.background) {
|
if (!opt.background) {
|
||||||
conf.background = 'rgba(0,0,0,.5)'
|
opt.background = 'rgba(0,0,0,.5)'
|
||||||
}
|
}
|
||||||
if (!conf.color) {
|
if (!opt.color) {
|
||||||
conf.color = '#fff'
|
opt.color = '#fff'
|
||||||
}
|
}
|
||||||
conf.container = container
|
opt.container = container
|
||||||
conf.content = content
|
opt.content = content
|
||||||
conf.type = 5
|
opt.type = 5
|
||||||
conf.icon = 0
|
opt.icon = 0
|
||||||
conf.fixed = true
|
opt.fixed = true
|
||||||
conf.shade = false
|
opt.shade = false
|
||||||
conf.menubar = false
|
opt.menubar = false
|
||||||
return _layer.open(conf)
|
return _layer.open(opt)
|
||||||
},
|
},
|
||||||
prompt: function(title, yescb) {
|
prompt: function(title, yescb) {
|
||||||
if (typeof yescb !== 'function') {
|
if (typeof yescb !== 'function') {
|
||||||
|
|
@ -226,33 +234,33 @@ const _layer = {
|
||||||
require(['css!./skin/' + skin], callback)
|
require(['css!./skin/' + skin], callback)
|
||||||
},
|
},
|
||||||
close: close,
|
close: close,
|
||||||
open: function(conf) {
|
open: function(opt) {
|
||||||
if (typeof conf === 'string') {
|
if (typeof opt === 'string') {
|
||||||
/*conf = '$wrap-' + conf
|
/*opt = '$wrap-' + opt
|
||||||
if (!layerObj[conf]) {
|
if (!layerObj[opt]) {
|
||||||
throw new Error('layer实例不存在')
|
throw new Error('layer实例不存在')
|
||||||
} else {
|
} else {
|
||||||
//只能显示一个实例
|
//只能显示一个实例
|
||||||
if (layerObj[conf].show) {
|
if (layerObj[opt].show) {
|
||||||
return conf
|
return opt
|
||||||
}
|
}
|
||||||
layerObj[conf].show = true
|
layerObj[opt].show = true
|
||||||
|
|
||||||
if (!Anot.vmodels[conf]) {
|
if (!Anot.vmodels[opt]) {
|
||||||
Anot(layerObj[conf].obj.init)
|
Anot(layerObj[opt].obj.init)
|
||||||
}
|
}
|
||||||
|
|
||||||
layerObj[conf].parentElem.appendChild(layerDom[conf][1])
|
layerObj[opt].parentElem.appendChild(layerDom[opt][1])
|
||||||
layerDom[conf][1]
|
layerDom[opt][1]
|
||||||
.querySelector('.detail')
|
.querySelector('.detail')
|
||||||
.appendChild(layerObj[conf].wrap)
|
.appendChild(layerObj[opt].wrap)
|
||||||
layerObj[conf].wrap.style.display = ''
|
layerObj[opt].wrap.style.display = ''
|
||||||
// Anot.scan(layerDom[conf][1])
|
// Anot.scan(layerDom[opt][1])
|
||||||
layerObj[conf].obj.show()
|
layerObj[opt].obj.show()
|
||||||
return conf
|
return opt
|
||||||
}*/
|
}*/
|
||||||
} else {
|
} else {
|
||||||
return new __layer__(conf).init.$id
|
return new __layer__(opt).init.$id
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
version: Anot.ui.layer
|
version: Anot.ui.layer
|
||||||
|
|
@ -277,16 +285,24 @@ __layer__.prototype = {
|
||||||
5: 9
|
5: 9
|
||||||
},
|
},
|
||||||
timeout: null,
|
timeout: null,
|
||||||
construct: function(conf) {
|
construct: function(opt) {
|
||||||
let _id = conf.$id || uuid()
|
let _id = opt.$id || uuid()
|
||||||
this.init = {
|
this.init = {
|
||||||
$id: _id,
|
$id: _id,
|
||||||
state: {
|
state: {
|
||||||
...defconf,
|
...defconf,
|
||||||
...conf.state
|
...opt.state
|
||||||
},
|
},
|
||||||
props: conf.props,
|
props: opt.props,
|
||||||
skip: ['area', 'shift', 'skin', 'mask', 'maskClose', 'container'],
|
skip: [
|
||||||
|
'area',
|
||||||
|
'shift',
|
||||||
|
'skin',
|
||||||
|
'mask',
|
||||||
|
'maskClose',
|
||||||
|
'container',
|
||||||
|
'follow'
|
||||||
|
],
|
||||||
methods: {
|
methods: {
|
||||||
onMaskClick: function() {
|
onMaskClick: function() {
|
||||||
if (this.type < 4 && !this.maskClose) {
|
if (this.type < 4 && !this.maskClose) {
|
||||||
|
|
@ -358,8 +374,8 @@ __layer__.prototype = {
|
||||||
if (state.type === 5) {
|
if (state.type === 5) {
|
||||||
layBox.classList.add('active')
|
layBox.classList.add('active')
|
||||||
}
|
}
|
||||||
if (state.specialMode && state.type === 7) {
|
if (state.toast) {
|
||||||
layBox.classList.add('type-unspecial')
|
layBox.classList.add('type-toast')
|
||||||
} else {
|
} else {
|
||||||
layBox.classList.add('type-' + state.type)
|
layBox.classList.add('type-' + state.type)
|
||||||
}
|
}
|
||||||
|
|
@ -396,9 +412,10 @@ __layer__.prototype = {
|
||||||
${this.getMenubar()}
|
${this.getMenubar()}
|
||||||
<div
|
<div
|
||||||
class="layer-content do-fn-cl ${state.icon < 0 ? 'none-icon' : ''}"
|
class="layer-content do-fn-cl ${state.icon < 0 ? 'none-icon' : ''}"
|
||||||
style="${boxcss}">
|
style="${boxcss}"
|
||||||
|
${!state.wrap && state.type !== 6 ? ':html="content"' : ''}>
|
||||||
|
|
||||||
${this.getCont()}
|
${state.type === 6 ? this.getLoading(state.load) : ''}
|
||||||
</div>
|
</div>
|
||||||
${this.getCtrl()}
|
${this.getCtrl()}
|
||||||
${arrow}
|
${arrow}
|
||||||
|
|
@ -407,17 +424,14 @@ __layer__.prototype = {
|
||||||
outerBox.appendChild(layBox)
|
outerBox.appendChild(layBox)
|
||||||
return [outerBox, layBox]
|
return [outerBox, layBox]
|
||||||
},
|
},
|
||||||
getCont: function() {
|
// getCont: function() {
|
||||||
let { state, $id } = this.init
|
// let { state, $id } = this.init
|
||||||
if (state.type === 6) {
|
// if (state.type === 6) {
|
||||||
return this.getLoading(state.load)
|
// return this.getLoading(state.load)
|
||||||
} else {
|
// } else {
|
||||||
return `
|
// return !state.wrap ? '{{content | html}}' : ''
|
||||||
${this.getIcon()}
|
// }
|
||||||
<div class="detail" ${!state.wrap ? ':html="content"' : ''}></div>
|
// },
|
||||||
`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getLoading: function(style) {
|
getLoading: function(style) {
|
||||||
return `
|
return `
|
||||||
<div class="loading style-${style}">
|
<div class="loading style-${style}">
|
||||||
|
|
@ -481,7 +495,7 @@ __layer__.prototype = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
append: function() {
|
append: function() {
|
||||||
let { state, $id } = this.init
|
let { state, $id, container } = this.init
|
||||||
//如果有已经打开的弹窗,则关闭
|
//如果有已经打开的弹窗,则关闭
|
||||||
if (unique) {
|
if (unique) {
|
||||||
_layer.close(unique)
|
_layer.close(unique)
|
||||||
|
|
@ -491,14 +505,17 @@ __layer__.prototype = {
|
||||||
}
|
}
|
||||||
layerDom[$id] = this.create()
|
layerDom[$id] = this.create()
|
||||||
|
|
||||||
delete state.specialMode
|
delete state.toast
|
||||||
|
if (!container) {
|
||||||
|
container = document.body
|
||||||
|
}
|
||||||
|
|
||||||
document.body.appendChild(layerDom[$id][0])
|
container.appendChild(layerDom[$id][0])
|
||||||
this.vm = Anot(this.init)
|
this.vm = Anot(this.init)
|
||||||
return this
|
return this
|
||||||
},
|
},
|
||||||
show: function() {
|
show: function() {
|
||||||
let { state, $id, container } = this.init
|
let { state, $id, follow } = this.init
|
||||||
|
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
var style = { visibility: '', background: state.background }
|
var style = { visibility: '', background: state.background }
|
||||||
|
|
@ -509,10 +526,10 @@ __layer__.prototype = {
|
||||||
// only type[tips] can define `color`
|
// only type[tips] can define `color`
|
||||||
style.color = state.color
|
style.color = state.color
|
||||||
|
|
||||||
let $container = Anot(container)
|
let $follow = Anot(follow)
|
||||||
let ew = $container.innerWidth()
|
let ew = $follow.innerWidth()
|
||||||
let ol = $container.offset().left - document.body.scrollLeft
|
let ol = $follow.offset().left - document.body.scrollLeft
|
||||||
let ot = $container.offset().top - document.body.scrollTop
|
let ot = $follow.offset().top - document.body.scrollTop
|
||||||
|
|
||||||
style.left = ol + ew * 0.7
|
style.left = ol + ew * 0.7
|
||||||
style.top = ot - parseInt(css.height) - 8
|
style.top = ot - parseInt(css.height) - 8
|
||||||
|
|
@ -557,7 +574,7 @@ __layer__.prototype = {
|
||||||
_this.vm.yes($id)
|
_this.vm.yes($id)
|
||||||
}
|
}
|
||||||
}, state.timeout)
|
}, state.timeout)
|
||||||
} else if (statetype === 6) {
|
} else if (state.type === 6) {
|
||||||
// loading类型, 非自动关闭时, 主动触发回调
|
// loading类型, 非自动关闭时, 主动触发回调
|
||||||
this.vm.yes($id)
|
this.vm.yes($id)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,15 +13,9 @@
|
||||||
|
|
||||||
|
|
||||||
.layer-box {position:absolute;}
|
.layer-box {position:absolute;}
|
||||||
|
|
||||||
&.mask {position:fixed;z-index:65534;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.3);
|
|
||||||
|
|
||||||
.layer-box {position:absolute;}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
a {text-decoration:none;}
|
a {text-decoration:none;}
|
||||||
|
|
||||||
|
|
||||||
.layer-box {left:50%;top:50%;z-index:65535;
|
.layer-box {left:50%;top:50%;z-index:65535;
|
||||||
|
|
||||||
&.shift {transition: all .3s ease-in-out;}
|
&.shift {transition: all .3s ease-in-out;}
|
||||||
|
|
@ -47,18 +41,17 @@
|
||||||
.layer-title {width:100%;height:43px;padding:0 10px;line-height:43px;font-size:16px;color:nth($cgr, 1);}
|
.layer-title {width:100%;height:43px;padding:0 10px;line-height:43px;font-size:16px;color:nth($cgr, 1);}
|
||||||
|
|
||||||
/* 弹层主体内容 */
|
/* 弹层主体内容 */
|
||||||
.layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px;
|
.layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px;word-break:break-all;word-wrap: break-word;
|
||||||
|
|
||||||
.msg-icon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center;}
|
// .msg-icon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center;}
|
||||||
.detail {width:auto;height:100%;margin:auto auto auto 50px;padding:5px 15px;word-break:break-all;word-wrap: break-word;
|
|
||||||
|
|
||||||
.prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;
|
.prompt-value {width: 100%;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;
|
||||||
|
|
||||||
&.alert {border-color:nth($cr, 1)}
|
&.alert {border-color:nth($cr, 1)}
|
||||||
&:focus {border-color:nth($ct, 1)}
|
&:focus {border-color:nth($ct, 1)}
|
||||||
}
|
}
|
||||||
.msg-box {line-height:30px;}
|
.msg-box {line-height:30px;}
|
||||||
}
|
|
||||||
|
|
||||||
&.none-icon .detail {margin:0 auto;}
|
&.none-icon .detail {margin:0 auto;}
|
||||||
}
|
}
|
||||||
|
|
@ -92,7 +85,7 @@
|
||||||
&.active {visibility:visible;opacity:1;}
|
&.active {visibility:visible;opacity:1;}
|
||||||
i.arrow {position:absolute;left:5px;bottom:-14px;width:0;height:0;border:6px solid transparent;border-top:8px solid rgba(0,0,0,.5);content: ""}
|
i.arrow {position:absolute;left:5px;bottom:-14px;width:0;height:0;border:6px solid transparent;border-top:8px solid rgba(0,0,0,.5);content: ""}
|
||||||
|
|
||||||
.layer-content .detail {margin:0;padding:0}
|
.layer-content {margin:0;padding:0}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -100,11 +93,15 @@
|
||||||
&.type-6 {box-shadow:none;background:transparent;}
|
&.type-6 {box-shadow:none;background:transparent;}
|
||||||
|
|
||||||
|
|
||||||
/* 特殊类弹层(msg弹层) */
|
/* 特殊类弹层(toast弹层) */
|
||||||
&.type-unspecial {min-width:10px;background:transparent;
|
&.type-toast {min-width:10px;padding:0;background:transparent;
|
||||||
|
|
||||||
.layer-content {min-height:60px;padding:0}
|
.layer-content {min-height:40px;height:40px;padding:0}
|
||||||
.layer-content .detail {margin:0;padding:0}
|
|
||||||
|
.toast-box {display:inline-block;position:relative;min-height:40px;padding:5px 8px 5px 50px;line-height:28px;border:1px solid nth($co, 1);border-radius:3px;background:#fffbed;color:nth($co, 3);word-break: break-all;
|
||||||
|
|
||||||
|
&::before {position:absolute;left:15px;top:5px;font:20px/28px "ui font";color:nth($cr, 1);content:"\e6f6";}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -182,6 +179,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.mask {position:fixed;z-index:65534;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.3);
|
||||||
|
|
||||||
|
.layer-box {position:absolute;}
|
||||||
|
}
|
||||||
&:active {z-index:65536;}
|
&:active {z-index:65536;}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,172 +1,180 @@
|
||||||
define(['yua'], function(){
|
/**
|
||||||
|
*
|
||||||
|
* @authors yutent (yutent@doui.cc)
|
||||||
|
* @date 2017-04-14 21:04:50
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
function Router(){
|
'use strict'
|
||||||
this.table = {get: []};
|
//储存版本信息
|
||||||
this.errorFn = null;
|
Anot.ui.router = '0.0.1'
|
||||||
this.history = null;
|
|
||||||
this.hash = '';
|
|
||||||
this.started = false;
|
|
||||||
this.init = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
var defaultOptions = {
|
function Router() {
|
||||||
|
this.table = { get: [] }
|
||||||
|
this.errorFn = null
|
||||||
|
this.history = null
|
||||||
|
this.hash = ''
|
||||||
|
this.started = false
|
||||||
|
this.init = {}
|
||||||
|
}
|
||||||
|
|
||||||
|
var defaultOptions = {
|
||||||
prefix: /^(#!|#)[\/]?/, //hash前缀正则
|
prefix: /^(#!|#)[\/]?/, //hash前缀正则
|
||||||
historyOpen: true, //是否开启hash历史
|
historyOpen: true, //是否开启hash历史
|
||||||
allowReload: true //连续点击同一个链接是否重新加载
|
allowReload: true //连续点击同一个链接是否重新加载
|
||||||
};
|
}
|
||||||
var isMouseUp = true;
|
var isMouseUp = true
|
||||||
|
|
||||||
var ruleRegExp = /(:id)|(\{id\})|(\{id:([A-z\d\,\[\]\{\}\-\+\*\?\!:\^\$]*)\})/g;
|
var ruleRegExp = /(:id)|(\{id\})|(\{id:([A-z\d\,\[\]\{\}\-\+\*\?\!:\^\$]*)\})/g
|
||||||
|
|
||||||
Router.prototype = {
|
Router.prototype = {
|
||||||
error: function(callback){
|
error: function(callback) {
|
||||||
this.errorFn = callback;
|
this.errorFn = callback
|
||||||
},
|
},
|
||||||
config: function(opts){
|
config: function(opts) {
|
||||||
if(this.started)
|
if (this.started) return console.error('Router config has been set')
|
||||||
return console.error('Router config has been set');
|
|
||||||
|
|
||||||
this.started = true;
|
this.started = true
|
||||||
if(!opts.allowReload)
|
if (!opts.allowReload) opts.historyOpen = true
|
||||||
opts.historyOpen = true;
|
this.init = Anot.mix({}, defaultOptions, opts)
|
||||||
this.init = yua.mix({}, defaultOptions, opts);
|
|
||||||
},
|
},
|
||||||
_getRegExp: function(rule, opts){
|
_getRegExp: function(rule, opts) {
|
||||||
var re = rule.replace(ruleRegExp, function(m, p1, p2, p3, p4){
|
var re = rule.replace(ruleRegExp, function(m, p1, p2, p3, p4) {
|
||||||
var w = '([\\w.-]';
|
var w = '([\\w.-]'
|
||||||
if(p1 || p2){
|
if (p1 || p2) {
|
||||||
return w + '+)';
|
return w + '+)'
|
||||||
}else{
|
} else {
|
||||||
if(!/^\{[\d\,]+\}$/.test(p4)){
|
if (!/^\{[\d\,]+\}$/.test(p4)) {
|
||||||
w = '(';
|
w = '('
|
||||||
}
|
}
|
||||||
return w + p4 + ')';
|
return w + p4 + ')'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
re = re.replace(/(([^\\])([\/]+))/g, '$2\\/').replace(/(([^\\])([\.]+))/g, '$2\\.').replace(/(([^\\])([\-]+))/g, '$2\\-').replace(/(\(.*)(\\[\-]+)(.*\))/g, '$1-$3');
|
re = re
|
||||||
re = '^' + re + '$';
|
.replace(/(([^\\])([\/]+))/g, '$2\\/')
|
||||||
|
.replace(/(([^\\])([\.]+))/g, '$2\\.')
|
||||||
|
.replace(/(([^\\])([\-]+))/g, '$2\\-')
|
||||||
|
.replace(/(\(.*)(\\[\-]+)(.*\))/g, '$1-$3')
|
||||||
|
re = '^' + re + '$'
|
||||||
opts.regexp = new RegExp(re)
|
opts.regexp = new RegExp(re)
|
||||||
return opts;
|
return opts
|
||||||
},
|
},
|
||||||
_add: function(method, rule, callback){
|
_add: function(method, rule, callback) {
|
||||||
if(!this.started)
|
if (!this.started) this.config({})
|
||||||
this.config({});
|
|
||||||
|
|
||||||
var table = this.table[method.toLowerCase()];
|
var table = this.table[method.toLowerCase()]
|
||||||
if (rule.charAt(0) !== "/") {
|
if (rule.charAt(0) !== '/') {
|
||||||
console.error('char "/" must be in front of router rule');
|
console.error('char "/" must be in front of router rule')
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
rule = rule.replace(/^[\/]+|[\/]+$|\s+/g, '');
|
rule = rule.replace(/^[\/]+|[\/]+$|\s+/g, '')
|
||||||
var opts = {};
|
var opts = {}
|
||||||
opts.rule = rule;
|
opts.rule = rule
|
||||||
opts.callback = callback;
|
opts.callback = callback
|
||||||
yua.Array.ensure(table, this._getRegExp(rule, opts));
|
Anot.Array.ensure(table, this._getRegExp(rule, opts))
|
||||||
},
|
},
|
||||||
_route: function(method, hash){
|
_route: function(method, hash) {
|
||||||
var hash = hash.trim();
|
var hash = hash.trim()
|
||||||
var table = this.table[method];
|
var table = this.table[method]
|
||||||
var init = this.init;
|
var init = this.init
|
||||||
|
|
||||||
if(!init.allowReload && hash === this.history)
|
if (!init.allowReload && hash === this.history) return
|
||||||
return;
|
|
||||||
|
|
||||||
if(init.historyOpen){
|
if (init.historyOpen) {
|
||||||
this.history = hash;
|
this.history = hash
|
||||||
if(yua.ls)
|
if (Anot.ls) {
|
||||||
yua.ls('lastHash', hash);
|
Anot.ls('lastHash', hash)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for(var i = 0, obj; obj = table[i++];){
|
for (var i = 0, obj; (obj = table[i++]); ) {
|
||||||
var args = hash.match(obj.regexp);
|
var args = hash.match(obj.regexp)
|
||||||
if(args){
|
if (args) {
|
||||||
args.shift();
|
args.shift()
|
||||||
return obj.callback.apply(obj, args)
|
return obj.callback.apply(obj, args)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.errorFn && this.errorFn(hash);
|
this.errorFn && this.errorFn(hash)
|
||||||
},
|
},
|
||||||
on: function(rule, callback){
|
on: function(rule, callback) {
|
||||||
var _this = this
|
var _this = this
|
||||||
if(Array.isArray(rule)){
|
if (Array.isArray(rule)) {
|
||||||
rule.forEach(function(it){
|
rule.forEach(function(it) {
|
||||||
_this._add('get', it, callback);
|
_this._add('get', it, callback)
|
||||||
})
|
})
|
||||||
}else{
|
} else {
|
||||||
this._add('get', rule, callback);
|
this._add('get', rule, callback)
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
yua.bind(window, 'load', function(){
|
Anot.bind(window, 'load', function() {
|
||||||
if(!yua.router.started)
|
if (!Anot.router.started) return
|
||||||
return;
|
var prefix = Anot.router.init.prefix
|
||||||
var prefix = yua.router.init.prefix;
|
var hash = location.hash
|
||||||
var hash = location.hash;
|
hash = hash.replace(prefix, '').trim()
|
||||||
hash = hash.replace(prefix, "").trim();
|
Anot.router._route('get', hash)
|
||||||
yua.router._route('get', hash);
|
})
|
||||||
});
|
|
||||||
|
|
||||||
|
if ('onhashchange' in window) {
|
||||||
if('onhashchange' in window){
|
window.addEventListener('hashchange', function(event) {
|
||||||
window.addEventListener('hashchange', function(event){
|
if (!isMouseUp) return
|
||||||
if(!isMouseUp)
|
var prefix = Anot.router.init.prefix
|
||||||
return;
|
var hash = location.hash.replace(prefix, '').trim()
|
||||||
var prefix = yua.router.init.prefix;
|
Anot.router._route('get', hash)
|
||||||
var hash = location.hash.replace(prefix, "").trim();
|
|
||||||
yua.router._route('get', hash)
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//劫持页面上所有点击事件，如果事件源来自链接或其内部，
|
//劫持页面上所有点击事件，如果事件源来自链接或其内部，
|
||||||
//并且它不会跳出本页，并且以"#/"或"#!/"开头，那么触发updateLocation方法
|
//并且它不会跳出本页，并且以"#/"或"#!/"开头，那么触发updateLocation方法
|
||||||
yua.bind(document, "mousedown", function(event){
|
Anot.bind(document, 'mousedown', function(event) {
|
||||||
var defaultPrevented = "defaultPrevented" in event ? event['defaultPrevented'] : event.returnValue === false
|
var defaultPrevented =
|
||||||
|
'defaultPrevented' in event
|
||||||
|
? event['defaultPrevented']
|
||||||
|
: event.returnValue === false
|
||||||
if (defaultPrevented || event.ctrlKey || event.metaKey || event.which === 2)
|
if (defaultPrevented || event.ctrlKey || event.metaKey || event.which === 2)
|
||||||
return
|
return
|
||||||
var target = event.target
|
var target = event.target
|
||||||
while (target.nodeName !== "A") {
|
while (target.nodeName !== 'A') {
|
||||||
target = target.parentNode
|
target = target.parentNode
|
||||||
if (!target || target.tagName === "BODY") {
|
if (!target || target.tagName === 'BODY') {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (targetIsThisWindow(target.target)){
|
if (targetIsThisWindow(target.target)) {
|
||||||
if(!yua.router.started)
|
if (!Anot.router.started) return
|
||||||
return;
|
var href = target.getAttribute('href') || target.getAttribute('xlink:href'),
|
||||||
var href = target.getAttribute("href") || target.getAttribute("xlink:href"),
|
prefix = Anot.router.init.prefix
|
||||||
prefix = yua.router.init.prefix;
|
|
||||||
|
|
||||||
if (href === null || !prefix.test(href))
|
if (href === null || !prefix.test(href)) return
|
||||||
return
|
|
||||||
|
|
||||||
yua.router.hash = href.replace(prefix, "").trim();
|
Anot.router.hash = href.replace(prefix, '').trim()
|
||||||
event.preventDefault();
|
event.preventDefault()
|
||||||
location.hash = href;
|
location.hash = href
|
||||||
isMouseUp = false;
|
isMouseUp = false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
yua.bind(document, "mouseup", function(){
|
Anot.bind(document, 'mouseup', function() {
|
||||||
if(!isMouseUp){
|
if (!isMouseUp) {
|
||||||
yua.router._route('get', yua.router.hash);
|
Anot.router._route('get', Anot.router.hash)
|
||||||
isMouseUp = true;
|
isMouseUp = true
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
|
||||||
})
|
//判定A标签的target属性是否指向自身
|
||||||
|
//thanks https://github.com/quirkey/sammy/blob/master/lib/sammy.js#L219
|
||||||
|
function targetIsThisWindow(targetWindow) {
|
||||||
//判定A标签的target属性是否指向自身
|
if (
|
||||||
//thanks https://github.com/quirkey/sammy/blob/master/lib/sammy.js#L219
|
!targetWindow ||
|
||||||
function targetIsThisWindow(targetWindow) {
|
targetWindow === window.name ||
|
||||||
if (!targetWindow || targetWindow === window.name || targetWindow === '_self' || (targetWindow === 'top' && window == window.top)) {
|
targetWindow === '_self' ||
|
||||||
|
(targetWindow === 'top' && window == window.top)
|
||||||
|
) {
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
yua.ui.router = '0.0.1'
|
export default (Anot.router = new Router())
|
||||||
|
|
||||||
return yua.router = new Router;
|
|
||||||
})
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ var ua = navigator.userAgent.toLowerCase()
|
||||||
function iOSversion() {
|
function iOSversion() {
|
||||||
//https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html
|
//https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html
|
||||||
//http://mp.weixin.qq.com/s?__biz=MzA3MDQ4MzQzMg==&mid=256900619&idx=1&sn=b29f84cff0b8d7b9742e5d8b3cd8f218&scene=1&srcid=1009F9l4gh9nZ7rcQJEhmf7Q#rd
|
//http://mp.weixin.qq.com/s?__biz=MzA3MDQ4MzQzMg==&mid=256900619&idx=1&sn=b29f84cff0b8d7b9742e5d8b3cd8f218&scene=1&srcid=1009F9l4gh9nZ7rcQJEhmf7Q#rd
|
||||||
if (/iPad|iPhone|iPod/i.test(ua) && !window.MSStream) {
|
if (/ipad|iphone|ipod/.test(ua) && !window.MSStream) {
|
||||||
if ('backdropFilter' in document.documentElement.style) {
|
if ('backdropFilter' in document.documentElement.style) {
|
||||||
return 9
|
return 9
|
||||||
}
|
}
|
||||||
|
|
@ -30,7 +30,7 @@ function iOSversion() {
|
||||||
var deviceIsAndroid = ua.indexOf('android') > 0
|
var deviceIsAndroid = ua.indexOf('android') > 0
|
||||||
var deviceIsIOS = iOSversion()
|
var deviceIsIOS = iOSversion()
|
||||||
|
|
||||||
var Recognizer = (yua.gestureHooks = {
|
var Recognizer = (Anot.gestureHooks = {
|
||||||
pointers: {},
|
pointers: {},
|
||||||
//以AOP切入touchstart, touchmove, touchend, touchcancel回调
|
//以AOP切入touchstart, touchmove, touchend, touchcancel回调
|
||||||
start: function(event, callback) {
|
start: function(event, callback) {
|
||||||
|
|
@ -46,8 +46,7 @@ var Recognizer = (yua.gestureHooks = {
|
||||||
status: 'tapping',
|
status: 'tapping',
|
||||||
element: event.target,
|
element: event.target,
|
||||||
pressingHandler:
|
pressingHandler:
|
||||||
Recognizer.pointers[id] &&
|
Recognizer.pointers[id] && Recognizer.pointers[id].pressingHandler
|
||||||
Recognizer.pointers[id].pressingHandler
|
|
||||||
}
|
}
|
||||||
Recognizer.pointers[id] = pointer
|
Recognizer.pointers[id] = pointer
|
||||||
callback(pointer, touch)
|
callback(pointer, touch)
|
||||||
|
|
@ -112,7 +111,7 @@ var Recognizer = (yua.gestureHooks = {
|
||||||
if (elem) {
|
if (elem) {
|
||||||
var event = document.createEvent('Events')
|
var event = document.createEvent('Events')
|
||||||
event.initEvent(type, true, true)
|
event.initEvent(type, true, true)
|
||||||
yua.mix(event, props)
|
Anot.mix(event, props)
|
||||||
elem.dispatchEvent(event)
|
elem.dispatchEvent(event)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -143,7 +142,7 @@ var Recognizer = (yua.gestureHooks = {
|
||||||
}
|
}
|
||||||
|
|
||||||
recognizer.events.forEach(function(eventName) {
|
recognizer.events.forEach(function(eventName) {
|
||||||
yua.eventHooks[eventName] = {
|
Anot.eventHooks[eventName] = {
|
||||||
fix: function(el, fn) {
|
fix: function(el, fn) {
|
||||||
if (!el['touch-' + name]) {
|
if (!el['touch-' + name]) {
|
||||||
el['touch-' + name] = '1'
|
el['touch-' + name] = '1'
|
||||||
|
|
@ -199,10 +198,7 @@ var tapRecognizer = {
|
||||||
break
|
break
|
||||||
case 'input':
|
case 'input':
|
||||||
// IOS6 pad 上选择文件，如果不是原生的click，弹出的选择界面尺寸错误
|
// IOS6 pad 上选择文件，如果不是原生的click，弹出的选择界面尺寸错误
|
||||||
if (
|
if ((deviceIsIOS && target.type === 'file') || target.disabled) {
|
||||||
(deviceIsIOS && target.type === 'file') ||
|
|
||||||
target.disabled
|
|
||||||
) {
|
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -312,8 +308,7 @@ var tapRecognizer = {
|
||||||
|
|
||||||
findType: function(targetElement) {
|
findType: function(targetElement) {
|
||||||
// 安卓chrome浏览器上，模拟的 click 事件不能让 select 打开，故使用 mousedown 事件
|
// 安卓chrome浏览器上，模拟的 click 事件不能让 select 打开，故使用 mousedown 事件
|
||||||
return deviceIsAndroid &&
|
return deviceIsAndroid && targetElement.tagName.toLowerCase() === 'select'
|
||||||
targetElement.tagName.toLowerCase() === 'select'
|
|
||||||
? 'mousedown'
|
? 'mousedown'
|
||||||
: 'click'
|
: 'click'
|
||||||
},
|
},
|
||||||
|
|
@ -324,10 +319,7 @@ var tapRecognizer = {
|
||||||
})
|
})
|
||||||
var clickEvent, touch
|
var clickEvent, touch
|
||||||
//某些安卓设备必须先移除焦点，之后模拟的click事件才能让新元素获取焦点
|
//某些安卓设备必须先移除焦点，之后模拟的click事件才能让新元素获取焦点
|
||||||
if (
|
if (document.activeElement && document.activeElement !== targetElement) {
|
||||||
document.activeElement &&
|
|
||||||
document.activeElement !== targetElement
|
|
||||||
) {
|
|
||||||
document.activeElement.blur()
|
document.activeElement.blur()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -443,9 +435,7 @@ var tapRecognizer = {
|
||||||
// 或者此元素是iframe中的input元素,那么它也无法获点焦点
|
// 或者此元素是iframe中的input元素,那么它也无法获点焦点
|
||||||
if (
|
if (
|
||||||
now - startTime > 100 ||
|
now - startTime > 100 ||
|
||||||
(deviceIsIOS &&
|
(deviceIsIOS && window.top !== window && targetTagName === 'input')
|
||||||
window.top !== window &&
|
|
||||||
targetTagName === 'input')
|
|
||||||
) {
|
) {
|
||||||
tapRecognizer.element = 0
|
tapRecognizer.element = 0
|
||||||
return false
|
return false
|
||||||
|
|
@ -569,8 +559,7 @@ var swipeRecognizer = {
|
||||||
}
|
}
|
||||||
Recognizer.end(event, function(pointer, touch) {
|
Recognizer.end(event, function(pointer, touch) {
|
||||||
var isflick =
|
var isflick =
|
||||||
pointer.distance > 30 &&
|
pointer.distance > 30 && pointer.distance / pointer.duration > 0.65
|
||||||
pointer.distance / pointer.duration > 0.65
|
|
||||||
if (isflick) {
|
if (isflick) {
|
||||||
var extra = {
|
var extra = {
|
||||||
deltaX: pointer.deltaX,
|
deltaX: pointer.deltaX,
|
||||||
|
|
|
||||||
Reference in New Issue