Merge branch 'develop'

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Changelog
 
+### 0.6.1
+ * Fixed issue with color picker not working on a page that has scrolled. #37
+ * Fixed issue with sliders created with min()/max() not remembering their name or to listen. #107
+
 ### 0.6.0
  * Ported to ES6
  * Exported using Universal Module Definition (UMD) for max compatibility (Commonjs, Requirejs, AMD, global var)

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;

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;

src/dat/gui/GUI.js

@@ -854,15 +854,25 @@ function augmentController(gui, li, controller) {
       // Have we defined both boundaries?
       if (common.isNumber(controller.__min) && common.isNumber(controller.__max)) {
         // Well, then lets just replace this with a slider.
+
+        // lets remember if the old controller had a specific name or was listening
+        const oldName = controller.__li.firstElementChild.firstElementChild.innerHTML;
+        const wasListening = controller.__gui.__listening.indexOf(controller) > -1;
+
         controller.remove();
-        return add(
+        const newController = add(
           gui,
           controller.object,
           controller.property,
           {
             before: controller.__li.nextElementSibling,
             factoryArgs: [controller.__min, controller.__max, controller.__step]
           });
+
+        newController.name(oldName);
+        if (wasListening) newController.listen();
+
+        return newController;
       }
 
       return returned;