diff options
Diffstat (limited to 'js/panels/css-panel/style.reel/style.js')
-rw-r--r-- | js/panels/css-panel/style.reel/style.js | 429 |
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 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | TreeNode = require("js/components/treeview/tree-node").TreeNode; | ||
9 | |||
10 | exports.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; | ||