diff --git a/README.md b/README.md index 9a1cabb..1f82078 100644 --- a/README.md +++ b/README.md @@ -103,7 +103,25 @@ SystemJS ``` -5. Attributes map: + 5. Specific target: + ```HTML +
+
The popper will show when hovering over this element
+
bla bla bla bla
+
+

Pop

+

on the bottom

+
+
+ ``` + +6. Attributes map: | Option | Type | Default | |:------------------- |:---------------- |:-------- | @@ -113,6 +131,7 @@ SystemJS | popperDelay | number | 0 | | popperTimeout | number | 0 | | popperPlacement | Placement(string) | auto | + | popperTarget | HtmlElement | auto | | popperBoundaries | string(selector) | undefined| | popperShowOnStart | number | 0 | | popperTrigger | Trigger(string) | hover | @@ -120,11 +139,11 @@ SystemJS | popperOnShown | EventEmitter| $event | | popperOnHidden | EventEmitter| $event | -6. Override default +7. Override default ```JavaScript // Simply override PopperController baseOptions, this will apply to all popper that do not have an attribute set -// This is a static reference and should run ASAP, preferably before the application is bootstrapped -constructor(private elem: ElementRef) { +// This is a static reference and should run ASAP, preferably before the angular application is bootstrapped +constructor() { PopperController.baseOptions.disableAnimation = true; } ``` @@ -139,7 +158,7 @@ constructor(private elem: ElementRef) { | popperModifiers | popperModifier | undefined| -7. popperPlacement: +8. popperPlacement: | 'top' | 'bottom' @@ -160,7 +179,7 @@ constructor(private elem: ElementRef) { | 'auto-right' | Function -8. popperTrigger: +9. popperTrigger: | 'click' | 'mousedown' diff --git a/example/app/app.component.html b/example/app/app.component.html index 7de3dfa..ed7ca5e 100644 --- a/example/app/app.component.html +++ b/example/app/app.component.html @@ -5,6 +5,7 @@ [popper]="popper1Content" [popperShowOnStart]="true" [popperTrigger]="'click'" + [popperTarget]="popper1" [popperPlacement]="example1select" class="rel" id="example10reference1">

Hey!

Choose where to put your popper!

diff --git a/example/app/app.component.ts b/example/app/app.component.ts index 9c0c62c..56b9219 100644 --- a/example/app/app.component.ts +++ b/example/app/app.component.ts @@ -1,7 +1,7 @@ import {Component, ElementRef, ViewEncapsulation, OnInit, ViewChild} from '@angular/core'; import {PopperContent} from '../../src/popper-content'; import set = Reflect.set; -import {PopperController} from '../../src/popper'; +import {PopperController} from '../../src/popper-directive'; /** * This class represents the main application component. */ diff --git a/example/app/index.ts b/example/app/index.ts index 3b3855f..6c0a515 100644 --- a/example/app/index.ts +++ b/example/app/index.ts @@ -7,8 +7,6 @@ import '@angular/forms'; import '@angular/platform-browser'; import '@angular/platform-browser-dynamic'; import 'rxjs'; -import 'popper.js/dist/umd/popper.js'; -import 'popper.js/dist/umd/popper-utils.js'; import { enableProdMode } from '@angular/core'; // The browser platform with a compiler diff --git a/package.json b/package.json index 817fd29..8bb07c7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-popper", - "version": "1.3.0", + "version": "1.4.0", "description": "ngx-popper is an angular wrapper for popper.js", "main": "src/index.js", "module": "esm/index.js", diff --git a/src/index.ts b/src/index.ts index d95151f..9e3ca28 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,5 @@ import 'popper.js'; -export * from './popper'; +export * from './popper-directive'; export * from './popper.model'; export * from './popper-content'; export * from './popper.module'; \ No newline at end of file diff --git a/src/popper-directive.ts b/src/popper-directive.ts index 922990d..89de91c 100644 --- a/src/popper-directive.ts +++ b/src/popper-directive.ts @@ -44,6 +44,9 @@ export class PopperController implements OnInit, OnChanges { @Input('popperTrigger') showTrigger: Trigger; + @Input('popperTarget') + targetElement: HTMLElement; + @Input('popperDelay') showDelay: number = 0; @@ -136,7 +139,7 @@ export class PopperController implements OnInit, OnChanges { this.content.text = text; } const popperRef = this.content as PopperContent; - popperRef.referenceObject = this.getElement(); + popperRef.referenceObject = this.getRefElement(); this.setContentProperties(popperRef); if (this.showOnStart) { @@ -169,7 +172,7 @@ export class PopperController implements OnInit, OnChanges { this.shown = true; const popperRef = this.content as PopperContent; - const element = this.getElement(); + const element = this.getRefElement(); if(popperRef.referenceObject !== element){ popperRef.referenceObject = element; } @@ -212,8 +215,8 @@ export class PopperController implements OnInit, OnChanges { }, delay) } - getElement() { - return this.viewContainerRef.element.nativeElement; + getRefElement() { + return this.targetElement || this.viewContainerRef.element.nativeElement; } private overrideShowTimeout() { diff --git a/src/popper.module.ts b/src/popper.module.ts index ad5e937..0170552 100644 --- a/src/popper.module.ts +++ b/src/popper.module.ts @@ -1,6 +1,6 @@ import {CommonModule} from "@angular/common"; import {NgModule} from "@angular/core"; -import {PopperController} from './popper'; +import {PopperController} from './popper-directive'; import {PopperContent} from './popper-content'; @NgModule({