1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | "use strict";
|
8 | var __extends = (this && this.__extends) || (function () {
|
9 | var extendStatics = Object.setPrototypeOf ||
|
10 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
11 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
12 | return function (d, b) {
|
13 | extendStatics(d, b);
|
14 | function __() { this.constructor = d; }
|
15 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
16 | };
|
17 | })();
|
18 | Object.defineProperty(exports, "__esModule", { value: true });
|
19 | var utils_1 = require("../utils");
|
20 | var beanStub_1 = require("../context/beanStub");
|
21 | var compIdSequence = new utils_1.NumberSequence();
|
22 | var Component = (function (_super) {
|
23 | __extends(Component, _super);
|
24 | function Component(template) {
|
25 | var _this = _super.call(this) || this;
|
26 | _this.childComponents = [];
|
27 | _this.annotatedEventListeners = [];
|
28 | _this.visible = true;
|
29 |
|
30 |
|
31 |
|
32 | _this.compId = compIdSequence.next();
|
33 | if (template) {
|
34 | _this.setTemplate(template);
|
35 | }
|
36 | return _this;
|
37 | }
|
38 | Component.prototype.getCompId = function () {
|
39 | return this.compId;
|
40 | };
|
41 | Component.prototype.instantiate = function (context) {
|
42 | this.instantiateRecurse(this.getGui(), context);
|
43 | };
|
44 | Component.prototype.instantiateRecurse = function (parentNode, context) {
|
45 | var _this = this;
|
46 |
|
47 |
|
48 | var childNodeList = utils_1.Utils.copyNodeList(parentNode.childNodes);
|
49 | childNodeList.forEach(function (childNode) {
|
50 | var childComp = context.createComponent(childNode, function (childComp) {
|
51 | var attrList = _this.getAttrLists(childNode);
|
52 | _this.copyAttributesFromNode(attrList, childComp.getGui());
|
53 | _this.createChildAttributes(attrList, childComp);
|
54 | _this.addEventListenersToComponent(attrList, childComp);
|
55 | });
|
56 | if (childComp) {
|
57 | _this.swapComponentForNode(childComp, parentNode, childNode);
|
58 | }
|
59 | else {
|
60 | if (childNode.childNodes) {
|
61 | _this.instantiateRecurse(childNode, context);
|
62 | }
|
63 | if (childNode instanceof HTMLElement) {
|
64 | var attrList = _this.getAttrLists(childNode);
|
65 | _this.addEventListenersToElement(attrList, childNode);
|
66 | }
|
67 | }
|
68 | });
|
69 | };
|
70 | Component.prototype.getAttrLists = function (child) {
|
71 | var res = {
|
72 | bindings: [],
|
73 | events: [],
|
74 | normal: []
|
75 | };
|
76 | utils_1.Utils.iterateNamedNodeMap(child.attributes, function (name, value) {
|
77 | var firstCharacter = name.substr(0, 1);
|
78 | if (firstCharacter === '(') {
|
79 | var eventName = name.replace('(', '').replace(')', '');
|
80 | res.events.push({
|
81 | name: eventName,
|
82 | value: value
|
83 | });
|
84 | }
|
85 | else if (firstCharacter === '[') {
|
86 | var bindingName = name.replace('[', '').replace(']', '');
|
87 | res.bindings.push({
|
88 | name: bindingName,
|
89 | value: value
|
90 | });
|
91 | }
|
92 | else {
|
93 | res.normal.push({
|
94 | name: name,
|
95 | value: value
|
96 | });
|
97 | }
|
98 | });
|
99 | return res;
|
100 | };
|
101 | Component.prototype.addEventListenersToElement = function (attrLists, element) {
|
102 | var _this = this;
|
103 | this.addEventListenerCommon(attrLists, function (eventName, listener) {
|
104 | _this.addDestroyableEventListener(element, eventName, listener);
|
105 | });
|
106 | };
|
107 | Component.prototype.addEventListenersToComponent = function (attrLists, component) {
|
108 | var _this = this;
|
109 | this.addEventListenerCommon(attrLists, function (eventName, listener) {
|
110 | _this.addDestroyableEventListener(component, eventName, listener);
|
111 | });
|
112 | };
|
113 | Component.prototype.addEventListenerCommon = function (attrLists, callback) {
|
114 | var _this = this;
|
115 | var methodAliases = this.getAgComponentMetaData('methods');
|
116 | attrLists.events.forEach(function (nameValue) {
|
117 | var methodName = nameValue.value;
|
118 | var methodAlias = utils_1.Utils.find(methodAliases, 'alias', methodName);
|
119 | var methodNameToUse = utils_1.Utils.exists(methodAlias) ? methodAlias.methodName : methodName;
|
120 | var listener = _this[methodNameToUse];
|
121 | if (typeof listener !== 'function') {
|
122 | console.warn('ag-Grid: count not find callback ' + methodName);
|
123 | return;
|
124 | }
|
125 | var eventCamelCase = utils_1.Utils.hyphenToCamelCase(nameValue.name);
|
126 | callback(eventCamelCase, listener.bind(_this));
|
127 | });
|
128 | };
|
129 | Component.prototype.createChildAttributes = function (attrLists, child) {
|
130 | var _this = this;
|
131 | var childAttributes = {};
|
132 | attrLists.normal.forEach(function (nameValue) {
|
133 | var nameCamelCase = utils_1.Utils.hyphenToCamelCase(nameValue.name);
|
134 | childAttributes[nameCamelCase] = nameValue.value;
|
135 | });
|
136 | attrLists.bindings.forEach(function (nameValue) {
|
137 | var nameCamelCase = utils_1.Utils.hyphenToCamelCase(nameValue.name);
|
138 | childAttributes[nameCamelCase] = _this[nameValue.value];
|
139 | });
|
140 | child.props = childAttributes;
|
141 | };
|
142 | Component.prototype.copyAttributesFromNode = function (attrLists, childNode) {
|
143 | attrLists.normal.forEach(function (nameValue) {
|
144 | childNode.setAttribute(nameValue.name, nameValue.value);
|
145 | });
|
146 | };
|
147 | Component.prototype.swapComponentForNode = function (newComponent, parentNode, childNode) {
|
148 | var eComponent = newComponent.getGui();
|
149 | parentNode.replaceChild(eComponent, childNode);
|
150 | parentNode.insertBefore(document.createComment(childNode.nodeName), eComponent);
|
151 | this.childComponents.push(newComponent);
|
152 | this.swapInComponentForQuerySelectors(newComponent, childNode);
|
153 | };
|
154 | Component.prototype.swapInComponentForQuerySelectors = function (newComponent, childNode) {
|
155 | var thisProto = Object.getPrototypeOf(this);
|
156 | var thisNoType = this;
|
157 | while (thisProto != null) {
|
158 | var metaData = thisProto.__agComponentMetaData;
|
159 | var currentProtoName = (thisProto.constructor).name;
|
160 | if (metaData && metaData[currentProtoName] && metaData[currentProtoName].querySelectors) {
|
161 | metaData[currentProtoName].querySelectors.forEach(function (querySelector) {
|
162 | if (thisNoType[querySelector.attributeName] === childNode) {
|
163 | thisNoType[querySelector.attributeName] = newComponent;
|
164 | }
|
165 | });
|
166 | }
|
167 | thisProto = Object.getPrototypeOf(thisProto);
|
168 | }
|
169 | };
|
170 | Component.prototype.setTemplate = function (template) {
|
171 | var eGui = utils_1.Utils.loadTemplate(template);
|
172 | this.setTemplateFromElement(eGui);
|
173 | };
|
174 | Component.prototype.setTemplateFromElement = function (element) {
|
175 | this.eGui = element;
|
176 | this.eGui.__agComponent = this;
|
177 | this.addAnnotatedEventListeners();
|
178 | this.wireQuerySelectors();
|
179 | };
|
180 | Component.prototype.wireQuerySelectors = function () {
|
181 | var _this = this;
|
182 | if (!this.eGui) {
|
183 | return;
|
184 | }
|
185 | var thisProto = Object.getPrototypeOf(this);
|
186 | var _loop_1 = function () {
|
187 | var metaData = thisProto.__agComponentMetaData;
|
188 | var currentProtoName = (thisProto.constructor).name;
|
189 | if (metaData && metaData[currentProtoName] && metaData[currentProtoName].querySelectors) {
|
190 | var thisNoType_1 = this_1;
|
191 | metaData[currentProtoName].querySelectors.forEach(function (querySelector) {
|
192 | var resultOfQuery = _this.eGui.querySelector(querySelector.querySelector);
|
193 | if (resultOfQuery) {
|
194 | var backingComponent = resultOfQuery.__agComponent;
|
195 | if (backingComponent) {
|
196 | thisNoType_1[querySelector.attributeName] = backingComponent;
|
197 | }
|
198 | else {
|
199 | thisNoType_1[querySelector.attributeName] = resultOfQuery;
|
200 | }
|
201 | }
|
202 | else {
|
203 |
|
204 | }
|
205 | });
|
206 | }
|
207 | thisProto = Object.getPrototypeOf(thisProto);
|
208 | };
|
209 | var this_1 = this;
|
210 | while (thisProto != null) {
|
211 | _loop_1();
|
212 | }
|
213 | };
|
214 | Component.prototype.addAnnotatedEventListeners = function () {
|
215 | var _this = this;
|
216 | this.removeAnnotatedEventListeners();
|
217 | if (!this.eGui) {
|
218 | return;
|
219 | }
|
220 | var listenerMethods = this.getAgComponentMetaData('listenerMethods');
|
221 | if (utils_1.Utils.missingOrEmpty(listenerMethods)) {
|
222 | return;
|
223 | }
|
224 | if (!this.annotatedEventListeners) {
|
225 | this.annotatedEventListeners = [];
|
226 | }
|
227 | listenerMethods.forEach(function (eventListener) {
|
228 | var listener = _this[eventListener.methodName].bind(_this);
|
229 | _this.eGui.addEventListener(eventListener.eventName, listener);
|
230 | _this.annotatedEventListeners.push({ eventName: eventListener.eventName, listener: listener });
|
231 | });
|
232 | };
|
233 | Component.prototype.getAgComponentMetaData = function (key) {
|
234 | var res = [];
|
235 | var thisProto = Object.getPrototypeOf(this);
|
236 | while (thisProto != null) {
|
237 | var metaData = thisProto.__agComponentMetaData;
|
238 | var currentProtoName = (thisProto.constructor).name;
|
239 | if (metaData && metaData[currentProtoName] && metaData[currentProtoName][key]) {
|
240 | res = res.concat(metaData[currentProtoName][key]);
|
241 | }
|
242 | thisProto = Object.getPrototypeOf(thisProto);
|
243 | }
|
244 | return res;
|
245 | };
|
246 | Component.prototype.removeAnnotatedEventListeners = function () {
|
247 | var _this = this;
|
248 | if (!this.annotatedEventListeners) {
|
249 | return;
|
250 | }
|
251 | if (!this.eGui) {
|
252 | return;
|
253 | }
|
254 | this.annotatedEventListeners.forEach(function (eventListener) {
|
255 | _this.eGui.removeEventListener(eventListener.eventName, eventListener.listener);
|
256 | });
|
257 | this.annotatedEventListeners = null;
|
258 | };
|
259 | Component.prototype.getGui = function () {
|
260 | return this.eGui;
|
261 | };
|
262 |
|
263 |
|
264 | Component.prototype.setGui = function (eGui) {
|
265 | this.eGui = eGui;
|
266 | };
|
267 | Component.prototype.queryForHtmlElement = function (cssSelector) {
|
268 | return this.eGui.querySelector(cssSelector);
|
269 | };
|
270 | Component.prototype.queryForHtmlInputElement = function (cssSelector) {
|
271 | return this.eGui.querySelector(cssSelector);
|
272 | };
|
273 | Component.prototype.appendChild = function (newChild) {
|
274 | if (utils_1.Utils.isNodeOrElement(newChild)) {
|
275 | this.eGui.appendChild(newChild);
|
276 | }
|
277 | else {
|
278 | var childComponent = newChild;
|
279 | this.eGui.appendChild(childComponent.getGui());
|
280 | this.childComponents.push(childComponent);
|
281 | }
|
282 | };
|
283 | Component.prototype.addFeature = function (context, feature) {
|
284 | context.wireBean(feature);
|
285 | if (feature.destroy) {
|
286 | this.addDestroyFunc(feature.destroy.bind(feature));
|
287 | }
|
288 | };
|
289 | Component.prototype.isVisible = function () {
|
290 | return this.visible;
|
291 | };
|
292 | Component.prototype.setVisible = function (visible) {
|
293 | if (visible !== this.visible) {
|
294 | this.visible = visible;
|
295 | utils_1.Utils.addOrRemoveCssClass(this.eGui, 'ag-hidden', !visible);
|
296 | var event_1 = {
|
297 | type: Component.EVENT_VISIBLE_CHANGED,
|
298 | visible: this.visible
|
299 | };
|
300 | this.dispatchEvent(event_1);
|
301 | }
|
302 | };
|
303 | Component.prototype.addOrRemoveCssClass = function (className, addOrRemove) {
|
304 | utils_1.Utils.addOrRemoveCssClass(this.eGui, className, addOrRemove);
|
305 | };
|
306 | Component.prototype.destroy = function () {
|
307 | _super.prototype.destroy.call(this);
|
308 | this.childComponents.forEach(function (childComponent) { return childComponent.destroy(); });
|
309 | this.childComponents.length = 0;
|
310 | this.removeAnnotatedEventListeners();
|
311 | };
|
312 | Component.prototype.addGuiEventListener = function (event, listener) {
|
313 | var _this = this;
|
314 | this.getGui().addEventListener(event, listener);
|
315 | this.addDestroyFunc(function () { return _this.getGui().removeEventListener(event, listener); });
|
316 | };
|
317 | Component.prototype.addCssClass = function (className) {
|
318 | utils_1.Utils.addCssClass(this.getGui(), className);
|
319 | };
|
320 | Component.prototype.removeCssClass = function (className) {
|
321 | utils_1.Utils.removeCssClass(this.getGui(), className);
|
322 | };
|
323 | Component.prototype.getAttribute = function (key) {
|
324 | var eGui = this.getGui();
|
325 | if (eGui) {
|
326 | return eGui.getAttribute(key);
|
327 | }
|
328 | else {
|
329 | return null;
|
330 | }
|
331 | };
|
332 | Component.prototype.getRefElement = function (refName) {
|
333 | return this.queryForHtmlElement('[ref="' + refName + '"]');
|
334 | };
|
335 | Component.EVENT_VISIBLE_CHANGED = 'visibleChanged';
|
336 | return Component;
|
337 | }(beanStub_1.BeanStub));
|
338 | exports.Component = Component;
|