1 | import Parallax from '../mixin/parallax';
|
2 | import {clamp, css, scrolledOver, query} from 'uikit-util';
|
3 |
|
4 | export default {
|
5 |
|
6 | mixins: [Parallax],
|
7 |
|
8 | props: {
|
9 | target: String,
|
10 | viewport: Number,
|
11 | easing: Number
|
12 | },
|
13 |
|
14 | data: {
|
15 | target: false,
|
16 | viewport: 1,
|
17 | easing: 1
|
18 | },
|
19 |
|
20 | computed: {
|
21 |
|
22 | target({target}, $el) {
|
23 | return getOffsetElement(target && query(target, $el) || $el);
|
24 | }
|
25 |
|
26 | },
|
27 |
|
28 | update: {
|
29 |
|
30 | read({percent, active}, type) {
|
31 |
|
32 | if (type !== 'scroll') {
|
33 | percent = false;
|
34 | }
|
35 |
|
36 | if (!active) {
|
37 | return;
|
38 | }
|
39 |
|
40 | const prev = percent;
|
41 | percent = ease(scrolledOver(this.target) / (this.viewport || 1), this.easing);
|
42 |
|
43 | return {
|
44 | percent,
|
45 | style: prev !== percent ? this.getCss(percent) : false
|
46 | };
|
47 | },
|
48 |
|
49 | write({style, active}) {
|
50 |
|
51 | if (!active) {
|
52 | this.reset();
|
53 | return;
|
54 | }
|
55 |
|
56 | style && css(this.$el, style);
|
57 |
|
58 | },
|
59 |
|
60 | events: ['scroll', 'resize']
|
61 | }
|
62 |
|
63 | };
|
64 |
|
65 | function ease(percent, easing) {
|
66 | return clamp(percent * (1 - (easing - easing * percent)));
|
67 | }
|
68 |
|
69 |
|
70 | function getOffsetElement(el) {
|
71 | return el
|
72 | ? 'offsetTop' in el
|
73 | ? el
|
74 | : getOffsetElement(el.parentNode)
|
75 | : document.body;
|
76 | }
|