Initial version
This commit is contained in:
72
demos/basic/index.html
Normal file
72
demos/basic/index.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp Pagination Demo - Basic Pagination Functionality</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<div class="controls-pagination">
|
||||
<div class="mixitup-page-list"></div>
|
||||
<div class="mixitup-page-stats"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
<script src="../../dist/mixitup-pagination.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
pagination: {
|
||||
limit: 4
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
270
demos/basic/style.css
Normal file
270
demos/basic/style.css
Normal file
@@ -0,0 +1,270 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: background-color 150ms, border-color 150ms;
|
||||
}
|
||||
|
||||
.control[data-sort]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Pagination Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls-pagination {
|
||||
padding: 1rem;
|
||||
font-size: 0.1px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.controls-pagination:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mixitup-page-list,
|
||||
.mixitup-page-stats {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mixitup-page-list {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mixitup-page-stats {
|
||||
font-size: .9rem;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-family: 'helvetica', arial, sans-serif;
|
||||
}
|
||||
|
||||
.mixitup-control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #fff;
|
||||
border-top: 3px solid transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
margin-right: 1px;
|
||||
cursor: pointer;
|
||||
font-size: .9rem;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-family: 'helvetica', arial, sans-serif;
|
||||
transition: color 150ms, border-color 150ms;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mixitup-control:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.mixitup-control:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.mixitup-control:not(.mixitup-control-active):hover {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
border-bottom-color: #91e6c7;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mixitup-control:disabled {
|
||||
background: #eaeaea;
|
||||
color: #aaa;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mixitup-control-truncation-marker {
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
line-height: 2.2em;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
17
demos/index.html
Normal file
17
demos/index.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MixItUp Pagination Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>MixItUp Pagination Demos</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="./basic/">Basic Pagination Functionality</a></li>
|
||||
<li><a href="./multiple-pagination-ui/">Multiple Pagination UI</a></li>
|
||||
<li><a href="./responsive-pagination/">Responsive Pagination</a></li>
|
||||
<li><a href="./load-more-button/">Load More Button</a></li>
|
||||
<li><a href="./infinite-scroll/">Infinite Scroll</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
207
demos/infinite-scroll/index.html
Normal file
207
demos/infinite-scroll/index.html
Normal file
@@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp Pagination Demo - Infinite Scroll</title>
|
||||
|
||||
<!--
|
||||
NB: This grid's responsive behavior has been limited to 2 or 4 columns for
|
||||
simplicity, but could easily be combined with the responsive pagination demo
|
||||
to load in a dynamic amount of items while scrolling, as per the current
|
||||
column count.
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
<script src="../../dist/mixitup-pagination.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
var loadMoreEl = document.querySelector('.load-more');
|
||||
var currentLimit = 16;
|
||||
var incrementAmount = 4;
|
||||
var canLoadMore = true;
|
||||
var scrollThreshold = 50;
|
||||
|
||||
/**
|
||||
* A generic throttle function to prevent UI thrashing
|
||||
* on scroll.
|
||||
*
|
||||
* @param {function} fn
|
||||
* @param {number} interval
|
||||
* @return {function}
|
||||
*/
|
||||
|
||||
function throttle(fn, interval) {
|
||||
var timeoutId = -1;
|
||||
var last = -1;
|
||||
|
||||
return function() {
|
||||
var self = this;
|
||||
var args = arguments;
|
||||
var now = Date.now();
|
||||
var difference = last ? now - last : Infinity;
|
||||
|
||||
var later = function() {
|
||||
last = now;
|
||||
|
||||
fn.apply(self, args);
|
||||
};
|
||||
|
||||
if (!last || difference >= interval) {
|
||||
later();
|
||||
} else {
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
timeoutId = setTimeout(later, interval - difference);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if we are within the scroll threshold on each
|
||||
* scroll event, and if so, increments the page limit.
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function handleScroll() {
|
||||
if (mixer.isMixing() || !canLoadMore) return;
|
||||
|
||||
var scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
|
||||
var offset = scrollTop + window.innerHeight;
|
||||
var containerHeight = containerEl.offsetHeight;
|
||||
|
||||
if (offset >= containerHeight - scrollThreshold) {
|
||||
incrementPageLimit();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows a set number of new targets at the bottom of
|
||||
* the page by incrementing the page limit.
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function incrementPageLimit() {
|
||||
currentLimit += incrementAmount;
|
||||
|
||||
mixer.paginate({limit: currentLimit});
|
||||
}
|
||||
|
||||
/**
|
||||
* Check whether the current matching collection of target
|
||||
* elements has additional hidden elements, and set the
|
||||
* `canLoadMore` flag accordingly.
|
||||
*
|
||||
* @param {mixitup.State} state
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function handleMixEnd(state) {
|
||||
// At the end of each operation, we must check whether the current
|
||||
// matching collection of target elements has additional hidden
|
||||
// elements, and set the `canLoadMore` flag accordingly.
|
||||
|
||||
if (state.activePagination.limit + incrementAmount >= state.totalMatching) {
|
||||
canLoadMore = false;
|
||||
} else {
|
||||
canLoadMore = true;
|
||||
}
|
||||
|
||||
setTimeout(handleScroll, 10);
|
||||
}
|
||||
|
||||
// Instantiate mixitup
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
pagination: {
|
||||
limit: currentLimit
|
||||
},
|
||||
callbacks: {
|
||||
onMixEnd: handleMixEnd
|
||||
}
|
||||
});
|
||||
|
||||
// Attach a throttled scroll handler to the scroll event. Will fire
|
||||
// up to a maximum of once every 50ms.
|
||||
|
||||
window.addEventListener('scroll', throttle(handleScroll, 50));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
170
demos/infinite-scroll/style.css
Normal file
170
demos/infinite-scroll/style.css
Normal file
@@ -0,0 +1,170 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: background-color 150ms, border-color 150ms;
|
||||
}
|
||||
|
||||
.control[data-sort]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
113
demos/load-more-button/index.html
Normal file
113
demos/load-more-button/index.html
Normal file
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp Pagination Demo - Load More Button</title>
|
||||
|
||||
<!--
|
||||
NB: This grid's responsive behavior has been limited to 2 or 4 columns for
|
||||
simplicity, but could easily be combined with the responsive pagination demo
|
||||
to load in a dynamic amount of items on each click, as per the current
|
||||
column count.
|
||||
-->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<div class="load-more-wrapper">
|
||||
<button type="button" class="load-more">Load more</button>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
<script src="../../dist/mixitup-pagination.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
var loadMoreEl = document.querySelector('.load-more');
|
||||
var currentLimit = 4;
|
||||
var incrementAmount = 4;
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
pagination: {
|
||||
limit: currentLimit
|
||||
},
|
||||
callbacks: {
|
||||
onMixEnd: handleMixEnd
|
||||
}
|
||||
});
|
||||
|
||||
function handleMixEnd(state) {
|
||||
// At the end of each operation, we must check whether the current
|
||||
// matching collection of target elements has additional hidden
|
||||
// elements, and enable or disable the load more button as
|
||||
// appropriate
|
||||
|
||||
if (state.activePagination.limit + incrementAmount >= state.totalMatching) {
|
||||
// Disable button
|
||||
|
||||
loadMoreEl.disabled = true;
|
||||
} else if (loadMoreEl.disabled) {
|
||||
// Enable button
|
||||
|
||||
loadMoreEl.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleLoadMoreClick() {
|
||||
// On each click of the load more button, we increment
|
||||
// the current limit by a defined amount
|
||||
|
||||
currentLimit += incrementAmount;
|
||||
|
||||
mixer.paginate({limit: currentLimit});
|
||||
}
|
||||
|
||||
loadMoreEl.addEventListener('click', handleLoadMoreClick);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
198
demos/load-more-button/style.css
Normal file
198
demos/load-more-button/style.css
Normal file
@@ -0,0 +1,198 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: background-color 150ms, border-color 150ms;
|
||||
}
|
||||
|
||||
.control[data-sort]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Load More Button
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.load-more-wrapper {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
display: inline-block;
|
||||
background: white;
|
||||
font-size: 1rem;
|
||||
font-family: 'helvetica', arial, sans-serif;
|
||||
padding: 1rem;
|
||||
min-width: 8rem;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, .05);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.load-more:disabled {
|
||||
opacity: .5;
|
||||
color: #aaa;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
18
demos/mixitup.min.js
vendored
Normal file
18
demos/mixitup.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
77
demos/multiple-pagination-ui/index.html
Normal file
77
demos/multiple-pagination-ui/index.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp Pagination Demo - Multiple Pagination UI</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="controls-pagination">
|
||||
<div class="mixitup-page-list"></div>
|
||||
<div class="mixitup-page-stats"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<div class="controls-pagination">
|
||||
<div class="mixitup-page-list"></div>
|
||||
<div class="mixitup-page-stats"></div>
|
||||
</div>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
<script src="../../dist/mixitup-pagination.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
pagination: {
|
||||
limit: 4
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
270
demos/multiple-pagination-ui/style.css
Normal file
270
demos/multiple-pagination-ui/style.css
Normal file
@@ -0,0 +1,270 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: background-color 150ms, border-color 150ms;
|
||||
}
|
||||
|
||||
.control[data-sort]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Pagination Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls-pagination {
|
||||
padding: 1rem;
|
||||
font-size: 0.1px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.controls-pagination:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mixitup-page-list,
|
||||
.mixitup-page-stats {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mixitup-page-list {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mixitup-page-stats {
|
||||
font-size: .9rem;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-family: 'helvetica', arial, sans-serif;
|
||||
}
|
||||
|
||||
.mixitup-control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #fff;
|
||||
border-top: 3px solid transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
margin-right: 1px;
|
||||
cursor: pointer;
|
||||
font-size: .9rem;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-family: 'helvetica', arial, sans-serif;
|
||||
transition: color 150ms, border-color 150ms;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mixitup-control:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.mixitup-control:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.mixitup-control:not(.mixitup-control-active):hover {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
border-bottom-color: #91e6c7;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mixitup-control:disabled {
|
||||
background: #eaeaea;
|
||||
color: #aaa;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mixitup-control-truncation-marker {
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
line-height: 2.2em;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
72
demos/reset.css
Normal file
72
demos/reset.css
Normal file
@@ -0,0 +1,72 @@
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-webkit-border-radius: 0;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 0 none;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
168
demos/responsive-pagination/index.html
Normal file
168
demos/responsive-pagination/index.html
Normal file
@@ -0,0 +1,168 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="../reset.css" rel="stylesheet"/>
|
||||
<link href="./style.css" rel="stylesheet"/>
|
||||
|
||||
<title>MixItUp Pagination Demo - Responsive Pagination</title>
|
||||
|
||||
<!--
|
||||
Responsive pagination enables to define the initial pagination limit based on the
|
||||
viewport width and then make real time adjustments in reaction to resize events. This
|
||||
is crucial when we want to maintain a full final row in our grid when our CSS contains a
|
||||
mixer of odd and even column counts at different breakpoints.
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<button type="button" class="control" data-filter="all">All</button>
|
||||
<button type="button" class="control" data-filter=".green">Green</button>
|
||||
<button type="button" class="control" data-filter=".blue">Blue</button>
|
||||
<button type="button" class="control" data-filter=".pink">Pink</button>
|
||||
<button type="button" class="control" data-filter="none">None</button>
|
||||
|
||||
<button type="button" class="control" data-sort="default:asc">Asc</button>
|
||||
<button type="button" class="control" data-sort="default:desc">Desc</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix green"></div>
|
||||
<div class="mix blue"></div>
|
||||
<div class="mix pink"></div>
|
||||
<div class="mix blue"></div>
|
||||
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
<div class="gap"></div>
|
||||
</div>
|
||||
|
||||
<div class="controls-pagination">
|
||||
<div class="mixitup-page-list"></div>
|
||||
<div class="mixitup-page-stats"></div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" class="column-counter"/>
|
||||
|
||||
<script src="../mixitup.min.js"></script>
|
||||
<script src="../../dist/mixitup-pagination.js"></script>
|
||||
|
||||
<script>
|
||||
var containerEl = document.querySelector('.container');
|
||||
var columnCounter = document.querySelector('.column-counter');
|
||||
var currentLimit = -1;
|
||||
|
||||
// NB: The `columnLimitLookup` object is used as a lookup table for
|
||||
// the pagination limit relative to a particular number of columns.
|
||||
// This could also be expressed a function if, for example, the limit
|
||||
// is always twice the number of columns (e.g. 2 rows), but
|
||||
// this is often not the desired behavior case.
|
||||
|
||||
var columnLimitLookup = {
|
||||
'2': 8,
|
||||
'3': 9,
|
||||
'4': 12,
|
||||
'5': 15
|
||||
};
|
||||
|
||||
/**
|
||||
* Reads the value of the `font-size` CSS property from a hidden
|
||||
* `.column-counter` element in the DOM. This ensures all our responsive
|
||||
* behavior is defined solely in our CSS, without need to track viewport
|
||||
* width or define breakpoints in our JavaScript, which may also be
|
||||
* unreliable as scroll bars are added and removed on certain platforms
|
||||
* (i.e. windows). See style.css to understand how this is defined
|
||||
* at each breakpoint.
|
||||
*
|
||||
* @returns {number}
|
||||
*/
|
||||
|
||||
function getColumns() {
|
||||
var styles = window.getComputedStyle(columnCounter);
|
||||
|
||||
return parseInt(styles.fontSize);
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {number}
|
||||
*/
|
||||
|
||||
function getPaginationLimit() {
|
||||
var columns = getColumns();
|
||||
|
||||
return columnLimitLookup[columns];
|
||||
}
|
||||
|
||||
/**
|
||||
* Compares the new limit to the current limit, and if has changed,
|
||||
* triggers a .paginate() API call to update the mixer.
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
|
||||
function handleResize() {
|
||||
var newLimit = getPaginationLimit();
|
||||
|
||||
// If the limit has not changed since the last resize event, do nothing.
|
||||
|
||||
if (newLimit === currentLimit) return;
|
||||
|
||||
currentLimit = newLimit;
|
||||
|
||||
console.log('Changing to a limit of ' + currentLimit + ' items per page');
|
||||
|
||||
mixer.paginate({
|
||||
limit: currentLimit
|
||||
}, false);
|
||||
|
||||
// NB: We don't want to animate the limit change and create
|
||||
// unneeded jank on resize, so `false` is passed to ensure the
|
||||
// operation happens syncronously.
|
||||
}
|
||||
|
||||
// Get the initial limit which with to instantiate the mixer.
|
||||
|
||||
currentLimit = getPaginationLimit();
|
||||
|
||||
// Instantiate MixItUp
|
||||
|
||||
var mixer = mixitup(containerEl, {
|
||||
pagination: {
|
||||
limit: currentLimit
|
||||
},
|
||||
animation: {
|
||||
nudge: false
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Instantiating with a limit of ' + currentLimit + ' items per page');
|
||||
|
||||
// Add a resize event handler. NB: You may want to throttle this
|
||||
// in production for performance, as the window.getComputedStyles()
|
||||
// call can be expensive.
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
295
demos/responsive-pagination/style.css
Normal file
295
demos/responsive-pagination/style.css
Normal file
@@ -0,0 +1,295 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
font-size: 0.1px;
|
||||
color: white;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
.control[data-filter]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: background-color 150ms, border-color 150ms;
|
||||
}
|
||||
|
||||
.control[data-sort]:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
top: calc(50% - 6px);
|
||||
left: calc(50% - 6px);
|
||||
transform: translateY(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.control[data-sort*=":desc"]:after {
|
||||
transform: translateY(-4px) rotate(-135deg);
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
background: #393939;
|
||||
}
|
||||
|
||||
.mixitup-control-active[data-filter]:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.control:last-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.control[data-filter] + .control[data-sort] {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.control[data-filter=".green"] {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.control[data-filter=".blue"] {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
.control[data-filter=".pink"] {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.control[data-filter="none"] {
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
/* Pagination Controls
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.controls-pagination {
|
||||
padding: 1rem;
|
||||
font-size: 0.1px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.controls-pagination:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mixitup-page-list,
|
||||
.mixitup-page-stats {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mixitup-page-list {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mixitup-page-stats {
|
||||
font-size: .9rem;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-family: 'helvetica', arial, sans-serif;
|
||||
}
|
||||
|
||||
.mixitup-control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
background: #fff;
|
||||
border-top: 3px solid transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
margin-right: 1px;
|
||||
cursor: pointer;
|
||||
font-size: .9rem;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-family: 'helvetica', arial, sans-serif;
|
||||
transition: color 150ms, border-color 150ms;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mixitup-control:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.mixitup-control:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.mixitup-control:not(.mixitup-control-active):hover {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mixitup-control-active {
|
||||
border-bottom-color: #91e6c7;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mixitup-control:disabled {
|
||||
background: #eaeaea;
|
||||
color: #aaa;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mixitup-control-truncation-marker {
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
line-height: 2.2em;
|
||||
}
|
||||
|
||||
/* Container
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Target Elements
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mix {
|
||||
background: #fff;
|
||||
border-top: .5rem solid currentColor;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mix:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mix.green {
|
||||
color: #91e6c7;
|
||||
}
|
||||
|
||||
.mix.pink {
|
||||
color: #d595aa;
|
||||
}
|
||||
|
||||
.mix.blue {
|
||||
color: #5ecdde;
|
||||
}
|
||||
|
||||
/* Grid Breakpoints & Column Counts
|
||||
---------------------------------------------------------------------- */
|
||||
|
||||
/* 2 Columns */
|
||||
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
|
||||
}
|
||||
|
||||
/**
|
||||
* NB: The `font-size` property on the hidden `.column-counter` element is set to
|
||||
* a value representing the number of columns. We will parse this value on init and
|
||||
* on resize, which avoids the need to track viewport width and define
|
||||
* breakpoints in our JavaScript which can also be unreliable when scrollbars
|
||||
* are added/removed. Any CSS property which supports a numeric value could
|
||||
* be used instead of font-size.
|
||||
*/
|
||||
|
||||
.column-counter {
|
||||
font-size: 2px;
|
||||
}
|
||||
|
||||
/* 3 Columns */
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
|
||||
}
|
||||
|
||||
.column-counter {
|
||||
font-size: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 Columns */
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
|
||||
}
|
||||
|
||||
.column-counter {
|
||||
font-size: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 5 Columns */
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.mix,
|
||||
.gap {
|
||||
width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
|
||||
}
|
||||
|
||||
.column-counter {
|
||||
font-size: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user