From b89a7ee8b956c96a1dcee995ea840feddc5d4b27 Mon Sep 17 00:00:00 2001 From: Pierre Frisch Date: Thu, 22 Dec 2011 07:25:50 -0800 Subject: First commit of Ninja to ninja-internal Signed-off-by: Valerio Virgillito --- .../ui/property-control.reel/property-control.css | 27 +++ .../ui/property-control.reel/property-control.html | 40 ++++ .../ui/property-control.reel/property-control.js | 238 +++++++++++++++++++++ 3 files changed, 305 insertions(+) create mode 100644 js/components/ui/property-control.reel/property-control.css create mode 100644 js/components/ui/property-control.reel/property-control.html create mode 100644 js/components/ui/property-control.reel/property-control.js (limited to 'js/components/ui/property-control.reel') diff --git a/js/components/ui/property-control.reel/property-control.css b/js/components/ui/property-control.reel/property-control.css new file mode 100644 index 00000000..a2795226 --- /dev/null +++ b/js/components/ui/property-control.reel/property-control.css @@ -0,0 +1,27 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +.propControl +{ + display:block; + width: 100%; +} + +.propControl .prop-label +{ + width:100px; + float:left; + clear:left; + text-align: right; + margin: 2px 10px 2px 0; +} + +.propControl .prop-controller +{ + width:200px; + float:left; + margin: 2px 0; +} \ No newline at end of file diff --git a/js/components/ui/property-control.reel/property-control.html b/js/components/ui/property-control.reel/property-control.html new file mode 100644 index 00000000..2e7c7b53 --- /dev/null +++ b/js/components/ui/property-control.reel/property-control.html @@ -0,0 +1,40 @@ + + + + + + + + + +

+ + \ No newline at end of file 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 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +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; + case "Combobox": + this._control = Combobox.create(); + this._control.addEventListener("change", this, false); + this._prop = "value"; + break; + case "FileInput": + this._control = FileInput.create(); + this._control.addEventListener("change", this, false); + this._prop = "filePath"; + break; + case "InputGroup": + this._control = InputGroup.create(); + this._control.addEventListener("change", this, false); + this._control.addEventListener("changing", this, false); + this._prop = "value"; + break; + default: + break; + } + this._control.element = this._controlField; + } + } + +}); -- cgit v1.2.3