aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js')
-rw-r--r--js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js270
1 files changed, 270 insertions, 0 deletions
diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
new file mode 100644
index 00000000..5081a124
--- /dev/null
+++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
@@ -0,0 +1,270 @@
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.StyleSheetsView = Montage.create(Component, {
11 documentLoaded : { value: false },
12 showToolbar : { value: false },
13 stylesController : { value: null },
14 styleSheets : { value: [] },
15 _initView : { value: false },
16 _needsScroll : { value: false },
17 documentNameLabel : { value: null },
18 noDocumentLabelClass : { value: "no-document" },
19
20 _activeDocument: {
21 value: null
22 },
23 activeDocument : {
24 get: function() {
25 return this._activeDocument;
26 },
27 set: function(value) {
28 if(value === this._activeDocument) { return;}
29
30 this.documentLoaded = !!value;
31
32 this._activeDocument = value;
33 }
34 },
35
36 _documentName : { value: null },
37 documentName : {
38 get: function() {
39 return this._documentName;
40 },
41 set: function(label) {
42 if(label === this._documentName) { return false; }
43
44 this._documentName = label;
45 this.needsDraw = true;
46 }
47 },
48 _defaultStyleSheet: { value: null },
49 defaultStyleSheet: {
50 get: function() {
51 return this._defaultStyleSheet;
52 },
53 set: function(sheet) {
54 if(sheet === this._defaultStyleSheet) { return false; }
55
56 if(sheet === null) {
57 this._defaultStyleSheet = null;
58 return;
59 }
60
61 var sheetComponent, oldDefaultSheet;
62
63 if(this.styleSheetList) {
64 sheetComponent = this.styleSheetList.childComponents[this.styleSheets.indexOf(sheet)];
65 if(sheetComponent) {
66 sheetComponent.default = true;
67 if(this._defaultStyleSheet) {
68 oldDefaultSheet = this.styleSheetList.childComponents[this.styleSheets.indexOf(this._defaultStyleSheet)];
69 oldDefaultSheet.default = false;
70 }
71 }
72 }
73
74 this._defaultStyleSheet = sheet;
75 this.needsDraw = true;
76 }
77 },
78
79 _dirtyStyleSheets : { value: null },
80 dirtyStyleSheets : {
81 get: function() {
82 return this._dirtyStyleSheets;
83 },
84 set: function(value) {
85 if(value === this._dirtyStyleSheets) { return false; }
86
87 this._dirtyStyleSheets = value;
88
89 this.needsDraw = true;
90 }
91 },
92
93 /// Toolbar Button Actions
94 /// --------------------------------
95
96 ///// Add rule button action
97 handleAddAction : {
98 value: function(e) {
99 this.stylesController.createStylesheet();
100 this.needsDraw = this._needsScroll = true;
101
102 }
103 },
104
105 handleDeleteAction : {
106 value: function(sheetComponent) {
107 this.stylesController.removeStyleSheet(sheetComponent.source);
108 this.stylesController._clearCache();
109 this._dispatchChange();
110 }
111 },
112
113 /// App event handlers
114 /// --------------------------------
115
116 handleStyleSheetsReady : {
117 value: function(e) {
118 this.documentName = this.stylesController.activeDocument.name;
119 this.styleSheets = this.stylesController.userStyleSheets;
120
121 Object.defineBinding(this, 'activeDocument', {
122 'boundObject': this.stylesController,
123 'boundObjectPropertyPath': 'activeDocument',
124 'oneway': true
125 });
126
127 Object.defineBinding(this, 'defaultStyleSheet', {
128 'boundObject': this.stylesController,
129 'boundObjectPropertyPath': 'defaultStylesheet',
130 'oneway': false
131 });
132
133 Object.defineBinding(this, 'dirtyStyleSheets', {
134 'boundObject': this.stylesController,
135 'boundObjectPropertyPath': 'dirtyStyleSheets',
136 'oneway': true
137 });
138
139 this._initView = this.needsDraw = true;
140 }
141 },
142
143 handleStyleSheetModified : {
144 value: function(e) {
145 this.needsDraw = true;
146 }
147 },
148
149 /// Draw cycle
150 /// --------------------------------
151
152 templateDidLoad : {
153 value: function() {
154 this.stylesController = this.application.ninja.stylesController;
155 }
156 },
157 prepareForDraw : {
158 value: function() {
159 this.eventManager.addEventListener("styleSheetsReady", this, false);
160 this.eventManager.addEventListener("styleSheetModified", this, false);
161 }
162 },
163 draw : {
164 value: function() {
165 if(this._initView) {
166 this.noDocumentCondition = false;
167 this.showToolbar = true;
168 this._initView = false;
169 }
170
171 if(this.height) {
172 this.styleSheetList.element.style.height = (this.height + this._resizedHeight) + "px";
173 }
174
175 if(this.documentName && this.documentNameLabel) {
176 this.documentNameLabel.innerHTML = this.documentName;
177 this.documentNameLabel.classList.remove(this.noDocumentLabelClass);
178 } else {
179 this.documentNameLabel.classList.add(this.noDocumentLabelClass);
180 }
181
182 if(this.dirtyStyleSheets) {
183 var dirtySheets = this.dirtyStyleSheets.map(function(sheetDescriptor) {
184 return sheetDescriptor.stylesheet;
185 });
186
187 this.styleSheetList.childComponents.forEach(function(sheetComponent) {
188 sheetComponent.dirty = dirtySheets.indexOf(sheetComponent.source) !== -1;
189 }, this);
190 }
191
192 if(this._needsScroll) {
193
194 setTimeout(function() {
195 console.log('setting scroll top to:', this.styleSheetList.element.scrollHeight);
196 //debugger;
197 this.styleSheetList.element.scrollTop = this.styleSheetList.element.scrollHeight;
198 }.bind(this), 50);
199
200 this._needsScroll = false;
201 }
202 }
203 },
204 didDraw: {
205 value: function() {
206 if(!this.isResizing) {
207 this.height = this.styleSheetList.element.offsetHeight;
208 }
209 }