Skip to content
This repository was archived by the owner on Oct 30, 2024. It is now read-only.

Commit e9c3122

Browse files
patrickkunkapatrickkunka
committed
add infnite scroll demo
1 parent bb71c6e commit e9c3122

File tree

6 files changed

+390
-21
lines changed

6 files changed

+390
-21
lines changed

‎demos/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ <h1>MixItUp Pagination Demos</h1>
1111
<li><a href="./multiple-pagination-ui/">Multiple Pagination UI</a></li>
1212
<li><a href="./responsive-pagination/">Responsive Pagination</a></li>
1313
<li><a href="./load-more-button/">Load More Button</a></li>
14+
<li><a href="./infinite-scroll/">Infinite Scroll</a></li>
1415
</ul>
1516
</body>
1617
</html>

‎demos/infinite-scroll/index.html

+207
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
6+
<link href="../reset.css" rel="stylesheet"/>
7+
<link href="./style.css" rel="stylesheet"/>
8+
9+
<title>MixItUp Pagination Demo - Infinite Scroll</title>
10+
11+
<!--
12+
NB: This grid's responsive behavior has been limited to 2 or 4 columns for
13+
simplicity, but could easily be combined with the responsive pagination demo
14+
to load in a dynamic amount of items while scrolling, as per the current
15+
column count.
16+
-->
17+
</head>
18+
<body>
19+
<div class="controls">
20+
<button type="button" class="control" data-filter="all">All</button>
21+
<button type="button" class="control" data-filter=".green">Green</button>
22+
<button type="button" class="control" data-filter=".blue">Blue</button>
23+
<button type="button" class="control" data-filter=".pink">Pink</button>
24+
<button type="button" class="control" data-filter="none">None</button>
25+
26+
<button type="button" class="control" data-sort="default:asc">Asc</button>
27+
<button type="button" class="control" data-sort="default:desc">Desc</button>
28+
</div>
29+
30+
<div class="container">
31+
<div class="mix green"></div>
32+
<div class="mix green"></div>
33+
<div class="mix blue"></div>
34+
<div class="mix pink"></div>
35+
<div class="mix green"></div>
36+
<div class="mix blue"></div>
37+
<div class="mix pink"></div>
38+
<div class="mix blue"></div>
39+
<div class="mix green"></div>
40+
<div class="mix green"></div>
41+
<div class="mix blue"></div>
42+
<div class="mix pink"></div>
43+
<div class="mix green"></div>
44+
<div class="mix blue"></div>
45+
<div class="mix pink"></div>
46+
<div class="mix blue"></div>
47+
<div class="mix green"></div>
48+
<div class="mix green"></div>
49+
<div class="mix blue"></div>
50+
<div class="mix pink"></div>
51+
<div class="mix green"></div>
52+
<div class="mix blue"></div>
53+
<div class="mix pink"></div>
54+
<div class="mix blue"></div>
55+
<div class="mix blue"></div>
56+
<div class="mix pink"></div>
57+
<div class="mix green"></div>
58+
<div class="mix blue"></div>
59+
<div class="mix pink"></div>
60+
<div class="mix blue"></div>
61+
<div class="mix green"></div>
62+
<div class="mix green"></div>
63+
<div class="mix blue"></div>
64+
<div class="mix pink"></div>
65+
<div class="mix green"></div>
66+
<div class="mix blue"></div>
67+
<div class="mix pink"></div>
68+
<div class="mix blue"></div>
69+
<div class="mix blue"></div>
70+
<div class="mix pink"></div>
71+
<div class="mix green"></div>
72+
<div class="mix blue"></div>
73+
<div class="mix pink"></div>
74+
<div class="mix blue"></div>
75+
<div class="mix green"></div>
76+
<div class="mix green"></div>
77+
<div class="mix blue"></div>
78+
<div class="mix pink"></div>
79+
<div class="mix green"></div>
80+
<div class="mix blue"></div>
81+
<div class="mix pink"></div>
82+
<div class="mix blue"></div>
83+
84+
<div class="gap"></div>
85+
<div class="gap"></div>
86+
<div class="gap"></div>
87+
</div>
88+
89+
<script src="../mixitup.min.js"></script>
90+
<script src="../../dist/mixitup-pagination.js"></script>
91+
92+
<script>
93+
var containerEl = document.querySelector('.container');
94+
var loadMoreEl = document.querySelector('.load-more');
95+
var currentLimit = 16;
96+
var incrementAmount = 4;
97+
var canLoadMore = true;
98+
var scrollThreshold = 50;
99+
100+
/**
101+
* A generic throttle function to prevent UI thrashing
102+
* on scroll.
103+
*
104+
* @param {function} fn
105+
* @param {number} interval
106+
* @return {function}
107+
*/
108+
109+
function throttle(fn, interval) {
110+
var timeoutId = -1;
111+
var last = -1;
112+
113+
return function() {
114+
var self = this;
115+
var args = arguments;
116+
var now = Date.now();
117+
var difference = last ? now - last : Infinity;
118+
119+
var later = function() {
120+
last = now;
121+
122+
fn.apply(self, args);
123+
};
124+
125+
if (!last || difference >= interval) {
126+
later();
127+
} else {
128+
clearTimeout(timeoutId);
129+
130+
timeoutId = setTimeout(later, interval - difference);
131+
}
132+
};
133+
}
134+
135+
/**
136+
* Checks if we are within the scroll threshold on each
137+
* scroll event, and if so, increments the page limit.
138+
*
139+
* @return {void}
140+
*/
141+
142+
function handleScroll() {
143+
if (mixer.isMixing() || !canLoadMore) return;
144+
145+
var scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
146+
var offset = scrollTop + window.innerHeight;
147+
var containerHeight = containerEl.offsetHeight;
148+
149+
if (offset >= containerHeight - scrollThreshold) {
150+
incrementPageLimit();
151+
}
152+
}
153+
154+
/**
155+
* Shows a set number of new targets at the bottom of
156+
* the page by incrementing the page limit.
157+
*
158+
* @return {void}
159+
*/
160+
161+
function incrementPageLimit() {
162+
currentLimit += incrementAmount;
163+
164+
mixer.paginate({limit: currentLimit});
165+
}
166+
167+
/**
168+
* Check whether the current matching collection of target
169+
* elements has additional hidden elements, and set the
170+
* `canLoadMore` flag accordingly.
171+
*
172+
* @param {mixitup.State} state
173+
* @return {void}
174+
*/
175+
176+
function handleMixEnd(state) {
177+
// At the end of each operation, we must check whether the current
178+
// matching collection of target elements has additional hidden
179+
// elements, and set the `canLoadMore` flag accordingly.
180+
181+
if (state.activePagination.limit + incrementAmount >= state.totalMatching) {
182+
canLoadMore = false;
183+
} else {
184+
canLoadMore = true;
185+
}
186+
187+
setTimeout(handleScroll, 10);
188+
}
189+
190+
// Instantiate mixitup
191+
192+
var mixer = mixitup(containerEl, {
193+
pagination: {
194+
limit: currentLimit
195+
},
196+
callbacks: {
197+
onMixEnd: handleMixEnd
198+
}
199+
});
200+
201+
// Attach a throttled scroll handler to the scroll event. Will fire
202+
// up to a maximum of once every 50ms.
203+
204+
window.addEventListener('scroll', throttle(handleScroll, 50));
205+
</script>
206+
</body>
207+
</html>

