diff options
Diffstat (limited to 'js/panels/css-panel/css-style.reel/css-style.js')
-rw-r--r-- | js/panels/css-panel/css-style.reel/css-style.js | 413 |
1 files changed, 413 insertions, 0 deletions
diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js new file mode 100644 index 00000000..61723284 --- /dev/null +++ b/js/panels/css-panel/css-style.reel/css-style.js | |||
@@ -0,0 +1,413 @@ | |||
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 | Component = require("montage/ui/component").Component; | ||
9 | |||
10 | exports.CssStyle = Montage.create(Component, { | ||
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 | emptyStyleClass : { value: "empty-css-style" }, | ||
17 | |||
18 | propertyText : { value: "property" }, | ||
19 | _valueText : { value: "value" }, | ||
20 | valueText : { | ||
21 | get: function() { | ||
22 | return this._valueText; | ||
23 | }, | ||
24 | set: function(text) { | ||
25 | this._valueText = this.browserValue = text; | ||
26 | this.units = this.getUnits(text); | ||
27 | } | ||
28 | }, | ||
29 | browserValue: { | ||
30 | value: null | ||
31 | }, | ||
32 | _priority: { value: "", distinct: true }, | ||
33 | priority: { | ||
34 | get: function() { | ||
35 | return this._priority; | ||
36 | }, | ||
37 | set: function(value) { | ||
38 | this._priority = value; | ||
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.delegate.handleStyleToggle(this.getRule(), this._enabled, this); | ||
61 | this.needsDraw = true; | ||
62 | } | ||
63 | }, | ||
64 | |||
65 | _empty : { value: null }, | ||
66 | empty : { | ||
67 | get: function() { | ||
68 | return this._empty; | ||
69 | }, | ||
70 | set: function(isEmpty) { | ||
71 | if(this._empty === isEmpty) { return false; } | ||
72 | this._empty = isEmpty; | ||
73 | this.needsDraw = true; | ||
74 | } | ||
75 | }, | ||
76 | |||
77 | dirty : { | ||
78 | get: function() { | ||
79 | return this.propertyField.isDirty || this.valueField.isDirty; | ||
80 | }, | ||
81 | set: function(value) { | ||
82 | return false; | ||
83 | } | ||
84 | }, | ||
85 | |||
86 | _invalid: { value: null }, | ||
87 | invalid : { | ||
88 | get: function() { return this._invalid; }, | ||
89 | set: function(value) { | ||
90 | this._invalid = value; | ||
91 | this.needsDraw = true; | ||
92 | } | ||
93 | }, | ||
94 | |||
95 | _editing : { value : null }, | ||
96 | editing : { | ||
97 | get: function() { | ||
98 | return this._editing; | ||
99 | }, | ||
100 | set: function(value) { | ||
101 | if(this._editing === value) { return false; } | ||
102 | |||
103 | this._editing = value; | ||
104 | this.needsDraw = true; | ||
105 | } | ||
106 | }, | ||
107 | |||
108 | _editingNewStyle : { | ||
109 | value: null | ||
110 | }, | ||
111 | editingNewStyle : { | ||
112 | get: function() { | ||
113 | return this._editingNewStyle; | ||
114 | }, | ||
115 | set: function(value) { | ||
116 | if(this._editingNewStyle === value) { | ||
117 | return false; | ||
118 | } | ||
119 | |||
120 | this._editingNewStyle = value; | ||
121 | this.needsDraw = true; | ||
122 | } | ||
123 | }, | ||
124 | |||
125 | remove : { | ||
126 | value: function() { | ||
127 | var branchController = this.parentComponent.parentComponent.contentController; | ||
128 | |||
129 | ///// Remove style property from declaration | ||
130 | this.treeView.parentComponent.declaration.removeProperty(this.propertyField._preEditValue); | ||
131 | |||
132 | ///// Remove data from branch controller and update UI | ||
133 | branchController.removeObjects(this.sourceObject); | ||
134 | } | ||
135 | }, | ||
136 | |||
137 | getRule : { | ||
138 | value: function() { | ||
139 | //var declarationComponent = this.treeView.parentComponent, | ||
140 | var declarationComponent = this.parentComponent.parentComponent.parentComponent, | ||
141 | rule; | ||
142 | |||
143 | if(declarationComponent.type === 'inline') { | ||
144 | rule = { style : declarationComponent.declaration } | ||
145 | } else { | ||
146 | rule = this.parentComponent.parentComponent.parentComponent.declaration.parentRule; | ||
147 | } | ||
148 | |||
149 | return rule; | ||
150 | } | ||
151 | }, | ||
152 | |||
153 | getSiblingStyle : { | ||
154 | value: function(which) { | ||
155 | var styles = this.parentComponent.childComponents, | ||
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 : { | ||