Class: Bulmacomp::PaginationComponent

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/bulmacomp/pagination_component.rb

Overview

Make an HTML strucrure for a bulma pagination

<nav class="pagination" role="navigation" aria-label="pagination"></nav>

Examples:

Empty pagination

render Bulmacomp::TabsComponent.new()

pagination with elements

elements = ['<a class="pagination-link" aria-label="Goto page 1">1</a>']
render Bulmacomp::TabsComponent.new(elements: elements)

<nav class="pagination" role="navigation" aria-label="pagination">
  <ul class='pagination-list'>
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
  </ul>
</nav>

with elements and pre

pre = [
  link_to('Previus', '#', class: 'pagination-previous'),
  link_to('Next', '#', class: 'pagination-next')
  ]
elements = ['<a class="pagination-link" aria-label="Goto page 1">1</a>']
render Bulmacomp::TabsComponent.new(elements: elements, pre: pre)

<nav class="pagination" role="navigation" aria-label="pagination">
 <a href="#" class="pagination-previous">Previous</a>
 <a href="#" class="pagination-next">Next</a>
  <ul class='pagination-list'>
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
  </ul>
</nav>

with yield

= render Bulmacomp::TabsComponent.new() do
  %li= link_to 'test', '#'

<nav class="pagination" role="navigation" aria-label="pagination">
   <ul class='pagination-list'>
     <li><a href='#'>test</a></li>
   </ul>
</nav>

full pagination

pre = [
  link_to('Previus', '#', class: 'pagination-previous'),
  link_to('Next', '#', class: 'pagination-next')
  ]
elements = ['<a class="pagination-link" aria-label="Goto page 1">1</a>']

= render Bulmacomp::TabsComponent.new(elements: elements, pre: pre, id: 'ok') do
  %li= link_to 'test', '#'

<nav class="pagination" role="navigation" aria-label="pagination" id="ok">
 <a href="#" class="pagination-previous">Previous</a>
 <a href="#" class="pagination-next">Next</a>
  <ul class='pagination-list'>
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><a href='#'>test</a></li>
  </ul>
</nav>

Instance Method Summary collapse

Constructor Details

#initialize(elements: [], pre: [], **opts) {|optional| ... } ⇒ PaginationComponent

Returns a new instance of PaginationComponent.

Options Hash (**opts):

  • elements (Array<String>) —

    elements list for build tabs

  • pre (Array<String>) —

    element not in pagination list

  • :* (String) —

    each key going as tag option, default:

    • class: “pagination”

    • role: “navigation”

    • aria_label: “pagination”

Yields:

  • (optional) —

    modal content



78
79
80
81
82
 
# File 'app/components/bulmacomp/pagination_component.rb', line 78

def initialize(elements: [], pre: [], **opts)
  @elements = elements
  @pre = pre
  @opts = { class: "pagination", role: "navigation", aria_label: "pagination" }.merge opts
end

Instance Method Details

#call ⇒ String

Generate safe string with bulma pagination



86
87
88
 
# File 'app/components/bulmacomp/pagination_component.rb', line 86

def call
  tag.nav safe_join([ @pre, ulify ]), **@opts
end

#map_elements ⇒ String

Map elements in a li tag

Examples:

Bulmacomp::TabsComponent.new(elements: [1,2,3]).map_elements

<li>1</li><li>2</li><li>3</li>


102
103
104
 
# File 'app/components/bulmacomp/pagination_component.rb', line 102

def map_elements
  safe_join(@elements.map { |e| tag.li e })
end

#ulify ⇒ String

generate a ul tag with map_elements and content



92
93
94
 
# File 'app/components/bulmacomp/pagination_component.rb', line 92

def ulify
  tag.ul safe_join([ map_elements, content ])
end