dnet45/modules/uoa-repository-dashboard-gui/trunk/src/public/js/core/scrollspy.js @ 46812
1 |
import { $, isInView } from '../util/index'; |
---|---|
2 |
|
3 |
export default function (UIkit) { |
4 |
|
5 |
UIkit.component('scrollspy', { |
6 |
|
7 |
args: 'cls', |
8 |
|
9 |
props: { |
10 |
cls: 'list', |
11 |
target: String, |
12 |
hidden: Boolean, |
13 |
offsetTop: Number, |
14 |
offsetLeft: Number, |
15 |
repeat: Boolean, |
16 |
delay: Number |
17 |
},
|
18 |
|
19 |
defaults: { |
20 |
cls: ['uk-scrollspy-inview'], |
21 |
target: false, |
22 |
hidden: true, |
23 |
offsetTop: 0, |
24 |
offsetLeft: 0, |
25 |
repeat: false, |
26 |
delay: 0, |
27 |
inViewClass: 'uk-scrollspy-inview' |
28 |
},
|
29 |
|
30 |
init() { |
31 |
this.$emitSync(); |
32 |
},
|
33 |
|
34 |
computed: { |
35 |
|
36 |
elements() { |
37 |
return this.target && $(this.target, this.$el) || this.$el; |
38 |
}
|
39 |
|
40 |
},
|
41 |
|
42 |
update: [ |
43 |
|
44 |
{
|
45 |
|
46 |
write() { |
47 |
if (this.hidden) { |
48 |
this.elements.filter(`:not(.${this.inViewClass})`).css('visibility', 'hidden'); |
49 |
}
|
50 |
}
|
51 |
|
52 |
},
|
53 |
|
54 |
{
|
55 |
|
56 |
read() { |
57 |
this.elements.each((_, el) => { |
58 |
|
59 |
if (!el._scrollspy) { |
60 |
var cls = $(el).attr('uk-scrollspy-class'); |
61 |
el._scrollspy = {toggles: cls && cls.split(',') || this.cls}; |
62 |
}
|
63 |
|
64 |
el._scrollspy.show = isInView(el, this.offsetTop, this.offsetLeft); |
65 |
|
66 |
});
|
67 |
},
|
68 |
|
69 |
write() { |
70 |
|
71 |
var index = this.elements.length === 1 ? 1 : 0; |
72 |
|
73 |
this.elements.each((_, el) => { |
74 |
|
75 |
var $el = $(el); |
76 |
|
77 |
var data = el._scrollspy; |
78 |
|
79 |
if (data.show) { |
80 |
|
81 |
if (!data.inview && !data.timer) { |
82 |
|
83 |
data.timer = setTimeout(() => { |
84 |
|
85 |
$el.css('visibility', '') |
86 |
.addClass(this.inViewClass) |
87 |
.toggleClass(data.toggles[0]) |
88 |
.trigger('inview'); |
89 |
|
90 |
data.inview = true; |
91 |
delete data.timer; |
92 |
|
93 |
}, this.delay * index++); |
94 |
|
95 |
}
|
96 |
|
97 |
} else { |
98 |
|
99 |
if (data.inview && this.repeat) { |
100 |
|
101 |
if (data.timer) { |
102 |
clearTimeout(data.timer); |
103 |
delete data.timer; |
104 |
}
|
105 |
|
106 |
$el.removeClass(this.inViewClass) |
107 |
.toggleClass(data.toggles[0]) |
108 |
.css('visibility', this.hidden ? 'hidden' : '') |
109 |
.trigger('outview'); |
110 |
|
111 |
data.inview = false; |
112 |
}
|
113 |
|
114 |
}
|
115 |
|
116 |
data.toggles.reverse(); |
117 |
|
118 |
});
|
119 |
|
120 |
},
|
121 |
|
122 |
events: ['scroll', 'load', 'resize'] |
123 |
|
124 |
}
|
125 |
|
126 |
]
|
127 |
|
128 |
});
|
129 |
|
130 |
}
|