improve pagination
This commit is contained in:
parent
22d2749e7f
commit
45bf11a433
5 changed files with 117 additions and 50 deletions
|
@ -8,7 +8,8 @@
|
||||||
|
|
||||||
namespace helpers;
|
namespace helpers;
|
||||||
|
|
||||||
class Page {
|
class Page
|
||||||
|
{
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get all details of the given page number.
|
* Get all details of the given page number.
|
||||||
|
@ -17,8 +18,7 @@ class Page {
|
||||||
* @param int $pageNumber
|
* @param int $pageNumber
|
||||||
* @return bool
|
* @return bool
|
||||||
*/
|
*/
|
||||||
public function getPage($pageNumber)
|
public function getPage($pageNumber) {
|
||||||
{
|
|
||||||
$path = $this->getPathToFile($pageNumber);
|
$path = $this->getPathToFile($pageNumber);
|
||||||
$content = file_get_contents($path);
|
$content = file_get_contents($path);
|
||||||
|
|
||||||
|
@ -30,8 +30,7 @@ class Page {
|
||||||
* @param int $pageNumber
|
* @param int $pageNumber
|
||||||
* @return bool
|
* @return bool
|
||||||
*/
|
*/
|
||||||
public function exists($pageNumber)
|
public function exists($pageNumber) {
|
||||||
{
|
|
||||||
$path = $this->getPathToFile($pageNumber);
|
$path = $this->getPathToFile($pageNumber);
|
||||||
|
|
||||||
return file_exists($path);
|
return file_exists($path);
|
||||||
|
@ -43,8 +42,7 @@ class Page {
|
||||||
* @param array $issues
|
* @param array $issues
|
||||||
* @param int $numIssuesPerPage
|
* @param int $numIssuesPerPage
|
||||||
*/
|
*/
|
||||||
public function save($issues, $numIssuesPerPage)
|
public function save($issues, $numIssuesPerPage) {
|
||||||
{
|
|
||||||
if (empty($issues)) {
|
if (empty($issues)) {
|
||||||
return;
|
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);
|
return sprintf('%s/../data/pages/%d.json', dirname(__FILE__), $pageNumber);
|
||||||
}
|
}
|
||||||
|
|
||||||
private function formatIssues($issuesInPage)
|
private function formatIssues($issuesInPage) {
|
||||||
{
|
|
||||||
$formatted = array();
|
$formatted = array();
|
||||||
|
|
||||||
foreach ($issuesInPage as $issue) {
|
foreach ($issuesInPage as $issue) {
|
||||||
|
@ -92,4 +88,22 @@ class Page {
|
||||||
return $formatted;
|
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) {
|
public static function registerFilter(\Twig_Environment $environment) {
|
||||||
$environment->addFilter(static::getMarkdownFilter());
|
$environment->addFilter(static::getMarkdownFilter());
|
||||||
$environment->addFilter(static::getColorFilter());
|
$environment->addFilter(static::getColorFilter());
|
||||||
|
$environment->addFunction(static::getPaginationFunction());
|
||||||
}
|
}
|
||||||
|
|
||||||
private static function getMarkdownFilter() {
|
private static function getMarkdownFilter() {
|
||||||
|
@ -41,6 +42,24 @@ class Twig
|
||||||
$yiq = (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
$yiq = (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||||
return ($yiq >= 128) ? 'black' : 'white';
|
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
|
blockquote { // bootstrap 3 like styling
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
margin: 0 0 20px;
|
margin: 0 0 20px;
|
||||||
|
|
|
@ -13,3 +13,59 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endmacro %}
|
{% 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>
|
<hr>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
{{ macro.pagination(numPages, currentPage) }}
|
||||||
<div class="card-deck"><div class="row">
|
<div class="card-deck"><div class="row">
|
||||||
{% for issue in issues %}
|
{% for issue in issues %}
|
||||||
<div class="col-md-3">
|
<div class="col-md-3">
|
||||||
|
@ -53,35 +53,7 @@
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div></div>
|
</div></div>
|
||||||
<ul class="pagination">
|
{{ macro.pagination(numPages, currentPage) }}
|
||||||
{% 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>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
Reference in a new issue