From bc9165e84437558ef4316b13b8da49b00f491ccd Mon Sep 17 00:00:00 2001
From: Stephen Mulvihill <38925-smulvihill@users.noreply.drupalcode.org>
Date: Fri, 19 Aug 2022 12:36:55 -0400
Subject: [PATCH] Issue #3282148 by smulvih2: Facet improvements (WCAG)
---
css/style.css | 36 +++++++++++--
sass/modules/_facets.scss | 41 +++++++++++++--
.../Customization/Search/FacetPanelType.php | 44 ++++++++++++++++
.../Setting/Customization/Search/Facets.php | 24 +++++++++
.../block/block--facets-summary.html.twig | 18 +++----
templates/block/block--facets.html.twig | 52 ++++++++++++-------
templates/facets/facets-item-list.html.twig | 2 +-
.../facets-result-item--summary.html.twig | 16 ++++++
templates/facets/facets-result-item.html.twig | 17 +++++-
.../facets/facets-summary-item-list.html.twig | 2 +-
wxt_bootstrap.theme | 8 +++
11 files changed, 221 insertions(+), 39 deletions(-)
create mode 100644 src/Plugin/Setting/Customization/Search/FacetPanelType.php
create mode 100644 src/Plugin/Setting/Customization/Search/Facets.php
create mode 100644 templates/facets/facets-result-item--summary.html.twig
diff --git a/css/style.css b/css/style.css
index c5bf128..2059bb5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -961,13 +961,43 @@ header.navbar-default {
ul.js-facets-checkbox-links {
list-style-type: none;
+ margin-bottom: 0px;
padding-left: 0px; }
+ ul.js-facets-checkbox-links .facet-item {
+ padding: 5px;
+ display: flex;
+ align-items: flex-start;
+ border-bottom: 1px solid #ddd; }
+ ul.js-facets-checkbox-links .facet-item:last-child {
+ border-bottom: 0; }
+ ul.js-facets-checkbox-links .facet-item input {
+ margin-top: 7px; }
ul.js-facets-checkbox-links .facet-item label {
+ margin-bottom: 0px;
margin-left: 5px;
- display: inline; }
+ display: flex;
+ flex: 1; }
+ ul.js-facets-checkbox-links .facet-item label .facet-value {
+ flex: 1;
+ font-weight: 400;
+ padding-right: 5px; }
+
+ul.js-facets-links {
+ margin-bottom: 0px; }
+ ul.js-facets-links a {
+ display: flex; }
+ ul.js-facets-links .facet-value {
+ flex: 1; }
+
+.block-facets-summary li {
+ float: left; }
+
+.block-facets-summary a {
+ padding: 5px 15px;
+ font-size: 0.9em; }
-.block-facets-summary .clear-filters {
- margin-top: 15px; }
+.block-facets-summary .glyphicon-remove {
+ font-size: 0.8em; }
.flag a {
text-decoration: none; }
diff --git a/sass/modules/_facets.scss b/sass/modules/_facets.scss
index 9349180..e5fc5cd 100644
--- a/sass/modules/_facets.scss
+++ b/sass/modules/_facets.scss
@@ -2,17 +2,52 @@
ul.js-facets-checkbox-links {
list-style-type: none;
+ margin-bottom: 0px;
padding-left: 0px;
.facet-item {
+ padding: 5px;
+ display: flex;
+ align-items: flex-start;
+ border-bottom: 1px solid #ddd;
+ &:last-child {
+ border-bottom: 0;
+ }
+ input {
+ margin-top: 7px;
+ }
label {
+ margin-bottom: 0px;
margin-left: 5px;
- display: inline;
+ display: flex;
+ flex: 1;
+ .facet-value {
+ flex: 1;
+ font-weight: 400;
+ padding-right: 5px;
+ }
}
}
}
+ul.js-facets-links {
+ margin-bottom: 0px;
+ a {
+ display: flex;
+ }
+ .facet-value {
+ flex: 1;
+ }
+}
+
.block-facets-summary {
- .clear-filters {
- margin-top: 15px;
+ li {
+ float: left;
+ }
+ a {
+ padding: 5px 15px;
+ font-size: 0.9em;
+ }
+ .glyphicon-remove {
+ font-size: 0.8em;
}
}
diff --git a/src/Plugin/Setting/Customization/Search/FacetPanelType.php b/src/Plugin/Setting/Customization/Search/FacetPanelType.php
new file mode 100644
index 0000000..56a8c99
--- /dev/null
+++ b/src/Plugin/Setting/Customization/Search/FacetPanelType.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace Drupal\wxt_bootstrap\Plugin\Setting\Customization\Search;
+
+use Drupal\bootstrap\Plugin\Setting\SettingBase;
+use Drupal\bootstrap\Utility\Element;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * The "wxt_facets_panel_type" theme setting.
+ *
+ * @ingroup plugins_setting
+ *
+ * @BootstrapSetting(
+ * id = "wxt_facets_panel_type",
+ * type = "select",
+ * title = @Translation("Facet panel type"),
+ * defaultValue = "panel-default",
+ * options = {
+ * "panel-default" = @Translation("Default"),
+ * "panel-primary" = @Translation("Primary"),
+ * },
+ * description = @Translation("Select the panel type to use for facet display if not using collapsible facets."),
+ * groups = {
+ * "customization" = @Translation("Customization"),
+ * "search" = @Translation("Search"),
+ * }
+ * )
+ */
+class FacetPanelType extends SettingBase {
+
+ /**
+ * {@inheritdoc}
+ */
+ public function alterFormElement(Element $form, FormStateInterface $form_state, $form_id = NULL) {
+ $setting = $this->getSettingElement($form, $form_state);
+ $setting->setProperty('states', [
+ 'visible' => [
+ ':input[name="wxt_facets_collapsible"]' => ['checked' => FALSE],
+ ],
+ ]);
+ }
+
+}
diff --git a/src/Plugin/Setting/Customization/Search/Facets.php b/src/Plugin/Setting/Customization/Search/Facets.php
new file mode 100644
index 0000000..7cc741b
--- /dev/null
+++ b/src/Plugin/Setting/Customization/Search/Facets.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace Drupal\wxt_bootstrap\Plugin\Setting\Customization\Search;
+
+use Drupal\bootstrap\Plugin\Setting\SettingBase;
+
+/**
+ * The "wxt_facets_collapsible" theme setting.
+ *
+ * @ingroup plugins_setting
+ *
+ * @BootstrapSetting(
+ * id = "wxt_facets_collapsible",
+ * type = "checkbox",
+ * title = @Translation("Collapsible facets"),
+ * defaultValue = FALSE,
+ * description = @Translation("Check this box to enable collapsible facets."),
+ * groups = {
+ * "customization" = @Translation("Customization"),
+ * "search" = @Translation("Search"),
+ * }
+ * )
+ */
+class Facets extends SettingBase {}
diff --git a/templates/block/block--facets-summary.html.twig b/templates/block/block--facets-summary.html.twig
index 0e6554a..3287251 100644
--- a/templates/block/block--facets-summary.html.twig
+++ b/templates/block/block--facets-summary.html.twig
@@ -47,8 +47,6 @@
#}
{%
set classes = [
- 'panel',
- 'panel-primary',
'block',
'block-' ~ configuration.provider|clean_class,
'block-' ~ plugin_id|clean_class,
@@ -56,21 +54,19 @@
'clearfix',
]
%}
-<section{{ attributes.addClass(classes) }}>
+{% set element = label ? 'section' : 'div' %}
+<{{ element }}{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{% if label %}
- <header class="panel-heading">
- <h2{{ title_attributes.addClass('panel-title') }}>
- <span class="glyphicon glyphicon-filter"></span>
- {{ label }}
- </h2>
- </header>
+ <h2{{ title_attributes }}>
+ {{ label }}
+ </h2>
{% endif %}
{{ title_suffix }}
{% block content %}
- <div class="panel-body">
+ <div class="search-terms">
{{ content }}
</div>
{% endblock %}
-</section>
+</{{ element }}>
diff --git a/templates/block/block--facets.html.twig b/templates/block/block--facets.html.twig
index 0e6554a..ee28629 100644
--- a/templates/block/block--facets.html.twig
+++ b/templates/block/block--facets.html.twig
@@ -48,29 +48,43 @@
{%
set classes = [
'panel',
- 'panel-primary',
+ facet_panel_type,
'block',
'block-' ~ configuration.provider|clean_class,
'block-' ~ plugin_id|clean_class,
- 'mrgn-tp-lg',
'clearfix',
]
%}
-<section{{ attributes.addClass(classes) }}>
- {{ title_prefix }}
- {% if label %}
- <header class="panel-heading">
- <h2{{ title_attributes.addClass('panel-title') }}>
- <span class="glyphicon glyphicon-filter"></span>
- {{ label }}
- </h2>
- </header>
- {% endif %}
- {{ title_suffix }}
- {% block content %}
- <div class="panel-body">
- {{ content }}
- </div>
- {% endblock %}
-</section>
+{% if collapsible_facets %}
+ <details{{ attributes.addClass('mrgn-bttm-0', classes) }}>
+ {{ title_prefix }}
+ {% if label %}
+ <summary class="panel-heading">
+ <h2{{ title_attributes.addClass('panel-title') }}>
+ {{ label }}
+ </h2>
+ </summary>
+ {% endif %}
+ {{ title_suffix }}
+
+ {{ content }}
+ </details>
+{% else %}
+ <section{{ attributes.addClass('mrgn-tp-lg', classes) }}>
+ {{ title_prefix }}
+ {% if label %}
+ <header class="panel-heading">
+ <h2{{ title_attributes.addClass('panel-title') }}>
+ <span class="glyphicon glyphicon-filter"></span>
+ {{ label }}
+ </h2>
+ </header>
+ {% endif %}
+ {{ title_suffix }}
+
+ <div class="panel-body">
+ {{ content }}
+ </div>
+ </section>
+{% endif %}
diff --git a/templates/facets/facets-item-list.html.twig b/templates/facets/facets-item-list.html.twig
index b96cdcd..1ef37d4 100644
--- a/templates/facets/facets-item-list.html.twig
+++ b/templates/facets/facets-item-list.html.twig
@@ -30,7 +30,7 @@
{%- endif -%}
{%- if items -%}
- <{{ list_type }}{{ attributes }}>
+ <{{ list_type }}{{ attributes.addClass('list-unstyled') }}>
{%- for item in items -%}
<li{{ item.attributes }}>{{ item.value }}</li>
{%- endfor -%}
diff --git a/templates/facets/facets-result-item--summary.html.twig b/templates/facets/facets-result-item--summary.html.twig
new file mode 100644
index 0000000..4247d6a
--- /dev/null
+++ b/templates/facets/facets-result-item--summary.html.twig
@@ -0,0 +1,16 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a summary facet result item.
+ *
+ * Available variables:
+ * - value: The item value.
+ * - show_count: If this facet provides count.
+ * - count: The amount of results.
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="visually-hidden">{{ 'Remove filter for'|t }} </div>
+{{ value }}
+<span class="glyphicon glyphicon-remove"></span>
diff --git a/templates/facets/facets-result-item.html.twig b/templates/facets/facets-result-item.html.twig
index d3df7c3..38c73c3 100644
--- a/templates/facets/facets-result-item.html.twig
+++ b/templates/facets/facets-result-item.html.twig
@@ -11,4 +11,19 @@
* @ingroup themeable
*/
#}
-{{ value }} {% if show_count %}<span class="facet-count badge">{{ count }}</span>{% endif %}
+
+<span class="facet-value">
+ {{ value }}
+</span>
+
+{% if show_count %}
+ <span class="badge-wrapper">
+ <span class="facet-count badge">{{ count }} <span class="wb-inv">
+ {% if count == 1 %}
+ {% trans %}result available{% endtrans %}
+ {% else %}
+ {% trans %}results available{% endtrans %}
+ {% endif %}
+ </span></span>
+ </span>
+{% endif %}
diff --git a/templates/facets/facets-summary-item-list.html.twig b/templates/facets/facets-summary-item-list.html.twig
index 58b6fc2..613628c 100644
--- a/templates/facets/facets-summary-item-list.html.twig
+++ b/templates/facets/facets-summary-item-list.html.twig
@@ -30,7 +30,7 @@
{%- endif -%}
{%- if items -%}
- <{{ list_type }}{{ attributes.addClass('list-unstyled') }}>
+ <{{ list_type }}{{ attributes.addClass('list-unstyled', 'clearfix') }}>
{%- for item in items -%}
<li{{ item.attributes }}>{{ item.value }}</li>
{%- endfor -%}
diff --git a/wxt_bootstrap.theme b/wxt_bootstrap.theme
index 123933b..48439f3 100644
--- a/wxt_bootstrap.theme
+++ b/wxt_bootstrap.theme
@@ -124,6 +124,14 @@ function wxt_bootstrap_preprocess_block(&$variables) {
}
}
+ if (strpos($plugin_id, 'facet_block') !== FALSE) {
+ $theme_name = \Drupal::theme()->getActiveTheme()->getName();
+ $collapsible_facets = theme_get_setting('wxt_facets_collapsible', $theme_name);
+ $facet_panel_type = theme_get_setting('wxt_facets_panel_type', $theme_name);
+ $variables['collapsible_facets'] = $collapsible_facets;
+ $variables['facet_panel_type'] = $facet_panel_type;
+ }
+
$moduleHandler = \Drupal::service('module_handler');
if (!$moduleHandler->moduleExists('wxt_ext_blocks')) {
$variables['label_display'] = TRUE;
--
GitLab