aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/style.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/style.reel')
-rw-r--r--js/panels/css-panel/style.reel/style.js139
1 files changed, 99 insertions, 40 deletions
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js
index 517d1012..b86be0ae 100644
--- a/js/panels/css-panel/style.reel/style.js
+++ b/js/panels/css-panel/style.reel/style.js
@@ -38,6 +38,15 @@ exports.Style = Montage.create(TreeNode, {
38 this.units = this.getUnits(text); 38 this.units = this.getUnits(text);
39 } 39 }
40 }, 40 },
41 _priority: { value: "", distinct: true },
42 priority: {
43 get: function() {
44 return this._priority;
45 },
46 set: function(value) {
47 this._priority = value;
48 }
49 },
41 50
42 getUnits : { 51 getUnits : {
43 value: function(val) { 52 value: function(val) {
@@ -57,25 +66,35 @@ exports.Style = Montage.create(TreeNode, {
57 }, 66 },
58 set: function(value) { 67 set: function(value) {
59 this._enabled = value; 68 this._enabled = value;
69 this.delegate.handleStyleToggle(this.getRule(), this._enabled, this);
60 this.needsDraw = true; 70 this.needsDraw = true;
61 } 71 }
62 }, 72 },
63 73
74 _empty : { value: null },
75 empty : {
76 get: function() {
77 return this._empty;
78 },
79 set: function(isEmpty) {
80 if(this._empty === isEmpty) { return false; }
81 this._empty = isEmpty;
82 this.needsDraw = true;
83 }
84 },
64 85
65 dirty : { 86 dirty : {
66 get: function() { 87 get: function() {
67 return this.propertyField.isDirty || this.valueField.isDirty; 88 return this.propertyField.isDirty || this.valueField.isDirty;
68 }, 89 },
69 set: function(value) { 90 set: function(value) {
70 91 return false;
71 } 92 }
72 }, 93 },
73 94
74 _invalid: { value: null }, 95 _invalid: { value: null },
75 invalid : { 96 invalid : {
76 get: function() { 97 get: function() { return this._invalid; },
77 return this._invalid;
78 },
79 set: function(value) { 98 set: function(value) {
80 this._invalid = value; 99 this._invalid = value;
81 this.needsDraw = true; 100 this.needsDraw = true;
@@ -88,6 +107,8 @@ exports.Style = Montage.create(TreeNode, {
88 return this._editing; 107 return this._editing;
89 }, 108 },
90 set: function(value) { 109 set: function(value) {
110 if(this._editing === value) { return false; }
111
91 this._editing = value; 112 this._editing = value;
92 this.needsDraw = true; 113 this.needsDraw = true;
93 } 114 }
@@ -101,11 +122,21 @@ exports.Style = Montage.create(TreeNode, {
101 return this._editingNewStyle; 122 return this._editingNewStyle;
102 }, 123 },
103 set: function(value) { 124 set: function(value) {
125 if(this._editingNewStyle === value) {
126 return false;
127 }
128
104 this._editingNewStyle = value; 129 this._editingNewStyle = value;
105 this.needsDraw = true; 130 this.needsDraw = true;
106 } 131 }
107 }, 132 },
108 133
134 getRule : {
135 value: function() {
136 return this.treeView.parentComponent.declaration.parentRule;
137 }
138 },
139
109 handleEvent : { 140 handleEvent : {
110 value: function(e) { 141 value: function(e) {
111 console.log(e); 142 console.log(e);
@@ -136,13 +167,7 @@ exports.Style = Montage.create(TreeNode, {
136 this.element.classList.remove("drag-enter"); 167 this.element.classList.remove("drag-enter");
137 } 168 }
138 }, 169 },
139 handleSourceObjectSet: { 170
140 value: function() {
141 //debugger;
142 this.propertyText = this.sourceObject.name;
143 this.valueText = this.sourceObject.value;
144 }
145 },
146 handleWebkitTransitionEnd : { 171 handleWebkitTransitionEnd : {
147 value: function(e) { 172 value: function(e) {
148 console.log("trans end"); 173 console.log("trans end");
@@ -150,7 +175,9 @@ exports.Style = Montage.create(TreeNode, {
150 }, 175 },
151 handleClick : { 176 handleClick : {
152 value: function(e) { 177 value: function(e) {
153 console.log("handleAction"); 178 console.log("handle Add button click");
179 this.propertyField.start();
180 //this.editingNewStyle = true;
154 this.editingNewStyle = this.editing = true; 181 this.editingNewStyle = this.editing = true;
155 } 182 }
156 }, 183 },
@@ -167,23 +194,23 @@ exports.Style = Montage.create(TreeNode, {
167 var event = e; 194 var event = e;
168 ///// Function to determine if an empty (new) style should return 195 ///// Function to determine if an empty (new) style should return
169 ///// to showing the add button, i.e. the fields were not clicked 196 ///// to showing the add button, i.e. the fields were not clicked
170 function shouldStopEditing() { 197 function fieldsClicked() {
171 var clicked; 198 var clicked;
172 if(e._event.detail.originalEventType === 'mousedown') { 199 if(e._event.detail.originalEventType === 'mousedown') {
173 clicked = e._event.detail.originalEvent.target; 200 clicked = e._event.detail.originalEvent.target;
174 return clicked !== this.propertyField.element && clicked !== this.valueField.element; 201 return clicked === this.propertyField.element || clicked === this.valueField.element;
175 } 202 }
176 return; 203 return false;
177 } 204 }
178 205
179 if(this.sourceObject.isEmpty && !this.dirty && shouldStopEditing.bind(this)()) { 206 this.editing = false;
180 207
208 if(this.sourceObject.isEmpty && !this.dirty && !fieldsClicked.bind(this)()) {
209 ///// Show add button
181 this.editingNewStyle = false; 210 this.editingNewStyle = false;
182 } 211 }
183 212
184 this.treeView.contentController.delegate.handleStyleStop(e); 213 this.delegate.handleStyleStop(e);
185 //this.editing = false;
186
187 } 214 }
188 }, 215 },
189 216
@@ -192,20 +219,47 @@ exports.Style = Montage.create(TreeNode, {
192 var property = this.propertyField.value, 219 var property = this.propertyField.value,
193 oldProperty = this.propertyField._preEditValue, 220 oldProperty = this.propertyField._preEditValue,
194 value = this.valueField.value, 221 value = this.valueField.value,
195 rule = this.treeView.parentComponent.declaration.parentRule, 222 rule = this.getRule();
196 delegate = this.treeView.contentController.delegate;
197 223
198 delegate.handlePropertyChange(rule, property, value, oldProperty, this); 224 this.delegate.handlePropertyChange(rule, property, value, oldProperty, this);
199 } 225 }
200 }, 226 },
201 handleValueChange : { 227 handleValueChange : {
202 value: function(e) { 228 value: function(e) {
203 var property = this.propertyField.value, 229 var property = this.propertyField.value,
204 value = this.valueField.value, 230 value = this.valueField.value,
205 rule = this.treeView.parentComponent.declaration.parentRule, 231 rule = this.getRule();
206 delegate = this.treeView.contentController.delegate;
207 232
208 delegate.handleValueChange(rule, property, value, this); 233 this.delegate.handleValueChange(rule, property, value, this);
234 }
235 },
236
237 handlePropertyDirty : {
238 value: function(e) {
239 this.empty = false;
240 }
241 },
242
243 handleValueDirty : {
244 value: function(e) {
245 this.empty = false;
246 }
247 },
248
249 handleSourceObjectSet: {
250 value: function() {
251 this.propertyText = this.sourceObject.name;
252 this.valueText = this.sourceObject.value;
253
254 if(this.sourceObject.isEmpty) {
255 this.empty = true;
256 }
257 }
258 },
259
260 templateDidLoad : {
261 value: function() {