aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/components/ui/color-chip.reel/color-chip.js80
-rw-r--r--js/controllers/elements/stage-controller.js5
-rw-r--r--js/data/pi/pi-data.js16
-rw-r--r--js/io/document/html-document.js3
-rw-r--r--js/panels/properties/content.reel/content.js37
-rw-r--r--js/panels/properties/sections/custom.reel/custom.js46
6 files changed, 172 insertions, 15 deletions
diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js
index 5bef7020..4c288084 100644
--- a/js/components/ui/color-chip.reel/color-chip.js
+++ b/js/components/ui/color-chip.reel/color-chip.js
@@ -9,32 +9,96 @@ var Montage = require("montage/core/core").Montage,
9 9
10var ColorChip = exports.ColorChip = Montage.create(Component, { 10var ColorChip = exports.ColorChip = Montage.create(Component, {
11 11
12 chip: {
13 value: false
14 },
15
12 hasIcon: { 16 hasIcon: {
13 value: true 17 value: true
14 }, 18 },
15 19
20 iconType: {
21 value: null
22 },
23
16 mode: { 24 mode: {
17 value: "stroke" 25 value: "stroke"
18 }, 26 },
19 27
20 prepareForDraw: { 28 offset: {
21 value: function() { 29 value: 20
22// this.colorButton.props = {side: 'right', align: 'bottom', wheel: true, palette: true, gradient: true, image: true, offset: 20}; 30 },
23// this.application.ninja.colorController.addButton('chip', this.colorButton);
24 31
32 initialColor: {
33 value: false
34 },
35
36 changeDelegate: {
37 value: null
38 },
25 39
40 prepareForDraw: {
41 value: function() {
26 this.addEventListener("firstDraw", this, false); 42 this.addEventListener("firstDraw", this, false);
27 } 43 }
28 }, 44 },
29 45
30 draw: { 46 draw: {
31 value: function() { 47 value: function() {
48 if(this.hasIcon) {
49 var icon = this.iconType || this.mode + "Icon";
50 this.application.ninja.colorController.addButton(icon, this.icon);
51 }
32 52
33 if(this.hasIcon) this.application.ninja.colorController.addButton(this.mode + 'Icon', this.icon); 53 this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: this.offset};
34
35// this.application.ninja.colorController.addButton(this.mode, this.chipBtn);
36 this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: 20};
37 this.application.ninja.colorController.addButton(this.mode, this.chipBtn); 54 this.application.ninja.colorController.addButton(this.mode, this.chipBtn);
55
56 /*
57 if(this.chip) {
58 //this.application.ninja.colorController.addButton('fillIcon', this.icon);
59 this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: 0};
60 this.application.ninja.colorController.addButton(this.mode, this.chipBtn);
61 } else {
62 //if(this.hasIcon) this.application.ninja.colorController.addButton(this.mode + 'Icon', this.icon);
63 this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: 20};
64 this.application.ninja.colorController.addButton(this.mode, this.chipBtn);
65 }
66 */
67
68
69 }
70 },
71
72 handleFirstDraw: {
73 value: function(evt) {
74 if(this.chip) {
75 // This is a single chip - Not related to the color panel -- Set the initial color if found
76 var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(255,0,0)";
77
78 if(this.initialColor) {
79 console.log(this.initialColor);
80 var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.initialColor);
81 mode = colorObj.mode;
82 r = colorObj.value.r;
83 g = colorObj.value.g;
84 b = colorObj.value.b;
85 a = colorObj.value.a;
86 css = colorObj.css;
87 }
88
89 this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css});
90 //this.chipBtn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 0, b: 0}, css: 'rgb(255,0,0)'});
91
92 this.chipBtn.addEventListener("change", this, false);
93 }
94 }
95 },
96
97 handleChange: {
98 value: function(evt) {
99 if(this.changeDelegate && typeof(this.changeDelegate === "function")) {
100 this.changeDelegate(evt);
101 }
38 } 102 }
39 } 103 }
40 104
diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js
index b8170826..e9fc6bce 100644
--- a/js/controllers/elements/stage-controller.js
+++ b/js/controllers/elements/stage-controller.js
@@ -75,6 +75,8 @@ exports.StageController = Montage.create(ElementController, {
75 getProperty: { 75 getProperty: {
76 value: function(el, p) { 76 value: function(el, p) {
77 switch(p) { 77 switch(p) {
78 case "background" :
79 return el.elementModel.stageBackground.style.getProperty(p);
78 case "border": 80 case "border":
79 return el.elementModel.stageView.style.getProperty(p); 81 return el.elementModel.stageView.style.getProperty(p);
80 case "height": 82 case "height":
@@ -92,7 +94,8 @@ exports.StageController = Montage.create(ElementController, {
92 value: function(el, p, value) { 94 value: function(el, p, value) {
93 switch(p) { 95 switch(p) {
94 case "background": 96 case "background":
95 el.elementModel.body.style.setProperty(p, value); 97 console.log(value);
98 el.elementModel.stageBackground.style.setProperty(p, value);
96 break; 99 break;
97 case "overflow": 100 case "overflow":
98 el.elementModel.viewPort.style.setProperty(p, value); 101 el.elementModel.viewPort.style.setProperty(p, value);
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 10b33a0e..a6811a20 100644
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -10,7 +10,21 @@ var Montage = require("montage/core/core").Montage,
10exports.PiData = Montage.create( Montage, { 10exports.PiData = Montage.create( Montage, {
11 11
12 stagePi: { 12 stagePi: {
13 value: [] 13 value: [
14 {
15 label: "Style",
16
17 Section: [
18 [
19 {
20 type : "chip",
21 id : "background",
22 prop: "background"
23 }
24 ]
25 ]
26 }
27 ]
14 }, 28 },
15 29
16 blockPi: { 30 blockPi: {
diff --git a/js/io/document/html-document.js b/js/io/document/html-document.js
index c44dfe75..dd3507c2 100644
--- a/js/io/document/html-document.js
+++ b/js/io/document/html-document.js
@@ -398,6 +398,9 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base
398 398
399 this.documentRoot.elementModel.stageView = this.documentRoot.elementModel.defaultRule.cssRules[j]; 399 this.documentRoot.elementModel.stageView = this.documentRoot.elementModel.defaultRule.cssRules[j];
400 400
401 } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "#stageBG") {
402
403 this.documentRoot.elementModel.stageBackground = this.documentRoot.elementModel.defaultRule.cssRules[j];
401 } 404 }
402 } 405 }
403 406
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, {
150 this.customPi = stage.elementModel.pi; 150 this.customPi = stage.elementModel.pi;
151 this.displayCustomProperties(stage, stage.elementModel.pi); 151 this.displayCustomProperties(stage, stage.elementModel.pi);
152 } 152 }
153
154 // For now hardcode the background since it is the only custom property
155 // No need to loop through all the properties.
156 var backgroundChip = this.customSections[0].content.controls["background"];
157 backgroundChip.initialColor = ElementsMediator.getProperty(stage, "background");
158
159 // Get stage color
160 //var backgroundColor =
161 //console.log(backgroundColor);
162
163 /*
164 var customPI = PiData[this.customPi];
165 // Get all the custom section for the custom PI
166 for(var i = 0, customSec; customSec = customPI[i]; i++) {
167
168 // Now set the Fields for the custom PI
169 for(var j = 0, fields; fields = customSec.Section[j]; j++) {
170 for(var k = 0, control; control = fields[k]; k++) {
171
172 var colorChipEl = this.customSections[i].content.controls[control.id];
173 this.foo = colorChipEl;
174 colorChipEl.addEventListener("firstDraw", this, false);
175
176 }
177 }
178 }
179 */
180 }
181 },
182
183 foo: {