diff options
Diffstat (limited to 'js/components')
-rw-r--r-- | js/components/ui/color-chip.reel/color-chip.js | 80 |
1 files changed, 72 insertions, 8 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 | ||