Issue #3487874 by jan kellermann, filipeabreu, valthebald, longwave: Olivero:... (7ba9c195) · Commits · project / drupal

core/tests/Drupal/FunctionalJavascriptTests/Theme/OliveroAvoidStorageUsingTest.php

0 → 100644

+53 −0

Original line number	Diff line number	Diff line
		<?php

		declare(strict_types=1);

		namespace Drupal\FunctionalJavascriptTests\Theme;

		use Drupal\FunctionalJavascriptTests\WebDriverTestBase;

		/**
		* Tests usage of localStorage.
		*
		* @group olivero
		*/
		final class OliveroAvoidStorageUsingTest extends WebDriverTestBase {

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

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

		/**
		* Tests use of localStorage.
		*/
		public function testStorageUsing(): void {
		$this->drupalGet('<front>');
		// Check if initial no storage item is written.
		$this->assertJsCondition("localStorage.getItem('Drupal.olivero.stickyHeaderState') === null", 10000, 'Written not strictly necessary Drupal.olivero.stickyHeaderState to localStorage without consent.');

		// Resize and scroll to show stickyHeaderToggleButton.
		$session = $this->getSession();
		$session->resizeWindow(1280, 1024);
		$session->executeScript('window.scrollTo(0, 500);');

		// Click stickyHeaderToggleButton.
		$this->getSession()->getPage()->find('css', '.sticky-header-toggle')->click();

		// Test if localStorage is set now.
		$this->assertJsCondition("localStorage.getItem('Drupal.olivero.stickyHeaderState') !== null");

		// Click stickyHeaderToggleButton again.
		$this->getSession()->getPage()->find('css', '.sticky-header-toggle')->click();

		// Storage item should be removed now.
		$this->assertJsCondition("localStorage.getItem('Drupal.olivero.stickyHeaderState') === null", 10000, 'Storage item Drupal.olivero.stickyHeaderState should be removed.');

		}

		}

core/themes/olivero/js/navigation-utils.js

+24 −3

Original line number	Diff line number	Diff line
		@@ -58,6 +58,10 @@
		* Current state of the sticky header button.
		*/
		function setStickyHeaderStorage(expandedState) {
		if (!expandedState) {
		localStorage.removeItem('Drupal.olivero.stickyHeaderState');
		return;
		}
		const now = new Date();

		const item = {
		@@ -70,6 +74,22 @@
		);
		}

		/**
		* Update the expiration date if the sticky header expanded state is set.
		*
		* @param {boolean} expandedState
		* Current state of the sticky header button.
		*/
		function updateStickyHeaderStorage(expandedState) {
		const stickyHeaderState = localStorage.getItem(
		'Drupal.olivero.stickyHeaderState',
		);

		if (stickyHeaderState !== null) {
		setStickyHeaderStorage(expandedState);
		}
		}

		/**
		* Toggle the state of the sticky header between always pinned and
		* only pinned when scrolled to the top of the viewport.
		@@ -81,7 +101,6 @@
		if (isDesktopNav()) {
		siteHeaderFixable.classList.toggle('is-expanded', pinnedState);
		stickyHeaderToggleButton.setAttribute('aria-checked', pinnedState);
		setStickyHeaderStorage(pinnedState);
		}
		}

		@@ -182,7 +201,9 @@

		if (stickyHeaderToggleButton) {
		stickyHeaderToggleButton.addEventListener('click', () => {
		toggleStickyHeaderState(!stickyHeaderIsEnabled());
		const pinnedState = !stickyHeaderIsEnabled();
		toggleStickyHeaderState(pinnedState);
		setStickyHeaderStorage(pinnedState);
		});
		}

		@@ -209,7 +230,7 @@
		}

		monitorNavPosition();
		setStickyHeaderStorage(getStickyHeaderStorage());
		updateStickyHeaderStorage(getStickyHeaderStorage());
		toggleStickyHeaderState(getStickyHeaderStorage());
		}
		})(Drupal);