Commit c997eeef authored by alexpott's avatar alexpott
Browse files

Issue #2318341 by lauriii, ocastle, Jolidog, vollepeer, rteijeiro, Rade,...

Issue #2318341 by lauriii, ocastle, Jolidog, vollepeer, rteijeiro, Rade, mgifford: Views mini pager markup.
parent c7dca6d1
......@@ -100,7 +100,7 @@
* Attach the ajax behavior to each link.
*/
Drupal.views.ajaxView.prototype.attachPagerAjax = function () {
this.$view.find('ul.pager > li > a, th.views-field a, .attachment .views-summary a')
this.$view.find('ul.pager__items > li > a, th.views-field a, .attachment .views-summary a')
.each(jQuery.proxy(this.attachPagerLinkAjax, this));
};
......
......@@ -11,7 +11,33 @@
* @ingroup themeable
*/
#}
{% if items %}
<h2 class="visually-hidden">{{ 'Pages'|t }}</h2>
{{ items }}
{% if items.previous or items.next %}
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
<h4 class="pager__heading visually-hidden">{{ 'Pagination'|t }}</h4>
<ul class="pager__items">
{% if items.previous %}
<li class="pager__item pager__item--previous">
<a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes }}>
<span class="visually-hidden">{{ 'Previous page'|t }}</span>
<span aria-hidden="true">{{ items.previous.text|default('‹‹'|t) }}</span>
</a>
</li>
{% endif %}
{% if items.current %}
<li class="pager__item is-active">
{% trans %}
Page {{ items.current }}
{% endtrans %}
</li>
{% endif %}
{% if items.next %}
<li class="pager__item pager__item--next">
<a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes }}>
<span class="visually-hidden">{{ 'Next page'|t }}</span>
<span aria-hidden="true">{{ items.next.text|default('››'|t) }}</span>
</a>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
......@@ -1027,87 +1027,31 @@ function template_preprocess_views_mini_pager(&$variables) {
$element = $variables['element'];
$parameters = $variables['parameters'];
// Fill in default link labels.
$tags += array(
1 => t('‹‹'),
3 => t('››'),
);
// Current is the page we are currently paged to.
$pager_current = $pager_page_array[$element] + 1;
$variables['items']['current'] = $pager_page_array[$element] + 1;
$li_previous = array();
if ($pager_total[$element] > 1 && $pager_page_array[$element] > 0) {
$li_previous = array(
'#type' => 'link',
'#title' => $tags[1],
'#url' => Url::fromRoute('<current>'),
'#options' => array(
'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] - 1),
'attributes' => array(
'title' => t('Go to previous page'),
'rel' => 'prev',
),
// Below is ignored by default, supplied to support hook_link_alter
// implementations.
'pager_context' => array(
'link_type' => 'previous',
'element' => $element,
'interval' => -1,
),
),
$options = array(
'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] - 1),
);
$variables['items']['previous']['href'] = \Drupal::url('<current>', [], $options);
if (isset($tags[1])) {
$variables['items']['previous']['text'] = $tags[1];
}
$variables['items']['previous']['attributes'] = new Attribute();
}
$li_next = array();
if ($pager_page_array[$element] < ($pager_total[$element] - 1)) {
$li_next = array(
'#type' => 'link',
'#title' => $tags[3],
'#url' => Url::fromRoute('<current>'),
'#options' => array(
'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] + 1),
'attributes' => array(
'title' => t('Go to next page'),
'rel' => 'next',
),
// Below is ignored by default, supplied to support hook_link_alter
// implementations.
'pager_context' => array(
'link_type' => 'next',
'element' => $element,
'interval' => 1,
),
),
$options = array(
'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] + 1),
);
$variables['items']['next']['href'] = \Drupal::url('<current>', [], $options);
if (isset($tags[3])) {
$variables['items']['next']['text'] = $tags[3];
}
$variables['items']['next']['attributes'] = new Attribute();
}
// Don't show the pager if there is neither a next page nor a previous page
// link, which means that we are on the first page and there is no next page
// available/wanted.
if (empty($li_next) && empty($li_previous)) {
return;
}
$items = array();
$items[] = array(
'#wrapper_attributes' => array('class' => array('pager-previous')),
) + $li_previous;
$items[] = array(
'#wrapper_attributes' => array('class' => array('pager-current')),
'#markup' => t('Page @current', array('@current' => $pager_current)),
);
$items[] = array(
'#wrapper_attributes' => array('class' => array('pager-next')),
) + $li_next;
$variables['items'] = array(
'#theme' => 'item_list__pager',
'#items' => $items,
'#attributes' => array('class' => array('pager')),
);
}
/**
......
......@@ -165,40 +165,36 @@ public function testPreviewWithPagersUI() {
$this->getPreviewAJAX('test_mini_pager', 'default', 3);
// Test that the pager is present and rendered.
$elements = $this->xpath('//ul[@class = "pager"]/li');
$elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'pager__items'));
$this->assertTrue(!empty($elements), 'Mini pager found.');
// Verify elements and links to pages.
// We expect to find 3 elements: previous and current pages, with no link,
// and next page with a link.
$this->assertClass($elements[0], 'pager-previous', 'Element for previous page has .pager-previous class.');
$this->assertFalse(isset($elements[0]->a), 'Element for previous page has no link.');
$this->assertClass($elements[1], 'pager-current', 'Element for current page has .pager-current class.');
$this->assertFalse(isset($elements[1]->a), 'Element for current page has no link.');
// We expect to find current pages element with no link, next page element
// with a link, and not to find previous page element.
$this->assertClass($elements[0], 'is-active', 'Element for current page has .is-active class.');
$this->assertClass($elements[2], 'pager-next', "Element for next page has .pager-next class.");
$this->assertTrue($elements[2]->a, "Link to next page found.");
$this->assertClass($elements[1], 'pager__item--next', 'Element for next page has .pager__item--next class.');
$this->assertTrue($elements[1]->a, 'Link to next page found.');
// Navigate to next page.
$elements = $this->xpath('//li[contains(@class, :class)]/a', array(':class' => 'pager-next'));
$elements = $this->xpath('//li[contains(@class, :class)]/a', array(':class' => 'pager__item--next'));
$this->clickPreviewLinkAJAX($elements[0]['href'], 3);
// Test that the pager is present and rendered.
$elements = $this->xpath('//ul[@class = "pager"]/li');
$elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'pager__items'));
$this->assertTrue(!empty($elements), 'Mini pager found.');
// Verify elements and links to pages.
// We expect to find 3 elements: previous page with a link, current
// page with no link, and next page with a link.
$this->assertClass($elements[0], 'pager-previous', 'Element for previous page has .pager-previous class.');
$this->assertTrue($elements[0]->a, "Link to previous page found.");
$this->assertClass($elements[0], 'pager__item--previous', 'Element for previous page has .pager__item--previous class.');
$this->assertTrue($elements[0]->a, 'Link to previous page found.');
$this->assertClass($elements[1], 'pager-current', 'Element for current page has .pager-current class.');
$this->assertClass($elements[1], 'is-active', 'Element for current page has .is-active class.');
$this->assertFalse(isset($elements[1]->a), 'Element for current page has no link.');
$this->assertClass($elements[2], 'pager-next', "Element for next page has .pager-next class.");
$this->assertTrue($elements[2]->a, "Link to next page found.");
$this->assertClass($elements[2], 'pager__item--next', 'Element for next page has .pager__item--next class.');
$this->assertTrue($elements[2]->a, 'Link to next page found.');
}
/**
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment