Pinned Loading

1. Same height of elements Same height of elements

   1

   export const sameHeight = (group: Element, elements: string | NodeListOf<HTMLElement>, byRow = false) => {

   2

     const targets = elements instanceof NodeList ? Array.from(elements) : Array.from(group.querySelectorAll<HTMLElement>(elements))

   3

   4

     const getHighestElement = (elements: HTMLElement[] = targets): number => {

   5

       const heights = elements.map((box) => box.clientHeight)

2. sizeChange.ts sizeChange.ts

   1

   const handle = () => {

   2

     console.log("Yo my size changed, do something with me")

   3

   }

   4

   5

   const resizeObserver = new ResizeObserver(handle)

3. clickOutsideHandle.ts clickOutsideHandle.ts

   1

   const myElementSelector = ".my-element"

   2

   3

   document.addEventListener("click", ({target}) => {

   4

     if (target instanceof Element && !target?.closest(myElementSelector)) {

   5

       console.log("click outside")

4. breakpointSwitch.ts breakpointSwitch.ts

   1

   const mobileQuery = window.matchMedia("(max-width: 74.999em)") // Change to your needs

   2

   3

   const handleMobileChange = (mediaQueryList: MediaQueryListEvent | MediaQueryList) => {

   4

     if (mediaQueryList.matches) {

   5

         // Its Mobile

5. navigation handle navigation handle

   1

   const mainNav = document.querySelector(".main-header__nav")

   2

   const overlay = document.querySelector(".c-overlay")

   3

   4

   const closers = document.querySelectorAll(".--js-main-nav-closer")

   5

   const openers = document.querySelectorAll(".--js-main-nav-opener")

6. Abstract tabs handle Abstract tabs handle

   1

   const tabsGroup = document.querySelectorAll(".js-tabs")

   2

   3

   4

   tabsGroup.forEach(tabGroup => {

   5

     const tabItems = tabGroup.querySelectorAll(".js-tabs__tab-item")