aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel
diff options
context:
space:
mode:
authorEric Guzman2012-04-30 13:46:55 -0700
committerEric Guzman2012-04-30 13:46:55 -0700
commitaea46a37ae8038da570fc7cf07ef6e8c0d9ef577 (patch)
treeb943b0945cec890ccd78bff2d56aee0e65bd26bd /js/panels/css-panel
parent4332599afffae987a18bb197fcfdd09bc2e94d2b (diff)
downloadninja-aea46a37ae8038da570fc7cf07ef6e8c0d9ef577.tar.gz
CSS Style - Add style interaction
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r--js/panels/css-panel/declaration.reel/declaration.html5
-rw-r--r--js/panels/css-panel/declaration.reel/declaration.js19
-rw-r--r--js/panels/css-panel/style.reel/style.js139
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