Skip to content

Commit

Permalink
fix(shs-5963): fixes in js scripts and templates
Browse files Browse the repository at this point in the history
  • Loading branch information
cienvaras committed Dec 20, 2024
1 parent 7b4911c commit d232b31
Show file tree
Hide file tree
Showing 22 changed files with 246 additions and 174 deletions.
4 changes: 3 additions & 1 deletion docroot/themes/humsci/humsci_basic/.eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
"node": true
},
"globals": {
"Drupal": "readonly"
"Drupal": "readonly",
"jQuery": "readonly",
"once": "readonly"
},
"rules": {
"no-restricted-globals": 0,
Expand Down
1 change: 0 additions & 1 deletion docroot/themes/humsci/humsci_basic/humsci_basic.theme
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,6 @@ function humsci_basic_preprocess_field(&$variables) {
if (in_array($variables['field_type'], $wysiwyg_types)) {
$variables['#attached']['library'][] = 'humsci_basic/table-wrap';
$variables['#attached']['library'][] = 'humsci_basic/table-scope';
$variables['#attached']['library'][] = 'humsci_basic/video-with-caption';
$variables['#attached']['library'][] = 'humsci_basic/page-scroll-animations';
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
(function (Drupal, once) {
/**
* Loops through a list of accordions and either opens or closes all items
*
* @param {array} expects a list of accordion elements
* @param {string} expects a string that specifies if all accordions should be opened or closed
*/
/**
* Loops through a list of accordions and either opens or closes all items
*
* @param {array} expects a list of accordion elements
* @param {string} expects a string that specifies if all accordions should be opened or closed
*/
function toggleAllAccordions(accordionList, command) {
if (command === 'closeAll') {
accordionList.forEach((accordion) => {
Expand All @@ -18,10 +18,10 @@
}

/**
* Creates a button element that can act as a toggle for all accordions on a page.
*
* @return {element}
*/
* Creates a button element that can act as a toggle for all accordions on a page.
*
* @return {element}
*/
function createToggle() {
const toggleButton = document.createElement('Button');
toggleButton.innerText = 'Expand All';
Expand All @@ -32,11 +32,11 @@
}

/**
* Updates the all toggle buttons when one has been clicked depending on whether
* or not all accordions are being opened or closed.
* @param {array} expects the list of all accordion toggle buttons on the page
* @param {string} expects a string that specifies if all accordions should be opened or closed
*/
* Updates the all toggle buttons when one has been clicked depending on whether
* or not all accordions are being opened or closed.
* @param {array} expects the list of all accordion toggle buttons on the page
* @param {string} expects a string that specifies if all accordions should be opened or closed
*/
function updateToggle(toggleList, command) {
toggleList.forEach((toggleButton) => {
if (command === 'closeAll') {
Expand All @@ -50,7 +50,7 @@
Drupal.behaviors.accordionToggleAllBehavior = {
attach(context) {
// Create a list of all accordions on the page
const accordionList = once('list-of-all-accordions', 'details', context);
const accordionList = once('accordion', 'details', context);

if (accordionList.length >= 1) {
let allExpanded = false;
Expand All @@ -68,7 +68,11 @@
// Create a list of all toggle buttons generated on the page. This has to run
// after the block of code that loops through the accordion lists and creates
// the buttons.
const allToggleButtons = [...context.querySelectorAll('.hb-accordion-toggle-all')];
const allToggleButtons = once(
'accordion-toggle-all',
'.hb-accordion-toggle-all',
context,
);

allToggleButtons.forEach((toggleButton) => {
toggleButton.addEventListener('click', (e) => {
Expand Down Expand Up @@ -100,10 +104,12 @@
});
}

if (Object.keys(params).length && Object.prototype.hasOwnProperty.call(params, 'search')) {
if (
Object.keys(params).length
&& Object.prototype.hasOwnProperty.call(params, 'search')
) {
toggleAccordionFromSearch();
}
},
};
// eslint-disable-next-line no-undef
}(Drupal, once));
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
(function (Drupal, once) {
Drupal.behaviors.accordionToggleAllBehavior = {
attach(context) {
function addToCalAria() {
const addToCal = once('add-to-cal-event', '.addtocal', context);
const body = document.querySelector('body');
const addToCal = once('addtocal', '.addtocal', context);

// For each .addtocal button, when clicked, change aria-expanded to true.
addToCal.forEach((button) => {
button.addEventListener('click', () => {
if (button.getAttribute('aria-expanded') === 'true') {
button.setAttribute('aria-expanded', 'false');
} else {
button.setAttribute('aria-expanded', 'true');
}
});
});
// Do nothing if no add to cal button found.
if (addToCal.length === 0) {
return;
}

// When the body except button is clicked, change aria-expanded to false.
body.addEventListener('click', (e) => {
addToCal.forEach((button) => {
if (e.target !== button) {
button.setAttribute('aria-expanded', 'false');
}
});
// For each .addtocal button, when clicked, change aria-expanded to true.
addToCal.forEach((button) => {
button.addEventListener('click', () => {
if (button.getAttribute('aria-expanded') === 'true') {
button.setAttribute('aria-expanded', 'false');
} else {
button.setAttribute('aria-expanded', 'true');
}
});
}
});

addToCalAria();
// When the body except button is clicked, change aria-expanded to false.
const body = document.querySelector('body');
body.addEventListener('click', (e) => {
addToCal.forEach((button) => {
if (e.target !== button) {
button.setAttribute('aria-expanded', 'false');
}
});
});
},
};
// eslint-disable-next-line no-undef
}(Drupal, once));
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,40 @@
Drupal.behaviors.pageScrollBehavior = {
attach(context) {
// Selectors for elements
const animationEnhancements = once('animation-enhancements', '.hb-has-animation-enhancements', context);
const experimentalFeaturesClass = once('experimental-features', '.hb-experimental', context);
const experimentalClassesToAnimate = once('experimental-classes', '.hs-font-lead', context);
const animationEnhancements = context.querySelector(
'.hb-has-animation-enhancements',
);
const experimentalFeaturesClass = context.querySelector('.hb-experimental');
const experimentalClassesToAnimate = ['.hs-font-lead'];

// If the animation enhancements are not enabled, do nothing.
if (!animationEnhancements) {
return;
}

// The classes of items we want to add animations to
const classesToAnimate = [
once('gradient-hero', '.hb-gradient-hero', context),
once('gradient-hero-text', '.hb-gradient-hero__text', context),
once('gradient-hero-image-wrapper', '.hb-gradient-hero__image-wrapper', context),
once('gradient-hero-image', '.field-hs-gradient-hero-image', context),
once('hero-overlay', '.hb-hero-overlay', context),
once('hero-overlay-text', '.hb-hero-overlay__text', context),
once('hero-overlay-image-wrapper', '.hb-hero-overlay__image-wrapper', context),
once('hero-image', '.field-hs-hero-image', context),
once('font-splash', '.hs-font-splash', context),
'.hb-gradient-hero',
'.hb-gradient-hero__text',
'.hb-gradient-hero__image-wrapper',
'.field-hs-gradient-hero-image',
'.hb-hero-overlay',
'.hb-hero-overlay__text',
'.hb-hero-overlay__image-wrapper',
'.field-hs-hero-image',
'.hs-font-splash',
];

if (experimentalFeaturesClass) {
classesToAnimate.push(experimentalClassesToAnimate);
}

const elementsToAnimate = once(
'page-scroll-animate',
classesToAnimate.join(','),
context,
);

// check if top of element is in viewport
const isElementVisible = new IntersectionObserver((items) => {
items.forEach((item) => {
Expand All @@ -32,16 +45,9 @@
});
});

if (animationEnhancements) {
classesToAnimate.forEach((items) => {
if (items) {
items.forEach((item) => {
isElementVisible.observe(item);
});
}
});
}
elementsToAnimate.forEach((element) => {
isElementVisible.observe(element);
});
},
};
// eslint-disable-next-line no-undef
}(Drupal, once));
Original file line number Diff line number Diff line change
Expand Up @@ -96,5 +96,4 @@
}
},
};
// eslint-disable-next-line no-undef
}(Drupal, window, once));
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,39 @@ import resetHeightGrid from './reset-height-grid';
(function (Drupal, window, once) {
Drupal.behaviors.hbStretchVerticalLinkedCards = {
attach(context) {
const applyStretchClass = () => {
const hasStretchClass = once('has-stretch-vertical-linked-cards', '.hb-stretch-vertical-linked-cards', context)[0];
const verticalLinkedCardTitles = once('vertical-linked-card-title', '.hb-vertical-linked-card__title', context);
const cardCollections = once('card-collections', '.ptype-hs-collection, .ptype-hs-priv-collection', context);

const applyStretchClass = (container) => {
// Matches the $su-breakpoint-sm variable. Screen sizes smaller than this variable
// stack all grid columns making it unnecessary to set a height on cards.
// See: https://github.com/SU-SWS/decanter/blob/master/core/src/scss/utilities/variables/core/_breakpoints.scss
const smallScreenBreakpoint = 576;

Array.prototype.forEach.call(cardCollections, (collection) => {
const verticalLinkedCards = [...collection.querySelectorAll('.hb-vertical-linked-card')];
const cardCollections = container.querySelectorAll(
'.ptype-hs-collection, .ptype-hs-priv-collection',
);

cardCollections.forEach((collection) => {
const verticalLinkedCards = [
...collection.querySelectorAll('.hb-vertical-linked-card'),
];
// Reset any min-heights that were previously set.
// We need to do this so cards will not have a height set when resizing to small
// screen sizes.
if (hasStretchClass && verticalLinkedCards.length > 0) {
if (verticalLinkedCards.length > 0) {
resetHeightGrid(verticalLinkedCards);
}

const verticalLinkedCardTitles = [
...collection.querySelectorAll('.hb-vertical-linked-card__title'),
];
// Reset any min-heights that were previously set.
// Because not all Vertical Linked Cards will have a title, this needs a separate
// if statement.
if (hasStretchClass && verticalLinkedCardTitles.length > 0) {
if (verticalLinkedCardTitles.length > 0) {
resetHeightGrid(verticalLinkedCardTitles);
}

// Only set heights for certain screen sizes
if (hasStretchClass && window.innerWidth >= smallScreenBreakpoint) {
if (window.innerWidth >= smallScreenBreakpoint) {
if (verticalLinkedCardTitles.length > 0) {
// Make the vertical linked card titles AND cards the same max height.
// The title height has to be set first because it influences the final
Expand All @@ -47,20 +52,28 @@ import resetHeightGrid from './reset-height-grid';
}
});
};
const stretchContainers = once(
'stretch-vertical-linked-cards',
'.hb-stretch-vertical-linked-cards',
context,
);

// Wait a 1 sec for page to load in before setting heights
setTimeout(() => {
applyStretchClass();
stretchContainers.forEach((container) => {
applyStretchClass(container);
});
}, 1000);

// Recalculate when the window is resized
window.addEventListener('resize', () => {
// Wait a half of a second before setting the heights
setTimeout(() => {
applyStretchClass();
stretchContainers.forEach((container) => {
applyStretchClass(container);
});
}, 500);
});
},
};
// eslint-disable-next-line no-undef
}(Drupal, window, once));
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
Drupal.behaviors.linkedCardsBehavior = {
attach(context) {
// find all hb-vertical-card elements
const cards = once('linked-cards-events', '.hb-vertical-card, .hb-card--date-stacked, .hb-vertical-linked-card', context);
const cards = once(
'linked-cards-events',
'.hb-vertical-card, .hb-card--date-stacked, .hb-vertical-linked-card',
context,
);

// Loop through each card
cards.forEach((card) => {
Expand Down Expand Up @@ -44,5 +48,4 @@
});
},
};
// eslint-disable-next-line no-undef
}(Drupal, once));
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
(function (Drupal, once) {
Drupal.behaviors.addMainContentFallback = {
attach(context) {
// Return if main content target is found, nothing to do.
if (once('main-content-target', '#main-content', context)[0]) {
const [mainElement] = once('main-content-fallback', 'main', context);

// No main element or behavior already executed.
if (!mainElement) {
return;
}

const mainElement = once('main-element', 'main', context)[0];
if (mainElement) {
mainElement.insertAdjacentHTML(
'afterbegin',
'<div id="main-content" class="visually-hidden" tabindex="-1">Main content start</div>',
);
// Return if main content target is found, nothing to do.
if (document.querySelector('#main-content')) {
return;
}

mainElement.insertAdjacentHTML(
'afterbegin',
'<div id="main-content" class="visually-hidden" tabindex="-1">Main content start</div>',
);
},
};
// eslint-disable-next-line no-undef
}(Drupal, once));
Loading

0 comments on commit d232b31

Please sign in to comment.