aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/css-style.reel/css-style.js
diff options
context:
space:
mode:
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.js416
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
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component;
9
10exports.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
223 function fieldsClicked() {
224 var clicked;
225 if(e._event.detail.originalEventType === 'mousedown') {
226 clicked = e._event.detail.originalEvent.target;
227 return clicked === this.propertyField.element || clicked === this.valueField.element;