Commit 98242c08 authored by rocketeerbkw's avatar rocketeerbkw Committed by borisson_

Issue #2810773 by rocketeerbkw, DuaelFr: Improve markup and consistency of...

Issue #2810773 by rocketeerbkw, DuaelFr: Improve markup and consistency of facet widgets (dropdown, checkbox)
parent 445efcac
......@@ -35,10 +35,13 @@
var href = $link.attr('href');
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">')
.attr('id', id)
.data($link.data())
.data('facetsredir', href);
var label = $('<label for="' + id + '">' + description + '</label>');
checkbox.change(function (e) {
checkbox.on('change.facets', function (e) {
Drupal.facets.disableFacet($link.parents('.js-facets-checkbox-links'));
window.location.href = $(this).data('facetsredir');
});
......@@ -48,7 +51,7 @@
label.find('.js-facet-deactivate').remove();
}
$link.before(checkbox).before(label).hide();
$link.before(checkbox).before(label).remove();
};
......
......@@ -20,11 +20,12 @@
Drupal.facets.makeDropdown = function () {
// Find all dropdown facet links and turn them into an option.
$('.js-facets-dropdown-links').once('facets-dropdown-transform').each(function () {
var $links = $(this).find('.facet-item a');
var $dropdown = $('<select class="facets-dropdown" />');
var $ul = $(this);
var $links = $ul.find('.facet-item a');
var $dropdown = $('<select class="facets-dropdown" />').data($ul.data());
// Add empty text option first.
var default_option_label = $(this).data('facet-default-option-label');
var default_option_label = $ul.data('facet-default-option-label');
var $default_option = $('<option />')
.attr('value', '')
.text(default_option_label);
......@@ -35,7 +36,8 @@
var $link = $(this);
var active = $link.hasClass('is-active');
var $option = $('<option />')
.attr('value', $link.attr('href'));
.attr('value', $link.attr('href'))
.data($link.data());
if (active) {
has_active = true;
// Set empty text value to this link to unselect facet.
......@@ -49,7 +51,7 @@
});
// Go to the selected option when it's clicked.
$dropdown.on('change', function () {
$dropdown.on('change.facets', function () {
window.location.href = $(this).val();
});
......@@ -58,8 +60,8 @@
$default_option.attr('selected', 'selected');
}
// Append dropdown.
$(this).html($dropdown);
// Replace links with dropdown.
$ul.after($dropdown).remove();
Drupal.attachBehaviors(document, Drupal.settings);
});
};
......
......@@ -61,7 +61,10 @@ abstract class WidgetPluginBase extends PluginBase implements WidgetPluginInterf
return [
'#theme' => 'item_list',
'#items' => $items,
'#attributes' => ['data-drupal-facet-id' => $facet->id()],
'#attributes' => [
'data-drupal-facet-id' => $facet->id(),
'data-drupal-facet-alias' => $facet->getUrlAlias(),
],
'#cache' => [
'contexts' => [
'url.path',
......@@ -166,6 +169,7 @@ abstract class WidgetPluginBase extends PluginBase implements WidgetPluginInterf
$items['#wrapper_attributes'] = ['class' => $classes];
$items['#attributes']['data-drupal-facet-item-id'] = $this->facet->getUrlAlias() . '-' . $result->getRawValue();
$items['#attributes']['data-drupal-facet-item-value'] = $result->getRawValue();
return $items;
}
......
......@@ -110,7 +110,7 @@ class WidgetJSTest extends JavascriptTestBase {
/** @var \Behat\Mink\Element\NodeElement $list_item */
foreach ($list_items as $list_item) {
$this->assertEquals('li', $list_item->getTagName());
$list_item->find('css', 'a')->isVisible();
$list_item->find('css', 'label')->isVisible();
$list_item->find('css', 'input[type="checkbox"]')->isVisible();
}
......@@ -121,6 +121,66 @@ class WidgetJSTest extends JavascriptTestBase {
$this->assertTrue(strpos($current_url, 'search-api-test-fulltext?f%5B0%5D=llama%253Aitem') !== FALSE);
}
/**
* Tests dropdown widget.
*/
public function testDropdownWidget() {
$facet_storage = \Drupal::entityTypeManager()->getStorage('facets_facet');
$id = 'llama';
// Create and save a facet with a checkbox widget on the 'type' field.
$facet_storage->create([
'id' => $id,
'name' => strtoupper($id),
'url_alias' => $id,
'facet_source_id' => 'views_page:search_api_test_view__page_1',
'field_identifier' => 'type',
'empty_behavior' => ['behavior' => 'none'],
'widget' => [
'type' => 'dropdown',
'config' => [
'show_numbers' => TRUE,
'default_option_label' => '- All -',
],
],
'processor_configs' => [
'url_processor_handler' => [
'processor_id' => 'url_processor_handler',
'weights' => ['pre_query' => -10, 'build' => -10],
'settings' => [],
],
],
])->save();
$this->createBlock($id);
// Go to the views page.
$this->drupalGet('search-api-test-fulltext');
// Make sure the block is shown on the page.
$page = $this->getSession()->getPage();
$block = $page->findById('block-llama-block');
$block->isVisible();
// Narrow the context to the block that shows the facet and get the
// <select>-html element.
$dropdown = $block->find('css', 'select');
$dropdown->isVisible();
$options = $dropdown->findAll('css', 'option');
$this->assertCount(3, $options);
// Check the default option.
$default = $options[0];
$default->isSelected();
$this->assertEquals('- All -', $default->getText());
// Check that selecting one of the options changes the url.
$dropdown->selectOption('item (3)');
$this->getSession()->wait(6000, "window.location.search != ''");
$current_url = $this->getSession()->getCurrentUrl();
$this->assertTrue(strpos($current_url, 'search-api-test-fulltext?f%5B0%5D=llama%253Aitem') !== FALSE);
}
/**
* Setup and insert test content.
*/
......
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