From 61115e365ce9adbd36ef0cd974ddf8cea87f86ed Mon Sep 17 00:00:00 2001 From: MrFrankel Date: Mon, 16 Jul 2018 21:38:52 +0300 Subject: [PATCH] support for popperOnUpdate --- README.md | 5 +++-- package.json | 2 +- src/popper-content.ts | 21 ++++++++++++--------- src/popper-directive.ts | 20 ++++++++++++++------ 4 files changed, 30 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 91dcf1d..bd5a45d 100644 --- a/README.md +++ b/README.md @@ -188,8 +188,9 @@ SystemJS | popperApplyClass | string | undefined | list of comma separated class to apply on ngpx__container | | popperStyles | Object | undefined | Apply the styles object, aligned with ngStyles | | popperApplyArrowClass | string | undefined | list of comma separated class to apply on ngpx__arrow | - | popperOnShown | EventEmitter| $event | Event handler when popper is shown | - | popperOnHidden | EventEmitter| $event | Event handler when popper is hidden | + | popperOnShown | EventEmitter<> | $event | Event handler when popper is shown | + | popperOnHidden | EventEmitter<> | $event | Event handler when popper is hidden | + | popperOnUpdate | EventEmitter<> | $event | Event handler when popper is updated | | popperAriaDescribeBy | string | undefined | Define value for aria-describeby attribute | | popperAriaRole | string | popper | Define value for aria-role attribute | diff --git a/package.json b/package.json index 9c013b4..00aeb8e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-popper", - "version": "4.0.1", + "version": "4.1.0", "description": "ngx-popper is an angular wrapper for popper.js", "directories": { "test": "test" diff --git a/src/popper-content.ts b/src/popper-content.ts index 194c613..2c34e77 100644 --- a/src/popper-content.ts +++ b/src/popper-content.ts @@ -52,7 +52,7 @@ import {Placements, Triggers, PopperContentOptions} from './popper-model'; } - .ngxp__container .ngxp__arrow { + .ngxp__container > .ngxp__arrow { border-color: grey; width: 0; height: 0; @@ -72,7 +72,7 @@ import {Placements, Triggers, PopperContentOptions} from './popper-model'; margin-bottom: 5px; } - .ngxp__container[x-placement^="top"] .ngxp__arrow { + .ngxp__container[x-placement^="top"] > .ngxp__arrow { border-width: 5px 5px 0 5px; border-right-color: transparent; border-bottom-color: transparent; @@ -83,7 +83,7 @@ import {Placements, Triggers, PopperContentOptions} from './popper-model'; margin-bottom: 0; } - .ngxp__container[x-placement^="top"] .ngxp__arrow.__force-arrow { + .ngxp__container[x-placement^="top"] > .ngxp__arrow.__force-arrow { border-right-color: transparent!important; border-bottom-color: transparent!important; border-left-color: transparent!important; @@ -93,7 +93,7 @@ import {Placements, Triggers, PopperContentOptions} from './popper-model'; margin-top: 5px; } - .ngxp__container[x-placement^="bottom"] .ngxp__arrow { + .ngxp__container[x-placement^="bottom"] > .ngxp__arrow { border-width: 0 5px 5px 5px; border-top-color: transparent; border-right-color: transparent; @@ -104,7 +104,7 @@ import {Placements, Triggers, PopperContentOptions} from './popper-model'; margin-bottom: 0; } - .ngxp__container[x-placement^="bottom"] .ngxp__arrow.__force-arrow { + .ngxp__container[x-placement^="bottom"] > .ngxp__arrow.__force-arrow { border-top-color: transparent!important; border-right-color: transparent!important; border-left-color: transparent!important; @@ -114,7 +114,7 @@ import {Placements, Triggers, PopperContentOptions} from './popper-model'; margin-left: 5px; } - .ngxp__container[x-placement^="right"] .ngxp__arrow { + .ngxp__container[x-placement^="right"] > .ngxp__arrow { border-width: 5px 5px 5px 0; border-top-color: transparent; border-bottom-color: transparent; @@ -125,7 +125,7 @@ import {Placements, Triggers, PopperContentOptions} from './popper-model'; margin-right: 0; } - .ngxp__container[x-placement^="right"] .ngxp__arrow.__force-arrow { + .ngxp__container[x-placement^="right"] > .ngxp__arrow.__force-arrow { border-top-color: transparent!important; border-bottom-color: transparent!important; border-left-color: transparent!important; @@ -135,7 +135,7 @@ import {Placements, Triggers, PopperContentOptions} from './popper-model'; margin-right: 5px; } - .ngxp__container[x-placement^="left"] .ngxp__arrow { + .ngxp__container[x-placement^="left"] > .ngxp__arrow { border-width: 5px 0 5px 5px; border-top-color: transparent; border-bottom-color: transparent; @@ -146,7 +146,7 @@ import {Placements, Triggers, PopperContentOptions} from './popper-model'; margin-right: 0; } - .ngxp__container[x-placement^="left"] .ngxp__arrow.__force-arrow { + .ngxp__container[x-placement^="left"] > .ngxp__arrow.__force-arrow { border-top-color: transparent!important; border-bottom-color: transparent!important; border-right-color: transparent!important; @@ -217,6 +217,8 @@ export class PopperContent implements OnDestroy { arrowColor: string | null = null; + onUpdate: Function; + private globalResize: any; @ViewChild("popperViewRef") @@ -260,6 +262,7 @@ export class PopperContent implements OnDestroy { let popperOptions: Popper.PopperOptions = { placement: this.popperOptions.placement, positionFixed: this.popperOptions.positionFixed, + onUpdate: this.onUpdate, modifiers: { arrow: { element: this.popperViewRef.nativeElement.querySelector('.ngxp__arrow') diff --git a/src/popper-directive.ts b/src/popper-directive.ts index 4f2c4f5..1394d79 100644 --- a/src/popper-directive.ts +++ b/src/popper-directive.ts @@ -121,10 +121,13 @@ export class PopperController implements OnInit, OnChanges { styles: Object | undefined; @Output() - popperOnShown = new EventEmitter(); + popperOnShown: EventEmitter = new EventEmitter(); @Output() - popperOnHidden = new EventEmitter(); + popperOnHidden: EventEmitter = new EventEmitter(); + + @Output() + popperOnUpdate: EventEmitter = new EventEmitter(); hideOnClickOutsideHandler($event: MouseEvent): void { if (this.disabled || !this.hideOnClickOutside) { @@ -157,7 +160,7 @@ export class PopperController implements OnInit, OnChanges { this.eventListeners.push(this.renderer.listen(this.elementRef.nativeElement, 'mouseleave', this.scheduledHide.bind(this, null, this.hideTimeout))); break; } - if(this.showTrigger !== Triggers.HOVER && this.hideOnMouseLeave){ + if (this.showTrigger !== Triggers.HOVER && this.hideOnMouseLeave) { this.eventListeners.push(this.renderer.listen(this.elementRef.nativeElement, 'touchend', this.scheduledHide.bind(this, null, this.hideTimeout))); this.eventListeners.push(this.renderer.listen(this.elementRef.nativeElement, 'touchcancel', this.scheduledHide.bind(this, null, this.hideTimeout))); this.eventListeners.push(this.renderer.listen(this.elementRef.nativeElement, 'mouseleave', this.scheduledHide.bind(this, null, this.hideTimeout))); @@ -259,7 +262,7 @@ export class PopperController implements OnInit, OnChanges { } hide() { - if(this.disabled){ + if (this.disabled) { return; } if (!this.shown) { @@ -279,7 +282,7 @@ export class PopperController implements OnInit, OnChanges { } scheduledShow(delay: number | undefined = this.showDelay) { - if(this.disabled){ + if (this.disabled) { return; } this.overrideHideTimeout(); @@ -290,7 +293,7 @@ export class PopperController implements OnInit, OnChanges { } scheduledHide($event: any = null, delay: number = this.hideTimeout) { - if(this.disabled){ + if (this.disabled) { return; } this.overrideShowTimeout(); @@ -378,6 +381,7 @@ export class PopperController implements OnInit, OnChanges { hideOnMouseLeave: this.hideOnMouseLeave, styles: this.styles }); + popperRef.onUpdate = this.onPopperUpdate.bind(this); this.subscriptions.push(popperRef.onHidden.subscribe(this.hide.bind(this))); } @@ -395,4 +399,8 @@ export class PopperController implements OnInit, OnChanges { return this.getScrollParent(node.parentNode) || document; } + private onPopperUpdate(event) { + this.popperOnUpdate.emit(event); + } + } \ No newline at end of file