https://www.padeswoodccs.co.uk/modules/custom/hm_components/js/breakpoints.js?tmj7l0

1/**
2 * @file
3 * BreakpointObserver
4 * This file is responsible for observing the current breakpoint and emitting events when it changes.
5 *
6 * @example
7 * // Listen for breakpoint changes
8 * window.addEventListener('breakpoint', breakpoint => console.log(breakpoint))
9 *
10 * // Listen for a specific breakpoint change
11 * window.addEventListener('breakpoint:sm', active => console.log(active))
12 *
13 * // Listen for a specific breakpoint enter
14 * window.addEventListener('breakpoint:sm:enter', () => console.log('sm entered'))
15 *
16 * // Listen for a specific breakpoint leave
17 * window.addEventListener('breakpoint:sm:leave', () => console.log('sm left'))
18 *
19 * // Access the currently active breakpoints
20 * Drupal.umovity.breakpoints
21 */
22
23((Drupal) => {
24  /**
25   * Screen breakpoint definitions
26   * @type {Readonly<{DEFAULT: 0, sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1440}>}
27   */
28  const screens = {
29    'DEFAULT': 0,
30    'sm': 640,
31    'md': 768,
32    'lg': 1024,
33    'xl': 1280,
34    '2xl': 1440,
35  }
36
37  /**
38   * Emits breakpoint change events
39   * @param {string} screen - The screen breakpoint name (DEFAULT|sm|md|lg|xl|2xl)
40   * @param {boolean} active - Whether the breakpoint is active
41   */
42  function emit(screen, active) {
43    window.dispatchEvent(new CustomEvent('breakpoint', { detail: { screen } }))
44    window.dispatchEvent(new CustomEvent(`breakpoint:${screen}`, { detail: active }))
45    active
46      ? window.dispatchEvent(new CustomEvent(`breakpoint:${screen}:enter`))
47      : window.dispatchEvent(new CustomEvent(`breakpoint:${screen}:leave`))
48  }
49
50  /**
51   * Initialize or extend Drupal.umovity object
52   * @global
53   * @namespace Drupal.umovity
54   * @property {Object<string, number>} screens - Screen breakpoint definitions
55   * @property {Object<string, boolean>} breakpoints - Current breakpoint states
56   */
57  Drupal.hmc = {
58    ...Drupal.hmc,
59    screens,
60    breakpoints: {},
61  }
62
63  /**
64   * Drupal behavior for breakpoint observation
65   * @type {Drupal.Behavior}
66   */
67  Drupal.behaviors.hmcBreakpointObserver = {
68    attach() {
69      once('breakpoint-observer', 'body').forEach((_) => {
70        Object.keys(screens).forEach((screen) => {
71          const mql = window.matchMedia(`(min-width: ${screens[screen]}px)`)
72          Drupal.hmc.breakpoints[screen] = mql.matches
73          mql.addEventListener('change', (e) => {
74            if (Drupal.hmc.breakpoints[screen] !== e.matches) {
75              emit(screen, e.matches)
76              Drupal.hmc.breakpoints[screen] = e.matches
77            }
78          })
79        })
80      })
81    },
82  }
83})(Drupal)