-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
65 lines (56 loc) · 1.58 KB
/
index.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
'use strict';
/** @jsx element */
import element from 'magic-virtual-element';
let intervals = {};
let hoverStates = {};
export default {
defaultProps: {
interval: 1000 * 3
},
render: function (component) {
const {state, props} = component;
let style;
if (state.offset) {
style = 'left: -' + state.offset + 'px;';
} else if (state.offset === false) {
props.children.push(props.children.shift());
style = 'transition: none; left: 0;';
}
function hover () {
hoverStates[component.id] = true;
}
function blur () {
hoverStates[component.id] = false;
}
return (<div class='news-ticker'>
<span class='news-ticker__label'>{ props.label || 'The Latest News'}</span>
<span class='news-ticker__slider' style={style} onMouseOver={hover} onMouseOut={blur}>
{props.children}
</span>
</div>);
},
afterMount: function (component, el, setState) {
const {props} = component;
const slider = el.querySelector('.news-ticker__slider');
slider.addEventListener('transitionend', function (event) {
if (event.target !== slider) {
return;
}
setState({
offset: false
});
});
intervals[component.id] = setInterval(function () {
if (!hoverStates[component.id]) {
setState({
offset: slider.firstChild.offsetWidth
});
}
}, props.interval);
},
beforeUnmount: function (component, el) {
window.clearInterval(intervals[component.id]);
delete intervals[component.id];
delete hoverStates[component.id];
}
};