aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/style-sheet.reel/style-sheet.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/style-sheet.reel/style-sheet.js')
-rw-r--r--js/panels/css-panel/style-sheet.reel/style-sheet.js267
1 files changed, 267 insertions, 0 deletions
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js
new file mode 100644
index 00000000..cb69d25b
--- /dev/null
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js
@@ -0,0 +1,267 @@
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.StyleSheet = Montage.create(Component, {
11 _translateDistance: {
12 value: null
13 },
14
15 prepareForDraw : {
16 value: function() {
17 this.nameText.element.addEventListener('click', this, false);
18 }
19 },
20
21 willDraw : {
22 value: function() {
23 if(this.editing) {
24 document.body.addEventListener('mousedown', this, false);
25 this._translateDistance = this._element.offsetWidth - this.editButton._element.offsetWidth;
26
27 } else {
28 document.body.removeEventListener('mousedown', this, false);
29 }
30 }
31 },
32 draw : {
33 value: function() {
34 var transStr = '-webkit-transform';
35
36 this.mediaInput.value = this._source.media.mediaText;
37
38 if(this.editing) {
39 this.editView.classList.add('expanded');
40 this.editView.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)');
41 } else {
42 this.editView.classList.remove('expanded');
43 this.editView.style.removeProperty(transStr);
44 }
45
46 if(this.default) {
47 this._element.classList.add('default-style-sheet');
48 } else {
49 this._element.classList.remove('default-style-sheet');
50 }
51
52 if(this.dirty) {
53 this.nameText.element.classList.add('ss-dirty');
54 } else {
55 this.nameText.element.classList.remove('ss-dirty');
56 }
57
58 if(this.disabled) {
59 this.element.classList.add('ss-disabled');
60 } else {
61 this.element.classList.remove('ss-disabled');
62 }
63
64 }
65 },
66
67 /* ------ Events------ */
68
69 handleMousedown : {
70 value: function(e) {
71 var nonBlurringElements = [
72 this.editView,
73 this.deleteButton.element,
74 this.disableButton.element];
75
76 if(nonBlurringElements.indexOf(e.target) === -1) {
77 this.editing = false;
78 }
79 }
80 },
81
82 handleClick : {
83 value: function(e) {
84 this.parentComponent.parentComponent.defaultStyleSheet = this.source;
85 }
86 },
87
88 handleEditButtonAction: {
89 value: function(e) {
90 this.editing = true;
91 }
92 },
93
94 handleImportButtonAction: {
95 value: function(e) {
96 e.stopPropagation();
97 }
98 },
99
100 handleDisableButtonAction: {
101 value: function(e) {
102 e.stopPropagation();
103 this.disabled = !this.disabled;
104 }
105 },
106
107 handleDeleteButtonAction : {
108 value: function(e) {
109 e.stopPropagation();
110 this.parentComponent.parentComponent.handleDeleteAction(this);
111 }
112 },
113
114 /* ------ State properties ------ */
115
116 _editing : {
117 value: null
118 },
119 editing : {
120 get: function() {
121 return this._editing;
122 },
123 set: function(enterEditingMode) {
124 this._editing = enterEditingMode;
125 this.needsDraw = true;
126 }
127 },
128
129 _name: {
130 value: "Style Tag",
131 distinct: true
132 },
133 name : {
134 get: function() {
135 return this._name;
136 },
137 set: function(text) {
138 this._name = text;
139 }
140 },
141 _dirty : {
142 value: null
143 },
144 dirty : {
145 get: function() {
146 return this._dirty;
147 },
148 set: function(value) {
149 if(value === this._dirty) { return false; }
150
151 this._dirty = value;
152 this.needsDraw = true;
153 }
154 },
155
156 _readOnly : { value: null },
157 readOnly : {
158 get: function() {
159 return this._readOnly;
160 },
161 set: function(isReadOnly) {
162 this._readOnly = isReadOnly;
163 this.needsDraw = true;
164 }
165 },
166
167 _default : { value: null },
168 default : {
169 get: function() {
170 return this._default;
171 },
172 set: function(value) {
173 this._default = value;
174 this.needsDraw = true;
175 }
176 },
177
178 _disabled : {
179 value: null
180 },
181 disabled: {
182 get: function() {
183 return this._disabled;
184 },
185 set: function(disable) {
186 var label = (disable) ? "Enable" : "Disable";
187 this._source.ownerNode.disabled = disable;
188 this.disableButton.label = label;
189
190 this._disabled = disable;
191 this.needsDraw = true;
192 }
193 },
194
195 external : {
196 value: null
197 },
198
199 _source : {
200 value: null
201 },
202 source : {
203 get: function() {
204 return this._source;
205 },
206 set: function(sheet) {
207 if(!sheet || sheet === this._source) { return; }
208
209 this._extractData(sheet.ownerNode);
210 this._source = sheet;
211 }
212 },
213
214 _extractData : {
215 value: function(sheetNode) {
216 var data = sheetNode.dataset, key;
217
218 for(key in data) {
219 this[key] = data[key];
220 }
221 }
222 },
223
224 /* ------ Data Attribute Properties ------ */
225
226