Merge pull request #134 from mqg734/WebGL-Animation-CheckBox

Adding enabled/disabled support for PI"s checkbox controls, and using that capability for WebGL animate checkbox.

3 files changed, 40 insertions, 3 deletions

diff --git a/js/components/checkbox.reel/checkbox.js b/js/components/checkbox.reel/checkbox.js
index f06e5830..be331f4e 100755
--- a/js/components/checkbox.reel/checkbox.js
+++ b/js/components/checkbox.reel/checkbox.js
@@ -58,6 +58,26 @@ exports.Checkbox = Montage.create(Component, {
         }
     },
 
+    _enabled: {
+        enumerable: false,
+        value: true
+    },
+
+    enabled: {
+        enumerable: true,
+        serializable: true,
+        get: function() {
+            return this._enabled;
+        },
+        set: function(value) {
+            if(value !== this._enabled)
+            {
+                this._enabled = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
     handleChange:
     {
         value:function(event)
@@ -76,6 +96,7 @@ exports.Checkbox = Montage.create(Component, {
     
     draw: {
         value: function() {
+            this.element.disabled = !this._enabled;
             if(!this._valueSyncedWithInputField)
             {
                 this.element.checked = this._checked;
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 56337124..52360302 100755
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -398,7 +398,8 @@ exports.PiData = Montage.create( Montage, {
                             prop: "animate",
                             defaultValue: true,
                             value: "Animate",
-                            checked: true
+                            checked: true,
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ],
                     [
@@ -501,7 +502,8 @@ exports.PiData = Montage.create( Montage, {
                             prop: "animate",
                             defaultValue: true,
                             value: "Animate",
-                            checked: true
+                            checked: true,
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ],
                     [
@@ -605,7 +607,8 @@ exports.PiData = Montage.create( Montage, {
                             prop: "animate",
                             defaultValue: true,
                             value: "Animate",
-                            checked: true
+                            checked: true,
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ],
                     [
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 703ef950..ac316907 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -328,6 +328,19 @@ exports.CustomSection = Montage.create(Component, {
             if (aField.value)       obj.label = aField.value;
             if (aField.prop)        obj.prop = aField.prop;
 
+            if (aField.enabled) {
+                if(aField.enabled.boundObject) {
+                    // TODO - For now, always bind to this.controls[someProperty]
+                    Object.defineBinding(obj, "enabled", {
+                                    boundObject: this.controls,
+                                    boundObjectPropertyPath: aField.enabled.boundProperty,
+                                    oneway: false
+                                });
+                } else {
+                    obj.enabled = aField.enabled;
+                }
+            }
+
             //Initiate onChange Events
             obj.addEventListener("change", this, false);