diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/components/ui/color-chip.reel/color-chip.js | 80 | ||||
-rw-r--r-- | js/controllers/elements/stage-controller.js | 5 | ||||
-rw-r--r-- | js/data/pi/pi-data.js | 16 | ||||
-rw-r--r-- | js/io/document/html-document.js | 3 | ||||
-rw-r--r-- | js/panels/properties/content.reel/content.js | 37 | ||||
-rw-r--r-- | js/panels/properties/sections/custom.reel/custom.js | 46 |
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 | ||
10 | var ColorChip = exports.ColorChip = Montage.create(Component, { | 10 | var 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, | |||
10 | exports.PiData = Montage.create( Montage, { | 10 | exports.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 |