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 | 178 |
1 files changed, 178 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..b2d2c0fb --- /dev/null +++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js | |||
@@ -0,0 +1,178 @@ | |||
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 | var sheetComponent, oldDefaultSheet; | ||
41 | |||
42 | if(this.styleSheetList) { | ||
43 | sheetComponent = this.styleSheetList.childComponents[this.styleSheets.indexOf(sheet)]; | ||
44 | sheetComponent.default = true; | ||
45 | if(this._defaultStyleSheet) { | ||
46 | oldDefaultSheet = this.styleSheetList.childComponents[this.styleSheets.indexOf(this._defaultStyleSheet)]; | ||
47 | oldDefaultSheet.default = false; | ||
48 | } | ||
49 | } | ||
50 | |||
51 | this._defaultStyleSheet = sheet; | ||
52 | this.needsDraw = true; | ||
53 | } | ||
54 | }, | ||
55 | |||
56 | /// Toolbar Button Actions | ||
57 | /// -------------------------------- | ||
58 | |||
59 | ///// Add rule button action | ||
60 | handleAddAction : { | ||
61 | value: function(e) { | ||
62 | this.stylesController.createStylesheet(); | ||
63 | this.needsDraw = this._needsScroll = true; | ||
64 | |||
65 | } | ||
66 | }, | ||
67 | |||
68 | /// App event handlers | ||
69 | /// -------------------------------- | ||
70 | |||
71 | handleStyleSheetsReady : { | ||
72 | value: function(e) { | ||
73 | this.documentName = this.stylesController.activeDocument.name; | ||
74 | this.styleSheets = this.stylesController.userStyleSheets; | ||
75 | |||
76 | Object.defineBinding(this, 'defaultStyleSheet', { | ||
77 | 'boundObject': this.stylesController, | ||
78 | 'boundObjectPropertyPath': 'defaultStylesheet', | ||
79 | 'oneway': false | ||
80 | }); | ||
81 | |||
82 | this._initView = this.needsDraw = true; | ||
83 | } | ||
84 | }, | ||
85 | |||
86 | /// Draw cycle | ||
87 | /// -------------------------------- | ||
88 | |||
89 | templateDidLoad : { | ||
90 | value: function() { | ||
91 | this.stylesController = this.application.ninja.stylesController; | ||
92 | } | ||
93 | }, | ||
94 | prepareForDraw : { | ||
95 | value: function() { | ||
96 | this.eventManager.addEventListener("styleSheetsReady", this, false); | ||
97 | } | ||
98 | }, | ||
99 | draw : { | ||
100 | value: function() { | ||
101 | if(this._initView) { | ||
102 | this.noDocumentCondition = false; | ||
103 | this.showToolbar = true; | ||
104 | this._initView = false; | ||
105 | } | ||
106 | |||
107 | if(this.height) { | ||
108 | this.styleSheetList.element.style.height = (this.height + this._resizedHeight) + "px"; | ||
109 | } | ||
110 | |||
111 | if(this.documentName && this.documentNameLabel) { | ||
112 | this.documentNameLabel.innerHTML = this.documentName; | ||
113 | this.documentNameLabel.classList.remove(this.noDocumentLabelClass); | ||
114 | } else { | ||
115 | this.documentNameLabel.classList.add(this.noDocumentLabelClass); | ||
116 | } | ||
117 | |||
118 | if(this._needsScroll) { | ||
119 | |||
120 | setTimeout(function() { | ||
121 | console.log('setting scroll top to:', this.styleSheetList.element.scrollHeight); | ||
122 | //debugger; | ||
123 | this.styleSheetList.element.scrollTop = this.styleSheetList.element.scrollHeight; | ||
124 | }.bind(this), 50); | ||
125 | |||
126 | this._needsScroll = false; | ||
127 | } | ||
128 | } | ||
129 | }, | ||
130 | didDraw: { | ||
131 | value: function() { | ||
132 | if(!this.isResizing) { | ||
133 | this.height = this.styleSheetList.element.offsetHeight; | ||
134 | } | ||
135 | } | ||
136 | }, | ||
137 | |||
138 | |||
139 | /// Resize properties | ||
140 | /// -------------------------------- | ||
141 | |||
142 | _resizedHeight : { value: null }, | ||
143 | isResizing : { value: null }, | ||
144 | _height : { value: null }, | ||
145 | height: { | ||
146 | get: function() { | ||
147 | return this._height; | ||
148 | }, | ||
149 | set: function(val) { | ||
150 | if(this._height !== val) { | ||
151 | this._height = val; | ||
152 | this.needsDraw = true; | ||
153 | } | ||
154 | } | ||
155 | }, | ||
156 | handleResizeStart: { | ||
157 | value:function(e) { | ||
158 | this.isResizing = true; | ||
159 | this.needsDraw = true; | ||
160 | } | ||
161 | }, | ||
162 | |||
163 | handleResizeMove: { | ||
164 | value:function(e) { | ||
165 | this._resizedHeight = e._event.dY; | ||
166 | this.needsDraw = true; | ||
167 | } | ||
168 | }, | ||
169 | |||
170 | handleResizeEnd: { | ||
171 | value: function(e) { | ||
172 | this.height += this._resizedHeight; | ||
173 | this._resizedHeight = 0; | ||
174 | this.isResizing = false; | ||
175 | this.needsDraw = true; | ||
176 | } | ||
177 | }, | ||
178 | }); \ No newline at end of file | ||