‎demos/infinite-scroll/style.css

+170
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
html,
2+
body {
3+
height: 100%;
4+
background: #f2f2f2;
5+
}
6+
7+
*,
8+
*:before,
9+
*:after {
10+
box-sizing: border-box;
11+
}
12+
13+
/* Controls
14+
---------------------------------------------------------------------- */
15+
16+
.controls {
17+
padding: 1rem;
18+
background: #333;
19+
font-size: 0.1px;
20+
}
21+
22+
.control {
23+
position: relative;
24+
display: inline-block;
25+
width: 2.7rem;
26+
height: 2.7rem;
27+
background: #444;
28+
cursor: pointer;
29+
font-size: 0.1px;
30+
color: white;
31+
transition: background 150ms;
32+
}
33+
34+
.control:hover {
35+
background: #3f3f3f;
36+
}
37+
38+
.control[data-filter]:after {
39+
content: '';
40+
position: absolute;
41+
width: 10px;
42+
height: 10px;
43+
top: calc(50% - 6px);
44+
left: calc(50% - 6px);
45+
border: 2px solid currentColor;
46+
border-radius: 2px;
47+
background: currentColor;
48+
transition: background-color 150ms, border-color 150ms;
49+
}
50+
51+
.control[data-sort]:after {
52+
content: '';
53+
position: absolute;
54+
width: 10px;
55+
height: 10px;
56+
border-top: 2px solid;
57+
border-left: 2px solid;
58+
top: calc(50% - 6px);
59+
left: calc(50% - 6px);
60+
transform: translateY(1px) rotate(45deg);
61+
}
62+
63+
.control[data-sort*=":desc"]:after {
64+
transform: translateY(-4px) rotate(-135deg);
65+
}
66+
67+
.mixitup-control-active {
68+
background: #393939;
69+
}
70+
71+
.mixitup-control-active[data-filter]:after {
72+
background: transparent;
73+
}
74+
75+
.control:first-of-type {
76+
border-radius: 3px 0 0 3px;
77+
}
78+
79+
.control:last-of-type {
80+
border-radius: 0 3px 3px 0;
81+
}
82+
83+
.control[data-filter] + .control[data-sort] {
84+
margin-left: .75rem;
85+
}
86+
87+
.control[data-filter=".green"] {
88+
color: #91e6c7;
89+
}
90+
91+
.control[data-filter=".blue"] {
92+
color: #5ecdde;
93+
}
94+
95+
.control[data-filter=".pink"] {
96+
color: #d595aa;
97+
}
98+
99+
.control[data-filter="none"] {
100+
color: #2f2f2f;
101+
}
102+
103+
/* Container
104+
---------------------------------------------------------------------- */
105+
106+
.container {
107+
padding: 1rem;
108+
text-align: justify;
109+
font-size: 0.1px;
110+
}
111+
112+
.container:after {
113+
content: '';
114+
display: inline-block;
115+
width: 100%;
116+
}
117+
118+
/* Target Elements
119+
---------------------------------------------------------------------- */
120+
121+
.mix,
122+
.gap {
123+
display: inline-block;
124+
vertical-align: top;
125+
}
126+
127+
.mix {
128+
background: #fff;
129+
border-top: .5rem solid currentColor;
130+
border-radius: 2px;
131+
margin-bottom: 1rem;
132+
position: relative;
133+
}
134+
135+
.mix:before {
136+
content: '';
137+
display: inline-block;
138+
padding-top: 56.25%;
139+
}
140+
141+
.mix.green {
142+
color: #91e6c7;
143+
}
144+
145+
.mix.pink {
146+
color: #d595aa;
147+
}
148+
149+
.mix.blue {
150+
color: #5ecdde;
151+
}
152+
153+
/* Grid Breakpoints
154+
---------------------------------------------------------------------- */
155+
156+
/* 2 Columns */
157+
158+
.mix,
159+
.gap {
160+
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
161+
}
162+
163+
/* 4 Columns */
164+
165+
@media screen and (min-width: 961px) {
166+
.mix,
167+
.gap {
168+
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
169+
}
170+
}

0 commit comments

Comments
 (0)