From a30d76ff641ce89686cf5fbd9f04ac9ab4e9c830 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Fri, 10 Feb 2012 17:21:28 -0800
Subject: initial color chip for the stage
Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
js/panels/properties/content.reel/content.js | 37 +++++++++++++++++
.../properties/sections/custom.reel/custom.js | 46 +++++++++++++++++++---
2 files changed, 78 insertions(+), 5 deletions(-)
(limited to 'js/panels/properties')
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js
index 0088447a..b15f2d71 100644
--- a/js/panels/properties/content.reel/content.js
+++ b/js/panels/properties/content.reel/content.js
@@ -150,6 +150,43 @@ exports.Content = Montage.create(Component, {
this.customPi = stage.elementModel.pi;
this.displayCustomProperties(stage, stage.elementModel.pi);
}
+
+ // For now hardcode the background since it is the only custom property
+ // No need to loop through all the properties.
+ var backgroundChip = this.customSections[0].content.controls["background"];
+ backgroundChip.initialColor = ElementsMediator.getProperty(stage, "background");
+
+ // Get stage color
+ //var backgroundColor =
+ //console.log(backgroundColor);
+
+ /*
+ var customPI = PiData[this.customPi];
+ // Get all the custom section for the custom PI
+ for(var i = 0, customSec; customSec = customPI[i]; i++) {
+
+ // Now set the Fields for the custom PI
+ for(var j = 0, fields; fields = customSec.Section[j]; j++) {
+ for(var k = 0, control; control = fields[k]; k++) {
+
+ var colorChipEl = this.customSections[i].content.controls[control.id];
+ this.foo = colorChipEl;
+ colorChipEl.addEventListener("firstDraw", this, false);
+
+ }
+ }
+ }
+ */
+ }
+ },
+
+ foo: {
+ value: null
+ },
+
+ handleFirstDraw: {
+ value: function() {
+ this.foo.chipBtn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 0, b: 0}, css: 'rgb(255,0,0)'});
}
},
diff --git a/js/panels/properties/sections/custom.reel/custom.js b/js/panels/properties/sections/custom.reel/custom.js
index 992db8e6..5315defc 100644
--- a/js/panels/properties/sections/custom.reel/custom.js
+++ b/js/panels/properties/sections/custom.reel/custom.js
@@ -6,6 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
var Montage = require("montage/core/core").Montage;
var Component = require("montage/ui/component").Component;
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
//Custom Rows
var SingleRow = require("js/panels/properties/sections/custom-rows/single-row.reel").SingleRow;
@@ -18,7 +19,7 @@ var Dropdown = require("js/components/combobox.reel").Combobox;
var TextField = require("js/components/textfield.reel").TextField;
var FileInput = require("js/components/ui/file-input.reel").FileInput;
var Checkbox = require("js/components/checkbox.reel").Checkbox;
-
+var ColorChip = require("js/components/ui/color-chip.reel").ColorChip;
exports.CustomSection = Montage.create(Component, {
@@ -88,10 +89,8 @@ exports.CustomSection = Montage.create(Component, {
value:{}
},
- handleChanging:
- {
- value:function(event)
- {
+ handleChanging: {
+ value:function(event) {
var obj = event.currentTarget;
this._dispatchPropEvent({"type": "changing", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj});
}
@@ -106,6 +105,26 @@ exports.CustomSection = Montage.create(Component, {
}
},
+ handleColorChange: {
+ value: function(event) {
+ // Change the stage color for now
+ console.log(this);
+ console.log(event);
+ console.log(event._event.color.css);
+ ElementsMediator.setProperty([this.application.ninja.currentDocument.documentRoot], "background", [event._event.color.css], "Change", "pi", 'foo');
+ /*
+ var propEvent = document.createEvent("CustomEvent");
+ propEvent.initEvent("propertyChange", true, true);
+ propEvent.type = "propertyChange";
+
+ propEvent.prop = "background";//event.prop;
+ propEvent.value = event._event.color.css;
+
+ this.dispatchEvent(propEvent);
+ */
+ }
+ },
+
_dispatchPropEvent: {
value: function(event) {
// console.log(event);
@@ -140,6 +159,7 @@ exports.CustomSection = Montage.create(Component, {
case "textbox" : return this.createTextField(fields);
case "file" : return this.createFileInput(fields);
case "checkbox" : return this.createCheckbox(fields);
+ case "chip" : return this.createColorChip(fields);
}
}
},
@@ -303,6 +323,22 @@ exports.CustomSection = Montage.create(Component, {
boundObjectPropertyPath: "checked"
});
+ return obj;
+ }
+ },
+
+ createColorChip: {
+ value: function(aField) {
+ var obj = ColorChip.create();
+ obj.chip = true;
+ obj.iconType = "fillIcon";
+ obj.mode = "chip";
+ obj.offset = 0;
+
+ obj.changeDelegate = this.handleColorChange;
+
+ this.controls[aField.id] = obj;
+
return obj;
}
}
--
cgit v1.2.3