diff options
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.js | 262 |
1 files changed, 262 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..7afe977f --- /dev/null +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js | |||
@@ -0,0 +1,262 @@ | |||
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.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 | } | ||
59 | }, | ||
60 | |||
61 | /* ------ Events------ */ | ||
62 | |||
63 | handleMousedown : { | ||
64 | value: function(e) { | ||
65 | var nonBlurringElements = [ | ||
66 | this.editView, | ||
67 | this.deleteButton.element, | ||
68 | this.disableButton.element]; | ||
69 | |||
70 | if(nonBlurringElements.indexOf(e.target) === -1) { | ||
71 | this.editing = false; | ||
72 | } | ||
73 | } | ||
74 | }, | ||
75 | |||
76 | handleClick : { | ||
77 | value: function(e) { | ||
78 | this.parentComponent.parentComponent.defaultStyleSheet = this.source; | ||
79 | } | ||
80 | }, | ||
81 | |||
82 | handleEditButtonAction: { | ||
83 | value: function(e) { | ||
84 | this.editing = true; | ||
85 | } | ||
86 | }, | ||
87 | |||
88 | handleImportButtonAction: { | ||
89 | value: function(e) { | ||
90 | e.stopPropagation(); | ||
91 | } | ||
92 | }, | ||
93 | |||
94 | handleDisableButtonAction: { | ||
95 | value: function(e) { | ||
96 | e.stopPropagation(); | ||
97 | this.disabled = !this.disabled; | ||
98 | } | ||
99 | }, | ||
100 | |||
101 | handleDeleteButtonAction : { | ||
102 | value: function(e) { | ||
103 | e.stopPropagation(); | ||
104 | this.parentComponent.parentComponent.handleDeleteAction(this); | ||
105 | } | ||
106 | }, | ||
107 | |||
108 | /* ------ State properties ------ */ | ||
109 | |||
110 | _editing : { | ||
111 | value: null | ||
112 | }, | ||
113 | editing : { | ||
114 | get: function() { | ||
115 | return this._editing; | ||
116 | }, | ||
117 | set: function(enterEditingMode) { | ||
118 | this._editing = enterEditingMode; | ||
119 | this.needsDraw = true; | ||
120 | } | ||
121 | }, | ||
122 | |||
123 | _name: { | ||
124 | value: "Style Tag", | ||
125 | distinct: true | ||
126 | }, | ||
127 | name : { | ||
128 | get: function() { | ||
129 | return this._name; | ||
130 | }, | ||
131 | set: function(text) { | ||
132 | this._name = text; | ||
133 | } | ||
134 | }, | ||
135 | _dirty : { | ||
136 | value: null | ||
137 | }, | ||
138 | dirty : { | ||
139 | get: function() { | ||
140 | return this._dirty; | ||
141 | }, | ||
142 | set: function(value) { | ||
143 | if(value === this._dirty) { return false; } | ||
144 | |||
145 | this._dirty = value; | ||
146 | this.needsDraw = true; | ||
147 | } | ||
148 | }, | ||
149 | |||
150 | _readOnly : { value: null }, | ||
151 | readOnly : { | ||
152 | get: function() { | ||
153 | return this._readOnly; | ||
154 | }, | ||
155 | set: function(isReadOnly) { | ||
156 | this._readOnly = isReadOnly; | ||
157 | this.needsDraw = true; | ||
158 | } | ||
159 | }, | ||
160 | |||
161 | _default : { value: null }, | ||
162 | default : { | ||
163 | get: function() { | ||
164 | return this._default; | ||
165 | }, | ||
166 | set: function(value) { | ||
167 | this._default = value; | ||
168 | this.needsDraw = true; | ||
169 | } | ||
170 | }, | ||
171 | |||
172 | _disabled : { | ||
173 | value: null | ||
174 | }, | ||
175 | disabled: { | ||
176 | get: function() { | ||
177 | return this._disabled; | ||
178 | }, | ||
179 | set: function(disable) { | ||
180 | var label = (disable) ? "Enable" : "Disable"; | ||
181 | this._source.ownerNode.disabled = disable; | ||
182 | this.disableButton.label = label; | ||
183 | |||
184 | this._disabled = disable; | ||
185 | } | ||
186 | }, | ||
187 | |||
188 | external : { | ||
189 | value: null | ||
190 | }, | ||
191 | |||
192 | _source : { | ||
193 | value: null | ||
194 | }, | ||
195 | source : { | ||
196 | get: function() { | ||
197 | return this._source; | ||
198 | }, | ||
199 | set: function(sheet) { | ||
200 | if(!sheet || sheet === this._source) { return; } | ||
201 | |||
202 | console.log('sheet being set: ', this); | ||
203 | |||
204 | this._extractData(sheet.ownerNode); | ||
205 | this._source = sheet; | ||
206 | } | ||
207 | }, | ||
208 | |||
209 | _extractData : { | ||
210 | value: function(sheetNode) { | ||
211 | var data = sheetNode.dataset, key; | ||
212 | |||
213 | for(key in data) { | ||
214 | this[key] = data[key]; | ||
215 | } | ||
216 | } | ||
217 | }, | ||
218 | |||
219 | /* ------ Data Attribute Properties ------ */ | ||
220 | |||
221 | _ninjaExternalUrl: { value: null }, | ||
222 | ninjaExternalUrl : { | ||
223 | get: function() { return this._ninjaExternalUrl; }, | ||
224 | set: function(url) { | ||
225 | this.external = true; | ||
226 | this._ninjaExternalUrl = url; | ||
227 |