Skip to content
This repository has been archived by the owner on Jul 21, 2023. It is now read-only.

Commit

Permalink
Merge pull request #673 from buildcom/672
Browse files Browse the repository at this point in the history 
672: I think I'm finished with popover
  • Loading branch information
@tabersays
tabersays authored Mar 29, 2018
2 parents 638471c + ac08516 commit 7c263f1
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 45 deletions.
4 changes: 2 additions & 2 deletions src/bossy-ui/components/popover/popover.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<button type="button" id="popover1234" data-toggle="popover" class="btn btn-lg btn-danger" title="" data-original-title="Popover title">Click to toggle popover(ID: popover1234)</button>
<button type="button" id="popover5678" data-toggle="popover" class="btn btn-lg btn-success" title="" data-original-title="Popover title">Click to toggle popover(ID: popover5678)</button>

<div *ngIf="hide" name='popover' class="popover fade bs-popover-right show" role="tooltip" x-placement="right" [style.top]="Top" [style.left]="Left" style="position: absolute; will-change: transform;">
<div class="arrow" [style.transform]='rotate' [style.left]='arrowLeft' [style.top]="arrowTop"></div>
<div *ngIf="hide" name='popover' class="popover fade bs-popover-right show" role="tooltip" x-placement="right" [style.top]="popoverTop" [style.left]="popoverLeft" style="position: absolute; will-change: transform;">
<div class="arrow" [style.transform]='arrowRotate' [style.left]='arrowLeft' [style.top]="arrowTop"></div>
<h3 class="popover-header">{{config.popoverTitle}}</h3>
<div class="popover-body">{{config.popoverData}}
</div>
Expand Down
91 changes: 48 additions & 43 deletions src/bossy-ui/components/popover/popover.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,83 +15,83 @@ export class BossyPopoverComponent implements OnInit {
constructor(private _eref: ElementRef, private cdRef: ChangeDetectorRef) {}

hide = false;
Top = '0px';
Left = '0px';
popoverTop = '0px';
popoverLeft = '0px';
eventTarget = undefined;
Spacing = 34;
arrowSpacing = 34;
arrowTop = '34px';
arrowLeft = '0px';
rotate = 'rotate(0deg)';
arrowRotate = 'rotate(0deg)';

ngOnInit() {
this.Top = '0px';
this.Left = '0px';
this.hide = false;
this.eventTarget = undefined;
this.Spacing = 34;
this.arrowTop = '34px';
}

@HostListener('document:click', ['$event.target'])
onClick(event: any) {
// This initial if state should only run once and find the popover element assoiciated with and adds an event listener
if (this.eventTarget === undefined) {
this.calcSpacing();
const elements = document.body.querySelectorAll('[id=' + this.config.popoverID + ']');
this.eventTarget = elements[0];
if (this.eventTarget !== undefined) {
this.eventTarget.addEventListener('click', this.ShowPopoverOnClick.bind(this));
if (this.eventTarget.contains(event)) {
this.ShowPopoverOnClick(event);
}
} else {
console.error('Popover could not resolve element', this.config.popoverID);
this.calcSpacing();
const elements = document.body.querySelectorAll('[id=' + this.config.popoverID + ']');
this.eventTarget = elements[0];
if (this.eventTarget !== undefined) {
this.eventTarget.addEventListener('click', this.ShowPopoverOnClick.bind(this));
if (this.eventTarget.contains(event)) {
this.ShowPopoverOnClick(event);
}
} else {
console.error('Popover could not resolve element', this.config.popoverID);
}
}


/*
* Function this function makes the popover dismiss when clicked outside of it.
*/
@HostListener('document:click', ['$event.target'])
onClick(event: any) {
if (this.eventTarget !== undefined && this.config.dismissable && this.hide) {
if (!this.eventTarget.contains(event)) {
const popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
if (!this.eventTarget.contains(event) && !popover_ref.contains(event)) {
this.hide = false;
}
}
}


/*
* Function to recalculate everytime where the event target is on screen and place the popover
*
* Better solution: maybe add a host listener to the event target if position changes update position
* of the popover and arrow variables. That would clean this up.
*/
ShowPopoverOnClick(event: any) {
if (this.eventTarget !== undefined) {
if (this.config.placement === 'top') {
this.hide = !this.hide;
this.cdRef.detectChanges();
const popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
if (popover_ref !== undefined) {
this.Top = (this.eventTarget.offsetTop - (popover_ref.offsetHeight)) - (this.Spacing / 4) + 'px';
this.Left = this.eventTarget.offsetLeft + (this.eventTarget.offsetWidth / 2) - (popover_ref.offsetWidth / 2) + 'px';
this.popoverTop = (this.eventTarget.offsetTop - (popover_ref.offsetHeight)) - (this.arrowSpacing / 4) + 'px';
this.popoverLeft = this.eventTarget.offsetLeft + (this.eventTarget.offsetWidth / 2) - (popover_ref.offsetWidth / 2) + 'px';
this.arrowTop = (popover_ref.offsetHeight - 10) + 'px';
this.arrowLeft = popover_ref.offsetWidth / 2 + 'px';
this.rotate = 'rotate(270deg)';
this.arrowRotate = 'rotate(270deg)';
}
} else if (this.config.placement === 'bottom') {
this.hide = !this.hide;
this.cdRef.detectChanges();
const popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
if (popover_ref !== undefined) {
this.Top = (this.eventTarget.offsetTop + (this.eventTarget.offsetHeight)) + (this.Spacing / 4) + 'px';
this.Left = this.eventTarget.offsetLeft + (this.eventTarget.offsetWidth / 2) - (popover_ref.offsetWidth / 2) + 'px';
this.popoverTop = (this.eventTarget.offsetTop + (this.eventTarget.offsetHeight)) + (this.arrowSpacing / 4) + 'px';
this.popoverLeft = this.eventTarget.offsetLeft + (this.eventTarget.offsetWidth / 2) - (popover_ref.offsetWidth / 2) + 'px';
this.arrowTop = '-16px';
this.arrowLeft = popover_ref.offsetWidth / 2 + 'px';
this.rotate = 'rotate(90deg)';
this.arrowRotate = 'rotate(90deg)';
}
} else if (this.config.placement === 'left') {
this.hide = !this.hide;
this.cdRef.detectChanges();
const popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
if (popover_ref !== undefined) {
this.Left = (this.eventTarget.offsetLeft - popover_ref.offsetWidth - (this.Spacing / 2 )) + 'px';
this.Top = (this.eventTarget.offsetTop - ((popover_ref.offsetHeight / 2) - this.eventTarget.offsetHeight / 2 )) + 'px';
this.popoverLeft = (this.eventTarget.offsetLeft - popover_ref.offsetWidth - (this.arrowSpacing / 2 )) + 'px';
this.popoverTop = (this.eventTarget.offsetTop - ((popover_ref.offsetHeight / 2) - this.eventTarget.offsetHeight / 2 )) + 'px';
this.arrowTop = popover_ref.offsetHeight / 2 - (popover_ref.firstElementChild.offsetHeight / 2) + 'px';
this.arrowLeft = (popover_ref.offsetWidth - 1) + 'px';
this.rotate = 'rotate(180deg)';
this.arrowRotate = 'rotate(180deg)';
}
} else {
if (this.config.placement !== 'right') {
Expand All @@ -101,31 +101,36 @@ export class BossyPopoverComponent implements OnInit {
this.cdRef.detectChanges();
const popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
if (popover_ref !== undefined) {
this.Top = (this.eventTarget.offsetTop - ((popover_ref.offsetHeight / 2) - this.eventTarget.offsetHeight / 2)) + 'px';
this.Left = this.eventTarget.offsetLeft + this.eventTarget.offsetWidth + 'px';
this.popoverTop = (this.eventTarget.offsetTop - ((popover_ref.offsetHeight / 2) - this.eventTarget.offsetHeight / 2)) + 'px';
this.popoverLeft = this.eventTarget.offsetLeft + this.eventTarget.offsetWidth + 'px';
this.arrowTop = popover_ref.offsetHeight / 2 - (popover_ref.firstElementChild.offsetHeight / 2) + 'px';
this.arrowLeft = '-8px';
this.rotate = 'rotate(0deg)';
this.arrowRotate = 'rotate(0deg)';
}
}
}
}


/*
* Function when users only specify one field the spacing needs to be modified
* so the popover dosen't look 'Super Gross'.
*/
calcSpacing() {
if (this.config.placement === 'top' || this.config.placement === 'bottom') {
if (this.config.popoverData !== '' && this.config.popoverTitle !== '') {
this.Spacing = 34;
this.arrowSpacing = 34;
this.arrowTop = '34px';
} else {
this.Spacing = 17;
this.arrowSpacing = 17;
this.arrowTop = '10px';
}
} else {
if (this.config.popoverData !== '' && this.config.popoverTitle !== '') {
this.Spacing = 34;
this.arrowSpacing = 34;
this.arrowTop = '34px';
} else {
this.Spacing = 34;
this.arrowSpacing = 34;
this.arrowTop = '12px';
}
}
Expand Down

0 comments on commit 7c263f1

Please sign in to comment.