added materialize extra (#44)

ddnexus · Jul 17, 2018 · 1dd38c9 · 1dd38c9
1 parent 819dbda
commit 1dd38c9
Show file tree

Hide file tree

Showing 15 changed files with 253 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -73,7 +73,7 @@ Or - if you prefer - render the navigation links with a template:
 <%== render 'pagy/nav', locals: {pagy: @pagy} %>
 ```
 
-_(see [Quick Start](https://ddnexus.github.io/pagy/how-to#quick-start))_
+_(see [Quick Start](https://ddnexus.github.io/pagy/how-to#quick-start) for more details)_
 
 ## Easy to extend
 
@@ -89,7 +89,7 @@ Nav helper and templates for Bootstrap pagination. _(see [more...](http://ddnexu
 
 ### Bulma Extra
 
-Nav helper and templates for Bulma CSS framework pagination. _(see [more...](http://ddnexus.github.io/pagy/extras/bulma))_
+Nav helper and templates for Bulma CSS pagination. _(see [more...](http://ddnexus.github.io/pagy/extras/bulma))_
 
 ### Compact Extra
 
@@ -101,6 +101,10 @@ An alternative UI that combines the pagination feature with the navigation info
 
 Allow the client to request a custom number of items per page with a ready to use selector UI. _(see [more...](http://ddnexus.github.io/pagy/extras/items))_
 
+### Materialize Extra
+
+Nav helper for Materialize CSS pagination. _(see [more...](http://ddnexus.github.io/pagy/extras/materialize))_
+
 ### Out Of Range Extra
 
 Allow for easy handling of out of range pages _(see [more...](http://ddnexus.github.io/pagy/extras/out_of_range))_

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -40,6 +40,7 @@
  <a href="{{ site.baseurl }}/extras/i18n"><p class="indent1" {% if page.title == 'I18n' %}id="active"{% endif %} >I18n</p></a>
  <a href="{{ site.baseurl }}/extras/items"><p class="indent1" {% if page.title == 'Items' %}id="active"{% endif %} >Items</p></a>
  <a href="{{ site.baseurl }}/extras/out_of_range"><p class="indent1" {% if page.title == 'Out Of Range' %}id="active"{% endif %} >Out Of Range</p></a>
+ <a href="{{ site.baseurl }}/extras/materialize"><p class="indent1" {% if page.title == 'Materialize' %}id="active"{% endif %} >Materialize</p></a>
  <a href="{{ site.baseurl }}/extras/responsive"><p class="indent1" {% if page.title == 'Responsive' %}id="active"{% endif %} >Responsive</p></a>
  <a href="{{ site.baseurl }}/migration-tips"><p {% if page.title == 'Migration Tips' %}id="active"{% endif %} >Migration Tips</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>

diff --git a/docs/assets/images/pagy-compact-materialize-g.png b/docs/assets/images/pagy-compact-materialize-g.png
diff --git a/docs/extras.md b/docs/extras.md
@@ -13,6 +13,7 @@ Pagy comes with a few optional extensions/extras:
 | `compact` | An alternative UI that combines the pagination with the nav info in a single compact element | [compact.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/compact.rb), [documentation](extras/compact.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` | Nav helper for 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) |
 | `out_of_range` | Allow for easy handling of out of range pages | [out_of_range.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/out_of_range.rb), [documentation](extras/out_of_range.md) |
 | `responsive` | On resize, the number of page links will adapt in real-time to the available window or container width | [responsive.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/responsive.rb), [documentation](extras/responsive.md) |
 

diff --git a/docs/extras/compact.md b/docs/extras/compact.md
@@ -7,10 +7,6 @@ The `compact` extra adds an alternative pagination UI that combines the paginati
 
 It is especially useful for small size screens, but it is used also with wide layouts since it is __even faster__ than the classic nav of links, because it needs to render just a minimal HTML string.
 
-Here is an example (bootstrap style):
-
-![pagy-compact](../assets/images/pagy-compact-g.png)
-
 ## Synopsys
 
 See [extras](../extras.md) for general usage info.
@@ -23,6 +19,7 @@ Then use the responsive helper(s) in any view:
 <%== pagy_nav_compact(@pagy) %>
 <%== pagy_nav_compact_bootstrap(@pagy) %>
 <%== pagy_nav_compact_bulma(@pagy) %>
