diff options
Diffstat (limited to 'js/panels/css-panel/styles-view-container.reel/styles-view-container.js')
-rw-r--r-- | js/panels/css-panel/styles-view-container.reel/styles-view-container.js | 186 |
1 files changed, 186 insertions, 0 deletions
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js new file mode 100644 index 00000000..3f0cd47e --- /dev/null +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js | |||
@@ -0,0 +1,186 @@ | |||
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.StylesViewContainer = Montage.create(Component, { | ||
11 | contentController : { | ||
12 | value: null | ||
13 | }, | ||
14 | contentPanel : { | ||
15 | value: 'rules' | ||
16 | }, | ||
17 | _selectionNameLabelText : { | ||
18 | value: null | ||
19 | }, | ||
20 | selectionNameLabelText : { | ||
21 | get: function() { | ||
22 | return this._selectionNameLabelText; | ||
23 | }, | ||
24 | set: function(value) { | ||
25 | if(value === this._selectionNameLabelText) { return false; } | ||
26 | |||
27 | this._selectionNameLabelText = value; | ||
28 | |||
29 | this.needsDraw = true; | ||
30 | } | ||
31 | }, | ||
32 | _lastSelection : { | ||
33 | value: null | ||
34 | }, | ||
35 | _hasStyles : { | ||
36 | value: false | ||
37 | }, | ||
38 | hasStyles : { | ||
39 | get: function() { | ||
40 | return this._hasStyles; | ||
41 | }, | ||
42 | set: function(hasThem) { | ||
43 | this._hasStyles = hasThem; | ||
44 | //caller needs to set ndt | ||
45 | //this.needsDraw = true; | ||
46 | } | ||
47 | }, | ||
48 | |||
49 | _getElementLabel : { | ||
50 | value: function(el) { | ||
51 | var id = '#'+el.id, | ||
52 | className = '.'+Array.prototype.slice.call(el.classList).join('.'), | ||
53 | nodeName = el.nodeName; | ||
54 | |||
55 | if(id.length > 1) { | ||
56 | return nodeName + id; | ||
57 | } else if(className.length > 1) { | ||
58 | return nodeName + className; | ||
59 | } | ||
60 | |||
61 | return nodeName; | ||
62 | } | ||
63 | }, | ||
64 | |||
65 | templateDidLoad : { | ||
66 | value: function() { | ||
67 | this.eventManager.addEventListener('styleSheetsReady', this, false); | ||
68 | //this.eventManager.addEventListener('elementChanging', this, false); | ||
69 | this.eventManager.addEventListener('elementChange', this, false); | ||
70 | this.eventManager.addEventListener("closeDocument", this, false); | ||
71 | } | ||
72 | }, | ||
73 | handleStyleSheetsReady: { | ||
74 | value: function(e) { | ||
75 | this.eventManager.addEventListener( "selectionChange", this, false); | ||
76 | } | ||
77 | }, | ||
78 | handleSelectionChange: { | ||
79 | value: function() { | ||
80 | var elements = this.application.ninja.selectedElements; | ||
81 | |||
82 | if(this._isSameArray(elements, this._lastSelection) && this.contentPanel === "rules") { | ||
83 | console.log('new selection is identical'); | ||
84 | return false; | ||
85 | } | ||
86 | |||
87 | this._lastSelection = elements; | ||
88 | |||
89 | if(elements.length === 0) { | ||
90 | this.hasStyles = false; | ||
91 | this.needsDraw = true; | ||
92 | return false; | ||
93 | } else if(elements.length === 1) { | ||
94 | |||
95 | ///// update the selection status label with the label of the element | ||
96 | this.selectionNameLabelText = this._getElementLabel(elements[0]); | ||
97 | |||
98 | if(this.contentPanel === "rules") { | ||
99 | this.ruleListContainer.displayListForSelection(elements); | ||
100 | } else { | ||
101 | this.computedStyleView.declaration = elements[0]; | ||
102 | } | ||
103 | this.toolbar.showButton('computed'); | ||
104 | } else { | ||
105 | this.toolbar.hideButton('computed'); | ||
106 | this.contentPanel = "rules"; | ||
107 | this.selectionNameLabelText = elements.length + " elements selected."; | ||
108 | ///// find common rules | ||
109 | this.ruleListContainer.displayListForSelection(elements); | ||
110 | |||
111 | } | ||
112 | |||
113 | this.hasStyles = true; | ||
114 | } | ||
115 | }, | ||
116 | handleElementChange : { | ||
117 | value: function(e) { | ||
118 | var elements = this.application.ninja.selectedElements; | ||
119 | |||
120 | if(elements.length === 0) { | ||
121 | return false; | ||
122 | } else if(elements.length === 1) { | ||
123 | if(this.contentPanel === "rules") { | ||
124 | if(e._event.detail.type !== 'cssChange') { | ||
125 | this.ruleListContainer.update(); | ||
126 | } | ||
127 | } else { | ||
128 | this.computedStyleView.declaration = elements[0]; | ||
129 | } | ||
130 | } else { | ||
131 | return false; | ||
132 | } | ||
133 | |||
134 | } | ||
135 | }, | ||
136 | |||
137 | handleElementChanging : { | ||
138 | value: function(e) { | ||
139 | var elements = this.application.ninja.selectedElements; | ||
140 | |||
141 | if(elements.length === 1) { | ||
142 | if(this.contentPanel === "rules") { | ||
143 | // if(e._event.detail.type !== 'cssChange') { | ||
144 | // this.ruleListContainer.displayedList.component.update(); | ||
145 | // } | ||
146 | } else { | ||
147 | this.computedStyleView.declaration = elements[0]; | ||
148 | } | ||
149 | } | ||
150 | |||
151 | return false; | ||
152 | |||
153 | } | ||
154 | }, | ||
155 | handleCloseDocument: { | ||
156 | value: function(e) { | ||
157 | this.hasStyles = false; | ||
158 | this.needsDraw = true; | ||
159 | } | ||
160 | }, | ||
161 | |||
162 | draw : { | ||
163 | value: function() { | ||
164 | if(this.hasStyles) { | ||
165 | this.element.classList.remove('no-styles'); | ||
166 | //this.selectionNameLabel.classList.remove('no-styles'); | ||
167 | this.selectionName.element.classList.remove('no-styles'); | ||
168 | } else { | ||
169 | this.element.classList.add('no-styles'); | ||
170 | //this.selectionNameLabel.classList.add('no-styles'); | ||
171 | this.selectionName.element.classList.add('no-styles'); | ||
172 | } | ||
173 | } | ||
174 | }, | ||
175 | |||
176 | _isSameArray : { | ||
177 | value: function(left, right) { | ||
178 | if(!left || !right) { return false; } | ||
179 | if(left.length !== right.length) { return false; } | ||
180 | |||
181 | return left.every(function(item, i) { | ||
182 | return item === right[i]; | ||
183 | }); | ||
184 | } | ||
185 | } | ||
186 | }); \ No newline at end of file | ||