1 |
46812
|
stefanos.g
|
import { $, offsetTop } from '../util/index';
|
2 |
|
|
|
3 |
|
|
export default function (UIkit) {
|
4 |
|
|
|
5 |
|
|
UIkit.component('scroll', {
|
6 |
|
|
|
7 |
|
|
props: {
|
8 |
|
|
duration: Number,
|
9 |
|
|
transition: String,
|
10 |
|
|
offset: Number
|
11 |
|
|
},
|
12 |
|
|
|
13 |
|
|
defaults: {
|
14 |
|
|
duration: 1000,
|
15 |
|
|
transition: 'easeOutExpo',
|
16 |
|
|
offset: 0
|
17 |
|
|
},
|
18 |
|
|
|
19 |
|
|
methods: {
|
20 |
|
|
|
21 |
|
|
scrollToElement(el) {
|
22 |
|
|
|
23 |
|
|
el = $(el);
|
24 |
|
|
|
25 |
|
|
// get / set parameters
|
26 |
|
|
var target = offsetTop(el) - this.offset,
|
27 |
|
|
docHeight = document.documentElement.offsetHeight,
|
28 |
|
|
winHeight = window.innerHeight;
|
29 |
|
|
|
30 |
|
|
if (target + winHeight > docHeight) {
|
31 |
|
|
target = docHeight - winHeight;
|
32 |
|
|
}
|
33 |
|
|
|
34 |
|
|
// animate to target, fire callback when done
|
35 |
|
|
$('html,body')
|
36 |
|
|
.stop()
|
37 |
|
|
.animate({scrollTop: parseInt(target, 10) || 1}, this.duration, this.transition)
|
38 |
|
|
.promise()
|
39 |
|
|
.then(() => this.$el.trigger('scrolled', [this]));
|
40 |
|
|
|
41 |
|
|
}
|
42 |
|
|
|
43 |
|
|
},
|
44 |
|
|
|
45 |
|
|
events: {
|
46 |
|
|
|
47 |
|
|
click(e) {
|
48 |
|
|
|
49 |
|
|
if (e.isDefaultPrevented()) {
|
50 |
|
|
return;
|
51 |
|
|
}
|
52 |
|
|
|
53 |
|
|
e.preventDefault();
|
54 |
|
|
this.scrollToElement($(this.$el[0].hash).length ? this.$el[0].hash : 'body');
|
55 |
|
|
}
|
56 |
|
|
|
57 |
|
|
}
|
58 |
|
|
|
59 |
|
|
});
|
60 |
|
|
|
61 |
|
|
if (!$.easing.easeOutExpo) {
|
62 |
|
|
$.easing.easeOutExpo = function (x, t, b, c, d) {
|
63 |
|
|
return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
|
64 |
|
|
};
|
65 |
|
|
}
|
66 |
|
|
|
67 |
|
|
}
|