1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/* tslint:disable:array-type member-access variable-name typedef
only-arrow-functions directive-class-suffix component-class-suffix
component-selector no-unnecessary-type-assertion arrow-parens*/
import {DomPortalHost} from '@angular/cdk';
import {ApplicationRef, ComponentFactoryResolver, Injectable, Injector, NgZone} from '@angular/core';
import {OverlayContainer} from './overlay-container';
import {OverlayRef} from './overlay-ref';
import {OverlayState} from './overlay-state';
import {OverlayPositionBuilder} from './position/overlay-position-builder';
import {ScrollStrategyOptions} from './scroll/index';
/** Next overlay unique ID. */
let nextUniqueId = 0;
/** The default state for newly created overlays. */
const defaultState = new OverlayState();
/**
* Service to create Overlays. Overlays are dynamically added pieces of floating
* UI, meant to be used as a low-level building building block for other
* components. Dialogs, tooltips, menus, selects, etc. can all be built using
* overlays. The service should primarily be used by authors of re-usable
* components rather than developers building end-user applications.
*
* An overlay *is* a PortalHost, so any kind of Portal can be loaded into one.
*/
@Injectable()
export class Overlay {
constructor(
public scrollStrategies: ScrollStrategyOptions,
private _overlayContainer: OverlayContainer,
private _componentFactoryResolver: ComponentFactoryResolver,
private _positionBuilder: OverlayPositionBuilder,
private _appRef: ApplicationRef, private _injector: Injector,
private _ngZone: NgZone) {}
/**
* Creates an overlay.
* @param state State to apply to the overlay.
* @returns Reference to the created overlay.
*/
create(state: OverlayState = defaultState, paneClassName?: string):
OverlayRef {
return this._createOverlayRef(
this._createPaneElement(paneClassName), state);
}
/**
* Returns a position builder that can be used, via fluent API,
* to construct and configure a position strategy.
*/
position(): OverlayPositionBuilder {
return this._positionBuilder;
}
/**
* Creates the DOM element for an overlay and appends it to the overlay
* container.
* @returns Newly-created pane element
*/
private _createPaneElement(className?: string): HTMLElement {
const pane = document.createElement('div');
pane.id = `nz-overlay-${nextUniqueId++}`;
pane.classList.add('nz-overlay-pane');
if (className) {
const classList = className.split(' ');
classList.forEach(c => {
pane.classList.add(c);
});
}
this._overlayContainer.getContainerElement().appendChild(pane);
return pane;
}
/**
* Create a DomPortalHost into which the overlay content can be loaded.
* @param pane The DOM element to turn into a portal host.
* @returns A portal host for the given DOM element.
*/
private _createPortalHost(pane: HTMLElement): DomPortalHost {
return new DomPortalHost(
pane, this._componentFactoryResolver, this._appRef, this._injector);
}
/**
* Creates an OverlayRef for an overlay in the given DOM element.
* @param pane DOM element for the overlay
* @param state
*/
private _createOverlayRef(pane: HTMLElement, state: OverlayState):
OverlayRef {
const scrollStrategy = state.scrollStrategy || this.scrollStrategies.noop();
const portalHost = this._createPortalHost(pane);
return new OverlayRef(
portalHost, pane, state, scrollStrategy, this._ngZone);
}
}
|
