1 files changed, 238 insertions, 0 deletions

diff --git a/js/components/ui/property-control.reel/property-control.js b/js/components/ui/property-control.reel/property-control.js
new file mode 100644
index 00000000..586d2e9a
--- /dev/null
+++ b/js/components/ui/property-control.reel/property-control.js
@@ -0,0 +1,238 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component,
+    HotText = require("js/components/hottext").HotText,
+    HotTextUnit = require("js/components/hottextunit").HotTextUnit,
+    Slider = require("js/components/slider").Slider,
+    Button = require("js/components/button").Button,
+    Checkbox = require("js/components/checkbox").Checkbox,
+    Combobox = require("js/components/combobox").Combobox,
+    TextField = require("js/components/TextField").TextField,
+    ColorChip = require("js/components/ui/color-chip").ColorChip,
+    FileInput = require("js/components/ui/file-input").FileInput,
+    InputGroup = require("js/components/ui/input-group").InputGroup;
+
+var PropertyControl = exports.PropertyControl = Montage.create(Component, {
+
+    _labelField: {
+        enumerable: true,
+        serializable: true,
+        value: null
+    },
+
+    labelField: {
+        enumerable: true,
+        serializable: true,
+        get: function () {
+            return this._labelField;
+        },
+        set: function (value) {
+            if (value !== this._labelField) {
+                this._labelField = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _control: {
+        enumerable: true,
+        value: null
+    },
+
+    // set this to the getter of each control type's "value" accessor,
+    // which could be value, selected, color, checked, etc.
+    _prop: {
+        enumerable: true,
+        value: ""
+    },
+
+    _controlField: {
+        enumerable: true,
+        value: null
+    },
+
+    controlField: {
+        enumerable: true,
+        serializable: true,
+        get: function () {
+            return this._controlField;
+        },
+        set: function (value) {
+            if (value !== this._controlField) {
+                this._controlField = value;
+            }
+        }
+    },
+
+    _label: {
+        enumerable: false,
+        value: "Label:"
+    },
+
+    label: {
+        enumerable: true,
+        serializable: true,
+        get: function () {
+            return this._label;
+        },
+        set: function (value) {
+            if (value !== this._label) {
+                this._label = value + ":";
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _controlType: {
+        enumerable: false,
+        value: null
+    },
+
+    controlType: {
+        enumerable: true,
+        serializable: true,
+        get: function () {
+            return this._controlType;
+        },
+        set: function (value) {
+            if (value !== this._controlType) {
+                this._controlType = value;
+            }
+        }
+    },
+
+    _data: {
+        enumerable: false,
+        value: null
+    },
+
+    data: {
+        enumerable: true,
+        serializable: true,
+        get: function () {
+            return this._data;
+        },
+        set: function (data) {
+            if (data !== this._data) {
+                this._data = data;
+                this.label = data.label;
+                this.controlType = data.controlType;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    didDraw :{
+        value: function() {
+            var defaults = this._data.defaults;
+            for(var n in defaults)
+            {
+                this._control[n] = defaults[n];
+            }
+
+            this._control.needsDraw = true;
+        }
+    },
+
+    handleEvent:
+        {
+                value:function(event)
+                {
+            this._dispatchPropEvent(event);
+                }
+        },
+
+    _dispatchPropEvent: {
+        value: function(event) {
+            var propEvent = document.createEvent("CustomEvent");
+            if(event.type === "changing")
+            {
+                propEvent.initEvent("propertyChanging", true, true);
+                propEvent.type = "propertyChanging";
+            }
+            else
+            {
+                propEvent.initEvent("propertyChange", true, true);
+                propEvent.type = "propertyChange";
+            }
+            propEvent.propertyLabel = this.label;
+            propEvent.propertyValue = event.currentTarget[this._prop];
+            propEvent.propertyEvent = event;
+            
+            this.dispatchEvent(propEvent);
+        }
+    },
+
+    prepareForDraw: {
+        value: function() {
+            this._labelField.innerHTML = this._label;
+            
+            switch(this._controlType)
+            {
+                case "HotText":
+                    this._control = HotText.create();
+                    this._control.addEventListener("change", this, false);
+                    this._control.addEventListener("changing", this, false);
+                    this._prop = "value";
+                    break;
+                case "HotTextUnit":
+                    this._control = HotTextUnit.create();
+                    this._control.addEventListener("change", this, false);
+                    this._control.addEventListener("changing", this, false);
+                    this._prop = "value";
+                    break;
+                case "Slider":
+                    this._control = Slider.create();
+                    this._control.addEventListener("change", this, false);
+                    this._control.addEventListener("changing", this, false);
+                    this._prop = "value";
+                    break;
+                case "Button":
+                    this._control = Button.create();
+                    this._control.addEventListener("action", this, false);
+                    this._prop = "value";
+                    break;
+                case "ColorChip":
+                    this._control = ColorChip.create();
+                    this._control.addEventListener("change", this, false);
+                    this._prop = "color";
+                    break;
+                case "TextField":
+                    this._control = TextField.create();
+                    this._control.addEventListener("change", this, false);
+                    this._prop = "text";
+                    break;
+                case "Checkbox":
+                    this._control = Checkbox.create();
+                    this._control.addEventListener("change", this, false);
+                    this._prop = "checked";
+                    break;