Issue #3263699: Add support to the accordion component (54e1188c) · Commits · project / bootstrap_components_toolkit

README.md

+23 −0

Original line number	Diff line number	Diff line
		@@ -53,49 +53,72 @@ Below is a table indicating the currently supported Bootstrap components and the
		<td>Theme hook + twig template</td>
		<td>Field formatter</td>
		<td>Field types supported</td>
		<td>Views style</td>
		</tr>
		<tr>
		<td><a href="https://getbootstrap.com/docs/5.0/components/buttons/">Buttons</a></td>
		<td>✓</td>
		<td>✓</td>
		<td>link, email, file</td>
		<td></td>
		</tr>
		<tr>
		<td><a href="https://getbootstrap.com/docs/5.0/components/badge/">Badge</a></td>
		<td>✓</td>
		<td>✓</td>
		<td>link, string, list_string, string_long</td>
		<td></td>
		</tr>
		<tr>
		<td><a href="https://getbootstrap.com/docs/5.0/components/dropdown/">Dropdowns</a></td>
		<td>✓</td>
		<td>✓</td>
		<td>link</td>
		<td></td>
		</tr>
		<tr>
		<td><a href="https://getbootstrap.com/docs/5.0/components/alert/">Alert</a></td>
		<td>✓</td>
		<td></td>
		<td></td>
		<td></td>
		</tr>
		<tr>
		<td><a href="https://getbootstrap.com/docs/5.0/components/card/">Card</a></td>
		<td>✓</td>
		<td></td>
		<td></td>
		<td></td>
		</tr>
		<tr>
		<td><a href="https://getbootstrap.com/docs/5.0/components/navs-tabs/">Nav</a></td>
		<td>✓</td>
		<td></td>
		<td></td>
		<td></td>
		</tr>
		<tr>
		<td><a href="https://getbootstrap.com/docs/5.0/components/navs-tabs/#tabs">Tabs</a></td>
		<td>✓</td>
		<td></td>
		<td></td>
		<td></td>
		</tr>
		<tr>
		<td><a href="https://getbootstrap.com/docs/5.0/components/accordion/">Accordion</a></td>
		<td>✓</td>
		<td></td>
		<td></td>
		<td>✓</td>
		</tr>
		<tr>
		<td><a href="https://getbootstrap.com/docs/5.0/components/accordion/">Accordion item</a></td>
		<td>✓</td>
		<td></td>
		<td></td>
		<td>✓</td>
		</tr>

		</table>

		## Javascript

bootstrap_components_toolkit.module

+19 −0

Original line number	Diff line number	Diff line
		@@ -81,6 +81,25 @@ function bootstrap_components_toolkit_theme($existing, $type, $theme, $path) {
		'tabs' => []
		],
		],
		'bootstrap_accordion' => [
		'variables' => [
		'id' => '',
		'items' => [],
		'style' => '',
		'classes' => [],
		],
		],
		'bootstrap_accordion__item' => [
		'variables' => [
		'parent_id' => '',
		'item_id' => '',
		'is_open' => FALSE,
		'always_open' => FALSE,
		'header_text' => '',
		'header_tag' => '',
		'body_content' => [],
		],
		],
		];
		}

modules/bootstrap_components_toolkit_styleguide/src/Plugin/Styleguide/BootstrapComponentsToolkitStyleguide.php

+70 −0

Original line number	Diff line number	Diff line
		@@ -80,6 +80,7 @@ class BootstrapComponentsToolkitStyleguide extends StyleguidePluginBase {
		$items += $this->bsDropdown();
		$items += $this->bsCard();
		$items += $this->bsTabs();
		$items += $this->bsAccordion();

		return $items;
		}
		@@ -561,4 +562,73 @@ class BootstrapComponentsToolkitStyleguide extends StyleguidePluginBase {
		return $items;
		}

		/**
		* Accordion component generator.
		*
		* @return array
		* Items with new elements.
		*/
		private function bsAccordion() {

		$items = [];

		$items['bootstrap_accordion'] = [
		'title' => $this->t('Accordion'),
		'content' => ['#type' => 'container'],
		'group' => $this->t('Bootstrap Components Toolkit'),
		];

		$items['bootstrap_accordion']['content'] = [
		'#theme' => 'bootstrap_accordion',
		'#id' => 'accordion-parent',
		'#style' => 'flush',
		'#items' => [
		[
		'parent_id' => 'accordion-parent',
		'item_id' => 'firstitem',
		'is_open' => FALSE,
		'always_open' => FALSE,
		'header_text' => 'First item',
		'header_tag' => '',
		'body_content' => [
		[
		'content' => $this->generator->paragraphs(3),
		],
		[
		'content' => $this->generator->paragraphs(3),
		],
		],
		],
		[
		'parent_id' => 'accordion-parent',
		'item_id' => 'seconditem',
		'is_open' => TRUE,
		'always_open' => FALSE,
		'header_text' => 'Second item',
		'header_tag' => '',
		'body_content' => [
		[
		'content' => $this->generator->paragraphs(3),
		],
		],
		],
		[
		'parent_id' => 'accordion-parent',
		'item_id' => 'thirditem',
		'is_open' => FALSE,
		'always_open' => FALSE,
		'header_text' => 'Third item',
		'header_tag' => '',
		'body_content' => [
		[
		'content' => $this->generator->paragraphs(4),
		],
		],
		],
		],
		];

		return $items;
		}

		}

modules/bootstrap_components_toolkit_views_accordion/bootstrap_components_toolkit_views_accordion.info.yml

0 → 100644

+9 −0

Original line number	Diff line number	Diff line
		name: Bootstrap components toolkit Views Accordion
		type: module
		description: Displays rows in a Bootstrap Accordion.
		core: 8.x
		core_version_requirement: ^8 \|\| ^9
		package: Bootstrap
		dependencies:
		- drupal:views
		- bootstrap_components_toolkit

modules/bootstrap_components_toolkit_views_accordion/bootstrap_components_toolkit_views_accordion.module

0 → 100644

+60 −0

Original line number	Diff line number	Diff line
		<?php

		/**
		* @file
		* Primary module hooks for Boostrap components toolkit module.
		*/

		use Drupal\Component\Utility\Html;

		/**
		* Prepares variables for views_style_bct_accordion.html.twig template.
		*/
		function template_preprocess_views_style_bct_accordion(&$variables) {
		$view = $variables['view'];
		$variables['id'] = Html::getUniqueId('bct-accordion-' . $view->storage->id() . '-' . $view->current_display . '-' . rand(10, 99));
		$variables['options'] = $view->style_plugin->options;

		// Set wrapper classes.
		if ($view->style_plugin->options['wrapper_class']) {
		$wrapper_class = explode(' ', $view->style_plugin->options['wrapper_class']);
		$variables['attributes']['class'] = array_map('\Drupal\Component\Utility\Html::cleanCssIdentifier', $wrapper_class);
		}

		// Group results by field.
		$panel_title_field = $view->style_plugin->options['panel_title_field'];
		if ($panel_title_field) {
		foreach ($variables['rows'] as $id => $row) {
		$row_id = Html::cleanCssIdentifier(strtolower(trim(strip_tags($view->style_plugin->getField($id, $panel_title_field)))));

		if (!isset($variables['rows'][$row_id])) {
		$variables['rows'][$row_id] = [];
		$variables['rows'][$row_id]['parent_id'] = $variables['id'];
		$variables['rows'][$row_id]['item_id'] = $row_id . '-' . rand(1, 1000);
		$variables['rows'][$row_id]['header_tag'] = $variables['options']['header_html_tag'];
		$variables['rows'][$row_id]['is_open'] = FALSE;
		$variables['rows'][$row_id]['always_open'] = $variables['options']['always_open'];
		$variables['rows'][$row_id]['header_text'] = $view->style_plugin->getField($id, $panel_title_field);
		}

		$variables['rows'][$row_id]['body_content'][$id] = $row;
		unset($variables['rows'][$id]);
		}

		// Set open/close accordion items.
		$results = count($variables['rows']);
		if ($results > 0 && isset($view->style_plugin->options['collapse']['first']) && $view->style_plugin->options['collapse']['first'] > 0) {
		$variables['rows'][array_key_first($variables['rows'])]['is_open'] = TRUE;
		}
		if ($results > 1 && isset($view->style_plugin->options['collapse']['last']) && $view->style_plugin->options['collapse']['last'] > 0) {
		$variables['rows'][array_key_last($variables['rows'])]['is_open'] = TRUE;
		}
		if ($results > 2 && isset($view->style_plugin->options['collapse']['middle']) && $view->style_plugin->options['collapse']['middle'] > 0) {
		$row_keys = array_keys(array_slice($variables['rows'], 1, -1));

		foreach ($row_keys as $key) {
		$variables['rows'][$key]['is_open'] = TRUE;
		}
		}
		}
		}