1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
/* <copyright>
This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
</copyright> */
var Montage = require("montage/core/core").Montage,
Component = require("montage/ui/component").Component;
var ColorChip = exports.ColorChip = Montage.create(Component, {
chip: {
value: false
},
hasIcon: {
value: true
},
iconType: {
value: null
},
mode: {
value: "stroke"
},
offset: {
value: 20
},
color: {
value: {r:0, g:0, b:0, a:1, css:'rgb(0,0,0)', mode:'rgb'}
},
chipBtn: {
serializable: true,
value: null
},
changeDelegate: {
value: function(event) {
this.color = event._event.color;
var evt = document.createEvent("CustomEvent");
evt.initEvent("change", true, true);
evt.type = "change";
this.dispatchEvent(evt);
}
},
prepareForDraw: {
value: function() {
this.addEventListener("firstDraw", this, false);
}
},
draw: {
value: function() {
if(this.hasIcon) {
var icon = this.iconType || this.mode + "Icon";
this.application.ninja.colorController.addButton(icon, this.icon);
} else {
this.icon.style.display = "none";
}
this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, nocolor: true, offset: this.offset};
this.application.ninja.colorController.addButton(this.mode, this.chipBtn);
}
},
handleFirstDraw: {
value: function(evt) {
if(this.chip) {
// This is a single chip - Not related to the color panel -- Set the initial color if found
var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(0,0,0)";
if(this.color) {
var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.color.css);
mode = colorObj.mode;
r = colorObj.value.r;
g = colorObj.value.g;
b = colorObj.value.b;
a = colorObj.value.a;
css = colorObj.css;
this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css});
} else {
mode = "nocolor";
this.chipBtn.color(mode, null);
}
this.chipBtn.addEventListener("change", this, false);
}
}
},
handleChange: {
value: function(evt) {
if(this.changeDelegate && typeof(this.changeDelegate === "function")) {
this.changeDelegate(evt);
}
}
},
destroy: {
value: function() {
this.application.ninja.colorController.removeButton(this.mode, this.chipBtn);
var mode = this.mode;
if(this.iconType) {
if(this.iconType === "fillIcon") {
mode = "fill";
} else if(this.iconType === "strokeIcon") {
mode = "stroke";
}
}
this.application.ninja.colorController.removeButton(mode, this.icon);
}
}
});
|