diff options
author | Eric Guzman | 2012-04-30 13:46:55 -0700 |
---|---|---|
committer | Eric Guzman | 2012-04-30 13:46:55 -0700 |
commit | aea46a37ae8038da570fc7cf07ef6e8c0d9ef577 (patch) | |
tree | b943b0945cec890ccd78bff2d56aee0e65bd26bd /js | |
parent | 4332599afffae987a18bb197fcfdd09bc2e94d2b (diff) | |
download | ninja-aea46a37ae8038da570fc7cf07ef6e8c0d9ef577.tar.gz |
CSS Style - Add style interaction
Diffstat (limited to 'js')
-rw-r--r-- | js/panels/css-panel/declaration.reel/declaration.html | 5 | ||||
-rw-r--r-- | js/panels/css-panel/declaration.reel/declaration.js | 19 | ||||
-rw-r--r-- | js/panels/css-panel/style.reel/style.js | 139 |
3 files changed, 117 insertions, 46 deletions
diff --git a/js/panels/css-panel/declaration.reel/declaration.html b/js/panels/css-panel/declaration.reel/declaration.html index 3a513871..3ff41e0c 100644 --- a/js/panels/css-panel/declaration.reel/declaration.html +++ b/js/panels/css-panel/declaration.reel/declaration.html | |||
@@ -15,7 +15,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
15 | "name" : "Declaration", | 15 | "name" : "Declaration", |
16 | "properties" : { | 16 | "properties" : { |
17 | "element" : {"#" : "container"}, | 17 | "element" : {"#" : "container"}, |
18 | "treeController": {"@": "treeController"} | 18 | "treeController": {"@": "treeController"}, |
19 | "treeView" : {"@": "treeView"} | ||
19 | } | 20 | } |
20 | }, | 21 | }, |
21 | "styleShorthand": { | 22 | "styleShorthand": { |
@@ -23,7 +24,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
23 | "name": "StyleShorthand" | 24 | "name": "StyleShorthand" |
24 | }, | 25 | }, |
25 | "treeController": { | 26 | "treeController": { |
26 | "module": "js/controllers/tree-controller", | 27 | "module": "js/components/controllers/tree-controller", |
27 | "name": "TreeController", | 28 | "name": "TreeController", |
28 | "properties" : { | 29 | "properties" : { |
29 | "branchKey" : "properties", | 30 | "branchKey" : "properties", |
diff --git a/js/panels/css-panel/declaration.reel/declaration.js b/js/panels/css-panel/declaration.reel/declaration.js index 9685510b..873d2ce4 100644 --- a/js/panels/css-panel/declaration.reel/declaration.js +++ b/js/panels/css-panel/declaration.reel/declaration.js | |||
@@ -18,7 +18,10 @@ exports.Declaration = Montage.create(Component, { | |||
18 | templateDidLoad : { | 18 | templateDidLoad : { |
19 | value: function() { | 19 | value: function() { |
20 | console.log("declaration - template did load"); | 20 | console.log("declaration - template did load"); |
21 | this.treeController.delegate = this.focusDelegate || this; | 21 | |
22 | if(this.focusDelegate) { | ||
23 | this.treeController.delegate = this.focusDelegate; | ||
24 | } | ||
22 | } | 25 | } |
23 | }, | 26 | }, |
24 | prepareForDraw : { | 27 | prepareForDraw : { |
@@ -119,9 +122,17 @@ exports.Declaration = Montage.create(Component, { | |||
119 | distinct: true | 122 | distinct: true |
120 | }, | 123 | }, |
121 | 124 | ||
122 | addNewStyle : { | 125 | addNewStyleAfter : { |
123 | value: function() { | 126 | value: function(style) { |
124 | debugger; | 127 | //this.treeController.branchControllers[0].addObjects({ |
128 | foo1 = style.parentComponent.parentComponent; | ||
129 | style.parentComponent.parentComponent.contentController.addObjects({ | ||
130 | name: 'property', | ||
131 | value: 'value', | ||
132 | isEmpty: true, | ||
133 | treeNodeType: 'leaf' | ||
134 | }); | ||
135 | style.parentComponent.parentComponent.needsDraw = true; | ||
125 | } | 136 | } |
126 | }, | 137 | }, |
127 | 138 | ||
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.source |