2017-03-02 17:30:55 +08:00

355 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<title>Code coverage report for packages/waterfall/src/directive.js</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../../../prettify.css" />
<link rel="stylesheet" href="../../../base.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type='text/css'>
.coverage-summary .sorter {
background-image: url(../../../sort-arrow-sprite.png);
}
</style>
</head>
<body>
<div class='wrapper'>
<div class='pad1'>
<h1>
<a href="../../../index.html">all files</a> / <a href="index.html">packages/waterfall/src/</a> directive.js
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">20.37% </span>
<span class="quiet">Statements</span>
<span class='fraction'>11/54</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">15.38% </span>
<span class="quiet">Branches</span>
<span class='fraction'>4/26</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">22.22% </span>
<span class="quiet">Functions</span>
<span class='fraction'>2/9</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">14.58% </span>
<span class="quiet">Lines</span>
<span class='fraction'>7/48</span>
</div>
<div class='fl pad1y'>
<span class="strong">1 branch</span>
<span class="quiet">Ignored</span> &nbsp;&nbsp;&nbsp;&nbsp;
</div>
</div>
</div>
<div class='status-line low'></div>
<pre><table class="coverage">
<tr><td class="line-count quiet">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</td><td class="line-coverage quiet"><span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">2×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import Utils from './utils.js';
&nbsp;
const CONTEXT = '@@Waterfall';
const OFFSET = 300;
&nbsp;
// 绑定事件到元素上
// 读取基本的控制变量
<span class="fstat-no" title="function not covered" >function doBindEvent() <span class="cstat-no" title="statement not covered" >{</span></span>
<span class="cstat-no" title="statement not covered" > t</span>his.scrollEventListener = Utils.debounce(handleScrollEvent.bind(this), 200);
<span class="cstat-no" title="statement not covered" > t</span>his.scrollEventTarget = Utils.getScrollEventTarget(this.el);
&nbsp;
<span class="cstat-no" title="statement not covered" > v</span>ar disabledExpr = this.el.getAttribute('waterfall-disabled');
<span class="cstat-no" title="statement not covered" > v</span>ar disabled = false;
<span class="cstat-no" title="statement not covered" > if (disabledExpr) {</span>
<span class="cstat-no" title="statement not covered" > t</span>his.vm.$watch(disabledExpr, <span class="fstat-no" title="function not covered" >(value) =&gt; {</span>
<span class="cstat-no" title="statement not covered" > t</span>his.disabled = value;
});
<span class="cstat-no" title="statement not covered" > d</span>isabled = Boolean(this.vm[disabledExpr]);
}
<span class="cstat-no" title="statement not covered" > t</span>his.disabled = disabled;
&nbsp;
<span class="cstat-no" title="statement not covered" > v</span>ar offset = this.el.getAttribute('waterfall-offset');
<span class="cstat-no" title="statement not covered" > t</span>his.offset = Number(offset) || OFFSET;
&nbsp;
<span class="cstat-no" title="statement not covered" > t</span>his.scrollEventTarget.addEventListener('scroll', this.scrollEventListener);
&nbsp;
<span class="cstat-no" title="statement not covered" > t</span>his.scrollEventListener();
}
&nbsp;
// 处理滚动函数
<span class="fstat-no" title="function not covered" >function handleScrollEvent() {</span>
<span class="cstat-no" title="statement not covered" > l</span>et element = this.el;
<span class="cstat-no" title="statement not covered" > l</span>et scrollEventTarget = this.scrollEventTarget;
&nbsp;
// 已被禁止的滚动处理
<span class="cstat-no" title="statement not covered" > if (this.disabled) <span class="cstat-no" title="statement not covered" >r</span></span>eturn;
&nbsp;
<span class="cstat-no" title="statement not covered" > l</span>et targetScrollTop = Utils.getScrollTop(scrollEventTarget);
<span class="cstat-no" title="statement not covered" > l</span>et targetBottom = targetScrollTop + Utils.getVisibleHeight(scrollEventTarget);
&nbsp;
// 判断是否到了底
<span class="cstat-no" title="statement not covered" > l</span>et needLoadMoreToLower = false;
<span class="cstat-no" title="statement not covered" > if (element === scrollEventTarget) {</span>
<span class="cstat-no" title="statement not covered" > n</span>eedLoadMoreToLower = scrollEventTarget.scollHeight - targetBottom &lt; this.offset;
} else {
<span class="cstat-no" title="statement not covered" > l</span>et elementBottom = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget) + Utils.getVisibleHeight(element);
<span class="cstat-no" title="statement not covered" > n</span>eedLoadMoreToLower = elementBottom - Utils.getVisibleHeight(scrollEventTarget) &lt; this.offset;
}
<span class="cstat-no" title="statement not covered" > if (needLoadMoreToLower) {</span>
<span class="cstat-no" title="statement not covered" > t</span>his.cb['lower'] &amp;&amp; this.cb['lower']({ target: scrollEventTarget, top: targetScrollTop });
}
&nbsp;
// 判断是否到了顶
<span class="cstat-no" title="statement not covered" > l</span>et needLoadMoreToUpper = false;
<span class="cstat-no" title="statement not covered" > if (element === scrollEventTarget) {</span>
<span class="cstat-no" title="statement not covered" > n</span>eedLoadMoreToUpper = targetScrollTop &lt; this.offset;
} else {
<span class="cstat-no" title="statement not covered" > l</span>et elementTop = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget);
<span class="cstat-no" title="statement not covered" > n</span>eedLoadMoreToUpper = elementTop + this.offset &gt; 0;
}
<span class="cstat-no" title="statement not covered" > if (needLoadMoreToUpper) {</span>
<span class="cstat-no" title="statement not covered" > t</span>his.cb['upper'] &amp;&amp; this.cb['upper']({ target: scrollEventTarget, top: targetScrollTop });
}
}
&nbsp;
export default function(type) {
return <span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" >{</span></span></span>
bind(el, binding, vnode) {
<span class="cstat-no" title="statement not covered" > if (!el[CONTEXT]) {</span>
<span class="cstat-no" title="statement not covered" > e</span>l[CONTEXT] = {
el,
vm: vnode.context,
cb: {}
};
}
<span class="cstat-no" title="statement not covered" > e</span>l[CONTEXT].cb[type] = binding.value;
&nbsp;
<span class="cstat-no" title="statement not covered" > v</span>node.context.$on('hook:mounted', <span class="fstat-no" title="function not covered" >function() {</span>
<span class="cstat-no" title="statement not covered" > if (Utils.isAttached(el)) {</span>
<span class="cstat-no" title="statement not covered" > d</span>oBindEvent.call(el[CONTEXT]);
}
});
},
&nbsp;
update(el) {
<span class="cstat-no" title="statement not covered" > e</span>l[CONTEXT].scrollEventListener();
},
&nbsp;
unbind(el) {
<span class="cstat-no" title="statement not covered" > c</span>onst context = el[CONTEXT];
<span class="cstat-no" title="statement not covered" > c</span>ontext.scrollEventTarget.removeEventListener('scroll', context.scrollEventListener);
}
};
};
&nbsp;
&nbsp;</pre></td></tr>
</table></pre>
<div class='push'></div><!-- for sticky footer -->
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Mar 02 2017 17:21:26 GMT+0800 (CST)
</div>
</div>
<script src="../../../prettify.js"></script>
<script>
window.onload = function () {
if (typeof prettyPrint === 'function') {
prettyPrint();
}
};
</script>
<script src="../../../sorter.js"></script>
</body>
</html>