improve pagination
This commit is contained in:
Lukas Winkler
parent
22d2749e7f
commit
45bf11a433
5 changed files with 117 additions and 50 deletions
|
|
@ -8,7 +8,8 @@
|
|||
|
||||
namespace helpers;
|
||||
|
||||
class Page {
|
||||
class Page
|
||||
{
|
||||
|
||||
/**
|
||||
* Get all details of the given page number.
|
||||
|
|
@ -17,8 +18,7 @@ class Page {
|
|||
* @param int $pageNumber
|
||||
* @return bool
|
||||
*/
|
||||
public function getPage($pageNumber)
|
||||
{
|
||||
public function getPage($pageNumber) {
|
||||
$path = $this->getPathToFile($pageNumber);
|
||||
$content = file_get_contents($path);
|
||||
|
||||
|
|
@ -30,8 +30,7 @@ class Page {
|
|||
* @param int $pageNumber
|
||||
* @return bool
|
||||
*/
|
||||
public function exists($pageNumber)
|
||||
{
|
||||
public function exists($pageNumber) {
|
||||
$path = $this->getPathToFile($pageNumber);
|
||||
|
||||
return file_exists($path);
|
||||
|
|
@ -43,8 +42,7 @@ class Page {
|
|||
* @param array $issues
|
||||
* @param int $numIssuesPerPage
|
||||
*/
|
||||
public function save($issues, $numIssuesPerPage)
|
||||
{
|
||||
public function save($issues, $numIssuesPerPage) {
|
||||
if (empty($issues)) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -67,13 +65,11 @@ class Page {
|
|||
}
|
||||
}
|
||||
|
||||
private function getPathToFile($pageNumber)
|
||||
{
|
||||
private function getPathToFile($pageNumber) {
|
||||
return sprintf('%s/../data/pages/%d.json', dirname(__FILE__), $pageNumber);
|
||||
}
|
||||
|
||||
private function formatIssues($issuesInPage)
|
||||
{
|
||||
private function formatIssues($issuesInPage) {
|
||||
$formatted = array();
|
||||
|
||||
foreach ($issuesInPage as $issue) {
|
||||
|
|
@ -92,4 +88,22 @@ class Page {
|
|||
return $formatted;
|
||||
}
|
||||
|
||||
public function getPaginationArray($numPages, $page, $padding = 2) {
|
||||
$pages = [1];
|
||||
$i = 2;
|
||||
while ($i <= $numPages) {
|
||||
if ($i < ($page - $padding - 1)) {
|
||||
$pages[] = "d";
|
||||
$i = $page - $padding;
|
||||
} elseif (($i > ($page + $padding)) && ($numPages > ($page + $padding + 2))) {
|
||||
# Wenn (
|
||||
$pages[] = "d";
|
||||
$i = $numPages;
|
||||
}
|
||||
$pages[] = $i;
|
||||
$i++;
|
||||
}
|
||||
return $pages;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -18,6 +18,7 @@ class Twig
|
|||
public static function registerFilter(\Twig_Environment $environment) {
|
||||
$environment->addFilter(static::getMarkdownFilter());
|
||||
$environment->addFilter(static::getColorFilter());
|
||||
$environment->addFunction(static::getPaginationFunction());
|
||||
}
|
||||
|
||||
private static function getMarkdownFilter() {
|
||||
|
|
@ -41,6 +42,24 @@ class Twig
|
|||
$yiq = (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||
return ($yiq >= 128) ? 'black' : 'white';
|
||||
});
|
||||
}
|
||||
|
||||
private static function getPaginationFunction() {
|
||||
return new \Twig_Function('paginationFunction', function ($numPages, $page, $padding = 2) {
|
||||
$pages = [1];
|
||||
$i = 2;
|
||||
while ($i <= $numPages) {
|
||||
if ($i < ($page - $padding - 1)) {
|
||||
$pages[] = "d";
|
||||
$i = $page - $padding;
|
||||
} elseif (($i > ($page + $padding)) && ($numPages > ($page + $padding + 2))) {
|
||||
$pages[] = "d";
|
||||
$i = $numPages;
|
||||
}
|
||||
$pages[] = $i;
|
||||
$i++;
|
||||
}
|
||||
return $pages;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -64,6 +64,12 @@ h1 a {
|
|||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
svg {
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote { // bootstrap 3 like styling
|
||||
padding: 10px 20px;
|
||||
margin: 0 0 20px;
|
||||
|
|
|
|||
|
|
@ -13,3 +13,59 @@
|
|||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
{% macro pagination(num_pages, page) %}
|
||||
{% import _self as m %}
|
||||
{% set pagearray = paginationFunction(num_pages, page,5) %}
|
||||
<!-- License of svg icons - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) -->
|
||||
<ul class="pagination">
|
||||
{% if page > 1 %}
|
||||
<li class="page-item">
|
||||
<a rel="prev" href="{{ path_for('page', [], { 'page': page - 1 }) }}" class="page-link">
|
||||
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1203 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="page-item disabled">
|
||||
<a rel="prev" href="" class="page-link">
|
||||
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1203 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% for i in pagearray %}
|
||||
{% if i == "d" %}
|
||||
<li class="page-item disabled">
|
||||
<a href="#" class=" other page-link">…</a>
|
||||
</li>
|
||||
{% else %}
|
||||
{{ m.printpage(i, page) }}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<li class="page-item">
|
||||
{% if page < num_pages %}
|
||||
<a rel="next" href="{{ path_for('page', [], { 'page': page + 1 }) }}" class="page-link">
|
||||
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
{% else %}
|
||||
<a rel="next" href="" class="disabled page-link">
|
||||
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
</ul>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro printpage(i,active) %}
|
||||
<li class="page-item {{ i == active ? "active" : "other" }}">
|
||||
<a href="{{ path_for('page', [], { 'page': i }) }}"
|
||||
class="page-link">{{ i }}</a>
|
||||
</li>
|
||||
{% endmacro %}
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
<hr>
|
||||
|
||||
<div class="container">
|
||||
|
||||
{{ macro.pagination(numPages, currentPage) }}
|
||||
<div class="card-deck"><div class="row">
|
||||
{% for issue in issues %}
|
||||
<div class="col-md-3">
|
||||
|
|
@ -53,35 +53,7 @@
|
|||
</div>
|
||||
{% endfor %}
|
||||
</div></div>
|
||||
<ul class="pagination">
|
||||
{% if currentPage > 1 %}
|
||||
<li class="page-item">
|
||||
<a href="{{ path_for('page', [], { 'page': previousPage }) }}"
|
||||
aria-label="Previous page" class="page-link">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% for pageEntry in 1..numPages %}
|
||||
<li class="page-item {% if pageEntry == currentPage %}active{% endif %}">
|
||||
<a class="page-link" href="{{ path_for('page', [], { 'page': pageEntry }) }}"
|
||||
title="Page {{ pageEntry }}">{{ pageEntry }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
{% if currentPage != numPages %}
|
||||
<li class="page-item">
|
||||
<a href="{{ path_for('page', [], { 'page': nextPage }) }}"
|
||||
class="page-link" aria-label="Next page">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
||||
{{ macro.pagination(numPages, currentPage) }}
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Reference in a new issue