all files / dom/css/ share.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
 
 
1×
 
 
 
 
1×
1×
 
1×
79×
57×
 
22×
22×
22×
22×
22×
 
 
1×
 
 
1×
 
77×
47×
 
77×
1×
 
77×
77×
77×
55×
55×
1×
 
55×
55×
22×
2×
 
20×
1×
 
20×
6×
 
20×
20×
 
 
 
1×
47×
1×
1×
 
 
47×
 
47×
 
 
1×
3×
 
 
 
 
 
3×
1×
 
3×
1×
 
3×
3×
3×
1×
 
3×
3×
 
 
3×
3×
 
3×
 
 
 
 
 
1×
4×
4×
1×
 
4×
 
 
 
1×
20×
 
 
20×
 
 
 
 
1×
55×
1×
 
55×
55×
55×
55×
1×
 
 
55×
 
 
1×
6×
6×
 
 
1×
2×
2×
2×
 
 
 
 
 
1×
 
 
 
 
 
1×
 
1×
 
4×
1×
1×
 
 
1×
1×
1×
 
1×
 
1×
1×
1×
 
 
 
 
1×
 
 
 
2×
 
 
2×
4×
4×
1×
 
4×
4×
4×
1×
 
4×
4×
 
4×
4×
 
4×
 
2×
4×
4×
4×
4×
1×
1×
1×
1×
 
 
 
4×
 
2×
4×
4×
4×
1×
 
 
 
4×
1×
 
 
 
1×
 
4×
 
1×
 
 
2×
1×
 
2×
1×
 
 
 
 
1×
6×
 
 
import { avalon, oneObject, cssHooks, window } from '../../seed/core'
 
var cssMap = oneObject('float','cssFloat')
export {
    cssMap,
    cssHooks
}
avalon.cssNumber = oneObject('animationIterationCount,columnCount,order,flex,flexGrow,flexShrink,fillOpacity,fontWeight,lineHeight,opacity,orphans,widows,zIndex,zoom')
var prefixes = ['', '-webkit-', '-o-', '-moz-', '-ms-']
 /* istanbul ignore next */
avalon.cssName = function (name, host, camelCase) {
    if (cssMap[name]) {
        return cssMap[name]
    }
    host = host || avalon.root.style || {}
    for (var i = 0, n = prefixes.length; i < n; i++) {
        camelCase = avalon.camelize(prefixes[i] + name)
        Eif (camelCase in host) {
            return (cssMap[name] = camelCase)
        }
    }
    return null
}
 /* istanbul ignore next */
avalon.css = function (node, name, value, fn) {
    //读写删除元素节点的样式
    if (node instanceof avalon) {
        node = node[0]
    }
    Iif (node.nodeType !== 1) {
        return
    }
    var prop = avalon.camelize(name)
    name = avalon.cssName(prop) || /* istanbul ignore next*/ prop
    if (value === void 0 || typeof value === 'boolean') { //获取样式
        fn = cssHooks[prop + ':get'] || cssHooks['@:get']
        Iif (name === 'background') {
            name = 'backgroundColor'
        }
        var val = fn(node, name)
        return value === true ? parseFloat(val) || 0 : val
    } else if (value === '') { //请除样式
        node.style[name] = ''
    } else { //设置样式
        Iif (value == null || value !== value) {
            return
        }
        if (isFinite(value) && !avalon.cssNumber[prop]) {
            value += 'px'
        }
        fn = cssHooks[prop + ':set'] || cssHooks['@:set']
        fn(node, name, value)
    }
}
 /* istanbul ignore next */
avalon.fn.css = function (name, value) {
    Iif (avalon.isPlainObject(name)) {
        for (var i in name) {
            avalon.css(this, i, name[i])
        }
    } else {
        var ret = avalon.css(this, name, value)
    }
    return ret !== void 0 ? ret : this
}
 /* istanbul ignore next */
avalon.fn.position = function () {
    var offsetParent, offset,
        elem = this[0],
        parentOffset = {
            top: 0,
            left: 0
        }
    Iif (!elem) {
        return parentOffset
    }
    Iif (this.css('position') === 'fixed') {
        offset = elem.getBoundingClientRect()
    } else {
        offsetParent = this.offsetParent() //得到真正的offsetParent
        offset = this.offset() // 得到正确的offsetParent
        Iif (offsetParent[0].tagName !== 'HTML') {
            parentOffset = offsetParent.offset()
        }
        parentOffset.top += avalon.css(offsetParent[0], 'borderTopWidth', true)
        parentOffset.left += avalon.css(offsetParent[0], 'borderLeftWidth', true)
 
        // Subtract offsetParent scroll positions
        parentOffset.top -= offsetParent.scrollTop()
        parentOffset.left -= offsetParent.scrollLeft()
    }
    return {
        top: offset.top - parentOffset.top - avalon.css(elem, 'marginTop', true),
        left: offset.left - parentOffset.left - avalon.css(elem, 'marginLeft', true)
    }
}
 /* istanbul ignore next */
