aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
diff options
context:
space:
mode:
authorhwc4872012-05-31 17:11:08 -0700
committerhwc4872012-05-31 17:11:08 -0700
commit1c445cf5d905f79937998cf2f1115594ea8c1074 (patch)
tree35271ad7ffec86fde9102af3dd954fa3a2974582 /js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
parent335ce503996e3ccbd2909086328d0a31fbd03370 (diff)
parent6042bdc5f2aada4412912fd01602d32c9088dc26 (diff)
downloadninja-1c445cf5d905f79937998cf2f1115594ea8c1074.tar.gz
Merge branch 'master' of github.com:Motorola-Mobility/ninja-internal into Textures
Conflicts: js/io/system/ninjalibrary.json
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.js183
1 files changed, 183 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..54181bf3
--- /dev/null
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
@@ -0,0 +1,183 @@
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 handleStop : {
92 value: function(e) {
93 if(this.focusDelegate) {
94 e._event.detail.preventDefault();
95 this.focusDelegate.handleSelectorStop(this.rule, this.selectorField.value, this);
96 }
97 }
98 },
99 handleMouseover: {
100 value: function(e) {
101 if(this.focusDelegate) {
102 this.focusDelegate.handleSelectorHover(this.selectorField.value, 'over');
103 }
104 }
105 },
106 handleMouseout: {
107 value: function(e) {
108 if(this.focusDelegate) {
109 this.focusDelegate.handleSelectorHover(this.selectorField.value, 'out');
110 }
111 }
112 },
113 update: {
114 value: function() {
115 if(this.cssText !== this.rule.cssText) {
116 // TODO: add update for selector and stylesheet name
117 this.declarationComponent.update();
118 }
119 }
120 },
121
122 templateDidLoad : {
123 value: function() {
124 //console.log("css style rule : template did load");
125 }
126 },
127 prepareForDraw : {
128 value: function() {
129 this.selectorField.keyActions = this.keyActions;
130
131 if(this.rule.type === 'inline') {
132 this.selectorField.readOnly = true;
133 this.declarationComponent.type = 'inline';
134 } else {
135 this.selectorField.addEventListener('change', this, false);
136 this.selectorField.addEventListener('stop', this, false);
137 this.selectorField.element.addEventListener('mouseover', this, false);
138 this.selectorField.element.addEventListener('mouseout', this, false);
139 }
140 }
141 },
142
143 willDraw : {
144 value: function() {
145 if(this.applied) {
146 this.element.removeAttribute('title');
147 } else {
148 this.element.title = "Rule does not apply to selection";
149 }
150 }
151 },
152 draw : {
153 value: function() {
154 //console.log("css style rule : draw");
155 if(this.applied) {
156 this.element.classList.remove(this.unappliedClass);
157 } else {
158 this.element.classList.add(this.unappliedClass);
159 }
160 }
161 },
162
163 keyActions : {
164 value : {
165 hint : {
166 accept : [9,13], // accept hint
167 stop : [27], // stop editing
168 next : [40], // cycle to next hint
169 prev : [38], // cycle to prev hint
170 revert : [27], // revert value
171 backsp : [8] // backspace hit
172 },
173 noHint : {
174 stop : [27,9,13],
175 next : [40],
176 prev : [38],
177 revert : [27],
178 backsp : [8]
179 }
180 },
181 distinct: true
182 }
183});