Skip to content

Commit

Permalink
fix: changing column width in enhancedBootstrap feature did not work …
Browse files Browse the repository at this point in the history
…will with a touchpad. Mousemove event will fire multiple times (especially on MacOS with accelerated/decelerated scrolling) cauing the columns to erratically increase/decrease in size.

* Replace non-standard mousewheel event with the standard wheel event
* Use deltaY to detect vertical scroll instead of the deprecated wheelDelta value
* Accumulate deltaY values and change column size every 120 pixels
  • Loading branch information
lucasnetau committed Oct 4, 2023
1 parent 8caa6a2 commit eb4fd68
Showing 1 changed file with 20 additions and 9 deletions.
29 changes: 20 additions & 9 deletions src/js/form-builder.js
Original file line number Diff line number Diff line change
Expand Up @@ -1921,10 +1921,11 @@ function FormBuilder(opts, element, $) {
}
})

var gridMode = false
var gridModeTargetField
let gridMode = false
let gridModeTargetField
let gridModeStartX
let gridModeStartY
let wheelDelta = 0
$stage.on('click touchstart', '.grid-button', e => {
e.preventDefault()

Expand All @@ -1933,23 +1934,33 @@ function FormBuilder(opts, element, $) {
gridModeStartX = e.pageX
gridModeStartY = e.pageY

//Reset wheelDelta
wheelDelta = 0

toggleGridModeActive()
})

//Use mousewheel to work resizing
$stage.on('mousewheel', function (e) {
$stage.on('wheel', function (e) {
if (e.originalEvent.deltaY === 0) {
return
}
if (gridMode) {
e.preventDefault()

wheelDelta += e.originalEvent.deltaY
const deltaPerShift = 120
if ((wheelDelta > 0 && wheelDelta < deltaPerShift) || (wheelDelta < 0 && wheelDelta > -deltaPerShift)) {
return
}

const parentCont = gridModeTargetField.closest('div')
const currentColValue = h.getBootstrapColumnValue(parentCont.attr('class'))

let nextColSize
if (e.originalEvent.wheelDelta / 120 > 0) {
nextColSize = currentColValue + 1
} else {
nextColSize = currentColValue - 1
}
const change = Math.round(wheelDelta / deltaPerShift)
wheelDelta = wheelDelta % deltaPerShift

const nextColSize = currentColValue + change

if (nextColSize > 12) {
h.showToast('<b class="formbuilder-required">Column Size cannot exceed 12</b>')
Expand Down

0 comments on commit eb4fd68

Please sign in to comment.