Issue #3274026 by pivica: Add navbar open dropdown click behavior (f3c4bb6a) · Commits · project / bs_base

themes/bs_bootstrap/bs_bootstrap.theme

+14 −0

Original line number	Diff line number	Diff line
		@@ -32,6 +32,7 @@ function bs_bootstrap_page_attachments_alter(&$attachments) {

		$attachments['#attached']['drupalSettings']['bs_bootstrap']['navbar_type'] = bs_bootstrap_get_setting('navbar_type');
		$attachments['#attached']['drupalSettings']['bs_bootstrap']['navbar_offcanvas_type'] = bs_bootstrap_get_setting('navbar_offcanvas.type');
		$attachments['#attached']['drupalSettings']['bs_bootstrap']['navbar_opened_submenu_behavior'] = bs_bootstrap_get_setting('navbar_opened_submenu_behavior');
		}

		/**
		@@ -99,6 +100,18 @@ function bs_bootstrap_form_system_theme_settings_alter(&$form, FormStateInterfac
		'#description' => t('None option is useful if you want navigation menu without any special styling and JS functionality. Second level dropdown option will show secondary level in dropdown control. Second level horizontal will render second level menu items in horizontal bar beneath first level. With second level horizontal type third level will be shown in a dropdown control which is the only way to show 3 levels of navigation.'),
		];

		// Navbar menus.
		$form['bs_bootstrap']['navbar_opened_submenu_behavior'] = [
		'#type' => 'select',
		'#title' => t('Navbar opened submenu behavior'),
		'#options' => [
		'visit' => t('Visit link'),
		'close' => t('Close dropdown'),
		],
		'#default_value' => bs_bootstrap_get_setting('navbar_opened_submenu_behavior'),
		'#description' => t('Navigation bar opened submenu click behavior. Option <em>Visit link</em> means that on menu click menu link will be opened. Option <em>Close dropdown</em> means that on menu click menu dropdown will be closed. <em>NOTE</em> does not work for horizontal submenu for now.'),
		];

		$form['bs_bootstrap']['navbar']['onhover'] = [
		'#type' => 'select',
		'#title' => t('Navbar show sub-level on hover'),
		@@ -672,6 +685,7 @@ function bs_bootstrap_get_setting($setting_name) {
		'navbar_container_type' => 'fluid',
		],
		'navbar_type' => 'second-level-dropdown',
		'Navbar opened submenu behavior' => 'visit',
		'language_block' => [
		'type' => 'links',
		'title' => 'label',

themes/bs_bootstrap/config/install/bs_bootstrap.settings.yml

+1 −0

Original line number	Diff line number	Diff line
		@@ -30,4 +30,5 @@ bs_bootstrap:
		navbar_offcanvas:
		type: push
		position: right
		Navbar opened submenu behavior: visit
		navbar_type: second-level-horizontal

themes/bs_bootstrap/config/schema/bs_bootstrap.schema.yml

+3 −0

Original line number	Diff line number	Diff line
		@@ -38,6 +38,9 @@ bs_bootstrap.settings:
		position:
		type: string
		label: 'Off-canvas position'
		navbar_opened_submenu_behavior:
		type: string
		label: 'Navbar open dropdown click behavior'
		language_block:
		type: mapping
		mapping:

themes/bs_bootstrap/js/navbar.js

+22 −8

Original line number	Diff line number	Diff line
		@@ -253,26 +253,40 @@
		var $navbar = $(this);
		var $navbarCollapse = $navbar.parents('.navbar-collapse');

		// Optimize dropdown toggle menu items click/hover event.
		// Visit navbar open dropdown click behavior - click on parent open
		// submenu link will visit a parent link.
		if (drupalSettings.bs_bootstrap.navbar_opened_submenu_behavior === 'visit') {
		$navbar.find('.dropdown').each(function () {
		var $dropdown = $(this);

		var $link = $dropdown.find('> a');
		$link.click(function (e) {
		// If menu item is active (expanded) follow the link.
		// If menu dropdown is shown (expanded) follow the link.
		// This allows us to use expanded dropdown toggle links as regular
		// navigation elements.
		if ($dropdown.hasClass('show') \|\|
		// Or if we are on the first level dropdown menu and second level
		// horizontal option is on, and we are not on responsive menu we
		// should follow the menu and stop processing of a click, so we
		// don't show second level in dropdown menu.
		(this.dataset.menuLevel === '0' && drupalSettings.bs_bootstrap.navbar_type === 'second-level-horizontal' && !$navbarCollapse.is(':visible'))) {
		// Or if we are on the first level dropdown menu and second
		// level horizontal option is on, and we are not on responsive
		// menu we should follow the menu and stop processing of a
		// click, so we don't show second level in dropdown menu.
		(this.dataset.menuLevel === '0' && drupalSettings.bs_bootstrap.navbar_type === 'second-level-horizontal' && !Drupal.bs_bootstrap.navbar.isNavbarCollapseShow($navbarCollapse)) \|\|
		// Or if we are on second level and navbar type is second level
		// dropdown and not in responsive menu then make sure we always
		// follow the click on a link. With this we are sure we also
		// cover cases when second level has third level presented in
		// which case click on second level will not work because it
		// will open third level which we do not show.
		// Problem here is that this will not work with close dropdown
		// option, but this is an edge case and generally this whole
		// case can be avoided if you do not expand third level menus
		// or just remove them.
		(this.dataset.menuLevel === '1' && drupalSettings.bs_bootstrap.navbar_type === 'second-level-dropdown' && !Drupal.bs_bootstrap.navbar.isNavbarCollapseShow($navbarCollapse))) {
		Drupal.bs_bootstrap.navbar.followLink($link);
		return false;
		}
		});
		});
		}

		// Second level horizontal with show on hover option.
		if (drupalSettings.bs_bootstrap.navbar_type === 'second-level-horizontal' && drupalSettings.bs_bootstrap.navbar_onhover) {
		@@ -282,7 +296,7 @@
		// effect will cast first hover and then click event.
		// Detecting actually are we on responsive menu or not is tricky. One
		// solution is to check is navbar visible - if yes we assume that we
		// are on not on responsive menu and we can init hover effects.
		// are on not on responsive menu, and we can init hover effects.
		if ($navbarCollapse.is(':visible')) {
		subNavigationOnHover($navbar);
		}