1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | init = ->
|
7 | scens = [].slice.call document.querySelectorAll '.scen'
|
8 | current = scens[0]
|
9 | timeline = 0
|
10 | clickListener = ->
|
11 |
|
12 | enter = (x) ->
|
13 | x.classList.add 'active'
|
14 | fx ++timeline, [].slice.call x.querySelectorAll '.click, .delay, .sim'
|
15 |
|
16 | inview = (x) ->
|
17 | { top, height } = do x.getBoundingClientRect
|
18 | top <= innerHeight / 2 <= top + height
|
19 |
|
20 | update = ->
|
21 | if not inview current
|
22 | for x in scens
|
23 | if inview x
|
24 | for e in document.querySelectorAll('.active')
|
25 | e.classList.remove 'active'
|
26 | enter x
|
27 | current = x
|
28 | break
|
29 |
|
30 | fx = (t, [head, tail...]) ->
|
31 | if not head?
|
32 | return
|
33 |
|
34 | cb = ->
|
35 | if t isnt timeline
|
36 | return
|
37 | head.classList.add 'active'
|
38 | fx t, tail
|
39 |
|
40 | if head.classList.contains 'click'
|
41 | clickListener = cb
|
42 | else if head.classList.contains 'delay'
|
43 | if head.classList.contains 'long'
|
44 | setTimeout cb, 800
|
45 | else if head.classList.contains 'short'
|
46 | setTimeout cb, 200
|
47 | else
|
48 | setTimeout cb, 400
|
49 | else if head.classList.contains 'sim'
|
50 | do cb
|
51 |
|
52 | enter current
|
53 | addEventListener 'click', -> do clickListener
|
54 | addEventListener 'scroll', update
|
55 | addEventListener 'resize', update
|
56 | setInterval update, 2000
|
57 |
|
58 | if document.readyState == 'loading'
|
59 | document.addEventListener 'DOMContentLoaded', init
|
60 | else
|
61 | do init
|