support for popperOnUpdate

MrFrankel · Jul 16, 2018 · 61115e3 · 61115e3
1 parent 3524b70
commit 61115e3
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 18 deletions.
diff --git 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<void>| $event    | Event handler when popper is shown                                                                       |
-    | popperOnHidden           | EventEmitter<void>| $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
@@ -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
@@ -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 = <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
@@ -121,10 +121,13 @@ export class PopperController implements OnInit, OnChanges {
   styles: Object | undefined;
 
   @Output()
-  popperOnShown = new EventEmitter<PopperController>();
+  popperOnShown: EventEmitter<PopperController> = new EventEmitter<PopperController>();
 
   @Output()
-  popperOnHidden = new EventEmitter<PopperController>();
+  popperOnHidden: EventEmitter<PopperController> = new EventEmitter<PopperController>();
+
+  @Output()
+  popperOnUpdate: EventEmitter<any> = new EventEmitter<any>();
 
   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);
+  }
+
 }