-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(shs-5963: start adding drupal behaviours to js files
- Loading branch information
Mari Nez
committed
Nov 22, 2024
1 parent
8d192e5
commit 2720e5f
Showing
2 changed files
with
127 additions
and
113 deletions.
There are no files selected for viewing
182 changes: 95 additions & 87 deletions
182
docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,91 +1,99 @@ | ||
| // This work below applies uniform height to both the Hero Layered Slider (formerly Carousel), | ||
| // the Hero Gradient Slider paragraph component slides. | ||
| // and the Spotlight Slider. | ||
| const slides = document.querySelectorAll('.paragraph--type--hs-carousel, .paragraph--type--hs-gradient-hero-slider, .paragraph--type--hs-sptlght-slder'); | ||
| // Find slick arrow from hsCarousel. | ||
| const slidesTextboxClasses = '.hb-hero-overlay__text, .hb-gradient-hero__text, .hb-spotlight__text'; | ||
| let timeOutFunctionId; // a numeric ID which is used by clearTimeOut to reset the timer | ||
|
|
||
| // @boolean to determine if the textBox is a spotlight textBox | ||
| const isSpotlightTextBox = (textBox) => textBox.classList.contains('hb-spotlight__text'); | ||
| const setMinHeight = (textBox, maxBoxHeight) => textBox.setAttribute('style', `min-height: ${maxBoxHeight}px`); | ||
|
|
||
| // Set the height of all text boxes within a slider to that | ||
| // of the tallest text box | ||
| const restrictHeight = () => { | ||
| let boxHeightArray; | ||
| let maxBoxHeight; | ||
|
|
||
| slides.forEach((slide) => { | ||
| // array must have a default entry of 0 for the banner components | ||
| // and must be declare within the loop to set a baseline for each indiviual slider on a page | ||
| boxHeightArray = [0]; | ||
|
|
||
| // Find all the textBoxes inside each slider | ||
| const textBoxes = slide.querySelectorAll(slidesTextboxClasses); | ||
|
|
||
| // Loop through all the textBoxes and gather their heights into an array | ||
| textBoxes.forEach((textBox) => { | ||
| // Clear any inline styles that may have been set previously | ||
| // This is necessary to determine the default height of text boxes | ||
| textBox.removeAttribute('style'); | ||
|
|
||
| let boxHeight = textBox.offsetHeight; | ||
|
|
||
| // Parse boxHeight to be a number that can be used to set the min-height value | ||
| boxHeight = parseInt(boxHeight, 10); | ||
|
|
||
| // Create an array containing all the heights of textBoxes | ||
| boxHeightArray.push(boxHeight); | ||
| }); | ||
|
|
||
| // Find largest number in array of textBoxes | ||
| maxBoxHeight = Math.max(...boxHeightArray); | ||
|
|
||
| // Give all textBoxes the same height | ||
| textBoxes.forEach((textBox) => setMinHeight(textBox, maxBoxHeight)); | ||
|
|
||
| // Give sickArrowWrapper a top that changes according to the height when resizing the window. | ||
| const slickArrowWrapper = slide.querySelector('.slick__arrow'); | ||
| if (slide.classList.contains('paragraph--type--hs-carousel') && slickArrowWrapper) { | ||
| setMinHeight(slickArrowWrapper, maxBoxHeight); | ||
| } | ||
|
|
||
| // If the textBoxes are spotlight textBoxes, then give them the same height on all screen sizes | ||
| textBoxes.forEach((textBox) => { | ||
| const classicSpotlight = slide.querySelector('.hb-spotlight--classic'); | ||
| if (isSpotlightTextBox(textBox) && classicSpotlight) { | ||
| setMinHeight(textBox, maxBoxHeight); | ||
| (function (Drupal) { | ||
| Drupal.behaviors.restrictHeightBehavior = { | ||
| attach(context) { | ||
| const slides = context.querySelectorAll('.paragraph--type--hs-carousel, .paragraph--type--hs-gradient-hero-slider, .paragraph--type--hs-sptlght-slder'); | ||
| // Find slick arrow from hsCarousel. | ||
| const slidesTextboxClasses = '.hb-hero-overlay__text, .hb-gradient-hero__text, .hb-spotlight__text'; | ||
| let timeOutFunctionId; // a numeric ID which is used by clearTimeOut to reset the timer | ||
|
|
||
| // @boolean to determine if the textBox is a spotlight textBox | ||
| const isSpotlightTextBox = (textBox) => textBox.classList.contains('hb-spotlight__text'); | ||
| const setMinHeight = (textBox, maxBoxHeight) => textBox.setAttribute('style', `min-height: ${maxBoxHeight}px`); | ||
|
|
||
| // Set the height of all text boxes within a slider to that | ||
| // of the tallest text box | ||
| const restrictHeight = () => { | ||
| let boxHeightArray; | ||
| let maxBoxHeight; | ||
|
|
||
| slides.forEach((slide) => { | ||
| // array must have a default entry of 0 for the banner components and must be | ||
| // declare within the loop to set a baseline for each indiviual slider on a page | ||
| boxHeightArray = [0]; | ||
|
|
||
| // Find all the textBoxes inside each slider | ||
| const textBoxes = slide.querySelectorAll(slidesTextboxClasses); | ||
|
|
||
| // Loop through all the textBoxes and gather their heights into an array | ||
| textBoxes.forEach((textBox) => { | ||
| // Clear any inline styles that may have been set previously | ||
| // This is necessary to determine the default height of text boxes | ||
| textBox.removeAttribute('style'); | ||
|
|
||
| let boxHeight = textBox.offsetHeight; | ||
|
|
||
| // Parse boxHeight to be a number that can be used to set the min-height value | ||
| boxHeight = parseInt(boxHeight, 10); | ||
|
|
||
| // Create an array containing all the heights of textBoxes | ||
| boxHeightArray.push(boxHeight); | ||
| }); | ||
|
|
||
| // Find largest number in array of textBoxes | ||
| maxBoxHeight = Math.max(...boxHeightArray); | ||
|
|
||
| // Give all textBoxes the same height | ||
| textBoxes.forEach((textBox) => setMinHeight(textBox, maxBoxHeight)); | ||
|
|
||
| // Give sickArrowWrapper a top that changes according | ||
| // to the height when resizing the window. | ||
| const slickArrowWrapper = slide.querySelector('.slick__arrow'); | ||
| if (slide.classList.contains('paragraph--type--hs-carousel') && slickArrowWrapper) { | ||
| setMinHeight(slickArrowWrapper, maxBoxHeight); | ||
| } | ||
|
|
||
| // If the textBoxes are spotlight textBoxes, | ||
| // then give them the same height on all screen sizes | ||
| textBoxes.forEach((textBox) => { | ||
| const classicSpotlight = slide.querySelector('.hb-spotlight--classic'); | ||
| if (isSpotlightTextBox(textBox) && classicSpotlight) { | ||
| setMinHeight(textBox, maxBoxHeight); | ||
| } | ||
| }); | ||
|
|
||
| // Find all spotlights texBoxes wrappers to give them the same height on all screen sizes | ||
| const expandedSpotlights = slide.querySelectorAll('.hb-spotlight--expanded'); | ||
| if (expandedSpotlights) { | ||
| expandedSpotlights.forEach((expandedSpotlight) => { | ||
| const expandedSpotlightWrapper = expandedSpotlight.querySelector('.hb-spotlight__wrapper'); | ||
| setMinHeight(expandedSpotlightWrapper, maxBoxHeight); | ||
| }); | ||
| } | ||
|
|
||
| // Find images inside each slider. | ||
| const imageWrapper = slide.querySelector('.hb-spotlight__image-wrapper'); | ||
| if (slide.classList.contains('paragraph--type--hs-sptlght-slder') && !imageWrapper) { | ||
| slide.classList.add('paragraph--type--hs-sptlght-slder--no-image'); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| const clearTimeoutOnResize = () => { | ||
| // Watch for when the browser window resizes, then run the restrictHeight | ||
| // function to reset the height of the text boxes | ||
| window.addEventListener('resize', () => { | ||
| clearTimeout(timeOutFunctionId); | ||
| timeOutFunctionId = setTimeout(restrictHeight, 100); | ||
| }); | ||
| }; | ||
|
|
||
| if (slides.length > 0) { | ||
| restrictHeight(); | ||
| clearTimeoutOnResize(); | ||
| } | ||
| }); | ||
|
|
||
| // Find all spotlights texBoxes wrappers to give them the same height on all screen sizes | ||
| const expandedSpotlights = slide.querySelectorAll('.hb-spotlight--expanded'); | ||
| if (expandedSpotlights) { | ||
| expandedSpotlights.forEach((expandedSpotlight) => { | ||
| const expandedSpotlightWrapper = expandedSpotlight.querySelector('.hb-spotlight__wrapper'); | ||
| setMinHeight(expandedSpotlightWrapper, maxBoxHeight); | ||
| }); | ||
| } | ||
|
|
||
| // Find images inside each slider. | ||
| const imageWrapper = slide.querySelector('.hb-spotlight__image-wrapper'); | ||
| if (slide.classList.contains('paragraph--type--hs-sptlght-slder') && !imageWrapper) { | ||
| slide.classList.add('paragraph--type--hs-sptlght-slder--no-image'); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| const clearTimeoutOnResize = () => { | ||
| // Watch for when the browser window resizes, then run the restrictHeight | ||
| // function to reset the height of the text boxes | ||
| window.addEventListener('resize', () => { | ||
| clearTimeout(timeOutFunctionId); | ||
| timeOutFunctionId = setTimeout(restrictHeight, 100); | ||
| }); | ||
| }; | ||
|
|
||
| if (slides.length > 0) { | ||
| restrictHeight(); | ||
| clearTimeoutOnResize(); | ||
| } | ||
| }, | ||
| }; | ||
| }(Drupal)); |
58 changes: 32 additions & 26 deletions
58
docroot/themes/humsci/humsci_basic/src/js/shared/tables/wrap.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,37 @@ | ||
| /** | ||
| * Wrap every table in a class that will allow us to create more responsive styling | ||
| */ | ||
| (function (Drupal) { | ||
| Drupal.behaviors.wrapTableElements = { | ||
| attach(context) { | ||
| /** | ||
| * Wrap every table in a class that will allow us to create more responsive styling | ||
| */ | ||
|
|
||
| /** | ||
| * Wrap each element in a new parent | ||
| * @param elements | ||
| * @param wrapper | ||
| */ | ||
| function wrapElement(element) { | ||
| // Create a new div with a special class name | ||
| const wrapper = document.createElement('div'); | ||
| wrapper.className = 'hb-table-wrap'; | ||
| /** | ||
| * Wrap each element in a new parent | ||
| * @param elements | ||
| * @param wrapper | ||
| */ | ||
| function wrapElement(element) { | ||
| // Create a new div with a special class name | ||
| const wrapper = context.createElement('div'); | ||
| wrapper.className = 'hb-table-wrap'; | ||
|
|
||
| element.parentNode.insertBefore(wrapper, element); | ||
| wrapper.appendChild(element); | ||
| } | ||
| element.parentNode.insertBefore(wrapper, element); | ||
| wrapper.appendChild(element); | ||
| } | ||
|
|
||
| // Select every table element | ||
| const elements = document.querySelectorAll('table'); | ||
| const uiPatternTable = document.querySelectorAll('.hb-table-pattern'); | ||
| // Select every table element | ||
| const elements = context.querySelectorAll('table'); | ||
| const uiPatternTable = context.querySelectorAll('.hb-table-pattern'); | ||
|
|
||
| // Wrap every table element | ||
| for (let i = 0; i < elements.length; i++) { | ||
| wrapElement(elements[i]); | ||
| } | ||
| // Wrap every table element | ||
| for (let i = 0; i < elements.length; i++) { | ||
| wrapElement(elements[i]); | ||
| } | ||
|
|
||
| // Wrap every table UI pattern | ||
| for (let i = 0; i < uiPatternTable.length; i++) { | ||
| wrapElement(uiPatternTable[i]); | ||
| } | ||
| // Wrap every table UI pattern | ||
| for (let i = 0; i < uiPatternTable.length; i++) { | ||
| wrapElement(uiPatternTable[i]); | ||
| } | ||
| }, | ||
| }; | ||
| }(Drupal)); |