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)

build/dat.gui.js

@@ -2096,10 +2096,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	    function onMouseDrag(e) {
 	      e.preventDefault();
 	
-	      var offset = _dom2.default.getOffset(_this.__background);
+	      var bgRect = _this.__background.getBoundingClientRect();
-	      var width = _dom2.default.getWidth(_this.__background);
 	
-	      _this.setValue(map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max));
+	      _this.setValue(map(e.clientX, bgRect.left, bgRect.right, _this.__min, _this.__max));
 	
 	      return false;
 	    }
@@ -2442,10 +2441,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	    function setSV(e) {
 	      e.preventDefault();
 	
-	      var w = _dom2.default.getWidth(_this.__saturation_field);
+	      var fieldRect = _this.__saturation_field.getBoundingClientRect();
-	      var o = _dom2.default.getOffset(_this.__saturation_field);
+	      var s = (e.clientX - fieldRect.left) / (fieldRect.right - fieldRect.left);
-	      var s = (e.clientX - o.left + document.body.scrollLeft) / w;
+	      var v = 1 - (e.clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
-	      var v = 1 - (e.clientY - o.top + document.body.scrollTop) / w;
 	
 	      if (v > 1) {
 	        v = 1;
@@ -2470,9 +2468,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	    function setH(e) {
 	      e.preventDefault();
 	
-	      var s = _dom2.default.getHeight(_this.__hue_field);
+	      var fieldRect = _this.__hue_field.getBoundingClientRect();
-	      var o = _dom2.default.getOffset(_this.__hue_field);
+	      var h = 1 - (e.clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
-	      var h = 1 - (e.clientY - o.top + document.body.scrollTop) / s;
 	
 	      if (h > 1) {
 	        h = 1;
@@ -3443,11 +3440,21 @@ return /******/ (function(modules) { // webpackBootstrap
 	      // Have we defined both boundaries?
 	      if (_common2.default.isNumber(controller.__min) && _common2.default.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
+	        var oldName = controller.__li.firstElementChild.firstElementChild.innerHTML;
+	        var wasListening = controller.__gui.__listening.indexOf(controller) > -1;
+	
 	        controller.remove();
-	        return _add(gui, controller.object, controller.property, {
+	        var 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;

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 fieldRect = _this.__saturation_field.getBoundingClientRect();
-      const o = dom.getOffset(_this.__saturation_field);
+      let s = (e.clientX - fieldRect.left) / (fieldRect.right - fieldRect.left);
-      let s = (e.clientX - o.left + document.body.scrollLeft) / w;
+      let v = 1 - (e.clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
-      let v = 1 - (e.clientY - o.top + document.body.scrollTop) / w;
 
       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 fieldRect = _this.__hue_field.getBoundingClientRect();
-      const o = dom.getOffset(_this.__hue_field);
+      let h = 1 - (e.clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
-      let h = 1 - (e.clientY - o.top + document.body.scrollTop) / s;
 
       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 bgRect = _this.__background.getBoundingClientRect();
-      const width = dom.getWidth(_this.__background);
 
       _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,8 +854,13 @@ 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,
@@ -863,6 +868,11 @@ function augmentController(gui, li, controller) {
             before: controller.__li.nextElementSibling,
             factoryArgs: [controller.__min, controller.__max, controller.__step]
           });
+
+        newController.name(oldName);
+        if (wasListening) newController.listen();
+
+        return newController;
       }
 
       return returned;