Unverified Commit 08a9dcb2 authored by lauriii's avatar lauriii
Browse files

Issue #3212998 by mherchel, Gauravmahlawat: Olivero: Normalize JavaScript...

Issue #3212998 by mherchel, Gauravmahlawat: Olivero: Normalize JavaScript selectors in scripts.es6.js
parent 95edf33a
......@@ -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);
......
......@@ -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) {
......
......@@ -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>
......
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment