diff options
author | Valerio Virgillito | 2012-05-22 22:36:19 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-05-22 22:36:19 -0700 |
commit | 816d52e94424a84dab7ac44ab953624a245be30f (patch) | |
tree | de7c7d78929e780c2edeb2d302b9b8422c26b3ff /js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js | |
parent | a341522e3603c18ab3b93defa894e3be702dd0f4 (diff) | |
parent | a00e1f30c3da3053574c982ddfacca12e32c12b2 (diff) | |
download | ninja-816d52e94424a84dab7ac44ab953624a245be30f.tar.gz |
Merge pull request #251 from ericguzman/CSSPanelUpdates
Css panel updates
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 | 270 |
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 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | Component = require("montage/ui/component").Component; | ||
9 | |||
10 | exports.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() { | ||
< |