diff options
author | Valerio Virgillito | 2012-05-22 22:36:19 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-05-22 22:36:19 -0700 |
commit | 816d52e94424a84dab7ac44ab953624a245be30f (patch) | |
tree | de7c7d78929e780c2edeb2d302b9b8422c26b3ff /js/panels/css-panel/css-style.reel/css-style.js | |
parent | a341522e3603c18ab3b93defa894e3be702dd0f4 (diff) | |
parent | a00e1f30c3da3053574c982ddfacca12e32c12b2 (diff) | |
download | ninja-816d52e94424a84dab7ac44ab953624a245be30f.tar.gz |
Merge pull request #251 from ericguzman/CSSPanelUpdates
Css panel updates
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 | 416 |
1 files changed, 416 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..84841f5b --- /dev/null +++ b/js/panels/css-panel/css-style.reel/css-style.js | |||
@@ -0,0 +1,416 @@ | |||
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 | source : { value: null }, | ||
18 | units : { value: null }, | ||
19 | |||
20 | propertyText : { | ||
21 | value: "property", | ||
22 | distinct: true | ||
23 | }, | ||
24 | |||
25 | _valueText : { | ||
26 | value: "value", | ||
27 | distinct: true | ||
28 | }, | ||
29 | valueText : { | ||
30 | get: function() { | ||
31 | return this._valueText; | ||
32 | }, | ||
33 | set: function(text) { | ||
34 | /// TODO: Figure out why montage is trying to set this to undefined | ||
35 | /// TODO: when the style object is removed from the repetition | ||
36 | if(text === null || text === undefined) { return; } | ||
37 | |||
38 | this._valueText = this.browserValue = text; | ||
39 | this.units = this.getUnits(text); | ||
40 | } | ||
41 | }, | ||
42 | browserValue: { | ||
43 | value: null | ||
44 | }, | ||
45 | _priority: { value: "", distinct: true }, | ||
46 | priority: { | ||
47 | get: function() { | ||
48 | return this._priority; | ||
49 | }, | ||
50 | set: function(value) { | ||
51 | this._priority = value; | ||
52 | } | ||
53 | }, | ||
54 | |||
55 | getUnits : { | ||
56 | value: function(val) { | ||
57 | if(val.split(/\s/).length > 1) { | ||
58 | return false; | ||
59 | } else if(/(px|em|pt|in|cm|mm|ex|pc|%)$/.test(val)) { | ||
60 | return val.replace(/^.*(px|em|pt|in|cm|mm|ex|pc|%).*/, '$1'); | ||
61 | } | ||
62 | return null; | ||
63 | } | ||
64 | }, | ||
65 | |||
66 | _enabled : { value: true, distinct: true }, | ||
67 | enabled : { | ||
68 | get: function() { | ||
69 | return this._enabled; | ||
70 | }, | ||
71 | set: function(value) { | ||
72 | this._enabled = value; | ||
73 | this.delegate.handleStyleToggle(this.getRule(), this._enabled, this); | ||
74 | this.needsDraw = true; | ||
75 | } | ||
76 | }, | ||
77 | |||
78 | _empty : { value: null }, | ||
79 | empty : { | ||
80 | get: function() { | ||
81 | return this._empty; | ||
82 | }, | ||
83 | set: function(isEmpty) { | ||
84 | if(this._empty === isEmpty) { return false; } | ||
85 | this._empty = isEmpty; | ||
86 | this.needsDraw = true; | ||
87 | } | ||
88 | }, | ||
89 | |||
90 | dirty : { | ||
91 | get: function() { | ||
92 | return this.propertyField.isDirty || this.valueField.isDirty; | ||
93 | }, | ||
94 | set: function(value) { | ||
95 | return false; | ||
96 | } | ||
97 | }, | ||
98 | |||
99 | _invalid: { value: null }, | ||
100 | invalid : { | ||
101 | get: function() { return this._invalid; }, | ||
102 | set: function(value) { | ||
103 | this._invalid = value; | ||
104 | this.needsDraw = true; | ||
105 | } | ||
106 | }, | ||
107 | |||
108 | _editing : { value : null }, | ||
109 | editing : { | ||
110 | get: function() { | ||
111 | return this._editing; | ||
112 | }, | ||
113 | set: function(value) { | ||
114 | if(this._editing === value) { return false; } | ||
115 | |||
116 | this._editing = value; | ||
117 | this.needsDraw = true; | ||
118 | } | ||
119 | }, | ||
120 | |||
121 | _editingNewStyle : { | ||
122 | value: null | ||
123 | }, | ||
124 | editingNewStyle : { | ||
125 | get: function() { | ||
126 | return this._editingNewStyle; | ||
127 | }, | ||
128 | set: function(value) { | ||
129 | if(this._editingNewStyle === value) { | ||
130 | return false; | ||
131 | } | ||
132 | |||
133 | this._editingNewStyle = value; | ||
134 | this.needsDraw = true; | ||
135 | } | ||
136 | }, | ||
137 | |||
138 | remove : { | ||
139 | value: function() { | ||
140 | var branchController = this.parentComponent.parentComponent.contentController; | ||
141 | |||
142 | ///// Remove style property from declaration | ||
143 | this.treeView.parentComponent.declaration.removeProperty(this.propertyField._preEditValue); | ||
144 | |||
145 | ///// Remove data from branch controller and update UI | ||
146 | branchController.removeObjects(this.sourceObject); | ||
147 | } | ||
148 | }, | ||
149 | |||
150 | getRule : { | ||
151 | value: function() { | ||
152 | var declarationComponent = this.parentComponent.parentComponent.parentComponent | ||
153 | return declarationComponent.rule; | ||
154 | } | ||
155 | }, | ||
156 | |||
157 | getSiblingStyle : { | ||
158 | value: function(which) { | ||
159 | var styles = this.parentComponent.childComponents, | ||
160 | index = styles.indexOf(this); | ||
161 | |||
162 | switch (which) { | ||
163 | case "first": | ||
164 | return styles[0]; | ||
165 | case "last": | ||
166 | return styles[styles.length-1]; | ||
167 | case "next": | ||
168 | return (index+1 < styles.length) ? styles[index+1] : null; | ||
169 | case "prev": | ||
170 | return (index-1 >= 0) ? styles[index-1] : null; | ||
171 | } | ||
172 | } | ||
173 | }, | ||
174 | |||
175 | handleDragstart : { | ||
176 | value: function(e) { | ||
177 | e.dataTransfer.effectAllowed = 'move'; | ||
178 | e.dataTransfer.setData('Text', 'my styles, baby!'); | ||
179 | this.element.classList.add("dragged"); | ||
180 | } | ||
181 | }, | ||
182 | |||
183 | handleDragend : { | ||
184 | value: function(e) { | ||
185 | this.element.classList.remove("dragging"); | ||
186 | this.element.classList.remove("dragged"); | ||
187 | } | ||
188 | }, | ||
189 | handleDrag : { | ||
190 | value: function(e) { | ||
191 | this.element.classList.add("dragging"); | ||
192 | } | ||
193 | }, | ||
194 | handleDrop : { | ||
195 | value: function(e) { | ||
196 | this.element.classList.remove("drag-enter"); | ||
197 | } | ||
198 | }, | ||
199 | |||
200 | handleClick : { | ||
201 | value: function(e) { | ||
202 | this.buttonClicked = true; | ||
203 | this.propertyField.start(); | ||
204 | } | ||
205 | }, | ||
206 | |||
207 | handleStart : { | ||
208 | value: function(e) { | ||
209 | this.editing = true; | ||
210 | |||
211 | if(this.empty) { | ||
212 | this.editingNewStyle = true; | ||
213 | } | ||
214 | } | ||
215 | }, | ||
216 | |||
217 | //// Handler for both hintable components | ||
218 | handlePropertyStop : { | ||
219 | value: function(e) { | ||
220 | var event = e; | ||
221 | ///// Function to determine if an empty (new) style should return | ||
222 | ///// to showing the add button, i.e. the fields were not clicked | ||