aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/style.reel/style.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/style.reel/style.js')
-rw-r--r--js/panels/css-panel/style.reel/style.js429
1 files changed, 429 insertions, 0 deletions
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js
new file mode 100644
index 00000000..858b7020
--- /dev/null
+++ b/js/panels/css-panel/style.reel/style.js
@@ -0,0 +1,429 @@
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 TreeNode = require("js/components/treeview/tree-node").TreeNode;
9
10exports.Style = Montage.create(TreeNode, {
11 delegate : { value: null },
12 disabledClass : { value: 'style-item-disabled' },
13 editingStyleClass : { value: 'edit-style-item' },
14 editNewEmptyClass : { value: 'edit-empty-style' },
15 invalidStyleClass : { value: "style-item-invalid" },
16
17 propertyText : { value: "property" },
18 _valueText : { value: "value" },
19 valueText : {
20 get: function() {
21 return this._valueText;
22 },
23 set: function(text) {
24 this._valueText = text;
25 this.units = this.getUnits(text);
26 }
27 },
28 browserValue: {
29 value: null
30 },
31 _priority: { value: "", distinct: true },
32 priority: {
33 get: function() {
34 return this._priority;
35 },
36 set: function(value) {
37 this._priority = value;
38 }
39 },
40
41 getUnits : {
42 value: function(val) {
43 if(val.split(/\s/).length > 1) {
44 return false;
45 } else if(/(px|em|pt|in|cm|mm|ex|pc|%)$/.test(val)) {
46 return val.replace(/^.*(px|em|pt|in|cm|mm|ex|pc|%).*/, '$1');
47 }
48 return null;
49 }
50 },
51
52 _enabled : { value: true, distinct: true },
53 enabled : {
54 get: function() {
55 return this._enabled;
56 },
57 set: function(value) {
58 this._enabled = value;
59 this.delegate.handleStyleToggle(this.getRule(), this._enabled, this);
60 this.needsDraw = true;
61 }
62 },
63
64 _empty : { value: null },
65 empty : {
66 get: function() {
67 return this._empty;
68 },
69 set: function(isEmpty) {
70 if(this._empty === isEmpty) { return false; }
71 this._empty = isEmpty;
72 this.needsDraw = true;
73 }
74 },
75
76 dirty : {
77 get: function() {
78 return this.propertyField.isDirty || this.valueField.isDirty;
79 },
80 set: function(value) {
81 return false;
82 }
83 },
84
85 _invalid: { value: null },
86 invalid : {
87 get: function() { return this._invalid; },
88 set: function(value) {
89 this._invalid = value;
90 this.needsDraw = true;
91 }
92 },
93
94 _editing : { value : null },
95 editing : {
96 get: function() {
97 return this._editing;
98 },
99 set: function(value) {
100 if(this._editing === value) { return false; }
101
102 this._editing = value;
103 this.needsDraw = true;
104 }
105 },
106
107 _editingNewStyle : {
108 value: null
109 },
110 editingNewStyle : {
111 get: function() {
112 return this._editingNewStyle;
113 },
114 set: function(value) {
115 if(this._editingNewStyle === value) {
116 return false;
117 }
118
119 this._editingNewStyle = value;
120 this.needsDraw = true;
121 }
122 },
123
124 remove : {
125 value: function() {
126 var branchController = this.parentComponent.parentComponent.contentController;
127
128 ///// Remove style property from declaration
129 this.treeView.parentComponent.declaration.removeProperty(this.propertyField._preEditValue);
130
131 ///// Remove data from branch controller and update UI
132 branchController.removeObjects(this.sourceObject);
133 }
134 },
135
136 getRule : {
137 value: function() {
138 var declarationComponent = this.treeView.parentComponent,
139 rule;
140
141 if(declarationComponent.type === 'inline') {
142 rule = { style : declarationComponent.declaration }
143 } else {
144 rule = this.treeView.parentComponent.declaration.parentRule;
145 }
146
147 return rule;
148 }
149 },
150
151 getSiblingStyle : {
152 value: function(which) {
153 var styles = this.parentComponent.parentComponent.childComponents.map(function(sub){
154 return sub.childComponents[0];
155 }),
156 index = styles.indexOf(this);
157
158 switch (which) {
159 case "first":
160 return styles[0];
161 case "last":
162 return styles[styles.length-1];
163 case "next":
164 return (index+1 < styles.length) ? styles[index+1] : null;
165 case "prev":
166 return (index-1 >= 0) ? styles[index-1] : null;
167 }
168 }
169 },
170
171
172 handleEvent : {
173 value: function(e) {
174 console.log(e);
175 }
176 },
177
178 handleDragstart : {
179 value: function(e) {
180 e.dataTransfer.effectAllowed = 'move';
181 e.dataTransfer.setData('Text', 'my styles, baby!');
182 this.element.classList.add("dragged");
183 }
184 },
185
186 handleDragend : {
187 value: function(e) {
188 this.element.classList.remove("dragging");
189 this.element.classList.remove("dragged");
190 }
191 },
192 handleDrag : {
193 value: function(e) {
194 this.element.classList.add("dragging");
195 }
196 },
197 handleDrop : {
198 value: function(e) {
199 this.element.classList.remove("drag-enter");
200 }
201 },
202
203 handleWebkitTransitionEnd : {
204 value: function(e) {
205 console.log("trans end");
206 }
207 },
208 handleClick : {
209 value: function(e) {
210 console.log("handle Add button click");
211 this.propertyField.start();
212 //this.editingNewStyle = true;
213 this.editingNewStyle = this.editing = true;
214 }
215 },
216
217 handleStart : {
218 value: function(e) {
219 this.editing = true;
220
221 if(this.empty) {
222 this.editingNewStyle = true;
223 }
224 }
225 },
226
227 //// Handler for both hintable components
228 handlePropertyStop : {
229 value: function(e) {
230 var event = e;
231 ///// Function to determine if an empty (new) style should return
232 ///// to showing the add button, i.e. the fields were not clicked
233 function fieldsClicked() {
234 var clicked;