source: trip-planner-front/node_modules/primeng/fesm2020/primeng-tooltip.mjs@ 76712b2

Last change on this file since 76712b2 was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

adding photos

  • Property mode set to 100644
File size: 19.1 KB
RevLine 
[59329aa]1import * as i0 from '@angular/core';
2import { Directive, Input, NgModule } from '@angular/core';
3import { CommonModule } from '@angular/common';
4import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
5import { ZIndexUtils } from 'primeng/utils';
6import * as i1 from 'primeng/api';
7
8class Tooltip {
9 constructor(el, zone, config) {
10 this.el = el;
11 this.zone = zone;
12 this.config = config;
13 this.escape = true;
14 this._tooltipOptions = {
15 tooltipPosition: 'right',
16 tooltipEvent: 'hover',
17 appendTo: 'body',
18 tooltipZIndex: 'auto',
19 escape: false,
20 positionTop: 0,
21 positionLeft: 0
22 };
23 }
24 get disabled() {
25 return this._disabled;
26 }
27 set disabled(val) {
28 this._disabled = val;
29 this.deactivate();
30 }
31 ngAfterViewInit() {
32 this.zone.runOutsideAngular(() => {
33 if (this.getOption('tooltipEvent') === 'hover') {
34 this.mouseEnterListener = this.onMouseEnter.bind(this);
35 this.mouseLeaveListener = this.onMouseLeave.bind(this);
36 this.clickListener = this.onClick.bind(this);
37 this.el.nativeElement.addEventListener('mouseenter', this.mouseEnterListener);
38 this.el.nativeElement.addEventListener('mouseleave', this.mouseLeaveListener);
39 this.el.nativeElement.addEventListener('click', this.clickListener);
40 }
41 else if (this.getOption('tooltipEvent') === 'focus') {
42 this.focusListener = this.onFocus.bind(this);
43 this.blurListener = this.onBlur.bind(this);
44 this.el.nativeElement.addEventListener('focus', this.focusListener);
45 this.el.nativeElement.addEventListener('blur', this.blurListener);
46 }
47 });
48 }
49 ngOnChanges(simpleChange) {
50 if (simpleChange.tooltipPosition) {
51 this.setOption({ tooltipPosition: simpleChange.tooltipPosition.currentValue });
52 }
53 if (simpleChange.tooltipEvent) {
54 this.setOption({ tooltipEvent: simpleChange.tooltipEvent.currentValue });
55 }
56 if (simpleChange.appendTo) {
57 this.setOption({ appendTo: simpleChange.appendTo.currentValue });
58 }
59 if (simpleChange.positionStyle) {
60 this.setOption({ positionStyle: simpleChange.positionStyle.currentValue });
61 }
62 if (simpleChange.tooltipStyleClass) {
63 this.setOption({ tooltipStyleClass: simpleChange.tooltipStyleClass.currentValue });
64 }
65 if (simpleChange.tooltipZIndex) {
66 this.setOption({ tooltipZIndex: simpleChange.tooltipZIndex.currentValue });
67 }
68 if (simpleChange.escape) {
69 this.setOption({ escape: simpleChange.escape.currentValue });
70 }
71 if (simpleChange.showDelay) {
72 this.setOption({ showDelay: simpleChange.showDelay.currentValue });
73 }
74 if (simpleChange.hideDelay) {
75 this.setOption({ hideDelay: simpleChange.hideDelay.currentValue });
76 }
77 if (simpleChange.life) {
78 this.setOption({ life: simpleChange.life.currentValue });
79 }
80 if (simpleChange.positionTop) {
81 this.setOption({ positionTop: simpleChange.positionTop.currentValue });
82 }
83 if (simpleChange.positionLeft) {
84 this.setOption({ positionLeft: simpleChange.positionLeft.currentValue });
85 }
86 if (simpleChange.disabled) {
87 this.setOption({ disabled: simpleChange.disabled.currentValue });
88 }
89 if (simpleChange.text) {
90 this.setOption({ tooltipLabel: simpleChange.text.currentValue });
91 if (this.active) {
92 if (simpleChange.text.currentValue) {
93 if (this.container && this.container.offsetParent) {
94 this.updateText();
95 this.align();
96 }
97 else {
98 this.show();
99 }
100 }
101 else {
102 this.hide();
103 }
104 }
105 }
106 if (simpleChange.tooltipOptions) {
107 this._tooltipOptions = { ...this._tooltipOptions, ...simpleChange.tooltipOptions.currentValue };
108 this.deactivate();
109 if (this.active) {
110 if (this.getOption('tooltipLabel')) {
111 if (this.container && this.container.offsetParent) {
112 this.updateText();
113 this.align();
114 }
115 else {
116 this.show();
117 }
118 }
119 else {
120 this.hide();
121 }
122 }
123 }
124 }
125 onMouseEnter(e) {
126 if (!this.container && !this.showTimeout) {
127 this.activate();
128 }
129 }
130 onMouseLeave(e) {
131 this.deactivate();
132 }
133 onFocus(e) {
134 this.activate();
135 }
136 onBlur(e) {
137 this.deactivate();
138 }
139 onClick(e) {
140 this.deactivate();
141 }
142 activate() {
143 this.active = true;
144 this.clearHideTimeout();
145 if (this.getOption('showDelay'))
146 this.showTimeout = setTimeout(() => { this.show(); }, this.getOption('showDelay'));
147 else
148 this.show();
149 if (this.getOption('life')) {
150 let duration = this.getOption('showDelay') ? this.getOption('life') + this.getOption('showDelay') : this.getOption('life');
151 this.hideTimeout = setTimeout(() => { this.hide(); }, duration);
152 }
153 }
154 deactivate() {
155 this.active = false;
156 this.clearShowTimeout();
157 if (this.getOption('hideDelay')) {
158 this.clearHideTimeout(); //life timeout
159 this.hideTimeout = setTimeout(() => { this.hide(); }, this.getOption('hideDelay'));
160 }
161 else {
162 this.hide();
163 }
164 }
165 create() {
166 if (this.container) {
167 this.clearHideTimeout();
168 this.remove();
169 }
170 this.container = document.createElement('div');
171 let tooltipArrow = document.createElement('div');
172 tooltipArrow.className = 'p-tooltip-arrow';
173 this.container.appendChild(tooltipArrow);
174 this.tooltipText = document.createElement('div');
175 this.tooltipText.className = 'p-tooltip-text';
176 this.updateText();
177 if (this.getOption('positionStyle')) {
178 this.container.style.position = this.getOption('positionStyle');
179 }
180 this.container.appendChild(this.tooltipText);
181 if (this.getOption('appendTo') === 'body')
182 document.body.appendChild(this.container);
183 else if (this.getOption('appendTo') === 'target')
184 DomHandler.appendChild(this.container, this.el.nativeElement);
185 else
186 DomHandler.appendChild(this.container, this.getOption('appendTo'));
187 this.container.style.display = 'inline-block';
188 }
189 show() {
190 if (!this.getOption('tooltipLabel') || this.getOption('disabled')) {
191 return;
192 }
193 this.create();
194 this.align();
195 DomHandler.fadeIn(this.container, 250);
196 if (this.getOption('tooltipZIndex') === 'auto')
197 ZIndexUtils.set('tooltip', this.container, this.config.zIndex.tooltip);
198 else
199 this.container.style.zIndex = this.getOption('tooltipZIndex');
200 this.bindDocumentResizeListener();
201 this.bindScrollListener();
202 }
203 hide() {
204 if (this.getOption('tooltipZIndex') === 'auto') {
205 ZIndexUtils.clear(this.container);
206 }
207 this.remove();
208 }
209 updateText() {
210 if (this.getOption('escape')) {
211 this.tooltipText.innerHTML = '';
212 this.tooltipText.appendChild(document.createTextNode(this.getOption('tooltipLabel')));
213 }
214 else {
215 this.tooltipText.innerHTML = this.getOption('tooltipLabel');
216 }
217 }
218 align() {
219 let position = this.getOption('tooltipPosition');
220 switch (position) {
221 case 'top':
222 this.alignTop();
223 if (this.isOutOfBounds()) {
224 this.alignBottom();
225 if (this.isOutOfBounds()) {
226 this.alignRight();
227 if (this.isOutOfBounds()) {
228 this.alignLeft();
229 }
230 }
231 }
232 break;
233 case 'bottom':
234 this.alignBottom();
235 if (this.isOutOfBounds()) {
236 this.alignTop();
237 if (this.isOutOfBounds()) {
238 this.alignRight();
239 if (this.isOutOfBounds()) {
240 this.alignLeft();
241 }
242 }
243 }
244 break;
245 case 'left':
246 this.alignLeft();
247 if (this.isOutOfBounds()) {
248 this.alignRight();
249 if (this.isOutOfBounds()) {
250 this.alignTop();
251 if (this.isOutOfBounds()) {
252 this.alignBottom();
253 }
254 }
255 }
256 break;
257 case 'right':
258 this.alignRight();
259 if (this.isOutOfBounds()) {
260 this.alignLeft();
261 if (this.isOutOfBounds()) {
262 this.alignTop();
263 if (this.isOutOfBounds()) {
264 this.alignBottom();
265 }
266 }
267 }
268 break;
269 }
270 }
271 getHostOffset() {
272 if (this.getOption('appendTo') === 'body' || this.getOption('appendTo') === 'target') {
273 let offset = this.el.nativeElement.getBoundingClientRect();
274 let targetLeft = offset.left + DomHandler.getWindowScrollLeft();
275 let targetTop = offset.top + DomHandler.getWindowScrollTop();
276 return { left: targetLeft, top: targetTop };
277 }
278 else {
279 return { left: 0, top: 0 };
280 }
281 }
282 alignRight() {
283 this.preAlign('right');
284 let hostOffset = this.getHostOffset();
285 let left = hostOffset.left + DomHandler.getOuterWidth(this.el.nativeElement);
286 let top = hostOffset.top + (DomHandler.getOuterHeight(this.el.nativeElement) - DomHandler.getOuterHeight(this.container)) / 2;
287 this.container.style.left = left + this.getOption('positionLeft') + 'px';
288 this.container.style.top = top + this.getOption('positionTop') + 'px';
289 }
290 alignLeft() {
291 this.preAlign('left');
292 let hostOffset = this.getHostOffset();
293 let left = hostOffset.left - DomHandler.getOuterWidth(this.container);
294 let top = hostOffset.top + (DomHandler.getOuterHeight(this.el.nativeElement) - DomHandler.getOuterHeight(this.container)) / 2;
295 this.container.style.left = left + this.getOption('positionLeft') + 'px';
296 this.container.style.top = top + this.getOption('positionTop') + 'px';
297 }
298 alignTop() {
299 this.preAlign('top');
300 let hostOffset = this.getHostOffset();
301 let left = hostOffset.left + (DomHandler.getOuterWidth(this.el.nativeElement) - DomHandler.getOuterWidth(this.container)) / 2;
302 let top = hostOffset.top - DomHandler.getOuterHeight(this.container);
303 this.container.style.left = left + this.getOption('positionLeft') + 'px';
304 this.container.style.top = top + this.getOption('positionTop') + 'px';
305 }
306 alignBottom() {
307 this.preAlign('bottom');
308 let hostOffset = this.getHostOffset();
309 let left = hostOffset.left + (DomHandler.getOuterWidth(this.el.nativeElement) - DomHandler.getOuterWidth(this.container)) / 2;
310 let top = hostOffset.top + DomHandler.getOuterHeight(this.el.nativeElement);
311 this.container.style.left = left + this.getOption('positionLeft') + 'px';
312 this.container.style.top = top + this.getOption('positionTop') + 'px';
313 }
314 setOption(option) {
315 this._tooltipOptions = { ...this._tooltipOptions, ...option };
316 }
317 getOption(option) {
318 return this._tooltipOptions[option];
319 }
320 preAlign(position) {
321 this.container.style.left = -999 + 'px';
322 this.container.style.top = -999 + 'px';
323 let defaultClassName = 'p-tooltip p-component p-tooltip-' + position;
324 this.container.className = this.getOption('tooltipStyleClass') ? defaultClassName + ' ' + this.getOption('tooltipStyleClass') : defaultClassName;
325 }
326 isOutOfBounds() {
327 let offset = this.container.getBoundingClientRect();
328 let targetTop = offset.top;
329 let targetLeft = offset.left;
330 let width = DomHandler.getOuterWidth(this.container);
331 let height = DomHandler.getOuterHeight(this.container);
332 let viewport = DomHandler.getViewport();
333 return (targetLeft + width > viewport.width) || (targetLeft < 0) || (targetTop < 0) || (targetTop + height > viewport.height);
334 }
335 onWindowResize(e) {
336 this.hide();
337 }
338 bindDocumentResizeListener() {
339 this.zone.runOutsideAngular(() => {
340 this.resizeListener = this.onWindowResize.bind(this);
341 window.addEventListener('resize', this.resizeListener);
342 });
343 }
344 unbindDocumentResizeListener() {
345 if (this.resizeListener) {
346 window.removeEventListener('resize', this.resizeListener);
347 this.resizeListener = null;
348 }
349 }
350 bindScrollListener() {
351 if (!this.scrollHandler) {
352 this.scrollHandler = new ConnectedOverlayScrollHandler(this.el.nativeElement, () => {
353 if (this.container) {
354 this.hide();
355 }
356 });
357 }
358 this.scrollHandler.bindScrollListener();
359 }
360 unbindScrollListener() {
361 if (this.scrollHandler) {
362 this.scrollHandler.unbindScrollListener();
363 }
364 }
365 unbindEvents() {
366 if (this.getOption('tooltipEvent') === 'hover') {
367 this.el.nativeElement.removeEventListener('mouseenter', this.mouseEnterListener);
368 this.el.nativeElement.removeEventListener('mouseleave', this.mouseLeaveListener);
369 this.el.nativeElement.removeEventListener('click', this.clickListener);
370 }
371 else if (this.getOption('tooltipEvent') === 'focus') {
372 this.el.nativeElement.removeEventListener('focus', this.focusListener);
373 this.el.nativeElement.removeEventListener('blur', this.blurListener);
374 }
375 this.unbindDocumentResizeListener();
376 }
377 remove() {
378 if (this.container && this.container.parentElement) {
379 if (this.getOption('appendTo') === 'body')
380 document.body.removeChild(this.container);
381 else if (this.getOption('appendTo') === 'target')
382 this.el.nativeElement.removeChild(this.container);
383 else
384 DomHandler.removeChild(this.container, this.getOption('appendTo'));
385 }
386 this.unbindDocumentResizeListener();
387 this.unbindScrollListener();
388 this.clearTimeouts();
389 this.container = null;
390 this.scrollHandler = null;
391 }
392 clearShowTimeout() {
393 if (this.showTimeout) {
394 clearTimeout(this.showTimeout);
395 this.showTimeout = null;
396 }
397 }
398 clearHideTimeout() {
399 if (this.hideTimeout) {
400 clearTimeout(this.hideTimeout);
401 this.hideTimeout = null;
402 }
403 }
404 clearTimeouts() {
405 this.clearShowTimeout();
406 this.clearHideTimeout();
407 }
408 ngOnDestroy() {
409 this.unbindEvents();
410 if (this.container) {
411 ZIndexUtils.clear(this.container);
412 }
413 this.remove();
414 if (this.scrollHandler) {
415 this.scrollHandler.destroy();
416 this.scrollHandler = null;
417 }
418 }
419}
420Tooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Tooltip, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Directive });
421Tooltip.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: Tooltip, selector: "[pTooltip]", inputs: { tooltipPosition: "tooltipPosition", tooltipEvent: "tooltipEvent", appendTo: "appendTo", positionStyle: "positionStyle", tooltipStyleClass: "tooltipStyleClass", tooltipZIndex: "tooltipZIndex", escape: "escape", showDelay: "showDelay", hideDelay: "hideDelay", life: "life", positionTop: "positionTop", positionLeft: "positionLeft", text: ["pTooltip", "text"], disabled: ["tooltipDisabled", "disabled"], tooltipOptions: "tooltipOptions" }, host: { classAttribute: "p-element" }, usesOnChanges: true, ngImport: i0 });
422i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Tooltip, decorators: [{
423 type: Directive,
424 args: [{
425 selector: '[pTooltip]',
426 host: {
427 'class': 'p-element'
428 }
429 }]
430 }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.PrimeNGConfig }]; }, propDecorators: { tooltipPosition: [{
431 type: Input
432 }], tooltipEvent: [{
433 type: Input
434 }], appendTo: [{
435 type: Input
436 }], positionStyle: [{
437 type: Input
438 }], tooltipStyleClass: [{
439 type: Input
440 }], tooltipZIndex: [{
441 type: Input
442 }], escape: [{
443 type: Input
444 }], showDelay: [{
445 type: Input
446 }], hideDelay: [{
447 type: Input
448 }], life: [{
449 type: Input
450 }], positionTop: [{
451 type: Input
452 }], positionLeft: [{
453 type: Input
454 }], text: [{
455 type: Input,
456 args: ['pTooltip']
457 }], disabled: [{
458 type: Input,
459 args: ["tooltipDisabled"]
460 }], tooltipOptions: [{
461 type: Input
462 }] } });
463class TooltipModule {
464}
465TooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
466TooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TooltipModule, declarations: [Tooltip], imports: [CommonModule], exports: [Tooltip] });
467TooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TooltipModule, imports: [[CommonModule]] });
468i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TooltipModule, decorators: [{
469 type: NgModule,
470 args: [{
471 imports: [CommonModule],
472 exports: [Tooltip],
473 declarations: [Tooltip]
474 }]
475 }] });
476
477/**
478 * Generated bundle index. Do not edit.
479 */
480
481export { Tooltip, TooltipModule };
Note: See TracBrowser for help on using the repository browser.