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

Issue #2810773 by rocketeerbkw, DuaelFr: Improve markup and consistency of facet widgets (dropdown, checkbox)

js/checkbox-widget.js

@@ -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();
 
   };
 

js/dropdown-widget.js

@@ -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);
     });
   };

src/Widget/WidgetPluginBase.php

@@ -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;
   }
 

tests/src/FunctionalJavascript/WidgetJSTest.php

@@ -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.
    */