485 lines
13 KiB
JavaScript
485 lines
13 KiB
JavaScript
/*********************************************************************
|
||
* Anot的原型方法定义区 *
|
||
**********************************************************************/
|
||
|
||
function hyphen(target) {
|
||
//转换为连字符线风格
|
||
return target.replace(/([a-z\d])([A-Z]+)/g, '$1-$2').toLowerCase()
|
||
}
|
||
|
||
function camelize(target) {
|
||
//转换为驼峰风格
|
||
if (target.indexOf('-') < 0 && target.indexOf('_') < 0) {
|
||
return target //提前判断，提高getStyle等的效率
|
||
}
|
||
return target.replace(/[-_][^-_]/g, function(match) {
|
||
return match.charAt(1).toUpperCase()
|
||
})
|
||
}
|
||
|
||
'add,remove'.replace(rword, function(method) {
|
||
Anot.fn[method + 'Class'] = function(cls) {
|
||
var el = this[0]
|
||
//https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/26
|
||
if (cls && typeof cls === 'string' && el && el.nodeType === 1) {
|
||
cls.replace(/\S+/g, function(c) {
|
||
el.classList[method](c)
|
||
})
|
||
}
|
||
return this
|
||
}
|
||
})
|
||
|
||
Anot.fn.mix({
|
||
hasClass: function(cls) {
|
||
var el = this[0] || {} //IE10+, chrome8+, firefox3.6+, safari5.1+,opera11.5+支持classList,chrome24+,firefox26+支持classList2.0
|
||
return el.nodeType === 1 && el.classList.contains(cls)
|
||
},
|
||
toggleClass: function(value, stateVal) {
|
||
var className,
|
||
i = 0
|
||
var classNames = String(value).match(/\S+/g) || []
|
||
var isBool = typeof stateVal === 'boolean'
|
||
while ((className = classNames[i++])) {
|
||
var state = isBool ? stateVal : !this.hasClass(className)
|
||
this[state ? 'addClass' : 'removeClass'](className)
|
||
}
|
||
return this
|
||
},
|
||
attr: function(name, value) {
|
||
if (arguments.length === 2) {
|
||
this[0].setAttribute(name, value)
|
||
return this
|
||
} else {
|
||
return this[0].getAttribute(name)
|
||
}
|
||
},
|
||
data: function(name, value) {
|
||
name = 'data-' + hyphen(name || '')
|
||
switch (arguments.length) {
|
||
case 2:
|
||
this.attr(name, value)
|
||
return this
|
||
case 1:
|
||
var val = this.attr(name)
|
||
return parseData(val)
|
||
case 0:
|
||
var ret = {}
|
||
ap.forEach.call(this[0].attributes, function(attr) {
|
||
if (attr) {
|
||
name = attr.name
|
||
if (!name.indexOf('data-')) {
|
||
name = camelize(name.slice(5))
|
||
ret[name] = parseData(attr.value)
|
||
}
|
||
}
|
||
})
|
||
return ret
|
||
}
|
||
},
|
||
removeData: function(name) {
|
||
name = 'data-' + hyphen(name)
|
||
this[0].removeAttribute(name)
|
||
return this
|
||
},
|
||
css: function(name, value) {
|
||
if (Anot.isPlainObject(name)) {
|
||
for (var i in name) {
|
||
Anot.css(this, i, name[i])
|
||
}
|
||
} else {
|
||
var ret = Anot.css(this, name, value)
|
||
}
|
||
return ret !== void 0 ? ret : this
|
||
},
|
||
position: function() {
|
||
var offsetParent,
|
||
offset,
|
||
elem = this[0],
|
||
parentOffset = {
|
||
top: 0,
|
||
left: 0
|
||
}
|
||
if (!elem) {
|
||
return
|
||
}
|
||
if (this.css('position') === 'fixed') {
|
||
offset = elem.getBoundingClientRect()
|
||
} else {
|
||
offsetParent = this.offsetParent() //得到真正的offsetParent
|
||
offset = this.offset() // 得到正确的offsetParent
|
||
if (offsetParent[0].tagName !== 'HTML') {
|
||
parentOffset = offsetParent.offset()
|
||
}
|
||
parentOffset.top += Anot.css(offsetParent[0], 'borderTopWidth', true)
|
||
parentOffset.left += Anot.css(offsetParent[0], 'borderLeftWidth', true)
|
||
// Subtract offsetParent scroll positions
|
||
parentOffset.top -= offsetParent.scrollTop()
|
||
parentOffset.left -= offsetParent.scrollLeft()
|
||
}
|
||
return {
|
||
top: offset.top - parentOffset.top - Anot.css(elem, 'marginTop', true),
|
||
left: offset.left - parentOffset.left - Anot.css(elem, 'marginLeft', true)
|
||
}
|
||
},
|
||
offsetParent: function() {
|
||
var offsetParent = this[0].offsetParent
|
||
while (offsetParent && Anot.css(offsetParent, 'position') === 'static') {
|
||
offsetParent = offsetParent.offsetParent
|
||
}
|
||
return Anot(offsetParent || root)
|
||
},
|
||
bind: function(type, fn, phase) {
|
||
if (this[0]) {
|
||
//此方法不会链
|
||
return Anot.bind(this[0], type, fn, phase)
|
||
}
|
||
},
|
||
unbind: function(type, fn, phase) {
|
||
if (this[0]) {
|
||
Anot.unbind(this[0], type, fn, phase)
|
||
}
|
||
return this
|
||
},
|
||
val: function(value) {
|
||
var node = this[0]
|
||
if (node && node.nodeType === 1) {
|
||
var get = arguments.length === 0
|
||
var access = get ? ':get' : ':set'
|
||
var fn = valHooks[getValType(node) + access]
|
||
if (fn) {
|
||
var val = fn(node, value)
|
||
} else if (get) {
|
||
return (node.value || '').replace(/\r/g, '')
|
||
} else {
|
||
node.value = value
|
||
}
|
||
}
|
||
return get ? val : this
|
||
}
|
||
})
|
||
|
||
if (root.dataset) {
|
||
Anot.fn.data = function(name, val) {
|
||
name = name && camelize(name)
|
||
var dataset = this[0].dataset
|
||
switch (arguments.length) {
|
||
case 2:
|
||
dataset[name] = val
|
||
return this
|
||
case 1:
|
||
val = dataset[name]
|
||
return parseData(val)
|
||
case 0:
|
||
var ret = createMap()
|
||
for (name in dataset) {
|
||
ret[name] = parseData(dataset[name])
|
||
}
|
||
return ret
|
||
}
|
||
}
|
||
}
|
||
|
||
Anot.parseJSON = JSON.parse
|
||
|
||
var rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/
|
||
function parseData(data) {
|
||
try {
|
||
if (typeof data === 'object') return data
|
||
data =
|
||
data === 'true'
|
||
? true
|
||
: data === 'false'
|
||
? false
|
||
: data === 'null'
|
||
? null
|
||
: +data + '' === data
|
||
? +data
|
||
: rbrace.test(data)
|
||
? JSON.parse(data)
|
||
: data
|
||
} catch (e) {}
|
||
return data
|
||
}
|
||
|
||
Anot.fireDom = function(elem, type, opts) {
|
||
var hackEvent = DOC.createEvent('Events')
|
||
hackEvent.initEvent(type, true, true)
|
||
Anot.mix(hackEvent, opts)
|
||
elem.dispatchEvent(hackEvent)
|
||
}
|
||
|
||
Anot.each(
|
||
{
|
||
scrollLeft: 'pageXOffset',
|
||
scrollTop: 'pageYOffset'
|
||
},
|
||
function(method, prop) {
|
||
Anot.fn[method] = function(val) {
|
||
var node = this[0] || {},
|
||
win = getWindow(node),
|
||
top = method === 'scrollTop'
|
||
if (!arguments.length) {
|
||
return win ? win[prop] : node[method]
|
||
} else {
|
||
if (win) {
|
||
win.scrollTo(!top ? val : win[prop], top ? val : win[prop])
|
||
} else {
|
||
node[method] = val
|
||
}
|
||
}
|
||
}
|
||
}
|
||
)
|
||
|
||
function getWindow(node) {
|
||
return node.window && node.document
|
||
? node
|
||
: node.nodeType === 9
|
||
? node.defaultView
|
||
: false
|
||
}
|
||
|
||
//=============================css相关==================================
|
||
|
||
var cssHooks = (Anot.cssHooks = createMap())
|
||
var prefixes = ['', '-webkit-', '-moz-', '-ms-'] //去掉opera-15的支持
|
||
var cssMap = {
|
||
float: 'cssFloat'
|
||
}
|
||
|
||
Anot.cssNumber = oneObject(
|
||
'animationIterationCount,animationIterationCount,columnCount,order,flex,flexGrow,flexShrink,fillOpacity,fontWeight,lineHeight,opacity,orphans,widows,zIndex,zoom'
|
||
)
|
||
|
||
Anot.cssName = function(name, host, camelCase) {
|
||
if (cssMap[name]) {
|
||
return cssMap[name]
|
||
}
|
||
host = host || root.style
|
||
for (var i = 0, n = prefixes.length; i < n; i++) {
|
||
camelCase = camelize(prefixes[i] + name)
|
||
if (camelCase in host) {
|
||
return (cssMap[name] = camelCase)
|
||
}
|
||
}
|
||
return null
|
||
}
|
||
|
||
cssHooks['@:set'] = function(node, name, value) {
|
||
node.style[name] = value
|
||
}
|
||
|
||
cssHooks['@:get'] = function(node, name) {
|
||
if (!node || !node.style) {
|
||
throw new Error('getComputedStyle要求传入一个节点 ' + node)
|
||
}
|
||
var ret,
|
||
computed = getComputedStyle(node)
|
||
if (computed) {
|
||
ret = name === 'filter' ? computed.getPropertyValue(name) : computed[name]
|
||
if (ret === '') {
|
||
ret = node.style[name] //其他浏览器需要我们手动取内联样式
|
||
}
|
||
}
|
||
return ret
|
||
}
|
||
cssHooks['opacity:get'] = function(node) {
|
||
var ret = cssHooks['@:get'](node, 'opacity')
|
||
return ret === '' ? '1' : ret
|
||
}
|
||
|
||
'top,left'.replace(rword, function(name) {
|
||
cssHooks[name + ':get'] = function(node) {
|
||
var computed = cssHooks['@:get'](node, name)
|
||
return /px$/.test(computed) ? computed : Anot(node).position()[name] + 'px'
|
||
}
|
||
})
|
||
|
||
var cssShow = {
|
||
position: 'absolute',
|
||
visibility: 'hidden',
|
||
display: 'block'
|
||
}
|
||
var rdisplayswap = /^(none|table(?!-c[ea]).+)/
|
||
function showHidden(node, array) {
|
||
//http://www.cnblogs.com/rubylouvre/archive/2012/10/27/2742529.html
|
||
if (node.offsetWidth <= 0) {
|
||
//opera.offsetWidth可能小于0
|
||
var styles = getComputedStyle(node, null)
|
||
if (rdisplayswap.test(styles['display'])) {
|
||
var obj = {
|
||
node: node
|
||
}
|
||
for (var name in cssShow) {
|
||
obj[name] = styles[name]
|
||
node.style[name] = cssShow[name]
|
||
}
|
||
array.push(obj)
|
||
}
|
||
var _parent = node.parentNode
|
||
if (_parent && _parent.nodeType === 1) {
|
||
showHidden(_parent, array)
|
||
}
|
||
}
|
||
}
|
||
|
||
'Width,Height'.replace(rword, function(name) {
|
||
//fix 481
|
||
var method = name.toLowerCase(),
|
||
clientProp = 'client' + name,
|
||
scrollProp = 'scroll' + name,
|
||
offsetProp = 'offset' + name
|
||
cssHooks[method + ':get'] = function(node, which, override) {
|
||
var boxSizing = -4
|
||
if (typeof override === 'number') {
|
||
boxSizing = override
|
||
}
|
||
which = name === 'Width' ? ['Left', 'Right'] : ['Top', 'Bottom']
|
||
var ret = node[offsetProp] // border-box 0
|
||
if (boxSizing === 2) {
|
||
// margin-box 2
|
||
return (
|
||
ret +
|
||
Anot.css(node, 'margin' + which[0], true) +
|
||
Anot.css(node, 'margin' + which[1], true)
|
||
)
|
||
}
|
||
if (boxSizing < 0) {
|
||
// padding-box -2
|
||
ret =
|
||
ret -
|
||
Anot.css(node, 'border' + which[0] + 'Width', true) -
|
||
Anot.css(node, 'border' + which[1] + 'Width', true)
|
||
}
|
||
if (boxSizing === -4) {
|
||
// content-box -4
|
||
ret =
|
||
ret -
|
||
Anot.css(node, 'padding' + which[0], true) -
|
||
Anot.css(node, 'padding' + which[1], true)
|
||
}
|
||
return ret
|
||
}
|
||
cssHooks[method + '&get'] = function(node) {
|
||
var hidden = []
|
||
showHidden(node, hidden)
|
||
var val = cssHooks[method + ':get'](node)
|
||
for (var i = 0, obj; (obj = hidden[i++]); ) {
|
||
node = obj.node
|
||
for (var n in obj) {
|
||
if (typeof obj[n] === 'string') {
|
||
node.style[n] = obj[n]
|
||
}
|
||
}
|
||
}
|
||
return val
|
||
}
|
||
Anot.fn[method] = function(value) {
|
||
//会忽视其display
|
||
var node = this[0]
|
||
if (arguments.length === 0) {
|
||
if (node.setTimeout) {
|
||
//取得窗口尺寸,IE9后可以用node.innerWidth /innerHeight代替
|
||
return node['inner' + name]
|
||
}
|
||
if (node.nodeType === 9) {
|
||
//取得页面尺寸
|
||
var doc = node.documentElement
|
||
//FF chrome html.scrollHeight< body.scrollHeight
|
||
//IE 标准模式 : html.scrollHeight> body.scrollHeight
|
||
//IE 怪异模式 : html.scrollHeight 最大等于可视窗口多一点？
|
||
return Math.max(
|
||
node.body[scrollProp],
|
||
doc[scrollProp],
|
||
node.body[offsetProp],
|
||
doc[offsetProp],
|
||
doc[clientProp]
|
||
)
|
||
}
|
||
return cssHooks[method + '&get'](node)
|
||
} else {
|
||
return this.css(method, value)
|
||
}
|
||
}
|
||
Anot.fn['inner' + name] = function() {
|
||
return cssHooks[method + ':get'](this[0], void 0, -2)
|
||
}
|
||
Anot.fn['outer' + name] = function(includeMargin) {
|
||
return cssHooks[method + ':get'](
|
||
this[0],
|
||
void 0,
|
||
includeMargin === true ? 2 : 0
|
||
)
|
||
}
|
||
})
|
||
|
||
Anot.fn.offset = function() {
|
||
//取得距离页面左右角的坐标
|
||
var node = this[0]
|
||
try {
|
||
var rect = node.getBoundingClientRect()
|
||
// Make sure element is not hidden (display: none) or disconnected
|
||
// https://github.com/jquery/jquery/pull/2043/files#r23981494
|
||
if (rect.width || rect.height || node.getClientRects().length) {
|
||
var doc = node.ownerDocument
|
||
var root = doc.documentElement
|
||
var win = doc.defaultView
|
||
return {
|
||
top: rect.top + win.pageYOffset - root.clientTop,
|
||
left: rect.left + win.pageXOffset - root.clientLeft
|
||
}
|
||
}
|
||
} catch (e) {
|
||
return {
|
||
left: 0,
|
||
top: 0
|
||
}
|
||
}
|
||
}
|
||
|
||
//=============================val相关=======================
|
||
|
||
function getValType(elem) {
|
||
var ret = elem.tagName.toLowerCase()
|
||
return ret === 'input' && /checkbox|radio/.test(elem.type) ? 'checked' : ret
|
||
}
|
||
|
||
var valHooks = {
|
||
'select:get': function(node, value) {
|
||
var option,
|
||
options = node.options,
|
||
index = node.selectedIndex,
|
||
one = node.type === 'select-one' || index < 0,
|
||
values = one ? null : [],
|
||
max = one ? index + 1 : options.length,
|
||
i = index < 0 ? max : one ? index : 0
|
||
for (; i < max; i++) {
|
||
option = options[i]
|
||
//旧式IE在reset后不会改变selected，需要改用i === index判定
|
||
//我们过滤所有disabled的option元素，但在safari5下，如果设置select为disable，那么其所有孩子都disable
|
||
//因此当一个元素为disable，需要检测其是否显式设置了disable及其父节点的disable情况
|
||
if ((option.selected || i === index) && !option.disabled) {
|
||
value = option.value
|
||
if (one) {
|
||
return value
|
||
}
|
||
//收集所有selected值组成数组返回
|
||
values.push(value)
|
||
}
|
||
}
|
||
return values
|
||
},
|
||
'select:set': function(node, values, optionSet) {
|
||
values = [].concat(values) //强制转换为数组
|
||
for (var i = 0, el; (el = node.options[i++]); ) {
|
||
if ((el.selected = values.indexOf(el.value) > -1)) {
|
||
optionSet = true
|
||
}
|
||
}
|
||
if (!optionSet) {
|
||
node.selectedIndex = -1
|
||
}
|
||
}
|
||
}
|