diff options
Diffstat (limited to 'js/panels/css-panel/style.reel/style.js')
-rw-r--r-- | js/panels/css-panel/style.reel/style.js | 292 |
1 files changed, 292 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..517d1012 --- /dev/null +++ b/js/panels/css-panel/style.reel/style.js | |||
@@ -0,0 +1,292 @@ | |||
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 : { | ||
12 | value: null | ||
13 | }, | ||
14 | disabledClass : { | ||
15 | value: 'style-item-disabled' | ||
16 | }, | ||
17 | editingStyleClass : { | ||
18 | value: 'edit-style-item' | ||
19 | }, | ||
20 | editNewEmptyClass : { | ||
21 | value: 'edit-empty-style' | ||
22 | }, | ||
23 | invalidStyleClass : { | ||
24 | value: "style-item-invalid" | ||
25 | }, | ||
26 | propertyText : { | ||
27 | value: "property" | ||
28 | }, | ||
29 | _valueText : { | ||
30 | value: "value" | ||
31 | }, | ||
32 | valueText : { | ||
33 | get: function() { | ||
34 | return this._valueText; | ||
35 | }, | ||
36 | set: function(text) { | ||
37 | this._valueText = text; | ||
38 | this.units = this.getUnits(text); | ||
39 | } | ||
40 | }, | ||
41 | |||
42 | getUnits : { | ||
43 | value: function(val) { | ||
44 | if(val.split(/\s/).length > 1) { | ||
45 | return false; | ||
46 | } else if(/(px|em|pt|in|cm|mm|ex|pc|%)$/.test(val)) { | ||
47 | return val.replace(/^.*(px|em|pt|in|cm|mm|ex|pc|%).*/, '$1'); | ||
48 | } | ||
49 | return null; | ||
50 | } | ||
51 | }, | ||
52 | |||
53 | _enabled : { value: true, distinct: true }, | ||
54 | enabled : { | ||
55 | get: function() { | ||
56 | return this._enabled; | ||
57 | }, | ||
58 | set: function(value) { | ||
59 | this._enabled = value; | ||
60 | this.needsDraw = true; | ||
61 | } | ||
62 | }, | ||
63 | |||
64 | |||
65 | dirty : { | ||
66 | get: function() { | ||
67 | return this.propertyField.isDirty || this.valueField.isDirty; | ||
68 | }, | ||
69 | set: function(value) { | ||
70 | |||
71 | } | ||
72 | }, | ||
73 | |||
74 | _invalid: { value: null }, | ||
75 | invalid : { | ||
76 | get: function() { | ||
77 | return this._invalid; | ||
78 | }, | ||
79 | set: function(value) { | ||
80 | this._invalid = value; | ||
81 | this.needsDraw = true; | ||
82 | } | ||
83 | }, | ||
84 | |||
85 | _editing : { value : null }, | ||
86 | editing : { | ||
87 | get: function() { | ||
88 | return this._editing; | ||
89 | }, | ||
90 | set: function(value) { | ||
91 | this._editing = value; | ||
92 | this.needsDraw = true; | ||
93 | } | ||
94 | }, | ||
95 | |||
96 | _editingNewStyle : { | ||
97 | value: null | ||
98 | }, | ||
99 | editingNewStyle : { | ||
100 | get: function() { | ||
101 | return this._editingNewStyle; | ||
102 | }, | ||
103 | set: function(value) { | ||
104 | this._editingNewStyle = value; | ||
105 | this.needsDraw = true; | ||
106 | } | ||
107 | }, | ||
108 | |||
109 | handleEvent : { | ||
110 | value: function(e) { | ||
111 | console.log(e); | ||
112 | } | ||
113 | }, | ||
114 | |||
115 | handleDragstart : { | ||
116 | value: function(e) { | ||
117 | e.dataTransfer.effectAllowed = 'move'; | ||
118 | e.dataTransfer.setData('Text', 'my styles, baby!'); | ||
119 | this.element.classList.add("dragged"); | ||
120 | } | ||
121 | }, | ||
122 | |||
123 | handleDragend : { | ||
124 | value: function(e) { | ||
125 | this.element.classList.remove("dragging"); | ||
126 | this.element.classList.remove("dragged"); | ||
127 | } | ||
128 | }, | ||
129 | handleDrag : { | ||
130 | value: function(e) { | ||
131 | this.element.classList.add("dragging"); | ||
132 | } | ||
133 | }, | ||
134 | handleDrop : { | ||
135 | value: function(e) { | ||
136 | this.element.classList.remove("drag-enter"); | ||
137 | } | ||
138 | }, | ||
139 | handleSourceObjectSet: { | ||
140 | value: function() { | ||
141 | //debugger; | ||
142 | this.propertyText = this.sourceObject.name; | ||
143 | this.valueText = this.sourceObject.value; | ||
144 | } | ||
145 | }, | ||
146 | handleWebkitTransitionEnd : { | ||
147 | value: function(e) { | ||
148 | console.log("trans end"); | ||
149 | } | ||
150 | }, | ||
151 | handleClick : { | ||
152 | value: function(e) { | ||
153 | console.log("handleAction"); | ||
154 | this.editingNewStyle = this.editing = true; | ||
155 | } | ||
156 | }, | ||
157 | |||
158 | handleStart : { | ||
159 | value: function(e) { | ||
160 | this.editing = true; | ||
161 | } | ||
162 | }, | ||
163 | |||
164 | //// Handler for both hintable components | ||
165 | handleStop : { | ||
166 | value: function(e) { | ||
167 | var event = e; | ||
168 | ///// Function to determine if an empty (new) style should return | ||
169 | ///// to showing the add button, i.e. the fields were not clicked | ||
170 | function shouldStopEditing() { | ||
171 | var clicked; | ||
172 | if(e._event.detail.originalEventType === 'mousedown') { | ||
173 | clicked = e._event.detail.originalEvent.target; | ||
174 | return clicked !== this.propertyField.element && clicked !== this.valueField.element; | ||
175 | } | ||
176 | return; | ||
177 | } | ||
178 | |||
179 | if(this.sourceObject.isEmpty && !this.dirty && shouldStopEditing.bind(this)()) { | ||
180 | |||
181 | this.editingNewStyle = false; | ||
182 | } | ||
183 | |||
184 | this.treeView.contentController.delegate.handleStyleStop(e); | ||
185 | //this.editing = false; | ||
186 | |||
187 | } | ||
188 | }, | ||
189 | |||
190 | handlePropertyChange : { | ||
191 | value: function(e) { | ||
192 | var property = this.propertyField.value, | ||
193 | oldProperty = this.propertyField._preEditValue, | ||
194 | value = this.valueField.value, | ||
195 | rule = this.treeView.parentComponent.declaration.parentRule, | ||
196 | delegate = this.treeView.contentController.delegate; | ||
197 | |||
198 | delegate.handlePropertyChange(rule, property, value, oldProperty, this); | ||
199 | } | ||
200 | }, | ||
201 | handleValueChange : { | ||
202 | value: function(e) { | ||
203 | var property = this.propertyField.value, | ||
204 | value = this.valueField.value, | ||
205 | rule = this.treeView.parentComponent.declaration.parentRule, | ||
206 | delegate = this.treeView.contentController.delegate; | ||
207 | |||
208 | delegate.handleValueChange(rule, property, value, this); | ||
209 | } | ||
210 | }, | ||
211 | |||
212 | prepareForDraw : { | ||
213 | value: function() { | ||
214 | console.log("style's prepare for draw"); | ||
215 | this.element.addEventListener('dragstart', this, false); | ||
216 | this.element.addEventListener('drag', this, false); | ||
217 | this.element.addEventListener('dragend', this, false); | ||
218 | this.element.addEventListener('drop', this, false); | ||
219 | this.element.addEventListener('webkitTransitionEnd', this, false); | ||
220 | |||
221 | ///// Add listeners to the value/property fields | ||
222 | this.propertyField.addEventListener('start', this, false); | ||
223 | this.valueField.addEventListener('start', this, false); | ||
224 | this.propertyField.addEventListener('stop', this, false); | ||
225 | this.valueField.addEventListener('stop', this, false); | ||
226 | // this.propertyField.addEventListener('change', this, false); | ||
227 | // this.valueField.addEventListener('change', this, false); | ||
228 | |||
229 | if(this.sourceObject.isEmpty) { | ||
230 | this.element.draggable = false; | ||
231 | this.addStyleButton.addEventListener('click', this, false); | ||
232 | } else { | ||
233 |