vendor/mixitup-pagination
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial version

Browse Source
This commit is contained in:
Pascal Martineau
2018-01-17 14:09:34 -05:00
commit fa05241a63
52 changed files with 7254 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
demos/responsive-pagination/index.html Normal file
View 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
View 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;
}
}