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