From 9f53a29bce85fd6496cb7e48894407c68809ec5f Mon Sep 17 00:00:00 2001 From: Omar Ibrahim Date: Mon, 29 Jun 2026 14:55:51 -0500 Subject: [PATCH] Bugfix: use a consistent coordinate space for CustomSlider drag --- .../ractives/subcomponent/custom-slider.coffee | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/beak/widgets/ractives/subcomponent/custom-slider.coffee b/app/assets/javascripts/beak/widgets/ractives/subcomponent/custom-slider.coffee index 6c68f9ede..14f9b9b7b 100644 --- a/app/assets/javascripts/beak/widgets/ractives/subcomponent/custom-slider.coffee +++ b/app/assets/javascripts/beak/widgets/ractives/subcomponent/custom-slider.coffee @@ -81,26 +81,25 @@ RactiveCustomSlider = Ractive.extend({ return - getClientPosition: (event) -> + getClientPosition: (event) -> # document-space coordinates switch @get('orientation') - when 'horizontal' then event.clientX or event.touches?[0]?.clientX - when 'vertical' then event.clientY or event.touches?[0]?.clientY - else event.clientX or event.touches?[0]?.clientX + when 'vertical' then (event.clientY or event.touches?[0]?.clientY) + window.scrollY + else (event.clientX or event.touches?[0]?.clientX) + window.scrollX - getSliderLength: (node) -> + getSliderLength: (node) -> # document-space coordinates rect = node.getBoundingClientRect() switch @get('orientation') when 'horizontal' then rect.width when 'vertical' then rect.height else throw new Error("Invalid orientation: #{@get('orientation')}") - getSliderLengthFromNode: (node) -> + getSliderLengthFromNode: (node) -> # object-space coordinates # Might look like a typo, but since rotation happens using # CSS, the bounding box changes but the node's offsetWidth/Height # do not. -Omar I. Aug 14, 2025 return node.offsetWidth - getSliderStart: (node) -> + getSliderStart: (node) -> # document-space coordinates rect = node.getBoundingClientRect() switch @get('orientation') when 'horizontal' then rect.left + window.scrollX