How to create a Switch statement with dynamic cases using Javascript

Question

I need to develop a switch statement to run a method when a mouse event has dragged a certain fraction of a page (similar to breakpoints on a page). For example, when a user clicks on an item and drags it 1/12 the width of their screen, I need to run a function once , but if they keep dragging to 2/12 of the screen width, then I need to run the function again.

I created the following switch statement...it works, but I have to copy paste the case statement 12 times to account for a case where the user would drag all the way from left to right. I chose 12, because my page layout uses css grid with 12 columns as the layout:

// gridState is used to keep track of which state we are in since we only want 
// to trigger the function `resizeDragColumns()` a single time, when we transition to a new breakpoint

let gridState = 0

switch(true){
    // 0.083 = width ratio of a single column in a 12 column grid (e.g. 1/12 = 0.083)
    case Math.abs(percentDragged) < (0.083 * 1):
          if (gridState != 1) {
                this.resizeDragColumns(...)
                gridState = 1;
          }
          break;
    case Math.abs(percentDragged) < (0.083 * 2):
          if (gridState != 2) {
                this.resizeDragColumns(...)
                gridState = 2;
          }
          break;
          ....
          // there are 10 more switch statements just like this
          // notice how the only thing that changes is the gridState 
          // variable and the comparator in the case statement (e.g. 0.083 * 1, 0.083 * 2 ..)
}

This switch statement is contained within an Event observable that is tracking the mouse drag distance and converting it to the percent distance the user has dragged the cursor across the page.

So for example, as the user is dragging, percentDragged is calculated like so:

// point.x = current X position of cursor
// mouseDownCursorPosition = X position of the cursor when the mousedown event was fired (e.g. starting x position)
// rowRef = the container the mouse is dragging within

const percentDragged = (point.x - mouseDownCursorPosition) / rowRef.getBoundingClientRect().width;

---

IN SUMMARY

I want to dynamically create a switch statement that will trigger a function A SINGLE TIME when the user drags their cursor into certain "breakpoints" on the page.

Is there a simpler way to accomplish this task? This would also be helpful to have since the user can change the grid size to anything they want (8 columns instead of 12), so the switch statement should only have 8 cases instead of 12. Thanks!

Answer 1

Don't use switch in this case, it's quite verbose and error-prone. Instead, use math to identify the (0.083 * NUM) factor:

const draggedColumns = Math.ceil(Math.abs(percentDragged) / 0.083);
if (gridState !== draggedColumns) {
  this.resizeDragColumns(...)
  gridState = draggedColumns;
}

Answer 2

Kind of an opinion-based one, but here's how I'd do it. I don't think a switch is the right way, because is meant to be used with static and fixed number of cases.

let colDragged = Math.ceil(Math.abs(percentDragged) / 0.083);
if (gridState != colDragged ) {
    this.resizeDragColumns(...)
    gridState = colDragged ;
}