boolean fix

build/dat.gui.js

@@ -1113,7 +1113,7 @@ dat.controllers.BooleanController = (function (Controller, dom, common) {
     BooleanController.superclass.call(this, object, property);
 
     var _this = this;
-    var _prev = this.getValue();
+    this.__prev = this.getValue();
 
     this.__checkbox = document.createElement('input');
     this.__checkbox.setAttribute('type', 'checkbox');
@@ -1127,13 +1127,7 @@ dat.controllers.BooleanController = (function (Controller, dom, common) {
     this.updateDisplay();
 
     function onChange() {
-      var cur = !_this.getValue();
+      _this.setValue(!_this.__prev);
-      if (cur !== _prev) {
-        _this.setValue(cur);
-      } else {
-        _this.setValue(!cur);
-      }
-      _prev = cur;
     }
 
   };
@@ -1158,10 +1152,13 @@ dat.controllers.BooleanController = (function (Controller, dom, common) {
 
         updateDisplay: function() {
           
+          console.log(this.getValue());
+          
           if (this.getValue() === true) {
             this.__checkbox.setAttribute('checked', 'checked');
+            this.__checkbox.checked = true;    
           } else {
-            this.__checkbox.removeAttribute('checked');
+              this.__checkbox.checked = false;
           }
 
           return BooleanController.superclass.prototype.updateDisplay.call(this);
@@ -3561,11 +3558,14 @@ dat.utils.requestAnimationFrame = (function () {
 })(),
 dat.dom.CenteredDiv = (function (dom, common) {
 
+
   var CenteredDiv = function() {
 
     this.backgroundElement = document.createElement('div');
     common.extend(this.backgroundElement.style, {
-      backgroundColor: 'rgba(0,0,0,0.5)',
+      backgroundColor: 'rgba(0,0,0,0.8)',
+      top: 0,
+      left: 0,
       display: 'none',
       zIndex: '1000',
       opacity: 0,
@@ -3573,13 +3573,12 @@ dat.dom.CenteredDiv = (function (dom, common) {
     });
 
     dom.makeFullscreen(this.backgroundElement);
+    this.backgroundElement.style.position = 'fixed';
 
     this.domElement = document.createElement('div');
     common.extend(this.domElement.style, {
       position: 'fixed',
       display: 'none',
-      left: '50%',
-      top: '50%',
       zIndex: '1001',
       opacity: 0,
       WebkitTransition: '-webkit-transform 0.2s ease-out, opacity 0.2s linear'
@@ -3600,6 +3599,8 @@ dat.dom.CenteredDiv = (function (dom, common) {
   CenteredDiv.prototype.show = function() {
 
     var _this = this;
+    
+
 
     this.backgroundElement.style.display = 'block';
 
@@ -3645,9 +3646,13 @@ dat.dom.CenteredDiv = (function (dom, common) {
   };
 
   CenteredDiv.prototype.layout = function() {
-    this.domElement.style.marginLeft = -dom.getWidth(this.domElement) / 2 + 'px';
+    this.domElement.style.left = window.innerWidth/2 - dom.getWidth(this.domElement) / 2 + 'px';
-    this.domElement.style.marginTop = -dom.getHeight(this.domElement) / 2 + 'px';
+    this.domElement.style.top = window.innerHeight/2 - dom.getHeight(this.domElement) / 2 + 'px';
   };
+  
+  function lockScroll(e) {
+    console.log(e);
+  }
 
   return CenteredDiv;
 

src/dat/controllers/BooleanController.js

@@ -31,7 +31,7 @@ define([
     BooleanController.superclass.call(this, object, property);
 
     var _this = this;
-    var _prev = this.getValue();
+    this.__prev = this.getValue();
 
     this.__checkbox = document.createElement('input');
     this.__checkbox.setAttribute('type', 'checkbox');
@@ -45,13 +45,7 @@ define([
     this.updateDisplay();
 
     function onChange() {
-      var cur = !_this.getValue();
+      _this.setValue(!_this.__prev);
-      if (cur !== _prev) {
-        _this.setValue(cur);
-      } else {
-        _this.setValue(!cur);
-      }
-      _prev = cur;
     }
 
   };
@@ -76,10 +70,13 @@ define([
 
         updateDisplay: function() {
           
+          console.log(this.getValue());
+          
           if (this.getValue() === true) {
             this.__checkbox.setAttribute('checked', 'checked');
+            this.__checkbox.checked = true;    
           } else {
-            this.__checkbox.removeAttribute('checked');
+              this.__checkbox.checked = false;
           }
 
           return BooleanController.superclass.prototype.updateDisplay.call(this);

src/dat/dom/CenteredDiv.js

@@ -16,11 +16,14 @@ define([
   'dat/utils/common'
 ], function(dom, common) {
 
+
   var CenteredDiv = function() {
 
     this.backgroundElement = document.createElement('div');
     common.extend(this.backgroundElement.style, {
-      backgroundColor: 'rgba(0,0,0,0.5)',
+      backgroundColor: 'rgba(0,0,0,0.8)',
+      top: 0,
+      left: 0,
       display: 'none',
       zIndex: '1000',
       opacity: 0,
@@ -28,13 +31,12 @@ define([
     });
 
     dom.makeFullscreen(this.backgroundElement);
+    this.backgroundElement.style.position = 'fixed';
 
     this.domElement = document.createElement('div');
     common.extend(this.domElement.style, {
       position: 'fixed',
       display: 'none',
-      left: '50%',
-      top: '50%',
       zIndex: '1001',
       opacity: 0,
       WebkitTransition: '-webkit-transform 0.2s ease-out, opacity 0.2s linear'
@@ -55,6 +57,8 @@ define([
   CenteredDiv.prototype.show = function() {
 
     var _this = this;
+    
+
 
     this.backgroundElement.style.display = 'block';
 
@@ -100,9 +104,13 @@ define([
   };
 
   CenteredDiv.prototype.layout = function() {
-    this.domElement.style.marginLeft = -dom.getWidth(this.domElement) / 2 + 'px';
+    this.domElement.style.left = window.innerWidth/2 - dom.getWidth(this.domElement) / 2 + 'px';
-    this.domElement.style.marginTop = -dom.getHeight(this.domElement) / 2 + 'px';
+    this.domElement.style.top = window.innerHeight/2 - dom.getHeight(this.domElement) / 2 + 'px';
   };
+  
+  function lockScroll(e) {
+    console.log(e);
+  }
 
   return CenteredDiv;
 

tests/index.html

@@ -493,9 +493,12 @@
       var c1 = new BooleanController(object, 'booleanProperty');
       var c2 = new BooleanController(object, 'anotherBooleanProperty');
 
-      equal($(c1.__checkbox).attr('checked') === 'checked',
+      equal(c1.__checkbox.checked,
           object.booleanProperty);
-      equal($(c2.__checkbox).attr('checked') === 'checked',
+          
+console.log(c2.__checkbox.getAttribute('checked'));
+          
+      equal(c2.__checkbox.getAttribute('checked') === 'checked',
           object.anotherBooleanProperty);
 
     });
@@ -511,16 +514,19 @@
 
       dom.fakeEvent(c1.__checkbox, 'click');
       equal(false, object.booleanProperty, 'changes');
-      equal(false, $(c1.__checkbox).attr('checked') === 'checked', 'checkbox valid');
+      equal(false, c1.__checkbox.checked, 'checkbox valid');
 
       dom.fakeEvent(c1.__checkbox, 'click');
       equal(true, object.booleanProperty, 'changes back');
-      equal(true, $(c1.__checkbox).attr('checked') === 'checked', 'checkbox valid');
+
+      equal(true, c1.__checkbox.checked, 'checkbox valid');        
+
+
 
       object.booleanProperty = false;
       dom.fakeEvent(c1.__checkbox, 'click');
       equal(false, object.booleanProperty, 'maintains sync');
-      equal(false, $(c1.__checkbox).attr('checked') === 'checked', 'checkbox valid');
+      equal(false, c1.__checkbox.checked, 'checkbox valid');
 
     });
 
@@ -535,16 +541,16 @@
 
       dom.fakeEvent(c1.__checkbox, 'click');
       equal(true, object.booleanProperty, 'changes');
-      equal(true, $(c1.__checkbox).attr('checked') === 'checked', 'checkbox valid');
+      equal(true, c1.__checkbox.checked, 'checkbox valid');
 
       dom.fakeEvent(c1.__checkbox, 'click');
       equal(false, object.booleanProperty, 'changes back');
-      equal(false, $(c1.__checkbox).attr('checked') === 'checked', 'checkbox valid');
+      equal(false, c1.__checkbox.checked, 'checkbox valid');
 
       object.booleanProperty = true;
       dom.fakeEvent(c1.__checkbox, 'click');
       equal(true, object.booleanProperty, 'maintains sync');
-      equal(true, $(c1.__checkbox).attr('checked') === 'checked', 'checkbox valid');
+      equal(true, c1.__checkbox.checked, 'checkbox valid');
 
 
     });
@@ -1214,7 +1220,7 @@
 
       var c = gui.add({ x: false }, 'x');
 
-      equal($(c.__checkbox).attr('checked'), undefined, 'Acknowledges original');
+      equal(c.__checkbox.checked, false, 'Acknowledges original');
 
       dom.fakeEvent(c.__li, 'click');
 
@@ -1222,7 +1228,7 @@
 
       dom.fakeEvent(c.__li, 'click');
 
-      equal($(c.__checkbox).attr('checked'), undefined, 'Changes back');
+      equal(c.__checkbox.checked, false, 'Changes back');
 
       gui.destroy();