Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Implement UIkit pagination (#164)
  • Loading branch information
lfidnl authored and ddnexus committed Jul 10, 2019
1 parent dedc301 commit 1eb25ec
Show file tree
Hide file tree
Showing 13 changed files with 303 additions and 16 deletions.
1 change: 1 addition & 0 deletions README.md
Expand Up @@ -116,6 +116,7 @@ Use the official extras, or write your own in just a few lines. Extras add speci
- [materialize](http://ddnexus.github.io/pagy/extras/materialize): Add nav, nav_js and combo_nav_js helpers for the Materialize CSS [pagination component](https://materializecss.com/pagination.html)
- [navs](http://ddnexus.github.io/pagy/extras/navs): Add nav_js and combo_nav_js unstyled helpers
- [semantic](http://ddnexus.github.io/pagy/extras/semantic): Add nav, nav_js and combo_nav_js helpers for the Semantic UI CSS [pagination component](https://semantic-ui.com/collections/menu.html)
- [uikit](http://ddnexus.github.io/pagy/extras/uikit): Add nav, nav_js and combo_nav_js helpers for the UIkit [pagination component](https://getuikit.com/docs/pagination)

### Feature Extras

Expand Down
1 change: 1 addition & 0 deletions docs/_layouts/default.html
Expand Up @@ -115,6 +115,7 @@ <h1 id="site-title">{{ site.title | default: site.github.repository_name }}
<a href="{{ site.baseurl }}/extras/semantic"><p class="indent1" {% if page.title == 'Semantic' %}id="active"{% endif %} >Semantic</p></a>
<a href="{{ site.baseurl }}/extras/support"><p class="indent1" {% if page.title == 'Support' %}id="active"{% endif %} >Support</p></a>
<a href="{{ site.baseurl }}/extras/trim"><p class="indent1" {% if page.title == 'Trim' %}id="active"{% endif %} >Trim</p></a>
<a href="{{ site.baseurl }}/extras/uikit"><p class="indent1" {% if page.title == 'UIkit' %}id="active"{% endif %} >UIkit</p></a>
<a href="{{ site.baseurl }}/migration-guide"><p {% if page.title == 'Migration Guide' %}id="active"{% endif %} >Migrating from WillPaginate/Kaminari</p></a>
<p id="gitter-support"><a href="https://gitter.im/ruby-pagy/Lobby" rel="nofollow" target="_blank">&gt; Chat Support on Gitter &lt;</a></p>
</div>
Expand Down
6 changes: 3 additions & 3 deletions docs/assets/css/style.scss
Expand Up @@ -52,17 +52,17 @@ h1 span {
}

#toc {
margin: 1.5em 0;
margin: 1em 0;
white-space: nowrap;
p {
margin: .1em 0;
margin: .06em 0;
}
p.indent1 {
margin-left: 2rem;
}
p#gitter-support {
font-weight: bold;
margin-top: 1.5em;
margin-top: 1em;
a:hover {
font-weight: bold;
}
Expand Down
Binary file added docs/assets/images/uikit_combo_nav_js-g.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 13 additions & 12 deletions docs/extras.md
Expand Up @@ -5,24 +5,25 @@ title: Extras

Pagy comes with a few optional extensions/extras:

| Extra | Description | Links |
|:----------------------|:---------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `array` | Paginate arrays efficiently avoiding expensive array-wrapping and without overriding | [array.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/array.rb), [documentation](extras/array.md) |
| Extra | Description | Links |
|:----------------------|:-------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `array` | Paginate arrays efficiently avoiding expensive array-wrapping and without overriding | [array.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/array.rb), [documentation](extras/array.md) |
| `bootstrap` | Add nav, nav_js and combo_nav_js helpers for the Bootstrap [pagination component](https://getbootstrap.com/docs/4.1/components/pagination) | [bootstrap.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/bootstrap.rb), [documentation](extras/bootstrap.md) |
| `bulma` | Add nav, nav_js and combo_nav_js helpers for the Bulma [pagination component](https://bulma.io/documentation/components/pagination) | [bulma.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/bulma.rb), [documentation](extras/bulma.md) |
| `countless` | Paginate without any count, saving one query per rendering | [countless.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/countless.rb), [documentation](extras/countless.md) |
| `elasticsearch_rails` | Paginate `elasticsearch_rails` gem results efficiently | [elasticsearch_rails.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/elasticsearch_rails.rb), [documentation](extras/elasticsearch_rails.md) |
| `countless` | Paginate without any count, saving one query per rendering | [countless.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/countless.rb), [documentation](extras/countless.md) |
| `elasticsearch_rails` | Paginate `elasticsearch_rails` gem results efficiently | [elasticsearch_rails.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/elasticsearch_rails.rb), [documentation](extras/elasticsearch_rails.md) |
| `foundation` | Add nav, nav_js and combo_nav_js helpers for the Foundation [pagination component](https://foundation.zurb.com/sites/docs/pagination.html) | [foundation.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/foundation.rb), [documentation](extras/foundation.md) |
| `headers` | Add [RFC-8288](https://tools.ietf.org/html/rfc8288) compliant http response headers (and other helpers) useful for API pagination | [headers.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/headers.rb), [documentation](extras/headers.md) |
| `i18n` | Use the `I18n` gem instead of the pagy implementation | [i18n.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/i81n.rb), [documentation](extras/i18n.md) |
| `items` | Allow the client to request a custom number of items per page with a ready to use selector UI | [items.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/items.rb), [documentation](extras/items.md) |
| `headers` | Add [RFC-8288](https://tools.ietf.org/html/rfc8288) compliant http response headers (and other helpers) useful for API pagination | [headers.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/headers.rb), [documentation](extras/headers.md) |
| `i18n` | Use the `I18n` gem instead of the pagy implementation | [i18n.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/i81n.rb), [documentation](extras/i18n.md) |
| `items` | Allow the client to request a custom number of items per page with a ready to use selector UI | [items.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/items.rb), [documentation](extras/items.md) |
| `materialize` | Add nav, nav_js and combo_nav_js helpers for the Materialize CSS [pagination component](https://materializecss.com/pagination.html) | [materialize.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/materialize.rb), [documentation](extras/materialize.md) |
| `navs` | Add nav_js and combo_nav_js javascript unstyled helpers | [navs.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/navs.rb), [documentation](extras/navs.md) |
| `overflow` | Allow for easy handling of overflowing pages | [overflow.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/overflow.rb), [documentation](extras/overflow.md) |
| `searchkick` | Paginate arrays efficiently avoiding expensive array-wrapping and without overriding | [searchkick.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/searchkick.rb), [documentation](extras/searchkick.md) |
| `overflow` | Allow for easy handling of overflowing pages | [overflow.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/overflow.rb), [documentation](extras/overflow.md) |
| `searchkick` | Paginate arrays efficiently avoiding expensive array-wrapping and without overriding | [searchkick.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/searchkick.rb), [documentation](extras/searchkick.md) |
| `semantic` | Add nav, nav_js and combo_nav_js helpers for the Semantic UI CSS [pagination component](https://semantic-ui.com/collections/menu.html) | [semantic.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/semantic.rb), [documentation](extras/semantic.md) |
| `support` | Extra support for features like: incremental, infinite, auto-scroll pagination | [support.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/support.rb), [documentation](extras/support.md) |
| `trim` | Remove the `page=1` param from links | [trim.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/trim.rb), [documentation](extras/trim.md) |
| `support` | Extra support for features like: incremental, infinite, auto-scroll pagination | [support.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/support.rb), [documentation](extras/support.md) |
| `trim` | Remove the `page=1` param from links | [trim.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/trim.rb), [documentation](extras/trim.md) |
| `uikit` | Add nav, nav_js and combo_nav_js helpers for the UIkit [pagination component](https://getuikit.com/docs/pagination) | [uikit.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/uikit.rb), [documentation](extras/uikit.md) |

## Synopsis

Expand Down
64 changes: 64 additions & 0 deletions docs/extras/uikit.md
@@ -0,0 +1,64 @@
---
title: UIkit
---
# UIkit Extra

This extra adds nav helpers and templates for the UIkit [pagination component](https://getuikit.com/docs/pagination).

## Synopsis

See [extras](../extras.md) for general usage info.

In the `pagy.rb` initializer:

```ruby
require 'pagy/extras/uikit'
```

Render the navigation links in some view...
with a fast helper:

```erb
<%== pagy_uikit_nav(@pagy) %>
```

or with a template:

```erb
<%== render partial: 'pagy/uikit_nav', locals: {pagy: @pagy} %>
```

## Files

- [uikit.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/uikit.rb)
- [uikit_nav.html.erb](https://github.com/ddnexus/pagy/blob/master/lib/templates/uikit.html.erb) (optional template)
- [uikit_nav.html.haml](https://github.com/ddnexus/pagy/blob/master/lib/templates/uikit_nav.html.haml) (optional template)
- [uikit_nav.html.slim](https://github.com/ddnexus/pagy/blob/master/lib/templates/uikit_nav.html.slim) (optional template)

## Methods

This extra adds nav helper to the `Pagy::Frontend` module. You can customize it by direct overriding in your own view helper.

### pagy_uikit_nav(pagy)

This method is the same as the `pagy_nav`, but customized for UIkit.

The `uikit_nav.*` templates produce the same output, and can be used as an easier (but slower) starting point to override it. See [Using Templates](../how-to.md#using-templates).


### pagy_uikit_nav_js(pagy, ...)

This method is the same as the `pagy_nav_js`, but customized for the UIkit framework.

See more details in the [javascript navs](navs.md#javascript-navs) documentation.


### pagy_uikit_combo_nav_js(pagy, ...)

This method is the same as the `pagy_combo_nav_js`, but customized for the UIkit framework.

Here is an example:

![uikit_combo_nav_js](../assets/images/uikit_combo_nav_js-g.png)

See more details in the [javascript compact navs](navs.md#javascript-combo-navs) documentation.
7 changes: 6 additions & 1 deletion docs/how-to.md
Expand Up @@ -359,8 +359,9 @@ These helpers take the Pagy object and return the HTML string with the paginatio
| [bulma](extras/bulma.md) | `pagy_bulma_nav`, `pagy_bulma_nav_js`, `pagy_bulma_combo_nav_js` |
| [foundation](extras/foundation.md) | `pagy_foundation_nav`, `pagy_foundation_nav_js`, `pagy_foundation_combo_nav_js` |
| [materialize](extras/materialize.md) | `pagy_materialize_nav`, `pagy_materialize_nav_js`, `pagy_materialize_combo_nav_js` |
| [navs](extras/navs.md) | `pagy_nav_js`, `pagy_combo_nav_js` |
| [navs](extras/navs.md) | `pagy_nav_js`, `pagy_combo_nav_js` |
| [semantic](extras/semantic.md) | `pagy_semantic_nav`, `pagy_semantic_nav_js`, `pagy_semantic_combo_nav_js` |
| [uikit](extras/uikit.md) | `pagy_uikit_nav`, `pagy_uikit_nav_js`, `pagy_uikit_combo_nav_js` |

Helpers are the preferred choice (over templates) for their performance. If you need to override a `pagy_nav*` helper you can copy and paste it in your helper and edit it there. It is a simple concatenation of strings with a very simple logic.

Expand Down Expand Up @@ -402,6 +403,10 @@ They produce exactly the same output of the helpers, but since they are slower,
- [foundation_nav.html.erb](https://github.com/ddnexus/pagy/blob/master/lib/templates/foundation_nav.html.erb)
- [foundation_nav.html.haml](https://github.com/ddnexus/pagy/blob/master/lib/templates/foundation_nav.html.haml)
- [foundation_nav.html.slim](https://github.com/ddnexus/pagy/blob/master/lib/templates/foundation_nav.html.slim)
- `uikit`
- [uikit_nav.html.erb](https://github.com/ddnexus/pagy/blob/master/lib/templates/uikit_nav.html.erb)
- [uikit_nav.html.haml](https://github.com/ddnexus/pagy/blob/master/lib/templates/uikit_nav.html.haml)
- [uikit_nav.html.slim](https://github.com/ddnexus/pagy/blob/master/lib/templates/uikit_nav.html.slim)

If you need to try/compare an unmodified built-in template, you can render it right from the Pagy gem with:

Expand Down
4 changes: 4 additions & 0 deletions lib/config/pagy.rb
Expand Up @@ -58,6 +58,10 @@
# See https://ddnexus.github.io/pagy/extras/semantic
# require 'pagy/extras/semantic'

# UIkit extra: Add nav helper and templates for UIkit pagination
# See https://ddnexus.github.io/pagy/extras/uikit
# require 'pagy/extras/uikit'

# Multi size var used by the *_nav_js helpers
# See https://ddnexus.github.io/pagy/extras/navs#steps
# Pagy::VARS[:steps] = { 0 => [2,3,3,2], 540 => [3,5,5,3], 720 => [5,7,7,5] } # example
Expand Down

0 comments on commit 1eb25ec

Please sign in to comment.