Update Bulma pagination template for version 0.6.x

README.md

@@ -94,6 +94,7 @@ There are a few additional pagination templates, that could be used out of the b
 * `@KnpPaginator/Pagination/twitter_bootstrap_v3_pagination.html.twig`
 * `@KnpPaginator/Pagination/twitter_bootstrap_pagination.html.twig`
 * `@KnpPaginator/Pagination/foundation_v5_pagination.html.twig`
+* `@KnpPaginator/Pagination/bulma_pagination.html.twig`
 
 
 ## Usage examples:

Resources/doc/paginator_configuration.md

@@ -20,5 +20,8 @@ knp_paginator:
 There are a few additional pagination templates, that could be used out of the box in `knp_paginator.template.pagination` key:
 
 * `@KnpPaginator/Pagination/sliding.html.twig` (by default)
+* `@KnpPaginator/Pagination/twitter_bootstrap_v4_pagination.html.twig`
 * `@KnpPaginator/Pagination/twitter_bootstrap_v3_pagination.html.twig`
 * `@KnpPaginator/Pagination/twitter_bootstrap_pagination.html.twig`
+* `@KnpPaginator/Pagination/foundation_v5_pagination.html.twig`
+* `@KnpPaginator/Pagination/bulma_pagination.html.twig`

Resources/doc/templates.md

@@ -153,3 +153,29 @@ Or even in Twig:
         ) }}
 ```
 
+## Customize rendering
+
+### Bulma
+
+You can configure the position, the size, and make the buttons rounded or not:
+- `position`: `'left'`, `'centered'`, or `'right'`. By default it's `'left'` 
+- `size`: `'small'`, `'medium'`, or `'large'`. By default, size is not modified
+- `rounded`: `true` or `false`. By default it's `false`
+
+In your controller:
+```php
+$pagination->setCustomParameters([
+    'position' => 'centered',
+    'size' => 'large',
+    'rounded' => true,
+]);
+```
+
+or in the view:
+```twig
+{{ knp_pagination_render(pagination, null, {}, {
+   'position': 'centered',
+   'size': 'large'
+   'rounded': true,
+}) }}
+```

Resources/views/Pagination/bulma_pagination.html.twig

@@ -1,41 +1,68 @@
 {# bulma Sliding pagination control implementation #}
 
+{% set position = position|default('left') %}
+{% set rounded = rounded|default(false) %}
+{% set size = size|default(null) %}
+
+{% set classes = ['pagination'] %}
+
+{% if position != 'left' %}{% set classes = classes|merge(['is-' ~ position]) %}{% endif %}
+{% if rounded %}{% set classes = classes|merge(['is-rounded']) %}{% endif %}
+{% if size != null %}{% set classes = classes|merge(['is-' ~ size]) %}{% endif %}
+
 {% if pageCount > 1 %}
-    <nav class="pagination">
+    <nav class="{{ classes|join(' ') }}" role="navigation" aria-label="pagination">
         {% if previous is defined %}
-            <a class="button" href="{{ path(route, query|merge({(pageParameterName): previous})) }}">&lt;</a>
+            <a class="pagination-previous" href="{{ path(route, query|merge({(pageParameterName): previous})) }}">{{ 'label_previous'|trans({}, 'KnpPaginatorBundle') }}</a>
         {% else %}
-            <a class="button" disabled>&lt;</a>
+            <a class="pagination-previous" disabled>{{ 'label_previous'|trans({}, 'KnpPaginatorBundle') }}</a>
         {% endif %}
+
         {% if next is defined %}
-            <a class="button" href="{{ path(route, query|merge({(pageParameterName): next})) }}">&gt;</a>
+            <a class="pagination-next" href="{{ path(route, query|merge({(pageParameterName): next})) }}">{{ 'label_next'|trans({}, 'KnpPaginatorBundle') }}</a>
         {% else %}
-            <a class="button" disabled>&gt;</a>
+            <a class="pagination-next" disabled>{{ 'label_next'|trans({}, 'KnpPaginatorBundle') }}</a>
         {% endif %}
-        <ul>
+
+        <ul class="pagination-list">
             <li>
-                <a class="button" href="{{ path(route, query|merge({(pageParameterName): first})) }}">1</a>
+                {% if current == first %}
+                    <a class="pagination-link is-current" aria-label="Page {{ current }}" aria-current="page" href="{{ path(route, query|merge({(pageParameterName): first})) }}">1</a>
+                {% else %}
+                    <a class="pagination-link" href="{{ path(route, query|merge({(pageParameterName): first})) }}">1</a>
+                {% endif %}
             </li>
+
             {% if pagesInRange[0] - first >= 2 %}
                 <li>
-                    <span>…</span>
+                    <span class="pagination-ellipsis">&hellip;</span>
                 </li>
             {% endif %}
+
             {% for page in pagesInRange %}
                 {% if first != page and page != last %}
                     <li>
-                        <a class="button"
-                           href="{{ path(route, query|merge({(pageParameterName): page})) }}">{{ page }}</a>
+                        {% if page == current %}
+                            <a class="pagination-link is-current" aria-label="Page {{ current }}" aria-current="page" href="{{ path(route, query|merge({(pageParameterName): page})) }}">{{ page }}</a>
+                        {% else %}
+                            <a class="pagination-link" aria-label="Goto page {{ page }}" href="{{ path(route, query|merge({(pageParameterName): page})) }}">{{ page }}</a>
+                        {% endif %}
                     </li>
                 {% endif %}
             {% endfor %}
-            {% if  last - pagesInRange[pagesInRange|length - 1] >= 2 %}
+
+            {% if last - pagesInRange[pagesInRange|length - 1] >= 2 %}
                 <li>
-                    <span>…</span>
+                    <span class="pagination-ellipsis">&hellip;</span>
                 </li>
             {% endif %}
+
             <li>
-                <a class="button" href="{{ path(route, query|merge({(pageParameterName): last})) }}">{{ last }}</a>
+                {% if current == last %}
+                    <a class="pagination-link is-current" aria-label="Page {{ current }}" aria-current="page" href="{{ path(route, query|merge({(pageParameterName): last})) }}">{{ last }}</a>
+                {% else %}
+                    <a class="pagination-link" href="{{ path(route, query|merge({(pageParameterName): last})) }}">{{ last }}</a>
+                {% endif %}
             </li>
         </ul>
     </nav>