1 | import { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';
|
2 | import { CustomEvent } from './custom-event-polyfill';
|
3 | var MaterializeDirective = (function () {
|
4 | |
5 |
|
6 |
|
7 | function MaterializeDirective(_el) {
|
8 | this._el = _el;
|
9 | this._params = null;
|
10 | this._functionName = null;
|
11 | this.previousValue = null;
|
12 | this.previousDisabled = false;
|
13 | this._waitFunction = {};
|
14 | this.changeListenerShouldBeAdded = true;
|
15 | this.init = new EventEmitter();
|
16 | this.initialized = false;
|
17 | }
|
18 | Object.defineProperty(MaterializeDirective.prototype, "materializeParams", {
|
19 | |
20 |
|
21 |
|
22 |
|
23 | set: function (params) {
|
24 | this._params = params;
|
25 | this.performElementUpdates();
|
26 | },
|
27 | enumerable: true,
|
28 | configurable: true
|
29 | });
|
30 | Object.defineProperty(MaterializeDirective.prototype, "materializeActions", {
|
31 | |
32 |
|
33 |
|
34 |
|
35 | set: function (actions) {
|
36 | var _this = this;
|
37 | actions.subscribe(function (action) {
|
38 | window.setTimeout(function () {
|
39 | if (typeof action === "string") {
|
40 | _this.performLocalElementUpdates(action);
|
41 | }
|
42 | else {
|
43 | _this.performLocalElementUpdates(action.action, action.params);
|
44 | }
|
45 | }, 1);
|
46 | });
|
47 | },
|
48 | enumerable: true,
|
49 | configurable: true
|
50 | });
|
51 | Object.defineProperty(MaterializeDirective.prototype, "materialize", {
|
52 | |
53 |
|
54 |
|
55 |
|
56 | set: function (functionName) {
|
57 | this._functionName = functionName;
|
58 | },
|
59 | enumerable: true,
|
60 | configurable: true
|
61 | });
|
62 | Object.defineProperty(MaterializeDirective.prototype, "materializeSelectOptions", {
|
63 | |
64 |
|
65 |
|
66 |
|
67 | set: function (options) {
|
68 | },
|
69 | enumerable: true,
|
70 | configurable: true
|
71 | });
|
72 | |
73 |
|
74 |
|
75 | MaterializeDirective.prototype.ngAfterViewInit = function () {
|
76 | this.performElementUpdates();
|
77 | };
|
78 | |
79 |
|
80 |
|
81 |
|
82 | MaterializeDirective.prototype.ngOnChanges = function (_unused) {
|
83 | var _this = this;
|
84 | if (this.isSelect()) {
|
85 | setTimeout(function () { return _this.performLocalElementUpdates(); }, 10);
|
86 | }
|
87 | };
|
88 | |
89 |
|
90 |
|
91 | MaterializeDirective.prototype.ngOnDestroy = function () {
|
92 | this.performElementRemotion();
|
93 | };
|
94 | |
95 |
|
96 |
|
97 | MaterializeDirective.prototype.ngDoCheck = function () {
|
98 | var nativeElement = this._el.nativeElement;
|
99 | var jQueryElement = $(nativeElement);
|
100 | if (this.isSelect()) {
|
101 | var shouldUpdate = false;
|
102 | if (nativeElement.disabled != this.previousDisabled) {
|
103 | this.previousDisabled = nativeElement.disabled;
|
104 | shouldUpdate = true;
|
105 | }
|
106 | if (!jQueryElement.attr("multiple") && nativeElement.value != this.previousValue) {
|
107 |
|
108 | this.previousValue = nativeElement.value;
|
109 | shouldUpdate = true;
|
110 | }
|
111 | if (shouldUpdate) {
|
112 | this.performLocalElementUpdates();
|
113 | }
|
114 | }
|
115 | else if (this.isTextarea()) {
|
116 | if (nativeElement.value != this.previousValue) {
|
117 | this.previousValue = nativeElement.value;
|
118 | this.performElementUpdates();
|
119 | }
|
120 | }
|
121 | return false;
|
122 | };
|
123 | |
124 |
|
125 |
|
126 | MaterializeDirective.prototype.performElementRemotion = function () {
|
127 | if (this.isTooltip()) {
|
128 | var nativeElement = this._el.nativeElement;
|
129 | var jQueryElement = $(nativeElement);
|
130 | var tooltipId = jQueryElement.attr('data-tooltip-id');
|
131 | if (tooltipId) {
|
132 | $('#' + tooltipId).remove();
|
133 | }
|
134 | }
|
135 | };
|
136 | |
137 |
|
138 |
|
139 | MaterializeDirective.prototype.performElementUpdates = function () {
|
140 | var _this = this;
|
141 |
|
142 | if (Materialize && Materialize.updateTextFields) {
|
143 | Materialize.updateTextFields();
|
144 | }
|
145 |
|
146 | if (this.isSelect() && this.changeListenerShouldBeAdded) {
|
147 | var nativeElement_1 = this._el.nativeElement;
|
148 | var jQueryElement = $(nativeElement_1);
|
149 | jQueryElement.on("change", function (e) {
|
150 | if (!e.originalEvent || !e.originalEvent.internalToMaterialize) {
|
151 | var event_1 = document.createEvent("CustomEvent");
|
152 |
|
153 |
|
154 |
|
155 |
|
156 | event_1.initCustomEvent("change", false, false, undefined);
|
157 |
|
158 | event_1.internalToMaterialize = true;
|
159 | nativeElement_1.dispatchEvent(event_1);
|
160 | }
|
161 | });
|
162 | this.changeListenerShouldBeAdded = false;
|
163 | }
|
164 | if (this.isAutocomplete()) {
|
165 | var nativeElement_2 = this._el.nativeElement;
|
166 | var jQueryElement = $(nativeElement_2);
|
167 | jQueryElement.on("change", function (e) { return nativeElement_2.dispatchEvent(((CustomEvent("input")))); });
|
168 | }
|
169 | if (this.isDatePicker()) {
|
170 | var nativeElement_3 = this._el.nativeElement;
|
171 | var jqueryPickerElement_1 = $(nativeElement_3);
|
172 | var datePicker = jqueryPickerElement_1[this._functionName].apply(jqueryPickerElement_1, this._params);
|
173 | var picker_1 = datePicker.pickadate('picker');
|
174 | setTimeout(function () {
|
175 | if (_this.ngModel) {
|
176 | picker_1.set('select', _this.ngModel);
|
177 | }
|
178 | else {
|
179 | var value = jqueryPickerElement_1.val();
|
180 | if (value && value.length > 0) {
|
181 | picker_1.set('select', value);
|
182 | }
|
183 | }
|
184 | jqueryPickerElement_1.on('change', function (e) { return nativeElement_3.dispatchEvent(((CustomEvent("input")))); });
|
185 | });
|
186 | }
|
187 | if (this.isTimePicker()) {
|
188 | var nativeElement_4 = this._el.nativeElement;
|
189 | var jqueryPickerElement_2 = $(nativeElement_4);
|
190 | var timePicker = jqueryPickerElement_2[this._functionName].apply(jqueryPickerElement_2, this._params);
|
191 | var picker_2 = timePicker.pickatime('picker');
|
192 | setTimeout(function () {
|
193 | if (_this.ngModel) {
|
194 | picker_2.val(_this.ngModel);
|
195 | }
|
196 | else {
|
197 | picker_2.val(jqueryPickerElement_2.val());
|
198 | }
|
199 | jqueryPickerElement_2.on('change', function (e) { return nativeElement_4.dispatchEvent(((CustomEvent("input")))); });
|
200 | });
|
201 | }
|
202 | if (this.isChips()) {
|
203 | var nativeElement_5 = this._el.nativeElement;
|
204 | var jQueryElement = $(nativeElement_5);
|
205 | jQueryElement.on("chip.add", function (e, chip) { return nativeElement_5.dispatchEvent(((CustomEvent("chip.add", chip)))); });
|
206 | jQueryElement.on("chip.delete", function (e, chip) { return nativeElement_5.dispatchEvent(((CustomEvent("chip.delete", chip)))); });
|
207 | jQueryElement.on("chip.select", function (e, chip) { return nativeElement_5.dispatchEvent(((CustomEvent("chip.select", chip)))); });
|
208 | }
|
209 | if (this.isTextarea()) {
|
210 | this._el.nativeElement.dispatchEvent(((CustomEvent("autoresize", {
|
211 | bubbles: true,
|
212 | cancelable: false,
|
213 | detail: undefined
|
214 | }))));
|
215 | }
|
216 | this.performLocalElementUpdates();
|
217 | };
|
218 | |
219 |
|
220 |
|
221 |
|
222 |
|
223 | MaterializeDirective.prototype.performLocalElementUpdates = function (functionName, params) {
|
224 | var _this = this;
|
225 | if (functionName === void 0) { functionName = this._functionName; }
|
226 | if (params === void 0) { params = this._params; }
|
227 | if (this._waitFunction[functionName]) {
|
228 | return;
|
229 | }
|
230 | this._waitFunction[functionName] = true;
|
231 | $(document).ready(function () {
|
232 | _this._waitFunction[functionName] = false;
|
233 | if (functionName) {
|
234 | var jQueryElement = $(_this._el.nativeElement);
|
235 | if (jQueryElement[functionName]) {
|
236 | if (params) {
|
237 | if (params instanceof Array) {
|
238 | jQueryElement[functionName].apply(jQueryElement, params);
|
239 | }
|
240 | else {
|
241 | throw new Error("Params has to be an array.");
|
242 | }
|
243 | }
|
244 | else {
|
245 | jQueryElement[functionName]();
|
246 | }
|
247 | }
|
248 | else {
|
249 |
|
250 | if (Materialize[functionName]) {
|
251 | if (params) {
|
252 | if (params instanceof Array) {
|
253 | Materialize[functionName].apply(Materialize, params);
|
254 | }
|
255 | else {
|
256 | throw new Error("Params has to be an array.");
|
257 | }
|
258 | }
|
259 | else {
|
260 | Materialize[functionName]();
|
261 | }
|
262 | }
|
263 | else {
|
264 | throw new Error("Couldn't find materialize function ''" + functionName + "' on element or the global Materialize object.");
|
265 | }
|
266 | }
|
267 | if (!_this.initialized) {
|
268 | _this.initialized = true;
|
269 | _this.init.emit();
|
270 | }
|
271 | }
|
272 | });
|
273 | };
|
274 | |
275 |
|
276 |
|
277 | MaterializeDirective.prototype.isTooltip = function () {
|
278 | return (this._functionName && this._functionName === "tooltip");
|
279 | };
|
280 | |
281 |
|
282 |
|
283 | MaterializeDirective.prototype.isSelect = function () {
|
284 | return (this._functionName && this._functionName === "material_select");
|
285 | };
|
286 | |
287 |
|
288 |
|
289 | MaterializeDirective.prototype.isDatePicker = function () {
|
290 | return (this._functionName && this._functionName === "pickadate");
|
291 | };
|
292 | |
293 |
|
294 |
|
295 | MaterializeDirective.prototype.isTimePicker = function () {
|
296 | return (this._functionName && this._functionName === "pickatime");
|
297 | };
|
298 | |
299 |
|
300 |
|
301 | MaterializeDirective.prototype.isChips = function () {
|
302 | return (this._functionName && this._functionName === "material_chip");
|
303 | };
|
304 | |
305 |
|
306 |
|
307 | MaterializeDirective.prototype.isAutocomplete = function () {
|
308 | return (this._functionName && this._functionName === "autocomplete");
|
309 | };
|
310 | |
311 |
|
312 |
|
313 | MaterializeDirective.prototype.isTextarea = function () {
|
314 | return this._el.nativeElement.nodeName == "TEXTAREA";
|
315 | };
|
316 | |
317 |
|
318 |
|
319 | MaterializeDirective.prototype.enableDPButtons = function () {
|
320 | $('.picker__clear').removeAttr("disabled");
|
321 | $('.picker__today').removeAttr("disabled");
|
322 | $('.picker__close').removeAttr("disabled");
|
323 | $('.picker__select--year').removeAttr("disabled");
|
324 | $('.picker__select--month').removeAttr("disabled");
|
325 | };
|
326 | return MaterializeDirective;
|
327 | }());
|
328 | export { MaterializeDirective };
|
329 | MaterializeDirective.decorators = [
|
330 | { type: Directive, args: [{
|
331 | selector: '[materialize]'
|
332 | },] },
|
333 | ];
|
334 |
|
335 |
|
336 |
|
337 | MaterializeDirective.ctorParameters = function () { return [
|
338 | { type: ElementRef, },
|
339 | ]; };
|
340 | MaterializeDirective.propDecorators = {
|
341 | 'init': [{ type: Output },],
|
342 | 'materializeParams': [{ type: Input },],
|
343 | 'materializeActions': [{ type: Input },],
|
344 | 'materialize': [{ type: Input },],
|
345 | 'materializeSelectOptions': [{ type: Input },],
|
346 | 'ngModel': [{ type: Input },],
|
347 | };
|
348 | function MaterializeDirective_tsickle_Closure_declarations() {
|
349 |
|
350 | MaterializeDirective.decorators;
|
351 | |
352 |
|
353 |
|
354 |
|
355 | MaterializeDirective.ctorParameters;
|
356 |
|
357 | MaterializeDirective.propDecorators;
|
358 |
|
359 | MaterializeDirective.prototype._params;
|
360 |
|
361 | MaterializeDirective.prototype._functionName;
|
362 |
|
363 | MaterializeDirective.prototype.previousValue;
|
364 |
|
365 | MaterializeDirective.prototype.previousDisabled;
|
366 |
|
367 | MaterializeDirective.prototype._waitFunction;
|
368 |
|
369 | MaterializeDirective.prototype.changeListenerShouldBeAdded;
|
370 |
|
371 | MaterializeDirective.prototype.init;
|
372 |
|
373 | MaterializeDirective.prototype.initialized;
|
374 |
|
375 | MaterializeDirective.prototype.ngModel;
|
376 |
|
377 | MaterializeDirective.prototype._el;
|
378 | }
|