Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3212981 by mherchel, Indrajith KB, Gauravmahlawat, andy-blum, lauriii, thejimbirch: Olivero: Refactor navigation.es6.js to meet Drupal's JavaScript coding standards 

(cherry picked from commit 34633c2e86)
merge-requests/577/head
Lauri Eskola 2021-06-29 10:59:06 +03:00
parent a0c48d6d45
commit 6158c17cea
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
17 changed files with 64 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/themes/olivero/css/base/base.css
View File

@ -32,7 +32,7 @@ body {
background-position: top left /* LTR */
}
body.js-fixed {
body.is-fixed {
position: fixed;
overflow: hidden;
width: 100%;
@ -165,6 +165,6 @@ ul {
background: #0d77b5;
}
.js-overlay-active .overlay {
.is-overlay-active .overlay {
display: block;
}

4
core/themes/olivero/css/base/base.pcss.css
View File

@ -26,7 +26,7 @@ body {
background-image: url("../../images/background.svg");
background-position: top left; /* LTR */
&.js-fixed {
&.is-fixed {
position: fixed;
overflow: hidden;
width: 100%;
@ -122,6 +122,6 @@ ul {
background: var(--color--blue-20);
}
.js-overlay-active .overlay {
.is-overlay-active .overlay {
display: block;
}

4
core/themes/olivero/css/components/header-sticky-toggle.css
View File

@ -44,7 +44,7 @@
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .js-fixed .sticky-header-toggle {
body:not(.is-always-mobile-nav) .is-fixed .sticky-header-toggle {
visibility: visible
}
}
@ -124,7 +124,7 @@ body.is-always-mobile-nav .sticky-header-toggle {
background-color: #fff;
}
.js-fixed .sticky-header-toggle {
.is-fixed .sticky-header-toggle {
cursor: pointer;
pointer-events: auto;
opacity: 1;

4
core/themes/olivero/css/components/header-sticky-toggle.pcss.css
View File

@ -34,7 +34,7 @@
}
}
body:not(.is-always-mobile-nav) .js-fixed .sticky-header-toggle {
body:not(.is-always-mobile-nav) .is-fixed .sticky-header-toggle {
@media (--nav) {
visibility: visible;
}
@ -92,7 +92,7 @@ body.is-always-mobile-nav .sticky-header-toggle {
}
}
.js-fixed .sticky-header-toggle {
.is-fixed .sticky-header-toggle {
cursor: pointer;
pointer-events: auto;
opacity: 1;

6
core/themes/olivero/css/components/navigation/nav-primary-wide.css
View File

@ -287,7 +287,7 @@ body:not(.is-always-mobile-nav) {
* little extra room when the toolbar is fixed (and is shorter).
*/
}
body:not(.is-always-mobile-nav) .js-fixed .primary-nav__menu--level-2 {
body:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - 7.875rem);
}
}
@ -305,7 +305,7 @@ body:not(.is-always-mobile-nav) {
max-height: calc(100vh - 14.8125rem);
}
body:not(.is-always-mobile-nav).toolbar-vertical .js-fixed .primary-nav__menu--level-2, body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed .js-fixed .primary-nav__menu--level-2 {
body:not(.is-always-mobile-nav).toolbar-vertical .is-fixed .primary-nav__menu--level-2, body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed .is-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - 10.3125rem);
}
body:not(.is-always-mobile-nav) {
@ -316,7 +316,7 @@ body:not(.is-always-mobile-nav) {
max-height: calc(100vh - 17.3125rem);
}
body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed.toolbar-tray-open .js-fixed .primary-nav__menu--level-2 {
body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed.toolbar-tray-open .is-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - 12.8125rem);
}
}

6
core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css
View File

@ -192,7 +192,7 @@ body:not(.is-always-mobile-nav) {
* When ensuring that long menus don't overflow viewport, we can give a
* little extra room when the toolbar is fixed (and is shorter).
*/
& .js-fixed .primary-nav__menu--level-2 {
& .is-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) + var(--sp4));
}
}
@ -211,7 +211,7 @@ body:not(.is-always-mobile-nav) {
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height));
}
& .js-fixed .primary-nav__menu--level-2 {
& .is-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) + var(--sp4));
}
}
@ -222,7 +222,7 @@ body:not(.is-always-mobile-nav) {
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) - var(--toolbar-tray-height));
}
& .js-fixed .primary-nav__menu--level-2 {
& .is-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) - var(--toolbar-tray-height) + var(--sp4));
}
}