+<%== pagy_nav_compact_materialize(@pagy) %>
 ```
 
 ## Files
@@ -43,10 +40,22 @@ It can take an extra `id` argument, which is used to build the `id` attribute of
 
 This method is the same as the `pagy_nav_compact`, but customized for Bootstrap.
 
+Here is an example:
+
+![pagy-compact](../assets/images/pagy-compact-g.png)
+
 ### pagy_nav_compact_bulma(pagy, ...)
 
 This method is the same as the `pagy_nav_compact`, but customized for Bulma CSS framework.
 
-Generated pagination preview:
+Here is an example:
 
 ![pagy-compact-bulma](../assets/images/pagy-compact-bulma-g.png)
+
+### pagy_nav_compact_materialize(pagy, ...)
+
+This method is the same as the `pagy_nav_compact`, but customized for Materialize CSS framework.
+
+Here is an example:
+
+![pagy-compact-materialize](../assets/images/pagy-compact-materialize-g.png)
diff --git a/docs/extras/materialize.md b/docs/extras/materialize.md
@@ -0,0 +1,35 @@
+---
+title: Materialize
+---
+# Materialize Extra
+
+This extra adds nav helper and templates for Materialize CSS framework [pagination component](https://materializecss.com/pagination.html).
+
+## Synopsys
+
+See [extras](../extras.md) for general usage info.
+
+Render the navigation links in some view...
+with a fast helper:
+
+```erb
+<%== pagy_nav_materialize(@pagy) %>
+```
+
+## Files
+
+This extra is composed of 1 file:
+
+- [materialize.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/materialize.rb)
+
+## Methods
+
+This extra adds one nav helpers to the `Pagy::Frontend` module. You can customize it by overriding it directly in your own view helper.
+
+### pagy_nav_materialize(pagy)
+
+This method is the same as the `pagy_nav`, but customized for Materialize.
+
+## Templates
+
+There is currently no template for Materialize. Please, create a Pull Request or an Issue requesting that.
diff --git a/docs/extras/responsive.md b/docs/extras/responsive.md
@@ -29,6 +29,7 @@ Then use the responsive helper(s) in any view:
 <%== pagy_nav_responsive(@pagy) %>
 <%== pagy_nav_responsive_bootstrap(@pagy) %>
 <%== pagy_nav_responsive_bulma(@pagy) %>
+<%== pagy_nav_responsive_materialize(@pagy) %>
 ```
 
 ## Files
@@ -75,3 +76,7 @@ This method is the same as the `pagy_nav_responsive`, but customized for Bootstr
 ### pagy_nav_responsive_bulma(pagy, ...)
 
 This method is the same as the `pagy_nav_responsive`, but customized for Bulma CSS framework.
+
+### pagy_nav_responsive_materialize(pagy, ...)
+
+This method is the same as the `pagy_nav_responsive`, but customized for Materialize CSS framework.
diff --git a/docs/how-to.md b/docs/how-to.md
@@ -211,13 +211,14 @@ These helpers take the Pagy object and returns the HTML string with the paginati
 
 **Notice**: the [extras](extras.md) add a few other helpers that you can use the same way, in order to get added features (e.g. bootstrap compatibility, responsiveness, compact layouts, etc.)
 
-| Extra | Helpers |
-| ---------------------------------- | ----------------------------------------------------------------------------------- |
-| [bootstrap](extras/bootstrap.md) | `pagy_nav_bootstrap` |
-| [bulma](extras/bulma.md) | `pagy_nav_bulma` |
-| [compact](extras/compact.md) | `pagy_nav_compact`, `pagy_nav_compact_bootstrap`, `pagy_nav_compact_bulma` |
-| [items](extras/items.md) | `pagy_items_selector` |
-| [responsive](extras/responsive.md) | `pagy_nav_responsive`, `pagy_nav_responsive_bootstrap`, `pagy_nav_responsive_bulma` |
+| Extra | Helpers |
+| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
+| [bootstrap](extras/bootstrap.md) | `pagy_nav_bootstrap` |
+| [bulma](extras/bulma.md) | `pagy_nav_bulma` |
+| [compact](extras/compact.md) | `pagy_nav_compact`, `pagy_nav_compact_bootstrap`, `pagy_nav_compact_bulma` , `pagy_nav_compact_materialize` |
+| [items](extras/items.md) | `pagy_items_selector` |
+| [materialize](extras/materialize.md) | `pagy_nav_materialize` |
+| [responsive](extras/responsive.md) | `pagy_nav_responsive`, `pagy_nav_responsive_bootstrap`, `pagy_nav_responsive_bulma`, `pagy_nav_responsive_materialize` |
 
 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 end edit it there. It is a simple concatenation of strings with a very simple logic.
 
@@ -400,16 +401,16 @@ You can handle the exception by using the [out_of_range extra](extras/out_of_ran
 
 Here are a few options for manually handling the error in apps:
 
- - Do nothing and let the page render a 500
- - Rescue and render a 404
- - Rescue and redirect to the last known page (Notice: the [out_of_range extra](extras/out_of_range.md) provides the same behavior without redirecting)
+- Do nothing and let the page render a 500
+- Rescue and render a 404
+- Rescue and redirect to the last known page (Notice: the [out_of_range extra](extras/out_of_range.md) provides the same behavior without redirecting)
 
  ```ruby
  # in a controller
  rescue_from Pagy::OutOfRangeError, with: :redirect_to_last_page
- 
+
  private
- 
+
  def redirect_to_last_page(e)
  redirect_to url_for(page: e.pagy.last), notice: "Page ##{params[:page]} is out of range. Showing page #{e.pagy.last} instead."
  end

diff --git a/lib/pagy/extras/compact.rb b/lib/pagy/extras/compact.rb
@@ -55,5 +55,24 @@ def pagy_nav_compact_bulma(pagy, id=caller(1,1)[0].hash)
  html << %(</div></nav><script type="application/json" class="pagy-compact-json">["#{id}", "#{MARKER}", "#{p_page}"]</script>)
  end
 
+ # Compact pagination for materialize: it returns the html with the series of links to the pages
+ # we use a numeric input tag to set the page and the Pagy.compact javascript to navigate
+ def pagy_nav_compact_materialize(pagy, id=caller(1,1)[0].hash)
+ html, link, p_prev, p_next, p_page, p_pages = +'', pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.page, pagy.pages
+
+ html << %(<div id="pagy-nav-#{id}" class="pagy-nav-compact-materialize pagination" role="navigation" aria-label="pager">)
+ html << link.call(MARKER, '', %(style="display: none;" ))
+ html << %(<div class="pagy-compact-chip role="group" style="height: 35px; border-radius: 18px; background: #e4e4e4; display: inline-block;">)
+ html << '<ul class="pagination" style="margin: 0px;">'
+ li_style = 'style="vertical-align: middle;"'
+ html << (p_prev ? %(<li class="waves-effect prev" #{li_style}>#{link.call p_prev, '<i class="material-icons">chevron_left</i>', 'aria-label="previous"'}</li>)
+ : %(<li class="prev disabled" #{li_style}><a href="#"><i class="material-icons">chevron_left</i></a></li>))
+ input = %(<input type="number" class="browser-default" min="1" max="#{p_pages}" value="#{p_page}" style="padding: 2px; border: none; border-radius: 2px; text-align: center; width: #{p_pages.to_s.length+1}rem;">)
+ html << %(<div class="pagy-compact-input btn-flat" style="cursor: default; padding: 0px">#{pagy_t('pagy.compact.page')} #{input} #{pagy_t('pagy.compact.of')} #{p_pages}</div>)
+ html << (p_next ? %(<li class="waves-effect next" #{li_style}>#{link.call p_next, '<i class="material-icons">chevron_right</i>', 'aria-label="next"'}</li>)
+ : %(<li class="next disabled" #{li_style}><a href="#"><i class="material-icons">chevron_right</i></a></li>))
+ html << %(</ul></div><script type="application/json" class="pagy-compact-json">["#{id}", "#{MARKER}", "#{p_page}"]</script>)
+ end
+
  end
 end
diff --git a/lib/pagy/extras/initializer_example.rb b/lib/pagy/extras/initializer_example.rb
@@ -27,6 +27,10 @@
 # Pagy::VARS[:items_param] = :items # default
 # Pagy::VARS[:max_items] = 100 # default
 
+# Materialize: Nav helper for Materialize pagination
+# See https://ddnexus.github.io/pagy/extras/materialize
+# require 'pagy/extras/materialize'
+
 # Out Of Range: Allow for easy handling of out of range pages
 # See https://ddnexus.github.io/pagy/extras/out_of_range
 # Pagy::VARS[:out_of_range_mode] = :last_page # default (other options: :empty_page and :exception)

diff --git a/lib/pagy/extras/materialize.rb b/lib/pagy/extras/materialize.rb
@@ -0,0 +1,25 @@
+# See the Pagy documentation: https://ddnexus.github.io/pagy/extras/materialize
+# frozen_string_literal: true
+
+class Pagy
+ # Add nav helper for materialize pagination
+ module Frontend
+
+ # Pagination for materialize: it returns the html with the series of links to the pages
+ def pagy_nav_materialize(pagy)
+ html, link, p_prev, p_next = +'', pagy_link_proc(pagy), pagy.prev, pagy.next
+ html << (p_prev ? %(<li class="waves-effect prev">#{link.call p_prev, '<i class="material-icons">chevron_left</i>', 'aria-label="previous"'}</li>)
+ : %(<li class="prev disabled"><a href="#"><i class="material-icons">chevron_left</i></a></li>))
+ pagy.series.each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
+ html << if item.is_a?(Integer); %(<li class="waves-effect">#{link.call item}</li>) # page link
+ elsif item.is_a?(String) ; %(<li class="active">#{link.call item}</li>) # active page
+ elsif item == :gap ; %(<li class="gap disabled"><a href="#">#{pagy_t('pagy.nav.gap')}</a></li>) # page gap
+ end
+ end
+ html << (p_next ? %(<li class="waves-effect next">#{link.call p_next, '<i class="material-icons">chevron_right</i>', 'aria-label="next"'}</li>)
+ : %(<li class="next disabled"><a href="#"><i class="material-icons">chevron_right</i></a></li>))
+ %(<div class="pagy-nav-materialize pagination" role="navigation" aria-label="pager"><ul class="pagination">#{html}</ul></div>)
+ end
+
+ end
+end
diff --git a/lib/pagy/extras/responsive.rb b/lib/pagy/extras/responsive.rb
@@ -92,5 +92,26 @@ def pagy_nav_responsive_bulma(pagy, id=caller(1,1)[0].hash)
  %(<nav id="pagy-nav-#{id}" class="pagy-nav-bulma pagination is-centered" role="navigation" aria-label="pagination"></nav>#{script})
  end
 
+ # Responsive pagination for Materialize: it returns the html with the series of links to the pages
+ # rendered by the Pagy.responsive javascript
+ def pagy_nav_responsive_materialize(pagy, id=caller(1,1)[0].hash)
+ tags, link, p_prev, p_next, responsive = {}, pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.responsive
+
+ tags['before'] = +'<ul class="pagination">'
+ tags['before'] << (p_prev ? %(<li class="waves-effect prev">#{link.call p_prev, '<i class="material-icons">chevron_left</i>', 'aria-label="previous"'}</li>)
+ : %(<li class="prev disabled"><a href="#"><i class="material-icons">chevron_left</i></a></li>))
+ responsive[:items].each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
+ tags[item.to_s] = if item.is_a?(Integer); %(<li class="waves-effect">#{link.call item}</li>) # page link
+ elsif item.is_a?(String) ; %(<li class="active">#{link.call item}</li>) # active page
+ elsif item == :gap ; %(<li class="gap disabled"><a href="#">#{pagy_t('pagy.nav.gap')}</a></li>) # page gap
+ end
+ end
+ tags['after'] = +(p_next ? %(<li class="waves-effect next">#{link.call p_next, '<i class="material-icons">chevron_right</i>', 'aria-label="next"'}</li>)
+ : %(<li class="next disabled"><a href="#"><i class="material-icons">chevron_right</i></a></li>))
+ tags['after'] << '</ul>'
+ script = %(<script type="application/json" class="pagy-responsive-json">["#{id}", #{tags.to_json}, #{responsive[:widths].to_json}, #{responsive[:series].to_json}]</script>)
+ %(<div id="pagy-nav-#{id}" class="pagy-nav-responsive-materialize pagination" role="navigation" aria-label="pager"></div>#{script})
+ end
+
  end
 end