Skip to content

Commit

Permalink
Added simpler nav generation, triggered by setting the size variable …
Browse files Browse the repository at this point in the history
…to a positive Integer
  • Loading branch information
ddnexus committed Jan 15, 2024
1 parent 18d86eb commit ec8e992
Show file tree
Hide file tree
Showing 9 changed files with 518 additions and 177 deletions.
8 changes: 6 additions & 2 deletions .idea/runConfigurations/IRB_pagy.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 0 additions & 3 deletions .idea/runConfigurations/Test_Rep.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions apps/pagy_calendar_app.ru
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@ class PagyCalendarApp < Sinatra::Base
# object to paginate the unfiltered collection. (It's active by default even without a :skip param).
# You way want to invert the logic (also in the view) with something like `active: params[:active]`,
# which would be inactive by default and only active on demand.
@calendar, @pagy, @records = pagy_calendar(collection, year: { size: [1, 1, 1, 1] },
month: { size: [0, 12, 12, 0], format: '%b' },
@calendar, @pagy, @records = pagy_calendar(collection, year: { size: 4 },
month: { size: 12, format: '%b' },
pagy: { items: 10 },
active: !params[:skip])
erb :pagy_demo # template available in the __END__ section as @@ pagy_demo
Expand Down
47 changes: 33 additions & 14 deletions docs/api/javascript/navs.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ Here is a screenshot (from the `bootstrap`extra) showing responsiveness at diffe
See [Setup Javascript](setup.md).

||| pagy.rb (initializer)

```ruby
# Use just one:
require 'pagy/extras/bootstrap'
Expand All @@ -40,6 +41,7 @@ require 'pagy/extras/navs'
require 'pagy/extras/semantic'
require 'pagy/extras/uikit'
```

|||

||| Any View
Expand All @@ -53,6 +55,7 @@ require 'pagy/extras/uikit'
<%== pagy_materialize_nav_js(@pagy) %>
<%== pagy_semantic_nav_js(@pagy) %>
```

|||

## Variables
Expand All @@ -63,40 +66,51 @@ require 'pagy/extras/uikit'

=== How to use the :steps variable

The `:steps` is an optional non-core variable used by the `pagy*_nav_js` navs. If it's `false`, the `pagy*_nav_js` will behave exactly as a static `pagy*_nav` respecting the single `:size` variable, just faster and lighter. If it's defined as a hash, it allows you to control multiple pagy `:size` at different widths.
The `:steps` is an optional non-core variable used by the `pagy*_nav_js` navs. If it's `false`, the `pagy*_nav_js` will behave
exactly as a static `pagy*_nav` respecting the single `:size` variable, just faster and lighter. If it's defined as a hash, it
allows you to control multiple pagy `:size` at different widths.

You can set the `:steps` as a hash where the keys are integers representing the widths in pixels and the values are the Pagy `:size` variables to be applied for that width.
You can set the `:steps` as a hash where the keys are integers representing the widths in pixels and the values are the
Pagy `:size` variables to be applied for that width.

As usual, depending on the scope of the customization, you can set the variables globally or for a single pagy instance, or even pass it to the `pagy*_nav_js` helper as an optional keyword argument.
As usual, depending on the scope of the customization, you can set the variables globally or for a single pagy instance, or even
pass it to the `pagy*_nav_js` helper as an optional keyword argument.

For example:

||| pagy.rb (initializer)

```ruby
# globally
Pagy::DEFAULT[:steps] = { 0 => [2,3,3,2], 540 => [3,5,5,3], 720 => [5,7,7,5] }
Pagy::DEFAULT[:steps] = { 0 => 5, 540 => [3, 5, 5, 3], 720 => [5, 7, 7, 5] }
```

|||

||| Controller

```ruby
# or for a single instance
pagy, records = pagy(collection, steps: { 0 => [2,3,3,2], 540 => [3,5,5,3], 720 => [5,7,7,5] } )
pagy, records = pagy(collection, steps: { 0 => 5, 540 => [3, 5, 5, 3], 720 => [5, 7, 7, 5] })

# or use the :size as any static pagy*_nav
pagy, records = pagy(collection, steps: false )
pagy, records = pagy(collection, steps: false)
```

|||

```erb
or pass it to the helper
<%== pagy_nav_js(@pagy, steps: {...}) %>
```

The above statement means that from `0` to `540` pixels width, Pagy will use the `[2,3,3,2]` size, from `540` to `720` it will use the `[3,5,5,3]` size and over `720` it will use the `[5,7,7,5]` size. (Read more about the `:size` variable in the [How to control the page links](/docs/how-to.md#control-the-page-links) section).
The above statement means that from `0` to `540` pixels width, Pagy will use the `5` size (orginating a simple nav without gaps),
from `540` to `720` it will use the `[3,5,5,3]` size and over `720` it will use the `[5,7,7,5]` size. (Read more about the `:size`
variable in the [How to control the page links](/docs/how-to.md#control-the-page-links) section).

!!!primary :steps must contain `0` width
You can set any number of steps with any arbitrary width/size. The only requirement is that the `:steps` hash must contain always the `0` width or a `Pagy::VariableError` exception will be raised.
You can set any number of steps with any arbitrary width/size. The only requirement is that the `:steps` hash must contain always
the `0` width or a `Pagy::VariableError` exception will be raised.
!!!

#### Setting the right sizes
Expand All @@ -107,22 +121,27 @@ Here is what you should consider/ensure:

1. The pagy size changes in discrete `:steps`, defined by the width/size pairs.

2. The automatic transition from one size to another depends on the width available to the pagy nav. That width is the _internal available width_ of its container (excluding eventual horizontal padding).
2. The automatic transition from one size to another depends on the width available to the pagy nav. That width is the _internal
available width_ of its container (excluding eventual horizontal padding).

3. You should ensure that - for each step - each pagy `:size` produces a nav that can be contained in its width.

4. You should ensure that the minimum internal width for the container div be equal (or a bit bigger) to the smaller positive width. (`540` pixels in our previous example).
4. You should ensure that the minimum internal width for the container div be equal (or a bit bigger) to the smaller positive
width. (`540` pixels in our previous example).

5. If the container width snaps to specific widths in discrete steps, you should sync the quantity and widths of the pagy `:steps` to the quantity and internal widths for each discrete step of the container.
5. If the container width snaps to specific widths in discrete steps, you should sync the quantity and widths of the pagy `:steps`
to the quantity and internal widths for each discrete step of the container.

===

!!!warning Window Resizing
The `pagy_*nav_js` elements are automatically re-rendered on window resize. However, if the container width changes *without* being triggered by a window resize, you need to explicitly re-render:
The `pagy_*nav_js` elements are automatically re-rendered on window resize. However, if the container width changes *without*
being triggered by a window resize, you need to explicitly re-render:

```js
document.getElementById('my-pagy-nav-js').render();
```

!!!

## Methods
Expand All @@ -136,8 +155,8 @@ The method accepts also a few optional keyword arguments:
- `:steps` variable

!!!warning
The `pagy_bootstrap_nav_js` and `pagy_semantic_nav_js` assign a class attribute to their links, so do not add another class attribute with the `:link_extra`. That would be illegal HTML and ignored by most browsers.
The `pagy_bootstrap_nav_js` and `pagy_semantic_nav_js` assign a class attribute to their links, so do not add another class
attribute with the `:link_extra`. That would be illegal HTML and ignored by most browsers.
!!!

===

10 changes: 7 additions & 3 deletions docs/api/pagy.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ _Notice_: If you use the `Pagy::Backend` its `pagy` method will instantiate and

The `Pagy.new` method accepts a single hash of variables that will be merged with the `Pagy::DEFAULT` hash and will be used to create the object.

==- `series(...)`
==- `series(size: @vars[:size], _**)`

This method is the core of the pagination. It returns an array containing the page numbers and the `:gap` items to be rendered with the navigation links (e.g. `[1, :gap, 7, 8, "9", 10, 11, :gap, 36]`). It accepts an optional `size` keyword argument (only useful for extras), defaulted on the `:size` variable.

Expand All @@ -88,7 +88,11 @@ The nav helpers and the templates basically loop through this array and render t
That is self-contained, simple and efficient.

!!!primary
This method returns an empty array if the passed `size` (i.e. the `:size` variable by default) is set to an empty array. Useful to totally skip the generation of page links in the frontend.
This method returns an empty array if the passed `size` (i.e. the `:size` variable) is set to an empty `Array`. Useful to
totally skip the generation of page links in the frontend.

It can also return an simpler array without gaps if the passed `:size` is a single positive `Integer`. It may be a faster and
cleaner solution very useful in certain contexts (see the [Simple Nav](../how-to.md#simple-nav))
!!!

==- `label`
Expand Down Expand Up @@ -127,7 +131,7 @@ They are all integers:

| Variable | Description | Default |
|:----------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------|
| `:size` | The size of the page links to show: array of initial pages, before current page, after current page, final pages. _(see also [How to control the page links](/docs/how-to.md#control-the-page-links))_ | `[1,4,4,1]` |
| `:size` | The size of the page links to show: can be an array of initial pages, before current page, after current page, final pages or the total page size. _(see also [How to control the page links](/docs/how-to.md#control-the-page-links))_ | `[1,4,4,1]` |
| `:page_param` | The name of the page param name used in the url. _(see [How to customize the page param](/docs/how-to.md#customize-the-page-param))_ | `:page` |
| `:params` | It can be a `Hash` of params to add to the URL, or a `Proc` that can edit/add/delete the request params _(see [How to customize the params](/docs/how-to.md#customize-the-params))_ | `{}` |
| `:fragment` | The arbitrary fragment string (including the "#") to add to the url. _(see [How to customize the params](/docs/how-to.md#customize-the-params))_ | `""` |
Expand Down
Loading

0 comments on commit ec8e992

Please sign in to comment.