Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Drupal Bootstrap 8.x-3.x - Views Exposed Form Toggle
/** Add this to your sub-theme style overrides. **/
.filters-wrapper-toggle {
margin: 15px 0;
}
@media screen and (min-width: 768px) {
.filters-wrapper-toggle {
display: none;
}
.filters-wrapper {
display: block;
}
}
{#
In your sub-theme, create this file ./THEMENAME/templates/views/views-exposed-form.html.twig and place this contents in it.
/**
* @file
* Default theme implementation of a views exposed form.
*
* Available variables:
* - form: A render element representing the form.
*
* @ingroup templates
*
* @see template_preprocess_views_exposed_form()
*/
#}
{% if q is not empty %}
{#
This ensures that, if clean URLs are off, the 'q' is added first,
as a hidden form element, so that it shows up first in the POST URL.
#}
{{ q }}
{% endif %}
<div class="clearfix">
{{ form }}
</div>
<?php
// In your sub-theme, create this file ./THEMENAME/src/Plugin/Preprocess/ViewsExposedForm.php and place this contents in it.
/**
* @file
* Contains \Drupal\THEMENAME\Plugin\Preprocess\ViewsExposedForm.
*/
namespace Drupal\THEMENAME\Plugin\Preprocess;
use Drupal\bootstrap\Annotation\BootstrapPreprocess;
use Drupal\bootstrap\Plugin\Preprocess\PreprocessBase;
use Drupal\bootstrap\Utility\Element;
use Drupal\bootstrap\Utility\Variables;
use Drupal\Component\Utility\Html;
use Drupal\Core\Url;
/**
* Implements hook_form_FORM_ID_alter().
*
* @ingroup plugins_form
*
* @BootstrapPreprocess("views_exposed_form")
*/
class ViewsExposedForm extends PreprocessBase {
/**
* {@inheritdoc}
*/
public function preprocessVariables(Variables $variables) {
$q = Element::create($variables->offsetGet('q', []));
$form = Element::create($variables['form']);
// Generate an unique ID for the filters wrapper.
$id = Html::getUniqueId('filters-wrapper');
// Build the wrapper.
$wrapper_build = ['#theme_wrappers' => ['container__filters_wrapper']];
$filters_wrapper = Element::create($wrapper_build);
$filters_wrapper->addClass(['filters-wrapper', 'collapse', 'well', 'form-inline']);
$filters_wrapper->setAttribute('id', $id);
// Move all the form children to the wrapper. This is ok
// to do it here since this is about final rendering, not
// actually altering the form.
foreach ($form->children() as $key => $child) {
$filters_wrapper->{$key} = $child;
unset($form->{$key});
}
// Add the wrapper to the form.
$form->filters_wrapper = $filters_wrapper;
// Create a toggle for showing/hiding the filters.
$build = [
'#type' => 'link',
'#title' => t('Filters'),
'#url' => Url::fromUserInput('#' . $id),
];
$q->toggle = Element::create($build)
->addClass(['filters-wrapper-toggle', 'btn'])
->colorize()
->setIcon()
->setAttribute('data-toggle', 'collapse')
;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.