aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/style.reel/style.js
diff options
context:
space:
mode:
authorEric Guzman2012-04-26 03:15:49 -0700
committerEric Guzman2012-04-26 03:15:49 -0700
commit143105a0b9c7765898b22d53489b4bd8df3dff2e (patch)
tree05c6cd14d6400dc2393ebc4465ac3c31c42feb47 /js/panels/css-panel/style.reel/style.js
parentf1d4c48cd12d4c1a4a8b8d7ce648ea510607cb88 (diff)
downloadninja-143105a0b9c7765898b22d53489b4bd8df3dff2e.tar.gz
CSS Panel - add handlers for css panel actions
Diffstat (limited to 'js/panels/css-panel/style.reel/style.js')
-rw-r--r--js/panels/css-panel/style.reel/style.js126
1 files changed, 120 insertions, 6 deletions
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js
index adf17a84..517d1012 100644
--- a/js/panels/css-panel/style.reel/style.js
+++ b/js/panels/css-panel/style.reel/style.js
@@ -8,18 +8,47 @@ var Montage = require("montage/core/core").Montage,
8 TreeNode = require("js/components/treeview/tree-node").TreeNode; 8 TreeNode = require("js/components/treeview/tree-node").TreeNode;
9 9
10exports.Style = Montage.create(TreeNode, { 10exports.Style = Montage.create(TreeNode, {
11 delegate : {
12 value: null
13 },
11 disabledClass : { 14 disabledClass : {
12 value: 'style-item-disabled' 15 value: 'style-item-disabled'
13 }, 16 },
17 editingStyleClass : {
18 value: 'edit-style-item'
19 },
14 editNewEmptyClass : { 20 editNewEmptyClass : {
15 value: 'edit-empty-style' 21 value: 'edit-empty-style'
16 }, 22 },
23 invalidStyleClass : {
24 value: "style-item-invalid"
25 },
17 propertyText : { 26 propertyText : {
18 value: "property" 27 value: "property"
19 }, 28 },
20 valueText : { 29 _valueText : {
21 value: "value" 30 value: "value"
22 }, 31 },
32 valueText : {
33 get: function() {
34 return this._valueText;
35 },
36 set: function(text) {
37 this._valueText = text;
38 this.units = this.getUnits(text);
39 }
40 },
41
42 getUnits : {
43 value: function(val) {
44 if(val.split(/\s/).length > 1) {
45 return false;
46 } else if(/(px|em|pt|in|cm|mm|ex|pc|%)$/.test(val)) {
47 return val.replace(/^.*(px|em|pt|in|cm|mm|ex|pc|%).*/, '$1');
48 }
49 return null;
50 }
51 },
23 52
24 _enabled : { value: true, distinct: true }, 53 _enabled : { value: true, distinct: true },
25 enabled : { 54 enabled : {
@@ -42,6 +71,28 @@ exports.Style = Montage.create(TreeNode, {
42 } 71 }
43 }, 72 },
44 73
74 _invalid: { value: null },
75 invalid : {
76 get: function() {
77 return this._invalid;
78 },
79 set: function(value) {
80 this._invalid = value;
81 this.needsDraw = true;
82 }
83 },
84
85 _editing : { value : null },
86 editing : {
87 get: function() {
88 return this._editing;
89 },
90 set: function(value) {
91 this._editing = value;
92 this.needsDraw = true;
93 }
94 },
95
45 _editingNewStyle : { 96 _editingNewStyle : {
46 value: null 97 value: null
47 }, 98 },
@@ -100,7 +151,13 @@ exports.Style = Montage.create(TreeNode, {
100 handleClick : { 151 handleClick : {
101 value: function(e) { 152 value: function(e) {
102 console.log("handleAction"); 153 console.log("handleAction");
103 this.editingNewStyle = true; 154 this.editingNewStyle = this.editing = true;
155 }
156 },
157
158 handleStart : {
159 value: function(e) {
160 this.editing = true;
104 } 161 }
105 }, 162 },
106 163
@@ -116,15 +173,42 @@ exports.Style = Montage.create(TreeNode, {
116 clicked = e._event.detail.originalEvent.target; 173 clicked = e._event.detail.originalEvent.target;
117 return clicked !== this.propertyField.element && clicked !== this.valueField.element; 174 return clicked !== this.propertyField.element && clicked !== this.valueField.element;
118 } 175 }
119 return 176 return;
120 } 177 }
121 178
122 if(this.sourceObject.isEmpty && !this.dirty && shouldStopEditing.bind(this)()) { 179 if(this.sourceObject.isEmpty && !this.dirty && shouldStopEditing.bind(this)()) {
123 180
124 this.editingNewStyle = false; 181 this.editingNewStyle = false;
125 } 182 }
183
184 this.treeView.contentController.delegate.handleStyleStop(e);
185 //this.editing = false;
186
126 } 187 }
127 }, 188 },
189
190 handlePropertyChange : {
191 value: function(e) {
192 var property = this.propertyField.value,
193 oldProperty = this.propertyField._preEditValue,
194 value = this.valueField.value,
195 rule = this.treeView.parentComponent.declaration.parentRule,
196 delegate = this.treeView.contentController.delegate;
197
198 delegate.handlePropertyChange(rule, property, value, oldProperty, this);
199 }
200 },
201 handleValueChange : {
202 value: function(e) {
203 var property = this.propertyField.value,
204 value = this.valueField.value,
205 rule = this.treeView.parentComponent.declaration.parentRule,
206 delegate = this.treeView.contentController.delegate;
207
208 delegate.handleValueChange(rule, property, value, this);
209 }
210 },
211
128 prepareForDraw : { 212 prepareForDraw : {
129 value: function() { 213 value: function() {
130 console.log("style's prepare for draw"); 214 console.log("style's prepare for draw");
@@ -134,11 +218,17 @@ exports.Style = Montage.create(TreeNode, {
134 this.element.addEventListener('drop', this, false); 218 this.element.addEventListener('drop', this, false);
135 this.element.addEventListener('webkitTransitionEnd', this, false); 219 this.element.addEventListener('webkitTransitionEnd', this, false);
136 220
221 ///// Add listeners to the value/property fields
222 this.propertyField.addEventListener('start', this, false);
223 this.valueField.addEventListener('start', this, false);
224 this.propertyField.addEventListener('stop', this, false);
225 this.valueField.addEventListener('stop', this, false);
226// this.propertyField.addEventListener('change', this, false);
227// this.valueField.addEventListener('change', this, false);
228
137 if(this.sourceObject.isEmpty) { 229 if(this.sourceObject.isEmpty) {
138 this.element.draggable = false; 230 this.element.draggable = false;
139 this.addStyleButton.addEventListener('click', this, false); 231 this.addStyleButton.addEventListener('click', this, false);
140 this.propertyField.addEventListener('stop', this, false);
141 this.valueField.addEventListener('stop', this, false);
142 } else { 232 } else {
143 this.element.removeChild(this.addStyleButton); 233 this.element.removeChild(this.addStyleButton);
144 delete this.addStyleButton; 234 delete this.addStyleButton;
@@ -146,6 +236,16 @@ exports.Style = Montage.create(TreeNode, {
146 } 236 }
147 }, 237 },
148 238
239 willDraw : {
240 value: function() {
241 if(this.invalid) {
242 this._element.title = "Unrecognized Style";
243 } else {
244 this._element.removeAttribute('title');
245 }
246 }
247 },
248
149 draw : { 249 draw : {
150 value : function() { 250 value : function() {
151 //debugger; 251 //debugger;
@@ -168,11 +268,25 @@ exports.Style = Montage.create(TreeNode, {
168 } 268 }
169 269
170 if(this._editingNewStyle) { 270 if(this._editingNewStyle) {
171 this.propertyField.start(); 271 if(!this.propertyField.isEditable) {
272 this.propertyField.start();
273 }
172 this.element.classList.add(this.editNewEmptyClass); 274 this.element.classList.add(this.editNewEmptyClass);
173 } else { 275 } else {
174 this.element.classList.remove(this.editNewEmptyClass); 276 this.element.classList.remove(this.editNewEmptyClass);
175 } 277 }
278
279 if(this._invalid) {
280 this._element.classList.add(this.invalidStyleClass);
281 } else {
282 this._element.classList.remove(this.invalidStyleClass);
283 }
284
285 if(this.editing) {
286 this._element.classList.add(this.editingStyleClass);
287 } else {
288 this._element.classList.remove(this.editingStyleClass);
289