avalon.fn.offsetParent = function () {
    var offsetParent = this[0].offsetParent
    while (offsetParent && avalon.css(offsetParent, 'position') === 'static') {
        offsetParent = offsetParent.offsetParent
    }
    return avalon(offsetParent || avalon.root)
}
 
 /* istanbul ignore next */
cssHooks['@:set'] = function (node, name, value) {
    try {
        //node.style.width = NaN;node.style.width = 'xxxxxxx';
        //node.style.width = undefine 在旧式IE下会抛异常
        node.style[name] = value
    } catch (e) {
    }
}
 /* istanbul ignore next */
cssHooks['@:get'] = function (node, name) {
    Iif (!node || !node.style) {
        throw new Error('getComputedStyle要求传入一个节点 ' + node)
    }
    var ret, styles = window.getComputedStyle(node, null)
    Eif (styles) {
        ret = name === 'filter' ? styles.getPropertyValue(name) : styles[name]
        Iif (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(avalon.rword, function (name) {
    cssHooks[name + ':get'] = function (node) {
        var computed = cssHooks['@:get'](node, name)
        return /px$/.test(computed) ? computed :
            avalon(node).position()[name] + 'px'
    }
})
 
 
var cssShow = {
    position: 'absolute',
    visibility: 'hidden',
    display: 'block'
}
 
var rdisplayswap = /^(none|table(?!-c[ea]).+)/
 /* istanbul ignore next */
function showHidden(node, array) {
    //http://www.cnblogs.com/rubylouvre/archive/2012/10/27/2742529.html
    Iif (node.offsetWidth <= 0) { //opera.offsetWidth可能小于0
        if (rdisplayswap.test(cssHooks['@:get'](node, 'display'))) {
            var obj = {
                node: node
            }
            for (var name in cssShow) {
                obj[name] = node.style[name]
                node.style[name] = cssShow[name]
            }
            array.push(obj)
        }
        var parent = node.parentNode
        if (parent && parent.nodeType === 1) {
            showHidden(parent, array)
        }
    }
}
/* istanbul ignore next*/
avalon.each({
    Width: 'width',
    Height: 'height'
}, function (name, method) {
    var clientProp = 'client' + name,
        scrollProp = 'scroll' + name,
        offsetProp = 'offset' + name
    cssHooks[method + ':get'] = function (node, which, override) {
        var boxSizing = -4
        Iif (typeof override === 'number') {
            boxSizing = override
        }
        which = name === 'Width' ? ['Left', 'Right'] : ['Top', 'Bottom']
        var ret = node[offsetProp] // border-box 0
        Iif (boxSizing === 2) { // margin-box 2
            return ret + avalon.css(node, 'margin' + which[0], true) + avalon.css(node, 'margin' + which[1], true)
        }
        Eif (boxSizing < 0) { // padding-box  -2
            ret = ret - avalon.css(node, 'border' + which[0] + 'Width', true) - avalon.css(node, 'border' + which[1] + 'Width', true)
        }
        Eif (boxSizing === -4) { // content-box -4
            ret = ret - avalon.css(node, 'padding' + which[0], true) - avalon.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
    }
    avalon.fn[method] = function (value) { //会忽视其display
        var node = this[0]
        Eif (arguments.length === 0) {
            Iif (node.setTimeout) { //取得窗口尺寸
                return node['inner' + name] ||
                    node.document.documentElement[clientProp] ||
                    node.document.body[clientProp] //IE6下前两个分别为undefined,0
            }
            Iif (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)
        }
    }
    avalon.fn['inner' + name] = function () {
        return cssHooks[method + ':get'](this[0], void 0, -2)
    }
    avalon.fn['outer' + name] = function (includeMargin) {
        return cssHooks[method + ':get'](this[0], void 0, includeMargin === true ? 2 : 0)
    }
})
 
 
export function getWindow(node) {
    return node.window || node.defaultView || node.parentWindow || false
}