diff options
Diffstat (limited to 'js/components/ui/color-chip.reel')
-rwxr-xr-x[-rw-r--r--] | js/components/ui/color-chip.reel/color-chip.css | 0 | ||||
-rwxr-xr-x[-rw-r--r--] | js/components/ui/color-chip.reel/color-chip.html | 0 | ||||
-rwxr-xr-x[-rw-r--r--] | js/components/ui/color-chip.reel/color-chip.js | 72 |
3 files changed, 64 insertions, 8 deletions
diff --git a/js/components/ui/color-chip.reel/color-chip.css b/js/components/ui/color-chip.reel/color-chip.css index da75c41e..da75c41e 100644..100755 --- a/js/components/ui/color-chip.reel/color-chip.css +++ b/js/components/ui/color-chip.reel/color-chip.css | |||
diff --git a/js/components/ui/color-chip.reel/color-chip.html b/js/components/ui/color-chip.reel/color-chip.html index a365d775..a365d775 100644..100755 --- a/js/components/ui/color-chip.reel/color-chip.html +++ b/js/components/ui/color-chip.reel/color-chip.html | |||
diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js index 5bef7020..ed1ac27a 100644..100755 --- a/js/components/ui/color-chip.reel/color-chip.js +++ b/js/components/ui/color-chip.reel/color-chip.js | |||
@@ -9,32 +9,88 @@ 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 | color: { | ||
33 | value: {r:0, g:0, b:0, a:1, css:'rgb(0,0,0)', mode:'rgb'} | ||
34 | }, | ||
35 | |||
36 | changeDelegate: { | ||
37 | value: function(event) { | ||
38 | this.color = event._event.color; | ||
39 | |||
40 | var evt = document.createEvent("CustomEvent"); | ||
41 | evt.initEvent("change", true, true); | ||
42 | evt.type = "change"; | ||
43 | |||
44 | this.dispatchEvent(evt); | ||
45 | } | ||
46 | }, | ||
25 | 47 | ||
48 | prepareForDraw: { | ||
49 | value: function() { | ||
26 | this.addEventListener("firstDraw", this, false); | 50 | this.addEventListener("firstDraw", this, false); |
27 | } | 51 | } |
28 | }, | 52 | }, |
29 | 53 | ||
30 | draw: { | 54 | draw: { |
31 | value: function() { | 55 | value: function() { |
56 | if(this.hasIcon) { | ||
57 | var icon = this.iconType || this.mode + "Icon"; | ||
58 | this.application.ninja.colorController.addButton(icon, this.icon); | ||
59 | } | ||
32 | 60 | ||
33 | if(this.hasIcon) this.application.ninja.colorController.addButton(this.mode + 'Icon', this.icon); | 61 | 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); | 62 | this.application.ninja.colorController.addButton(this.mode, this.chipBtn); |
63 | |||
64 | } | ||
65 | }, | ||
66 | |||
67 | handleFirstDraw: { | ||
68 | value: function(evt) { | ||
69 | if(this.chip) { | ||
70 | // This is a single chip - Not related to the color panel -- Set the initial color if found | ||
71 | var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(0,0,0)"; | ||
72 | |||
73 | if(this.color) { | ||
74 | var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.color.css); | ||
75 | mode = colorObj.mode; | ||
76 | r = colorObj.value.r; | ||
77 | g = colorObj.value.g; | ||
78 | b = colorObj.value.b; | ||
79 | a = colorObj.value.a; | ||
80 | css = colorObj.css; | ||
81 | } | ||
82 | |||
83 | this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css}); | ||
84 | this.chipBtn.addEventListener("change", this, false); | ||
85 | } | ||
86 | } | ||
87 | }, | ||
88 | |||
89 | handleChange: { | ||
90 | value: function(evt) { | ||
91 | if(this.changeDelegate && typeof(this.changeDelegate === "function")) { | ||
92 | this.changeDelegate(evt); | ||
93 | } | ||
38 | } | 94 | } |
39 | } | 95 | } |
40 | 96 | ||