novo-elements
Version:
Bullhorn's NOVO Element Repository for Angular 2
148 lines • 6.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var rxjs_1 = require("@angular/cdk/rxjs");
var overlay_1 = require("@angular/cdk/overlay");
var portal_1 = require("@angular/cdk/portal");
var merge_1 = require("rxjs/observable/merge");
var fromEvent_1 = require("rxjs/observable/fromEvent");
var of_1 = require("rxjs/observable/of");
var HasOverlay = (function () {
function HasOverlay(_element, _overlay, _viewContainerRef, _zone, _changeDetectorRef, _scrollStrategy, _document) {
this._element = _element;
this._overlay = _overlay;
this._viewContainerRef = _viewContainerRef;
this._zone = _zone;
this._changeDetectorRef = _changeDetectorRef;
this._scrollStrategy = _scrollStrategy;
this._document = _document;
this._panelOpen = false;
}
Object.defineProperty(HasOverlay.prototype, "panelOpen", {
/* Whether or not the autocomplete panel is open. */
get: function () {
return this._panelOpen;
},
enumerable: true,
configurable: true
});
/** Opens the autocomplete suggestion panel. */
HasOverlay.prototype.openPanel = function (template) {
//if (!this.overlayTemplate) {
//throw getMdAutocompleteMissingPanelError();
//}
if (!this._overlayRef) {
this._createOverlay(template);
}
else {
/** Update the panel width, in case the host width has changed */
this._overlayRef.getState().width = this._getHostWidth();
this._overlayRef.updateSize();
}
if (this._overlayRef && !this._overlayRef.hasAttached()) {
this._overlayRef.attach(this._portal);
this._closingActionsSubscription = this._subscribeToClosingActions();
}
//this.overlayTemplate._setVisibility();
this._panelOpen = true;
};
/** Closes the autocomplete suggestion panel. */
HasOverlay.prototype.closePanel = function () {
if (this._overlayRef && this._overlayRef.hasAttached()) {
this._overlayRef.detach();
this._closingActionsSubscription.unsubscribe();
}
if (this._panelOpen) {
this._panelOpen = false;
// We need to trigger change detection manually, because
// `fromEvent` doesn't seem to do it at the proper time.
// This ensures that the placeholder is reset when the
// user clicks outside.
this._changeDetectorRef.detectChanges();
}
};
HasOverlay.prototype.onClosingAction = function (event) {
this.closePanel();
};
Object.defineProperty(HasOverlay.prototype, "panelClosingActions", {
/**
* A stream of actions that should close the autocomplete panel, including
* when an option is selected, on blur, and when TAB is pressed.
*/
get: function () {
return merge_1.merge(
//this.overlayTemplate._keyManager.tabOut,
this._outsideClickStream);
},
enumerable: true,
configurable: true
});
Object.defineProperty(HasOverlay.prototype, "_outsideClickStream", {
/** Stream of clicks outside of the autocomplete panel. */
get: function () {
var _this = this;
if (!this._document) {
return of_1.of(null);
}
return rxjs_1.RxChain.from(merge_1.merge(fromEvent_1.fromEvent(this._document, 'click'), fromEvent_1.fromEvent(this._document, 'touchend'))).call(rxjs_1.filter, function (event) {
var clickTarget = event.target;
return _this._panelOpen &&
clickTarget !== _this._element.nativeElement &&
(!_this._element.nativeElement.contains(clickTarget)) &&
(!!_this._overlayRef && !_this._overlayRef.overlayElement.contains(clickTarget));
}).result();
},
enumerable: true,
configurable: true
});
/**
* This method listens to a stream of panel closing actions and resets the
* stream every time the option list changes.
*/
HasOverlay.prototype._subscribeToClosingActions = function () {
var _this = this;
var firstStable = rxjs_1.first.call(this._zone.onStable);
//const valueChanges = Observable.from(this.value);
// When the zone is stable initially, and when the option list changes...
return rxjs_1.RxChain.from(merge_1.merge(firstStable))
.call(rxjs_1.switchMap, function () {
return _this.panelClosingActions;
})
.call(rxjs_1.first)
.subscribe(function (event) { return _this.onClosingAction(event); });
};
/** Destroys the autocomplete suggestion panel. */
HasOverlay.prototype._destroyPanel = function () {
if (this._overlayRef) {
this.closePanel();
this._overlayRef.dispose();
this._overlayRef = null;
}
};
HasOverlay.prototype._createOverlay = function (template) {
this._portal = new portal_1.TemplatePortal(template, this._viewContainerRef);
this._overlayRef = this._overlay.create(this._getOverlayConfig());
};
HasOverlay.prototype._getOverlayConfig = function () {
var overlayState = new overlay_1.OverlayState();
overlayState.positionStrategy = this._getOverlayPosition();
//overlayState.width = this._getHostWidth();
overlayState.direction = 'ltr';
overlayState.scrollStrategy = this._scrollStrategy();
return overlayState;
};
HasOverlay.prototype._getOverlayPosition = function () {
this._positionStrategy = this._overlay.position().connectedTo(this._getConnectedElement(), { originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' })
.withFallbackPosition({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' });
return this._positionStrategy;
};
HasOverlay.prototype._getConnectedElement = function () {
return this._element;
};
/** Returns the width of the input element, so the panel width can match it. */
HasOverlay.prototype._getHostWidth = function () {
return this._getConnectedElement().nativeElement.getBoundingClientRect().width;
};
return HasOverlay;
}());
exports.HasOverlay = HasOverlay;
//# sourceMappingURL=HasOverlay.js.map