Webflow JS breakpoints

webflow-breakpoints.js

// Webflow breakpoints
const breakpoints = {
  large1920: '(min-width: 1920px)',
  large1440: '(min-width: 1440px) and (max-width: 1919px)',
  large1280: '(min-width: 1280px) and (max-width: 1439px)',
  desktop: '(min-width: 992px) and (max-width: 1279px)',
  tablet: '(min-width: 768px) and (max-width: 991px)',
  mobileLandscape: '(min-width: 480px) and (max-width: 767px)',
  mobilePortrait: '(max-width: 479px)'
};

var currentBreakpoint;

// Function to run on breakpoint change
function handleBreakpointChange(e) {
  for (let device in breakpoints) {
    if (e.media === breakpoints[device]) {
      if (e.matches) {
        console.log(`Current device: ${device}`);
        currentBreakpoint = device;
        setBreakpoint(device); 
      }
    }
  }
}

function setBreakpoint(device) {
  
  switch(device) {
    case "large1920":
      break;
    case "large1440":
      break;
    case "large1280": 
      break;
    case "desktop": 
      break;
    case "tablet": 
      break;
    case "mobileLandscape": 
      break;
    case "mobilePortrait":
      break;
  }
}

$(function() {
  
  // Create MediaQueryList and attach listeners for each breakpoint
  for (let device in breakpoints) {
    let mediaQueryList = window.matchMedia(breakpoints[device]);
    mediaQueryList.addListener(handleBreakpointChange);

    // Call the function initially
    handleBreakpointChange(mediaQueryList);
  }
  
});