Issue #3173832 by Pooja Ganjage, mherchel, adamzimmermann, paulocs, KapilV,... (f0a97d0c) · Commits · project / drupal

core/themes/olivero/js/checkbox.es6.js

+1 −1

Original line number	Diff line number	Diff line
		/**
		* @file
		* Theme override for checkbox.
		* Customization of checkbox.
		*/

		((Drupal) => {

core/themes/olivero/js/comments.es6.js

+4 −4

Original line number	Diff line number	Diff line
		/**
		* @file
		* Adds show/hide functionality for indented comments.
		* Customization of comments.
		*/

		((Drupal, once) => {
		/**
		* Init function for comments.
		* Initialize show/hide button for the comments.
		*
		* @param {object} comments
		* The comment section.
		* @param {Element} comments
		* The comment wrapper element.
		*/
		function init(comments) {
		comments

core/themes/olivero/js/messages.es6.js

+8 −3

Original line number	Diff line number	Diff line
		/**
		* @file
		* Messages.
		* Customization of messages.
		*/

		((Drupal, once) => {
		/**
		* Adds close button to the message.
		* Adds a close button to the message.
		*
		* @param {object} message
		* The message object.
		@@ -108,7 +108,12 @@
		};

		/**
		* Getting messages from context.
		* Get messages from context.
		*
		* @type {Drupal~behavior}
		*
		* @prop {Drupal~behaviorAttach} attach
		* Attaches the close button behavior for messages.
		*/
		Drupal.behaviors.messages = {
		attach(context) {

core/themes/olivero/js/navigation.es6.js

+18 −4

Original line number	Diff line number	Diff line
		/**
		* @file
		* Customization of navigation.
		*/

		((Drupal, once, tabbable) => {
		/**
		* Checks if navWrapper contains "is-active" class.
		* @param {object} navWrapper
		*
		* @param {Element} navWrapper
		* Header navigation.
		*
		* @return {boolean}
		* True if navWrapper contains "is-active" class, false if not.
		*/
		@@ -12,6 +19,7 @@

		/**
		* Opens or closes the header navigation.
		*
		* @param {object} props
		* Navigation props.
		* @param {boolean} state
		@@ -33,7 +41,8 @@
		}

		/**
		* Init function for header navigation.
		* Initialize the header navigation.
		*
		* @param {object} props
		* Navigation props.
		*/
		@@ -45,7 +54,7 @@
		toggleNav(props, !isNavOpen(props.navWrapper));
		});

		// Closes any open sub navigation first, then close header navigation.
		// Close any open sub-navigation first, then close the header navigation.
		document.addEventListener('keyup', (e) => {
		if (e.key === 'Escape' \|\| e.key === 'Esc') {
		if (props.olivero.areAnySubNavsOpen()) {
		@@ -107,7 +116,12 @@
		}

		/**
		* Initialize the navigation JS.
		* Initialize the navigation.
		*
		* @type {Drupal~behavior}
		*
		* @prop {Drupal~behaviorAttach} attach
		* Attach context and settings for navigation.
		*/
		Drupal.behaviors.oliveroNavigation = {
		attach(context) {

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

+38 −5

Original line number	Diff line number	Diff line
		/**
		* @file
		* Controls the visibility of desktop navigation.
		*
		* Shows and hides the desktop navigation based on scroll position and controls
		* the functionality of the button that shows/hides the navigation.
		*/

		/* eslint-disable no-inner-declarations */
		((Drupal) => {
		/**
		@@ -7,6 +15,12 @@
		*/
		Drupal.olivero = {};

		/**
		* Checks if the mobile navigation button is visible.
		*
		* @return {boolean}
		* True if navButtons is hidden, false if not.
		*/
		function isDesktopNav() {
		const navButtons = document.querySelector(
		'[data-drupal-selector="mobile-buttons"]',
		@@ -25,6 +39,12 @@
		'[data-drupal-selector="site-header-fixable"]',
		);

		/**
		* Checks if the sticky header is enabled.
		*
		* @return {boolean}
		* True if sticky header is enabled, false if not.
		*/
		function stickyHeaderIsEnabled() {
		return stickyHeaderToggleButton.getAttribute('aria-checked') === 'true';
		}
		@@ -33,7 +53,8 @@
		* Save the current sticky header expanded state to localStorage, and set
		* it to expire after two weeks.
		*
		* @param {boolean} expandedState - Current state of the sticky header button.
		* @param {boolean} expandedState
		* Current state of the sticky header button.
		*/
		function setStickyHeaderStorage(expandedState) {
		const now = new Date();
		@@ -52,7 +73,8 @@
		* Toggle the state of the sticky header between always pinned and
		* only pinned when scrolled to the top of the viewport.
		*
		* @param {boolean} pinnedState - State to change the sticky header to.
		* @param {boolean} pinnedState
		* State to change the sticky header to.
		*/
		function toggleStickyHeaderState(pinnedState) {
		if (isDesktopNav()) {
		@@ -70,7 +92,8 @@
		/**
		* Return the sticky header's stored state from localStorage.
		*
		* @return {boolean} Stored state of the sticky header.
		* @return {boolean}
		* Stored state of the sticky header.
		*/
		function getStickyHeaderStorage() {
		const stickyHeaderState = localStorage.getItem(
		@@ -91,7 +114,8 @@
		return item.value;
		}

		// Only enable scroll effects if the browser supports Intersection Observer.
		// Only enable scroll interactivity if the browser supports Intersection
		// Observer.
		// @see https://github.com/w3c/IntersectionObserver/blob/master/polyfill/intersection-observer.js#L19-L21
		if (
		'IntersectionObserver' in window &&
		@@ -106,7 +130,7 @@
		if (!isDesktopNav()) return;

		entries.forEach((entry) => {
		// FF doesn't seem to support entry.isIntersecting properly,
		// Firefox doesn't seem to support entry.isIntersecting properly,
		// so we check the intersectionRatio.
		if (entry.intersectionRatio < 1) {
		fixableElements.forEach((el) => el.classList.add('is-fixed'));
		@@ -116,6 +140,12 @@
		});
		}

		/**
		* Gets the root margin by checking for various toolbar classes.
		*
		* @return {string}
		* Root margin for the Intersection Observer options object.
		*/
		function getRootMargin() {
		let rootMarginTop = 72;
		const { body } = document;
		@@ -134,6 +164,9 @@
		return `${rootMarginTop}px 0px 0px 0px`;
		}

		/**
		* Monitor the navigation position.
		*/
		function monitorNavPosition() {
		const primaryNav = document.querySelector(
		'[data-drupal-selector="site-header"]',