4
core/themes/olivero/css/components/navigation/wide-nav-expand.css
View File

@ -39,7 +39,7 @@
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .js-fixed .wide-nav-expand {
body:not(.is-always-mobile-nav) .is-fixed .wide-nav-expand {
visibility: visible
}
}
@ -120,7 +120,7 @@ body.is-always-mobile-nav .wide-nav-expand {
background-color: currentColor;
}
.js-fixed .wide-nav-expand__icon {
.is-fixed .wide-nav-expand__icon {
opacity: 1;
}

4
core/themes/olivero/css/components/navigation/wide-nav-expand.pcss.css
View File

@ -29,7 +29,7 @@
}
}
body:not(.is-always-mobile-nav) .js-fixed .wide-nav-expand {
body:not(.is-always-mobile-nav) .is-fixed .wide-nav-expand {
@media (--nav) {
visibility: visible;
}
@ -88,7 +88,7 @@ body.is-always-mobile-nav .wide-nav-expand {
}
}
.js-fixed .wide-nav-expand__icon {
.is-fixed .wide-nav-expand__icon {
opacity: 1;
}

12
core/themes/olivero/css/components/site-header.css
View File

@ -40,13 +40,13 @@
}
@media (min-width: 75rem) {
.site-header__fixable.js-fixed:not(.is-expanded) {
.site-header__fixable.is-fixed:not(.is-expanded) {
pointer-events: none;
}
}
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .site-header__fixable.js-fixed {
body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed {
position: fixed;
z-index: 102; /* Appear above body content that is position: relative */
top: -4.5rem;
@ -56,13 +56,13 @@
/* Toolbar is fixed, and tray is either vertical or closed and horizontal. */
}
body:not(.is-always-mobile-nav).toolbar-vertical.toolbar-fixed .site-header__fixable.js-fixed, body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed .site-header__fixable.js-fixed {
body:not(.is-always-mobile-nav).toolbar-vertical.toolbar-fixed .site-header__fixable.is-fixed, body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed .site-header__fixable.is-fixed {
top: -2.0625rem;
}
body:not(.is-always-mobile-nav) {
/* Toolbar is fixed, and tray is open and horizontal. */
}
body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed.toolbar-tray-open .site-header__fixable.js-fixed {
body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed.toolbar-tray-open .site-header__fixable.is-fixed {
top: 0.4375rem;
}
}
@ -103,7 +103,7 @@ html.js body:not(.is-always-mobile-nav) .site-header__inner {
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .site-header__fixable.js-fixed:not(.is-expanded) .site-header__inner {
body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
transform: translateX(-101%); /* LTR */
opacity: 0
}
@ -111,7 +111,7 @@ body:not(.is-always-mobile-nav) .site-header__fixable.js-fixed:not(.is-expanded)
@media (min-width: 75rem) {
[dir="rtl"] body:not(.is-always-mobile-nav) .site-header__fixable.js-fixed:not(.is-expanded) .site-header__inner {
[dir="rtl"] body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
transform: translateX(101%)
}
}

12
core/themes/olivero/css/components/site-header.pcss.css
View File

@ -29,7 +29,7 @@
align-items: flex-end;
transition: all 0.5s;
&.js-fixed {
&.is-fixed {
@media (--nav) {
&:not(.is-expanded) {
pointer-events: none;
@ -40,7 +40,7 @@
@media (--nav) {
body:not(.is-always-mobile-nav) {
& .site-header__fixable.js-fixed {
& .site-header__fixable.is-fixed {
position: fixed;
z-index: 102; /* Appear above body content that is position: relative */
inset-block-start: calc(-1 * var(--sp4));
@ -50,12 +50,12 @@
/* Toolbar is fixed, and tray is either vertical or closed and horizontal. */
&.toolbar-vertical.toolbar-fixed,
&.toolbar-horizontal.toolbar-fixed {
& .site-header__fixable.js-fixed {
& .site-header__fixable.is-fixed {
inset-block-start: calc(var(--toolbar-height) - var(--sp4));
}
}
/* Toolbar is fixed, and tray is open and horizontal. */
&.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .site-header__fixable.js-fixed {
&.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .site-header__fixable.is-fixed {
inset-block-start: calc(var(--toolbar-tray-height) + var(--toolbar-height) - var(--sp4));
}
}
@ -90,14 +90,14 @@ html.js body:not(.is-always-mobile-nav) .site-header__inner {
}
/* Hide the desktop nav when it's fixed and not active. */
body:not(.is-always-mobile-nav) .site-header__fixable.js-fixed:not(.is-expanded) .site-header__inner {
body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
@media (--nav) {
transform: translateX(-101%); /* LTR */
opacity: 0;
}
}
[dir="rtl"] body:not(.is-always-mobile-nav) .site-header__fixable.js-fixed:not(.is-expanded) .site-header__inner {
[dir="rtl"] body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
@media (--nav) {
transform: translateX(101%);
}

6
core/themes/olivero/css/layout/social-bar.css
View File

@ -67,15 +67,15 @@
padding-bottom: 5.625rem
}
[dir="ltr"] .social-bar__inner.js-fixed {
[dir="ltr"] .social-bar__inner.is-fixed {
left: 0
}
[dir="rtl"] .social-bar__inner.js-fixed {
[dir="rtl"] .social-bar__inner.is-fixed {
right: 0
}
.social-bar__inner.js-fixed {
.social-bar__inner.is-fixed {
position: fixed;
top: 6.75rem;
height: calc(100vh - 6.75rem);

2
core/themes/olivero/css/layout/social-bar.pcss.css
View File

@ -27,7 +27,7 @@
padding-inline-start: 0;
padding-inline-end: 0;
&.js-fixed {
&.is-fixed {
position: fixed;
inset-block-start: var(--sp6);
inset-inline-start: 0;

29
core/themes/olivero/js/navigation.es6.js
View File

@ -22,12 +22,12 @@
props.navButton.setAttribute('aria-expanded', value);
if (value) {
props.body.classList.add('js-overlay-active');
props.body.classList.add('js-fixed');
props.body.classList.add('is-overlay-active');
props.body.classList.add('is-fixed');
props.navWrapper.classList.add('is-active');
} else {
props.body.classList.remove('js-overlay-active');
props.body.classList.remove('js-fixed');
props.body.classList.remove('is-overlay-active');
props.body.classList.remove('is-fixed');
props.navWrapper.classList.remove('is-active');
}
}
@ -94,12 +94,11 @@
});
// Remove overlays when browser is resized and desktop nav appears.
// @todo Use core/drupal.debounce library to throttle when we move into theming.
window.addEventListener('resize', () => {
if (props.olivero.isDesktopNav()) {
toggleNav(props, false);
props.body.classList.remove('js-overlay-active');
props.body.classList.remove('js-fixed');
props.body.classList.remove('is-overlay-active');
props.body.classList.remove('is-fixed');
}
// Ensure that all sub-navigation menus close when the browser is resized.
@ -113,19 +112,19 @@
Drupal.behaviors.oliveroNavigation = {
attach(context) {
const headerId = 'header';
const header = once(
'olivero-navigation',
`#${headerId}`,
context,
).shift();
const header = once('navigation', `#${headerId}`, context).shift();
const navWrapperId = 'header-nav';
if (header) {
const navWrapper = header.querySelector('#header-nav');
const navWrapper = header.querySelector(`#${navWrapperId}`);
const { olivero } = Drupal;
const navButton = context.querySelector('.mobile-nav-button');
const navButton = context.querySelector(
'[data-drupal-selector="mobile-nav-button"]',
);
const body = context.querySelector('body');
const overlay = context.querySelector('.overlay');
const overlay = context.querySelector(
'[data-drupal-selector="overlay"]',
);
init({
olivero,

20
core/themes/olivero/js/navigation.js
View File

@ -15,12 +15,12 @@
props.navButton.setAttribute('aria-expanded', value);
if (value) {
props.body.classList.add('js-overlay-active');
props.body.classList.add('js-fixed');
props.body.classList.add('is-overlay-active');
props.body.classList.add('is-fixed');
props.navWrapper.classList.add('is-active');
} else {
props.body.classList.remove('js-overlay-active');
props.body.classList.remove('js-fixed');
props.body.classList.remove('is-overlay-active');
props.body.classList.remove('is-fixed');
props.navWrapper.classList.remove('is-active');
}
}
@ -67,8 +67,8 @@
window.addEventListener('resize', function () {
if (props.olivero.isDesktopNav()) {
toggleNav(props, false);
props.body.classList.remove('js-overlay-active');
props.body.classList.remove('js-fixed');
props.body.classList.remove('is-overlay-active');
props.body.classList.remove('is-fixed');
}
Drupal.olivero.closeAllSubNav();
@ -78,15 +78,15 @@
Drupal.behaviors.oliveroNavigation = {
attach: function attach(context) {
var headerId = 'header';
var header = once('olivero-navigation', "#".concat(headerId), context).shift();
var header = once('navigation', "#".concat(headerId), context).shift();
var navWrapperId = 'header-nav';
if (header) {
var navWrapper = header.querySelector('#header-nav');
var navWrapper = header.querySelector("#".concat(navWrapperId));
var olivero = Drupal.olivero;
var navButton = context.querySelector('.mobile-nav-button');
var navButton = context.querySelector('[data-drupal-selector="mobile-nav-button"]');
var body = context.querySelector('body');
var overlay = context.querySelector('.overlay');
var overlay = context.querySelector('[data-drupal-selector="overlay"]');
init({
olivero: olivero,
header: header,

4
core/themes/olivero/js/scripts.es6.js
View File

@ -109,9 +109,9 @@
// FF doesn't seem to support entry.isIntersecting properly,
// so we check the intersectionRatio.
if (entry.intersectionRatio < 1) {
fixableElements.forEach((el) => el.classList.add('js-fixed'));
fixableElements.forEach((el) => el.classList.add('is-fixed'));
} else {
fixableElements.forEach((el) => el.classList.remove('js-fixed'));
fixableElements.forEach((el) => el.classList.remove('is-fixed'));
}
});
}

4
core/themes/olivero/js/scripts.js
View File

@ -65,11 +65,11 @@
entries.forEach(function (entry) {
if (entry.intersectionRatio < 1) {
fixableElements.forEach(function (el) {
return el.classList.add('js-fixed');
return el.classList.add('is-fixed');
});
} else {
fixableElements.forEach(function (el) {
return el.classList.remove('js-fixed');
return el.classList.remove('is-fixed');
});
}
});

4
core/themes/olivero/templates/layout/page.html.twig
View File

@ -72,7 +72,7 @@
{% if page.primary_menu or page.secondary_menu %}
<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">
<button class="mobile-nav-button" data-drupal-selector="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>
@ -129,7 +129,7 @@
</div>
</footer>
<div class="overlay"></div>
<div class="overlay" data-drupal-selector="overlay"></div>
</div>
</div>