Issue #3371005 by omkar.podey, lauriii, hooroomoo, tim.plunkett,... (3165269b) · Commits · project / drupal

core/modules/toolbar/css/toolbar.menu.css

+1 −0

Original line number	Diff line number	Diff line
		@@ -46,6 +46,7 @@
		.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
		.toolbar .toolbar-tray a.is-active {
		color: #000;
		background-color: #f5f5f5;
		font-weight: bold;
		}

core/modules/toolbar/js/models/MenuModel.js

+3 −3

Original line number	Diff line number	Diff line
		@@ -16,13 +16,13 @@
		/**
		* @type {object}
		*
		* @prop {object} subtrees
		* @prop {object\|null} subtrees
		*/
		defaults: /** @lends Drupal.toolbar.MenuModel# */ {
		/**
		* @type {object}
		* @type {object\|null}
		*/
		subtrees: {},
		subtrees: null,
		},
		},
		);

core/modules/toolbar/js/toolbar.menu.js

+53 −5

Original line number	Diff line number	Diff line
		@@ -14,6 +14,33 @@
		*/
		let activeItem = Drupal.url(drupalSettings.path.currentPath);

		/**
		* Maintains active tab in horizontal orientation.
		*/
		$.fn.drupalToolbarMenuHorizontal = function () {
		let currentPath = drupalSettings.path.currentPath;
		const menu = once('toolbar-menu-horizontal', this);
		if (menu.length) {
		const $menu = $(menu);
		if (activeItem) {
		const count = currentPath.split('/').length;
		// Find the deepest link with its parent info and start
		// marking active.
		for (let i = 0; i < count; i++) {
		const $menuItem = $menu.find(
		`a[data-drupal-link-system-path="${currentPath}"]`,
		);
		if ($menuItem.length !== 0) {
		$menuItem.closest('a').addClass('is-active');
		break;
		}
		const lastIndex = currentPath.lastIndexOf('/');
		currentPath = currentPath.slice(0, lastIndex);
		}
		}
		}
		};

		$.fn.drupalToolbarMenu = function () {
		const ui = {
		handleOpen: Drupal.t('Extend'),
		@@ -153,6 +180,7 @@
		* The root of the menu.
		*/
		function openActiveItem($menu) {
		let currentPath = drupalSettings.path.currentPath;
		const pathItem = $menu.find(`a[href="${window.location.pathname}"]`);
		if (pathItem.length && !activeItem) {
		activeItem = window.location.pathname;
		@@ -161,16 +189,36 @@
		const $activeItem = $menu
		.find(`a[href="${activeItem}"]`)
		.addClass('menu-item--active');
		if (pathItem.length === 0 && activeItem) {
		const count = currentPath.split('/').length;
		// Find the deepest link with its parent info and start
		// marking active.
		for (let i = 0; i < count; i++) {
		const $menuItem = $menu.find(
		`a[data-drupal-link-system-path="${currentPath}"]`,
		);
		if ($menuItem.length !== 0) {
		const $activeTrail = $menuItem
		.parentsUntil('.root', 'li')
		.addClass('menu-item--active-trail');
		toggleList($activeTrail, true);
		break;
		}
		const lastIndex = currentPath.lastIndexOf('/');
		currentPath = currentPath.slice(0, lastIndex);
		}
		} else {
		const $activeTrail = $activeItem
		.parentsUntil('.root', 'li')
		.addClass('menu-item--active-trail');
		toggleList($activeTrail, true);
		}
		}
		}

		// Return the jQuery object.
		return this.each(function (selector) {
		const menu = once('toolbar-menu', this);
		const menu = once('toolbar-menu-vertical', this);
		if (menu.length) {
		const $menu = $(menu);
		// Bind event handlers.

core/modules/toolbar/js/views/MenuVisualView.js

+27 −0

Original line number	Diff line number	Diff line
		@@ -15,13 +15,40 @@
		*/
		initialize() {
		this.listenTo(this.model, 'change:subtrees', this.render);

		// Render the view immediately on initialization.
		this.render();
		},

		/**
		* {@inheritdoc}
		*/
		render() {
		this.renderVertical();
		this.renderHorizontal();
		},

		/**
		* Renders the toolbar menu in horizontal mode.
		*/
		renderHorizontal() {
		// Render horizontal.
		if ('drupalToolbarMenu' in $.fn) {
		this.$el.children('.toolbar-menu').drupalToolbarMenuHorizontal();
		}
		},

		/**
		* Renders the toolbar menu in vertical mode.
		*/
		renderVertical() {
		const subtrees = this.model.get('subtrees');

		// Rendering the vertical menu depends on the subtrees.
		if (!this.model.get('subtrees')) {
		return;
		}

		// Add subtrees.
		Object.keys(subtrees \|\| {}).forEach((id) => {
		$(

core/modules/toolbar/tests/src/FunctionalJavascript/ToolbarActiveTrailTest.php

0 → 100644

+93 −0

Original line number	Diff line number	Diff line
		<?php

		namespace Drupal\Tests\toolbar\FunctionalJavascript;

		use Drupal\FunctionalJavascriptTests\WebDriverTestBase;

		/**
		* Tests that the active trail is maintained in the toolbar.
		*
		* @group toolbar
		*/
		class ToolbarActiveTrailTest extends WebDriverTestBase {

		/**
		* {@inheritdoc}
		*/
		protected static $modules = ['toolbar', 'node', 'field_ui'];

		/**
		* {@inheritdoc}
		*/
		protected $defaultTheme = 'stark';

		/**
		* {@inheritdoc}
		*/
		protected function setUp(): void {
		parent::setUp();
		$this->drupalLogin($this->rootUser);
		$this->drupalCreateContentType(['type' => 'article', 'name' => 'Article']);
		}

		/**
		* Tests that the active trail is maintained even when traversed deeper.
		*
		* @param string $orientation
		* The toolbar orientation.
		*
		* @testWith ["vertical"]
		* ["horizontal"]
		*
		* @throws \Behat\Mink\Exception\ElementNotFoundException
		*/
		public function testToolbarActiveTrail(string $orientation) {
		$page = $this->getSession()->getPage();
		$assert_session = $this->assertSession();

		$this->drupalGet('<front>');
		$this->assertNotEmpty($this->assertSession()->waitForElement('css', 'body.toolbar-horizontal'));
		$this->assertNotEmpty($this->assertSession()->waitForElementVisible('css', '.toolbar-tray'));
		$this->assertSession()->waitForElementRemoved('css', '.toolbar-loading');
		$this->assertNotEmpty($assert_session->waitForElementVisible('css', '#toolbar-item-administration.is-active'));

		// If testing for vertical orientation of the toolbar then switch to it.
		if ($orientation === 'vertical') {
		$page->pressButton('Vertical orientation');
		}

		// Traverse deeper.
		$this->clickLink('Structure');
		$this->clickLink('Content types');
		$this->clickLink('Manage fields');
		$this->clickLink('Edit');

		if ($orientation === 'vertical') {
		$this->assertNotEmpty($assert_session->waitForElementVisible('named',
		['link', 'Structure']));
		// Assert that menu-item--active-trail was maintained.
		$this->assertTrue($assert_session->waitForElementVisible('named',
		['link', 'Structure'])->getParent()->getParent()->hasClass('menu-item--active-trail'));
		$this->assertTrue($assert_session->waitForElementVisible('named',
		['link', 'Content types'])->getParent()->getParent()->hasClass('menu-item--active-trail'));
		// Change orientation and check focus is maintained.
		$page->pressButton('Horizontal orientation');
		$this->assertTrue($assert_session->waitForElementVisible('css',
		'#toolbar-link-system-admin_structure')->hasClass('is-active'));
		}
		else {
		$this->assertNotEmpty($assert_session->waitForElementVisible('css', '#toolbar-link-system-admin_structure'));
		// Assert that is-active was maintained.
		$this->assertTrue($assert_session->waitForElementVisible('css', '#toolbar-link-system-admin_structure')->hasClass('is-active'));
		// Change orientation and check focus is maintained.
		$page->pressButton('Vertical orientation');
		// Introduce a delay to let the focus load.
		$this->getSession()->wait(150);
		$this->assertTrue($assert_session->waitForElementVisible('named',
		['link', 'Structure'])->getParent()->getParent()->hasClass('menu-item--active-trail'));
		$this->assertTrue($assert_session->waitForElementVisible('named',
		['link', 'Content types'])->getParent()->getParent()->hasClass('menu-item--active-trail'));
		}
		}

		}