aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
diff options
context:
space:
mode:
authorArmen Kesablyan2012-05-23 14:34:58 -0700
committerArmen Kesablyan2012-05-23 14:34:58 -0700
commitc21db7f1e4a0582777bdb5366df5d023a915b779 (patch)
treec4d29cb4686101d4a480ae836d20187879cf5400 /js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
parent3ed95247e9ea4b0a7833401ed6809647b7c4acbf (diff)
parent1a7e347810401e6262d9d7bad1c3583e6773993b (diff)
downloadninja-c21db7f1e4a0582777bdb5366df5d023a915b779.tar.gz
Merge branch 'refs/heads/dom-architecture' into binding
Conflicts: js/data/panels-data.js Signed-off-by: Armen Kesablyan <armen@motorola.com>
Diffstat (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js')
-rw-r--r--js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js174
1 files changed, 174 insertions, 0 deletions
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
new file mode 100644
index 00000000..e0ffb1a8
--- /dev/null
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
@@ -0,0 +1,174 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component;
9
10exports.CssStyleRule = Montage.create(Component, {
11 addClassNameOnChange : {
12 value: null
13 },
14 unappliedClass : {
15 value: 'unapplied-css-rule'
16 },
17 cssText: {
18 value: null
19 },
20 hasTemplate: {
21 value: true
22 },
23 focusDelegate : {
24 value: null
25 },
26 _applied : {
27 value: true,
28 distinct: true
29 },
30 applied : {
31 get: function() {
32 return this._applied;
33 },
34 set: function(value) {
35 if(this._applied === value || value === undefined || value === null) { return false; }
36
37 this._applied = value;
38 this.needsDraw = true;
39 }
40 },
41
42 _rule : {
43 value : null
44 },
45 rule : {
46 get: function() {
47 return this._rule;
48 },
49 set: function(rule) {
50 this.cssText = rule.cssText;
51
52 if(rule.type === 'inline') {
53 this.sheetName = 'Inline Style';
54 } else {
55 this.sheetName = rule.href || 'Style Tag';
56 }
57
58 this.selector = rule.selectorText;
59 this.declaration = rule.style;
60
61 //console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.');
62
63 this._rule = rule;
64 }
65 },
66 declarationComponent: {
67 value: null
68 },
69 _declaration: {
70 value: null
71 },
72 declaration: {
73 get: function() {
74 return this._declaration;
75 },
76 set: function(dec) {
77 this._declaration = dec;
78 }
79 },
80 condition: {
81 value: false
82 },
83
84 handleChange : {
85 value: function(e) {
86 if(this.focusDelegate) {
87 this.focusDelegate.handleSelectorChange(this.rule, this.selectorField.value, this);
88 }
89 }
90 },
91 handleMouseover: {
92 value: function(e) {
93 if(this.focusDelegate) {
94 this.focusDelegate.handleSelectorHover(this.selectorField.value, 'over');
95 }
96 }
97 },
98 handleMouseout: {
99 value: function(e) {
100 if(this.focusDelegate) {
101 this.focusDelegate.handleSelectorHover(this.selectorField.value, 'out');
102 }
103 }
104 },
105 update: {
106 value: function() {
107 if(this.cssText !== this.rule.cssText) {
108 // TODO: add update for selector and stylesheet name
109 this.declarationComponent.update();
110 }
111 }
112 },
113
114 templateDidLoad : {
115 value: function() {
116 //console.log("css style rule : template did load");
117 }
118 },
119 prepareForDraw : {
120 value: function() {
121 this.selectorField.keyActions = this.keyActions;
122
123 if(this.rule.type === 'inline') {
124 this.selectorField.readOnly = true;
125 this.declarationComponent.type = 'inline';
126 } else {
127 this.selectorField.addEventListener('change', this, false);
128 this.selectorField.element.addEventListener('mouseover', this, false);
129 this.selectorField.element.addEventListener('mouseout', this, false);
130 }
131 }
132 },
133
134 willDraw : {
135 value: function() {
136 if(this.applied) {
137 this.element.removeAttribute('title');
138 } else {
139 this.element.title = "Rule does not apply to selection";
140 }
141 }
142 },
143 draw : {
144 value: function() {
145 //console.log("css style rule : draw");
146 if(this.applied) {
147 this.element.classList.remove(this.unappliedClass);
148 } else {
149 this.element.classList.add(this.unappliedClass);
150 }
151 }
152 },
153
154 keyActions : {
155 value : {
156 hint : {
157 accept : [9,13], // accept hint
158 stop : [27], // stop editing
159 next : [40], // cycle to next hint
160 prev : [38], // cycle to prev hint
161 revert : [27], // revert value
162 backsp : [8] // backspace hit
163 },
164 noHint : {
165 stop : [27,9,13],
166 next : [40],
167 prev : [38],
168 revert : [27],
169 backsp : [8]
170 }
171 },
172 distinct: true
173 }
174});