feat(popover): new popover

projects/core/src/lib/overlay/overlay.component.ts

@@ -10,8 +10,6 @@ import {
 } from '@angular/core';
 import { FivOverlayContent } from './overlay-content/overlay-content.component';
 import { FivOverlayService } from './overlay.service';
-import { tap, first } from 'rxjs/operators';
-import { zip } from 'rxjs';
 
 @Component({
   selector: 'fiv-overlay',

projects/core/src/lib/popover/popover.component.html

@@ -1,6 +1,7 @@
-<ion-content>
-  <ion-item (click)="onItemClicked(i)" class="popover-item" *ngFor="let button of buttons; let i = index">
-    <ion-icon slot="start" [name]="button.icon"></ion-icon>
-    <ion-label>{{button.text}}</ion-label>
-  </ion-item>
-</ion-content>
+<fiv-overlay>
+  <div class="popover-container" [style.left]="left + 'px'" [style.top]="top + 'px'" [style.height]="height + 'px'"
+    [style.width]="width + 'px'">
+    <ng-content>
+    </ng-content>
+  </div>
+</fiv-overlay>

projects/core/src/lib/popover/popover.component.scss

@@ -1,13 +1,4 @@
-.popover-item {
-  --border-style: none;
-}
-
-.popover-item:hover {
-  ion-label {
-    --color: var(--ion-color-primary);
-  }
-  ion-icon {
-    color: var(--ion-color-primary);
-  }
-  cursor: pointer;
+.popover-container {
+  position: absolute;
+  display: block;
 }

projects/core/src/lib/popover/popover.component.spec.ts

@@ -1,22 +1,22 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
 
-import { FivPopover } from './popover.component';
+import { PopoverComponent } from './popover.component';
 
 describe('PopoverComponent', () => {
-  let component: FivPopover;
-  let fixture: ComponentFixture<FivPopover>;
+  let component: PopoverComponent;
+  let fixture: ComponentFixture<PopoverComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [FivPopover]
+      declarations: [ PopoverComponent ],
+      imports: [IonicModule.forRoot()]
     }).compileComponents();
-  }));
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FivPopover);
+    fixture = TestBed.createComponent(PopoverComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-  });
+  }));
 
   it('should create', () => {
     expect(component).toBeTruthy();

projects/core/src/lib/popover/popover.component.ts

@@ -1,25 +1,77 @@
-import { FivButton } from './../button/button.component';
-import { Component, OnInit } from '@angular/core';
-import { NavParams, PopoverController } from '@ionic/angular';
+import { Component, OnInit, ViewChild, Input } from '@angular/core';
+import { FivOverlay } from '../overlay/overlay.component';
+import { Platform } from '@ionic/angular';
+
+interface Position {
+  top: number;
+  left: number;
+}
 
 @Component({
   selector: 'fiv-popover',
   templateUrl: './popover.component.html',
   styleUrls: ['./popover.component.scss']
 })
 export class FivPopover implements OnInit {
-  public buttons: FivButton[] = [];
+  @Input() width: number;
+  @Input() height: number;
+  top = 0;
+  left = 0;
 
-  constructor(
-    public navParams: NavParams,
-    public popoverController: PopoverController
-  ) {
-    this.buttons = navParams.get('buttons');
-  }
+  @ViewChild(FivOverlay, { static: false }) overlay: FivOverlay;
+
+  constructor(private platform: Platform) {}
 
   ngOnInit() {}
 
-  onItemClicked(i: number) {
-    this.popoverController.dismiss({ index: i });
+  openClick(event: MouseEvent) {
+    const {
+      top,
+      left,
+      bottom,
+      right
+    } = (event.target as HTMLElement).getBoundingClientRect();
+    const position = this.calculcatePosition(top, left, bottom, right);
+    this.openAtPosition(position);
+  }
+
+  openCords(top: number, left: number) {
+    const position = this.calculcatePosition(top, left, top, left);
+    this.openAtPosition(position);
+  }
+
+  private openAtPosition(position: Position) {
+    this.top = position.top;
+    this.left = position.left;
+    this.overlay.show();
+  }
+
+  private calculcatePosition(
+    top: number,
+    left: number,
+    bottom: number,
+    right: number
+  ): Position {
+    const width = this.platform.width();
+    const height = this.platform.height();
+    if (width / 2 > left && height / 2 > top) {
+      // top left
+
+      (left = Math.max(0, left)), (top = Math.max(0, top));
+    } else if (width / 2 < left && height / 2 < top) {
+      // bottom right
+      left = Math.min(width - this.width, right - this.width);
+      top = Math.min(height - this.height, bottom - this.height);
+    } else if (width / 2 < left && height / 2 > top) {
+      // top right
+      left = Math.min(width - this.width, right - this.width);
+      top = Math.max(0, top);
+    } else if (width / 2 > left && height / 2 < top) {
+      // bottom left
+      left = Math.max(0, left);
+      top = Math.min(height - this.height, bottom - this.height);
+    }
+
+    return { top, left };
   }
 }

projects/core/src/lib/popover/popover.module.ts

@@ -1,13 +1,11 @@
-import { FivButtonModule } from './../button/button.module';
-import { FivPopover } from './popover.component';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
+import { FivPopover } from './popover.component';
+import { FivOverlayModule } from '../overlay/overlay.module';
 
 @NgModule({
   declarations: [FivPopover],
-  imports: [CommonModule, FivButtonModule, IonicModule],
   exports: [FivPopover],
-  entryComponents: [FivPopover]
+  imports: [CommonModule, FivOverlayModule]
 })
 export class FivPopoverModule {}

src/app/app-routing.module.ts

@@ -82,6 +82,11 @@ const routes: Routes = [
       './pages/developer-tools/developer-tools.module#DeveloperToolsPageModule'
   },
   { path: 'fab', loadChildren: './pages/fab/fab.module#FabPageModule' },
+  {
+    path: 'popover',
+    loadChildren: () =>
+      import('./pages/popover/popover.module').then(m => m.PopoverPageModule)
+  },
   {
     path: '**',
     loadChildren:

src/app/app.component.ts

@@ -49,6 +49,10 @@ export class AppComponent {
       title: 'Password Input',
       url: '/password'
     },
+    {
+      title: 'Popover',
+      url: '/popover'
+    },
     {
       title: 'Refresher',
       url: '/refresher'

src/app/pages/popover/popover-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PopoverPage } from './popover.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PopoverPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PopoverPageRoutingModule {}

src/app/pages/popover/popover.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PopoverPageRoutingModule } from './popover-routing.module';
+
+import { PopoverPage } from './popover.page';
+import { FivPopoverModule } from '@fivethree/core';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PopoverPageRoutingModule,
+    FivPopoverModule
+  ],
+  declarations: [PopoverPage]
+})
+export class PopoverPageModule {}

src/app/pages/popover/popover.page.html

@@ -0,0 +1,30 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>popover</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-button (click)="popover.openClick($event)">
+    <ion-icon slot="start" name="add"></ion-icon>
+    Click
+  </ion-button>
+
+  <ion-button (click)="popover.openCords(1274,1024)">
+    <ion-icon slot="start" name="add"></ion-icon>
+    Coords
+  </ion-button>
+
+  <fiv-popover #popover [width]="200" [height]="100">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-subtitle>Awesome Subtitle</ion-card-subtitle>
+        <ion-card-title>Awesome Title</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        Awesome content
+      </ion-card-content>
+    </ion-card>
+  </fiv-popover>
+
+</ion-content>

src/app/pages/popover/popover.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { PopoverPage } from './popover.page';
+
+describe('PopoverPage', () => {
+  let component: PopoverPage;
+  let fixture: ComponentFixture<PopoverPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PopoverPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PopoverPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/popover/popover.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-popover',
+  templateUrl: './popover.page.html',
+  styleUrls: ['./popover.page.scss'],
+})
+export class PopoverPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}