Commit 18fb86cc authored by claudiu.cristea's avatar claudiu.cristea Committed by StryKaizer

Issue #2724381 by claudiu.cristea: Port "Show more"/"Show less" functionality from D7

parent 9cad46e4
...@@ -38,3 +38,11 @@ drupal.facets.dropdown-widget: ...@@ -38,3 +38,11 @@ drupal.facets.dropdown-widget:
- core/jquery - core/jquery
- core/drupal - core/drupal
- core/jquery.once - core/jquery.once
soft-limit:
version: VERSION
js:
js/soft-limit.js: {}
dependencies:
- core/jquery
- core/jquery.once
- core/drupalSettings
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
"use strict"; "use strict";
Drupal.facets = {}; Drupal.facets = Drupal.facets || {};
Drupal.behaviors.facetsCheckboxWidget = { Drupal.behaviors.facetsCheckboxWidget = {
attach: function (context, settings) { attach: function (context, settings) {
Drupal.facets.makeCheckboxes(); Drupal.facets.makeCheckboxes();
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
var active = $link.hasClass('is-active'); var active = $link.hasClass('is-active');
var description = $link.html(); var description = $link.html();
var href = $link.attr('href'); var href = $link.attr('href');
var id = $link.data('facet-id'); var id = $link.data('drupal-facet-item-id');
var checkbox = $('<input type="checkbox" class="facets-checkbox" id="' + id + '" data-facetsredir="' + href + '" />'); var checkbox = $('<input type="checkbox" class="facets-checkbox" id="' + id + '" data-facetsredir="' + href + '" />');
var label = $('<label for="' + id + '">' + description + '</label>'); var label = $('<label for="' + id + '">' + description + '</label>');
......
/**
* @file
* Provides the soft limit functionality.
*/
(function ($) {
"use strict";
Drupal.behaviors.facetSoftLimit = {
attach: function (context, settings) {
if (settings.facets.softLimit != undefined) {
$.each(settings.facets.softLimit, function (facet, limit) {
Drupal.facets.applySoftLimit(facet, limit);
})
}
}
};
Drupal.facets = Drupal.facets || {};
/**
* Applies the soft limit UI feature to a specific facets list.
*/
Drupal.facets.applySoftLimit = function (facet, limit) {
var zero_based_limit = limit - 1;
var facetsList = $('ul[data-drupal-facet-id="' + facet + '"]');
// Hide facets over the limit.
facetsList.find('li:gt(' + zero_based_limit + ')').once().hide();
// Add "Show more" / "Show less" links.
facetsList.once().filter(function() {
return $(this).find('li').length > limit;
}).each(function() {
$('<a href="#" class="facets-soft-limit-link"></a>').text(Drupal.t('Show more')).click(function() {
if ($(this).siblings().find('li:hidden').length > 0) {
$(this).siblings().find('li:gt(' + zero_based_limit + ')').slideDown();
$(this).addClass('open').text(Drupal.t('Show less'));
}
else {
$(this).siblings().find('li:gt(' + zero_based_limit + ')').slideUp();
$(this).removeClass('open').text(Drupal.t('Show more'));
}
return false;
}).insertAfter($(this));
});
};
})(jQuery);
...@@ -327,7 +327,7 @@ class DefaultFacetManager { ...@@ -327,7 +327,7 @@ class DefaultFacetManager {
if (empty($facet->getResults())) { if (empty($facet->getResults())) {
$empty_behavior = $facet->getEmptyBehavior(); $empty_behavior = $facet->getEmptyBehavior();
if ($empty_behavior['behavior'] == 'text') { if ($empty_behavior['behavior'] == 'text') {
return ['#markup' => $empty_behavior['text']]; return [['#markup' => $empty_behavior['text']]];
} }
else { else {
return []; return [];
...@@ -338,7 +338,7 @@ class DefaultFacetManager { ...@@ -338,7 +338,7 @@ class DefaultFacetManager {
/** @var \Drupal\facets\Widget\WidgetInterface $widget */ /** @var \Drupal\facets\Widget\WidgetInterface $widget */
$widget = $this->widgetPluginManager->createInstance($facet->getWidget()); $widget = $this->widgetPluginManager->createInstance($facet->getWidget());
return $widget->build($facet); return [$widget->build($facet)];
} }
/** /**
......
...@@ -28,35 +28,8 @@ class CheckboxWidget extends LinksWidget { ...@@ -28,35 +28,8 @@ class CheckboxWidget extends LinksWidget {
*/ */
public function build(FacetInterface $facet) { public function build(FacetInterface $facet) {
$this->facet = $facet; $this->facet = $facet;
$build = parent::build($facet);
/** @var \Drupal\facets\Result\Result[] $results */ $build['#attributes']['class'][] = 'js-facets-checkbox-links';
$results = $facet->getResults();
$items = [];
$configuration = $facet->getWidgetConfigs();
$this->showNumbers = empty($configuration['show_numbers']) ? FALSE : (bool) $configuration['show_numbers'];
foreach ($results as $result) {
if (is_null($result->getUrl())) {
$text = $this->extractText($result);
$items[] = ['#markup' => $text];
}
else {
$items[] = $this->buildListItems($result);
}
}
$build = [
'#theme' => 'item_list',
'#items' => $items,
'#attributes' => ['class' => ['js-facets-checkbox-links']],
'#cache' => [
'contexts' => [
'url.path',
'url.query_args',
],
],
];
$build['#attached']['library'][] = 'facets/drupal.facets.checkbox-widget'; $build['#attached']['library'][] = 'facets/drupal.facets.checkbox-widget';
return $build; return $build;
...@@ -67,7 +40,7 @@ class CheckboxWidget extends LinksWidget { ...@@ -67,7 +40,7 @@ class CheckboxWidget extends LinksWidget {
*/ */
protected function buildListItems(ResultInterface $result) { protected function buildListItems(ResultInterface $result) {
$items = parent::buildListItems($result); $items = parent::buildListItems($result);
$items['#attributes']['data-facet-id'] = $this->facet->getUrlAlias() . '-' . $result->getRawValue(); $items['#attributes']['data-drupal-facet-item-id'] = $this->facet->getUrlAlias() . '-' . $result->getRawValue();
return $items; return $items;
} }
......
...@@ -54,6 +54,7 @@ class LinksWidget implements WidgetInterface { ...@@ -54,6 +54,7 @@ class LinksWidget implements WidgetInterface {
$build = [ $build = [
'#theme' => 'item_list', '#theme' => 'item_list',
'#items' => $items, '#items' => $items,
'#attributes' => ['data-drupal-facet-id' => $facet->id()],
'#cache' => [ '#cache' => [
'contexts' => [ 'contexts' => [
'url.path', 'url.path',
...@@ -61,6 +62,12 @@ class LinksWidget implements WidgetInterface { ...@@ -61,6 +62,12 @@ class LinksWidget implements WidgetInterface {
], ],
], ],
]; ];
if (!empty($configuration['soft_limit'])) {
$build['#attached']['library'][] = 'facets/soft-limit';
$build['#attached']['drupalSettings']['facets']['softLimit'][$facet->id()] = (int) $configuration['soft_limit'];
}
return $build; return $build;
} }
...@@ -155,20 +162,30 @@ class LinksWidget implements WidgetInterface { ...@@ -155,20 +162,30 @@ class LinksWidget implements WidgetInterface {
/** /**
* {@inheritdoc} * {@inheritdoc}
*
* @todo This is inheriting nothing. We need a method on the interface and,
* probably, a base class.
*/ */
public function buildConfigurationForm(array $form, FormStateInterface $form_state, $config) { public function buildConfigurationForm(array $form, FormStateInterface $form_state, $config) {
$widget_configs = !is_null($config) ? $config->get('widget_configs') : [];
// Assure sane defaults.
// @todo This should be handled upstream, in facet entity. Facet schema
// should be fixed and all configs should get sane defaults.
$widget_configs += ['show_numbers' => FALSE, 'soft_limit' => 0];
$form['show_numbers'] = [ $form['show_numbers'] = [
'#type' => 'checkbox', '#type' => 'checkbox',
'#title' => $this->t('Show the amount of results'), '#title' => $this->t('Show the amount of results'),
'#default_value' => $widget_configs['show_numbers'],
];
$options = [50, 40, 30, 20, 15, 10, 5, 3];
$form['soft_limit'] = [
'#type' => 'select',
'#title' => $this->t('Soft limit'),
'#default_value' => $widget_configs['soft_limit'],
'#options' => [0 => $this->t('No limit')] + array_combine($options, $options),
'#description' => $this->t('Limits the number of displayed facets via JavaScript.'),
]; ];
if (!is_null($config)) {
$widget_configs = $config->get('widget_configs');
if (isset($widget_configs['show_numbers'])) {
$form['show_numbers']['#default_value'] = $widget_configs['show_numbers'];
}
}
return $form; return $form;
} }
......
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