Issue #3212998 by mherchel, Gauravmahlawat: Olivero: Normalize JavaScript... (08a9dcb2) · Commits · project / drupal

core/themes/olivero/js/scripts.es6.js

+20 −8

Changes for core/themes/olivero/js/scripts.es6.js: 20 added lines, 8 removed lines.
Original line number	Diff line number	Diff line
		@@ -8,7 +8,9 @@
		Drupal.olivero = {};

		function isDesktopNav() {
		const navButtons = document.querySelector('.mobile-buttons');
		const navButtons = document.querySelector(
		'[data-drupal-selector="mobile-buttons"]',
		);
		return (
		window.getComputedStyle(navButtons).getPropertyValue('display') === 'none'
		);
		@@ -17,9 +19,11 @@
		Drupal.olivero.isDesktopNav = isDesktopNav;

		const stickyHeaderToggleButton = document.querySelector(
		'.sticky-header-toggle',
		'[data-drupal-selector="sticky-header-toggle"]',
		);
		const siteHeaderFixable = document.querySelector(
		'[data-drupal-selector="site-header-fixable"]',
		);
		const siteHeaderFixable = document.querySelector('.site-header__fixable');

		function stickyHeaderIsEnabled() {
		return stickyHeaderToggleButton.getAttribute('aria-checked') === 'true';
		@@ -94,7 +98,9 @@
		'IntersectionObserverEntry' in window &&
		'intersectionRatio' in window.IntersectionObserverEntry.prototype
		) {
		const fixableElements = document.querySelectorAll('.fixable');
		const fixableElements = document.querySelectorAll(
		'[data-drupal-selector="site-header-fixable"], [data-drupal-selector="social-bar-inner"]',
		);

		function toggleDesktopNavVisibility(entries) {
		if (!isDesktopNav()) return;
		@@ -129,7 +135,9 @@
		}

		function monitorNavPosition() {
		const primaryNav = document.querySelector('.site-header');
		const primaryNav = document.querySelector(
		'[data-drupal-selector="site-header"]',
		);
		const options = {
		rootMargin: getRootMargin(),
		threshold: [0.999, 1],
		@@ -149,11 +157,15 @@
		// If header is pinned open and a header element gains focus, scroll to the
		// top of the page to ensure that the header elements can be seen.
		document
		.querySelector('#site-header__inner')
		.querySelector('[data-drupal-selector="site-header-inner"]')
		.addEventListener('focusin', () => {
		if (isDesktopNav() && !stickyHeaderIsEnabled()) {
		const header = document.querySelector('#header');
		const headerNav = header.querySelector('#header-nav');
		const header = document.querySelector(
		'[data-drupal-selector="site-header"]',
		);
		const headerNav = header.querySelector(
		'[data-drupal-selector="header-nav"]',
		);
		const headerMargin = header.clientHeight - headerNav.clientHeight;
		if (window.scrollY > headerMargin) {
		window.scrollTo(0, headerMargin);

core/themes/olivero/js/scripts.js

+8 −8

Changes for core/themes/olivero/js/scripts.js: 8 added lines, 8 removed lines.
Original line number	Diff line number	Diff line
		@@ -9,13 +9,13 @@
		Drupal.olivero = {};

		function isDesktopNav() {
		var navButtons = document.querySelector('.mobile-buttons');
		var navButtons = document.querySelector('[data-drupal-selector="mobile-buttons"]');
		return window.getComputedStyle(navButtons).getPropertyValue('display') === 'none';
		}

		Drupal.olivero.isDesktopNav = isDesktopNav;
		var stickyHeaderToggleButton = document.querySelector('.sticky-header-toggle');
		var siteHeaderFixable = document.querySelector('.site-header__fixable');
		var stickyHeaderToggleButton = document.querySelector('[data-drupal-selector="sticky-header-toggle"]');
		var siteHeaderFixable = document.querySelector('[data-drupal-selector="site-header-fixable"]');

		function stickyHeaderIsEnabled() {
		return stickyHeaderToggleButton.getAttribute('aria-checked') === 'true';
		@@ -58,7 +58,7 @@
		}

		if ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
		var fixableElements = document.querySelectorAll('.fixable');
		var fixableElements = document.querySelectorAll('[data-drupal-selector="site-header-fixable"], [data-drupal-selector="social-bar-inner"]');

		function toggleDesktopNavVisibility(entries) {
		if (!isDesktopNav()) return;
		@@ -92,7 +92,7 @@
		}

		function monitorNavPosition() {
		var primaryNav = document.querySelector('.site-header');
		var primaryNav = document.querySelector('[data-drupal-selector="site-header"]');
		var options = {
		rootMargin: getRootMargin(),
		threshold: [0.999, 1]
		@@ -104,10 +104,10 @@
		stickyHeaderToggleButton.addEventListener('click', function () {
		toggleStickyHeaderState(!stickyHeaderIsEnabled());
		});
		document.querySelector('#site-header__inner').addEventListener('focusin', function () {
		document.querySelector('[data-drupal-selector="site-header-inner"]').addEventListener('focusin', function () {
		if (isDesktopNav() && !stickyHeaderIsEnabled()) {
		var header = document.querySelector('#header');
		var headerNav = header.querySelector('#header-nav');
		var header = document.querySelector('[data-drupal-selector="site-header"]');
		var headerNav = header.querySelector('[data-drupal-selector="header-nav"]');
		var headerMargin = header.clientHeight - headerNav.clientHeight;

		if (window.scrollY > headerMargin) {

core/themes/olivero/templates/layout/page.html.twig

+6 −6

Changes for core/themes/olivero/templates/layout/page.html.twig: 6 added lines, 6 removed lines.
Original line number	Diff line number	Diff line
		@@ -50,12 +50,12 @@
		<div id="page">

		{% if page.header or page.primary_menu or page.secondary_menu %}
		<header id="header" class="site-header" role="banner">
		<header id="header" class="site-header" data-drupal-selector="site-header" role="banner">

		{# Gets fixed by JavaScript at wide widths. #}
		<div class="site-header__fixable fixable">
		<div class="site-header__fixable" data-drupal-selector="site-header-fixable">
		<div class="site-header__initial">
		<button class="sticky-header-toggle" role="switch" aria-controls="site-header__inner" aria-label="{{ 'Sticky header'\|t }}" aria-checked="false">
		<button class="sticky-header-toggle" data-drupal-selector="sticky-header-toggle" role="switch" aria-controls="site-header__inner" aria-label="{{ 'Sticky header'\|t }}" aria-checked="false">
		<span class="sticky-header-toggle__icon">
		<span></span>
		<span></span>
		@@ -65,20 +65,20 @@
		</div>

		{# Needs to extend full width so box shadow will also extend. #}
		<div id="site-header__inner" class="site-header__inner">
		<div id="site-header__inner" class="site-header__inner" data-drupal-selector="site-header-inner">
		<div class="container site-header__inner__container">

		{{ page.header }}

		{% if page.primary_menu or page.secondary_menu %}
		<div class="mobile-buttons">
		<div class="mobile-buttons" data-drupal-selector="mobile-buttons">
		<button class="mobile-nav-button" aria-label="{{ 'Toggle Main Menu'\|t }}" aria-controls="header-nav" aria-expanded="false">
		<span class="mobile-nav-button__label">{{ 'Menu'\|t }}</span>
		<span class="mobile-nav-button__icon"></span>
		</button>
		</div>

		<div id="header-nav" class="header-nav" data-menu-open="false">
		<div id="header-nav" class="header-nav" data-drupal-selector="header-nav">
		{{ page.primary_menu }}
		{{ page.secondary_menu }}
		</div>

core/themes/olivero/templates/layout/region--social.html.twig

+1 −1

Changes for core/themes/olivero/templates/layout/region--social.html.twig: 1 added line, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -13,7 +13,7 @@
		*/
		#}

		<aside class="social-bar__inner fixable">
		<aside class="social-bar__inner" data-drupal-selector="social-bar-inner">
		<div class="rotate">
		{{ content }}
		</div>