From 6f0fcb64f5b3d3eee2c49204819d382a4e684f3a Mon Sep 17 00:00:00 2001 From: Jeff Nusz Date: Wed, 5 Oct 2016 12:15:50 -0700 Subject: [PATCH] fixed issue with color controllers on scrolling pages. Fixes #37 --- src/dat/controllers/ColorController.js | 12 +++++------- src/dat/controllers/NumberControllerSlider.js | 5 ++--- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/dat/controllers/ColorController.js b/src/dat/controllers/ColorController.js index 1f0b686..870c34f 100644 --- a/src/dat/controllers/ColorController.js +++ b/src/dat/controllers/ColorController.js @@ -194,10 +194,9 @@ class ColorController extends Controller { function setSV(e) { e.preventDefault(); - const w = dom.getWidth(_this.__saturation_field); - const o = dom.getOffset(_this.__saturation_field); - let s = (e.clientX - o.left + document.body.scrollLeft) / w; - let v = 1 - (e.clientY - o.top + document.body.scrollTop) / w; + const fieldRect = _this.__saturation_field.getBoundingClientRect(); + let s = (e.clientX - fieldRect.left) / (fieldRect.right - fieldRect.left); + let v = 1 - (e.clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top); if (v > 1) { v = 1; @@ -223,9 +222,8 @@ class ColorController extends Controller { function setH(e) { e.preventDefault(); - const s = dom.getHeight(_this.__hue_field); - const o = dom.getOffset(_this.__hue_field); - let h = 1 - (e.clientY - o.top + document.body.scrollTop) / s; + const fieldRect = _this.__hue_field.getBoundingClientRect(); + let h = 1 - (e.clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top); if (h > 1) { h = 1; diff --git a/src/dat/controllers/NumberControllerSlider.js b/src/dat/controllers/NumberControllerSlider.js index 244b7c3..aba02a3 100644 --- a/src/dat/controllers/NumberControllerSlider.js +++ b/src/dat/controllers/NumberControllerSlider.js @@ -62,11 +62,10 @@ class NumberControllerSlider extends NumberController { function onMouseDrag(e) { e.preventDefault(); - const offset = dom.getOffset(_this.__background); - const width = dom.getWidth(_this.__background); + const bgRect = _this.__background.getBoundingClientRect(); _this.setValue( - map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max) + map(e.clientX, bgRect.left, bgRect.right, _this.__min, _this.__max) ); return false;