Skip to content

Commit 3f2c831

Browse files
author
phucbui_viivue
committed
clean up indicator()
1 parent 0427113 commit 3f2c831

File tree

1 file changed

+172
-163
lines changed

1 file changed

+172
-163
lines changed

‎jquery.scroll-direction.js‎

Lines changed: 172 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -1,180 +1,189 @@
11
/**
22
* jQuery Scroll Direction Plugin 1.0.0
3+
* https://github.com/phucbm/jquery-scroll-direction-plugin
4+
*
5+
* MIT License | Copyright (c) 2020 Minh-Phuc Bui
36
*/
7+
48
(function ($) {
5-
"use strict";
6-
7-
let obj = {},
8-
pluginActive = false,
9-
settings = {
10-
topOffset: 0,
11-
bottomOffset: 0,
12-
atBottomIsAtMiddle: true,
13-
indicator: true,
14-
indicatorElement: $("body"),
15-
scrollUpClass: "scroll-up",
16-
scrollDownClass: "scroll-down",
17-
scrollAtTopClass: "scroll-top",
18-
scrollAtMiddleClass: "scroll-middle",
19-
scrollAtBottomClass: "scroll-bottom",
20-
extraTopOffset: {}
9+
"use strict";
10+
11+
let obj = {},
12+
pluginActive = false,
13+
settings = {
14+
topOffset: 0,
15+
bottomOffset: 0,
16+
atBottomIsAtMiddle: true,
17+
indicator: true,
18+
indicatorElement: $("body"),
19+
scrollUpClass: "scroll-up",
20+
scrollDownClass: "scroll-down",
21+
scrollAtTopClass: "scroll-top",
22+
scrollAtMiddleClass: "scroll-middle",
23+
scrollAtBottomClass: "scroll-bottom",
24+
extraIndicators: {}
25+
};
26+
27+
// Events
28+
let scrollDirection = $.Event("scrollDirection"),
29+
scrollDown = $.Event("scrollDown"),
30+
scrollUp = $.Event("scrollUp"),
31+
scrollAtTop = $.Event("scrollAtTop"),
32+
scrollAtMiddle = $.Event("scrollAtMiddle"),
33+
scrollAtBottom = $.Event("scrollAtBottom");
34+
35+
// Method: init()
36+
obj.init = function (options) {
37+
pluginActive = true;
38+
// update settings
39+
settings = $.extend(settings, options);
2140
};
2241

23-
// Events
24-
let scrollIndicator = $.Event("scrollIndicator"),
25-
scrollDown = $.Event("scrollDown"),
26-
scrollUp = $.Event("scrollUp"),
27-
scrollAtTop = $.Event("scrollAtTop"),
28-
scrollAtMiddle = $.Event("scrollAtMiddle"),
29-
scrollAtBottom = $.Event("scrollAtBottom");
30-
31-
// Method: init()
32-
obj.init = function (options) {
33-
pluginActive = true;
34-
// update settings
35-
settings = $.extend(settings, options);
36-
};
37-
38-
// Method: destroy()
39-
obj.destroy = function () {
40-
pluginActive = false;
41-
};
42-
43-
// APIs
44-
obj.isScrollingUp = false;
45-
obj.isScrollingDown = false;
46-
obj.isScrollAtTop = false;
47-
obj.isScrollAtMiddle = false;
48-
obj.isScrollAtBottom = false;
49-
50-
// Indicator: add class to indicate the scrolling status
51-
function indicator(groupIndicators, classIndicators) {
52-
if (settings.indicator) {
53-
let i = 0,
54-
l = groupIndicators.length;
55-
for (i; i < l; i++) {
56-
if (groupIndicators[i]) {
57-
settings.indicatorElement.addClass(classIndicators[i]);
58-
} else {
59-
settings.indicatorElement.removeClass(classIndicators[i]);
60-
}
61-
}
62-
}
63-
}
64-
65-
// Main process
66-
let $w = $(window),
67-
lastPosition = false,
68-
scrollAmount = $w.scrollTop(),
69-
maxScrollAmount = $(document).height() - $w.height();
70-
$w.on("load scroll resize", function () {
71-
if (pluginActive) {
72-
// update values
73-
scrollAmount = $w.scrollTop();
74-
75-
// check scroll directions
76-
if (scrollAmount > lastPosition && lastPosition >= 0) {
77-
// scroll down
78-
obj.isScrollingUp = false;
79-
obj.isScrollingDown = true;
80-
81-
$w.trigger(scrollDown);
82-
} else if (scrollAmount < lastPosition && lastPosition >= 0) {
83-
// scroll up
84-
obj.isScrollingUp = true;
85-
obj.isScrollingDown = false;
86-
87-
$w.trigger(scrollUp);
88-
} else if (scrollAmount < 0) {
89-
// elastic scroll: negative value
90-
obj.isScrollingUp = true;
91-
obj.isScrollingDown = false;
92-
93-
$w.trigger(scrollUp);
94-
} else if (scrollAmount > maxScrollAmount) {
95-
// elastic scroll: position value
96-
obj.isScrollingUp = false;
97-
obj.isScrollingDown = true;
98-
99-
$w.trigger(scrollDown);
100-
}
101-
102-
// update the last position
103-
lastPosition = scrollAmount;
104-
105-
// check scroll positions
106-
if (scrollAmount <= settings.topOffset) {
107-
// at top
108-
obj.isScrollAtTop = true;
109-
obj.isScrollAtMiddle = false;
110-
obj.isScrollAtBottom = false;
42+
// Method: destroy()
43+
obj.destroy = function () {
44+
pluginActive = false;
11145

112-
$w.trigger(scrollAtTop);
113-
} else if (
114-
scrollAmount >= maxScrollAmount - settings.bottomOffset &&
115-
scrollAmount <= maxScrollAmount
116-
) {
117-
// at bottom
46+
// update states
47+
obj.isScrollUp = false;
48+
obj.isScrollDown = false;
11849
obj.isScrollAtTop = false;
11950
obj.isScrollAtMiddle = false;
120-
obj.isScrollAtBottom = true;
51+
obj.isScrollAtBottom = false;
12152

122-
$w.trigger(scrollAtBottom);
53+
// remove all indicators
54+
indicator();
55+
};
12356

124-
if (settings.atBottomIsAtMiddle) {
125-
obj.isScrollAtMiddle = true;
126-
$w.trigger(scrollAtMiddle);
57+
// APIs
58+
obj.isScrollUp = false;
59+
obj.isScrollDown = false;
60+
obj.isScrollAtTop = false;
61+
obj.isScrollAtMiddle = false;
62+
obj.isScrollAtBottom = false;
63+
64+
// Indicator: add class to indicate the scrolling status
65+
function indicator(options) {
66+
if (settings.indicator) {
67+
let indicators = $.extend({
68+
"values": [
69+
obj.isScrollUp,
70+
obj.isScrollDown,
71+
obj.isScrollAtTop,
72+
obj.isScrollAtMiddle,
73+
obj.isScrollAtBottom
74+
],
75+
"classes": [
76+
settings.scrollUpClass,
77+
settings.scrollDownClass,
78+
settings.scrollAtTopClass,
79+
settings.scrollAtMiddleClass,
80+
settings.scrollAtBottomClass
81+
]
82+
}, options),
83+
i = 0,
84+
l = indicators.values.length;
85+
86+
for (i; i < l; i++) {
87+
if (indicators.values[i]) {
88+
settings.indicatorElement.addClass(indicators.classes[i]);
89+
} else {
90+
settings.indicatorElement.removeClass(indicators.classes[i]);
91+
}
92+
}
12793
}
128-
} else {
129-
// at middle
130-
obj.isScrollAtTop = false;
131-
obj.isScrollAtMiddle = true;
132-
obj.isScrollAtBottom = false;
94+
}
13395

134-
$w.trigger(scrollAtMiddle);
135-
}
136-
137-
// Indicator
138-
indicator(
139-
[
140-
obj.isScrollingUp,
141-
obj.isScrollingDown,
142-
obj.isScrollAtTop,
143-
obj.isScrollAtMiddle,
144-
obj.isScrollAtBottom
145-
],
146-
[
147-
settings.scrollUpClass,
148-
settings.scrollDownClass,
149-
settings.scrollAtTopClass,
150-
settings.scrollAtMiddleClass,
151-
settings.scrollAtBottomClass
152-
]
153-
);
154-
155-
// extra top offset
156-
let i = 0,
157-
l = settings.extraTopOffset.length;
158-
for (i; i < l; i++) {
159-
if (
160-
scrollAmount >= settings.extraTopOffset[i]["element"].offset().top
161-
) {
162-
settings.indicatorElement.addClass(
163-
settings.extraTopOffset[i]["indicator"]
164-
);
165-
} else {
166-
settings.indicatorElement.removeClass(
167-
settings.extraTopOffset[i]["indicator"]
168-
);
96+
// Main process
97+
let $w = $(window),
98+
lasScrollAmount = false,
99+
scrollAmount = $w.scrollTop(),
100+
maxScrollAmount = $(document).height() - $w.height();
101+
$w.on("load scroll resize", function () {
102+
if (pluginActive) {
103+
// update values
104+
scrollAmount = $w.scrollTop();
105+
106+
// check scroll directions
107+
if (scrollAmount > lasScrollAmount && lasScrollAmount >= 0) {
108+
// scroll down
109+
obj.isScrollUp = false;
110+
obj.isScrollDown = true;
111+
112+
$w.trigger(scrollDown);
113+
} else if (scrollAmount < lasScrollAmount && lasScrollAmount >= 0) {
114+
// scroll up
115+
obj.isScrollUp = true;
116+
obj.isScrollDown = false;
117+
118+
$w.trigger(scrollUp);
119+
} else if (scrollAmount < 0) {
120+
// elastic scroll: negative value
121+
obj.isScrollUp = true;
122+
obj.isScrollDown = false;
123+
124+
$w.trigger(scrollUp);
125+
} else if (scrollAmount > maxScrollAmount) {
126+
// elastic scroll: position value
127+
obj.isScrollUp = false;
128+
obj.isScrollDown = true;
129+
130+
$w.trigger(scrollDown);
131+
}
132+
133+
// update the last position
134+
lasScrollAmount = scrollAmount;
135+
136+
// check scroll positions
137+
if (scrollAmount <= settings.topOffset) {
138+
// at top
139+
obj.isScrollAtTop = true;
140+
obj.isScrollAtMiddle = false;
141+
obj.isScrollAtBottom = false;
142+
143+
$w.trigger(scrollAtTop);
144+
} else if (
145+
scrollAmount >= maxScrollAmount - settings.bottomOffset &&
146+
scrollAmount <= maxScrollAmount
147+
) {
148+
// at bottom
149+
obj.isScrollAtTop = false;
150+
obj.isScrollAtMiddle = false;
151+
obj.isScrollAtBottom = true;
152+
153+
$w.trigger(scrollAtBottom);
154+
155+
if (settings.atBottomIsAtMiddle) {
156+
obj.isScrollAtMiddle = true;
157+
$w.trigger(scrollAtMiddle);
158+
}
159+
} else {
160+
// at middle
161+
obj.isScrollAtTop = false;
162+
obj.isScrollAtMiddle = true;
163+
obj.isScrollAtBottom = false;
164+
165+
$w.trigger(scrollAtMiddle);
166+
}
167+
168+
// Indicator
169+
indicator();
170+
171+
// Extra indicators
172+
let i = 0,
173+
l = settings.extraIndicators.length;
174+
for (i; i < l; i++) {
175+
indicator({
176+
"values": [scrollAmount >= settings.extraIndicators[i]["element"].offset().top],
177+
"classes": [settings.extraIndicators[i]["indicator"]]
178+
});
179+
}
180+
181+
$w.trigger(scrollDirection);
169182
}
170-
}
183+
});
171184

172-
$w.trigger(scrollIndicator);
185+
// Only assign to jQuery.scrollDirection if jQuery is loaded
186+
if (jQuery) {
187+
jQuery.scrollDirection = obj;
173188
}
174-
});
175-
176-
// Only assign to jQuery.scrollIndicator if jQuery is loaded
177-
if (jQuery) {
178-
jQuery.scrollIndicator = obj;
179-
}
180189
})(jQuery);

0 commit comments

Comments
 (0)