From 9a70852e4d226398d47437e623b37d77c902d51d Mon Sep 17 00:00:00 2001
From: jmwilhite <jwilhite4@mail.csuchico.edu>
Date: Tue, 6 Mar 2018 14:13:20 -0800
Subject: [PATCH 1/7] #660: Add alert options

---
 src/app/sandbox/sandbox.component.ts          |  4 ++--
 src/bossy-ui/components/alert/alert.config.ts | 16 ++++++++++++++--
 src/bossy-ui/components/alert/alert.html      | 12 +++++++++---
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/app/sandbox/sandbox.component.ts b/src/app/sandbox/sandbox.component.ts
index d0d95142..aa3fa698 100644
--- a/src/app/sandbox/sandbox.component.ts
+++ b/src/app/sandbox/sandbox.component.ts
@@ -19,7 +19,7 @@ import {BossyFormTextareaComponent} from '../../bossy-ui/components/form-textare
 import {BossyFormTextareaConfig} from '../../bossy-ui/components/form-textarea/form-textarea.config';
 import {Validators} from '@angular/forms';
 import { BossyAlertComponent } from '../../bossy-ui/components/alert/alert.component';
-import { BossyAlertConfig } from '../../bossy-ui/components/alert/alert.config';
+import { BossyAlertConfig, alertType } from '../../bossy-ui/components/alert/alert.config';
 
 @Component({
   selector: 'app-sandbox',
@@ -43,7 +43,7 @@ export class SandboxComponent implements OnInit {
   }
 
   ngOnInit() {
-    const alertConfig = new BossyAlertConfig('insertHeader', 'insertMainText', 'insertExtraText');
+    const alertConfig = new BossyAlertConfig('insertHeader', 'insertMainText', 'insertExtraText', alertType.danger, true);
     const calendarConfig = new BossyCalendarConfig();
     const formInput1 = {
         name: 'textInput',
diff --git a/src/bossy-ui/components/alert/alert.config.ts b/src/bossy-ui/components/alert/alert.config.ts
index 6d6a0f73..99706e62 100644
--- a/src/bossy-ui/components/alert/alert.config.ts
+++ b/src/bossy-ui/components/alert/alert.config.ts
@@ -1,6 +1,18 @@
 export class BossyAlertConfig {
   constructor(public header: string,
-              public mainInfo: string,
-              public extraInfo: string) {
+              public text: string,
+              public subText: string,
+              public type: alertType,
+              public large: boolean) {
   }
 }
+export enum alertType{
+    primary= "primary",
+    secondary= "secondary",
+    success= "success",
+    danger= "danger",
+    warning= "warning",
+    info= "info",
+    light= "light",
+    dark= "dark"
+}
diff --git a/src/bossy-ui/components/alert/alert.html b/src/bossy-ui/components/alert/alert.html
index dcbfb62e..07d48bb1 100644
--- a/src/bossy-ui/components/alert/alert.html
+++ b/src/bossy-ui/components/alert/alert.html
@@ -1,10 +1,16 @@
-<div class="alert alert-success" role="alert " *ngIf="dataDismiss">
+<div class="alert alert-{{config.type}}" role="alert" *ngIf="dataDismiss && !config.large">
+    {{config.header}}
+    <button type="button" class="close" (click)="dismissHandler()"  aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button> 
+</div>
+<div class="alert alert-{{config.type}}" role="alert " *ngIf="dataDismiss && config.large">
     <h4 class="alert-heading">{{config.header}}
         <button type="button" class="close" (click)="dismissHandler()"  aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button> 
     </h4>
-    <p>{{config.mainInfo}}</p>
+    <p>{{config.text}}</p>
     <hr>
-    <p class="mb-0">{{config.extraInfo}}</p>
+    <p class="mb-0">{{config.subText}}</p>
 </div>
\ No newline at end of file

From 80fd7393ce8137e1a2ebf45b6f515e379a1274c2 Mon Sep 17 00:00:00 2001
From: ZachW628 <ztron628@gmail.com>
Date: Sun, 11 Mar 2018 16:37:18 -0700
Subject: [PATCH 2/7] Finished popover component, Dynamic adjustment if fields
 are empty, and ambigous to work with other elements.

Signed-off-by: ZachW628 <ztron628@gmail.com>
---
 src/app/sandbox/sandbox.component.ts          |  2 +-
 .../components/popover/popover.component.html |  6 ++--
 .../components/popover/popover.component.ts   | 34 +++++++++++++++++--
 .../components/popover/popover.config.ts      |  1 +
 4 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/app/sandbox/sandbox.component.ts b/src/app/sandbox/sandbox.component.ts
index 5796a48a..8fed0b37 100644
--- a/src/app/sandbox/sandbox.component.ts
+++ b/src/app/sandbox/sandbox.component.ts
@@ -159,7 +159,7 @@ export class SandboxComponent implements OnInit {
       }
     );
     const bossyFormTextareaConfig = new BossyFormTextareaConfig(textareaInput1);
-    const bossyPopoverConfig = new BossyPopoverConfig('popover', true, 'PoverOver Title', 'Popover Description');
+    const bossyPopoverConfig = new BossyPopoverConfig('popover', 'popover1234', true, 'PoverOver Title', 'Popover Description');
 
     const bossyCollapseConfig = new BossyCollapseConfig('Button', 'Example');
 
diff --git a/src/bossy-ui/components/popover/popover.component.html b/src/bossy-ui/components/popover/popover.component.html
index 9f811b73..826babeb 100644
--- a/src/bossy-ui/components/popover/popover.component.html
+++ b/src/bossy-ui/components/popover/popover.component.html
@@ -1,8 +1,8 @@
 
-  <button type="button" (click)="ShowPopoverOnClick($event)" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Popover title">Click to toggle popover</button>
+  <button type="button" id="{{config.popoverID}}" data-toggle="popover" class="btn btn-lg btn-danger" title="" data-original-title="Popover title">Click to toggle popover</button>
 
-  <div *ngIf="hide" class="popover fade bs-popover-right show" role="tooltip" id="popover181151" x-placement="right" [style.top]="Top" [style.left]="Left" style="position: absolute; will-change: transform;">
-    <div class="arrow" style="top: 34px;"></div>
+  <div *ngIf="hide" 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.top]="arrowTop"></div>
       <h3 class="popover-header">{{config.popoverTitle}}</h3>
     <div class="popover-body">{{config.popoverData}}
     </div>
diff --git a/src/bossy-ui/components/popover/popover.component.ts b/src/bossy-ui/components/popover/popover.component.ts
index a7638469..e2bfb17c 100644
--- a/src/bossy-ui/components/popover/popover.component.ts
+++ b/src/bossy-ui/components/popover/popover.component.ts
@@ -13,28 +13,56 @@ export class BossyPopoverComponent implements OnInit {
   @Input() config: BossyPopoverConfig;
 
   constructor(private _eref: ElementRef) {}
+
   hide = false;
   Top = '0px';
   Left = '0px';
+  eventTarget = undefined;
+  Spacing = 34;
+  arrowTop = '34px';
 
   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];
+      this.eventTarget.addEventListener('click', this.ShowPopoverOnClick.bind(this));
+      if (this.eventTarget.contains(event)) {
+        this.ShowPopoverOnClick(event);
+      }
+    }
+
     if (this.config.dismissable && this.hide) {
-      if (!this._eref.nativeElement.contains(event)) {
+      if (!this.eventTarget.contains(event)) {
         this.hide = false;
       }
     }
   }
 
   ShowPopoverOnClick(event: any) {
-    this.Top = (event.target.offsetTop - 34) + 'px';
-    this.Left = event.target.offsetLeft + event.target.offsetWidth + 'px';
+    this.Top = (this.eventTarget.offsetTop - this.Spacing) + 'px';
+    this.Left = this.eventTarget.offsetLeft + this.eventTarget.offsetWidth + 'px';
     this.hide = !this.hide;
   }
+
+  calcSpacing() {
+    if (this.config.popoverData !== '' && this.config.popoverTitle !== '') {
+      this.Spacing = 34;
+      this.arrowTop = '34px';
+    } else {
+      this.Spacing = 0;
+      this.arrowTop = '10px';
+    }
+  }
 }
diff --git a/src/bossy-ui/components/popover/popover.config.ts b/src/bossy-ui/components/popover/popover.config.ts
index 938fdfba..894d789d 100644
--- a/src/bossy-ui/components/popover/popover.config.ts
+++ b/src/bossy-ui/components/popover/popover.config.ts
@@ -3,6 +3,7 @@ export class BossyPopoverConfig {
   public hide: boolean;
   constructor(
               public name: string,
+              public popoverID: string,
               public dismissable: boolean,
               public popoverTitle: string,
               public popoverData: string) {

From 4115db35b3a1ad03efd8d10cdb8c44d83b328da1 Mon Sep 17 00:00:00 2001
From: ZachW628 <ztron628@gmail.com>
Date: Sun, 11 Mar 2018 23:10:35 -0700
Subject: [PATCH 3/7] added top, bottom, and left popovers. Still need error
 handling for when the popover dosent exist

Signed-off-by: ZachW628 <ztron628@gmail.com>
---
 src/app/sandbox/sandbox.component.ts          |  2 +-
 .../components/popover/popover.component.html |  7 +-
 .../components/popover/popover.component.ts   | 79 ++++++++++++++++---
 .../components/popover/popover.config.ts      |  1 +
 4 files changed, 75 insertions(+), 14 deletions(-)

diff --git a/src/app/sandbox/sandbox.component.ts b/src/app/sandbox/sandbox.component.ts
index 8fed0b37..6d461e4d 100644
--- a/src/app/sandbox/sandbox.component.ts
+++ b/src/app/sandbox/sandbox.component.ts
@@ -159,7 +159,7 @@ export class SandboxComponent implements OnInit {
       }
     );
     const bossyFormTextareaConfig = new BossyFormTextareaConfig(textareaInput1);
-    const bossyPopoverConfig = new BossyPopoverConfig('popover', 'popover1234', true, 'PoverOver Title', 'Popover Description');
+    const bossyPopoverConfig = new BossyPopoverConfig('popover', 'popover1234', true, 'right', 'PoverOver Title', 'Popover Description');
 
     const bossyCollapseConfig = new BossyCollapseConfig('Button', 'Example');
 
diff --git a/src/bossy-ui/components/popover/popover.component.html b/src/bossy-ui/components/popover/popover.component.html
index 826babeb..4db22a0a 100644
--- a/src/bossy-ui/components/popover/popover.component.html
+++ b/src/bossy-ui/components/popover/popover.component.html
@@ -1,8 +1,9 @@
 
-  <button type="button" id="{{config.popoverID}}" data-toggle="popover" class="btn btn-lg btn-danger" title="" data-original-title="Popover title">Click to toggle popover</button>
+  <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-danger" title="" data-original-title="Popover title">Click to toggle popover(ID: popover5678)</button>
 
-  <div *ngIf="hide" 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.top]="arrowTop"></div>
+  <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>
       <h3 class="popover-header">{{config.popoverTitle}}</h3>
     <div class="popover-body">{{config.popoverData}}
     </div>
diff --git a/src/bossy-ui/components/popover/popover.component.ts b/src/bossy-ui/components/popover/popover.component.ts
index e2bfb17c..3f14863f 100644
--- a/src/bossy-ui/components/popover/popover.component.ts
+++ b/src/bossy-ui/components/popover/popover.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, SimpleChanges, ElementRef, HostListener} from '@angular/core';
+import {Component, Input, OnInit, SimpleChanges, ElementRef, HostListener, ChangeDetectorRef} from '@angular/core';
 import {BossyPopoverConfig} from './popover.config';
 
 
@@ -12,7 +12,7 @@ import {BossyPopoverConfig} from './popover.config';
 export class BossyPopoverComponent implements OnInit {
   @Input() config: BossyPopoverConfig;
 
-  constructor(private _eref: ElementRef) {}
+  constructor(private _eref: ElementRef, private cdRef: ChangeDetectorRef) {}
 
   hide = false;
   Top = '0px';
@@ -20,6 +20,8 @@ export class BossyPopoverComponent implements OnInit {
   eventTarget = undefined;
   Spacing = 34;
   arrowTop = '34px';
+  arrowLeft = '0px';
+  rotate = 'rotate(0deg)';
 
   ngOnInit() {
     this.Top = '0px';
@@ -43,6 +45,7 @@ export class BossyPopoverComponent implements OnInit {
       }
     }
 
+
     if (this.config.dismissable && this.hide) {
       if (!this.eventTarget.contains(event)) {
         this.hide = false;
@@ -50,19 +53,75 @@ export class BossyPopoverComponent implements OnInit {
     }
   }
 
+
   ShowPopoverOnClick(event: any) {
-    this.Top = (this.eventTarget.offsetTop - this.Spacing) + 'px';
-    this.Left = this.eventTarget.offsetLeft + this.eventTarget.offsetWidth + 'px';
-    this.hide = !this.hide;
+    if (this.config.placement == 'top') {
+      this.hide = !this.hide;
+      this.cdRef.detectChanges();
+      let 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.arrowTop =  (popover_ref.offsetHeight - 10) + 'px';
+        this.arrowLeft = popover_ref.offsetWidth/2 + 'px';
+        this.rotate = 'rotate(270deg)';
+      }
+    } else if (this.config.placement == 'bottom') {
+      this.hide = !this.hide;
+      this.cdRef.detectChanges();
+      let 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.arrowTop = '-16px';
+        this.arrowLeft = popover_ref.offsetWidth/2 + 'px';
+        this.rotate = 'rotate(90deg)';
+      }
+    } else if (this.config.placement == 'left') {
+      this.hide = !this.hide;
+      this.cdRef.detectChanges();
+      let 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.arrowTop = popover_ref.offsetHeight/2 - (popover_ref.firstElementChild.offsetHeight/2) + 'px';
+        this.arrowLeft = (popover_ref.offsetWidth - 1) + 'px';
+        this.rotate = 'rotate(180deg)';
+      }
+    } else {
+      if (this.config.placement != 'right') {
+        console.error('invalid placement defaulting to {placement: right}');
+      }
+      this.hide = !this.hide;
+      this.cdRef.detectChanges();
+      let popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
+      if (popover_ref != null) {
+        this.Top = (this.eventTarget.offsetTop - ((popover_ref.offsetHeight/2) - this.eventTarget.offsetHeight/2)) + 'px';
+        this.Left = 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)';
+      }
+    }
   }
 
   calcSpacing() {
-    if (this.config.popoverData !== '' && this.config.popoverTitle !== '') {
-      this.Spacing = 34;
-      this.arrowTop = '34px';
+    if (this.config.placement == 'top' || this.config.placement == 'bottom') {
+      if (this.config.popoverData !== '' && this.config.popoverTitle !== '') {
+        this.Spacing = 34;
+        this.arrowTop = '34px';
+      } else {
+        this.Spacing = 17;
+        this.arrowTop = '10px';
+      }
     } else {
-      this.Spacing = 0;
-      this.arrowTop = '10px';
+      if (this.config.popoverData !== '' && this.config.popoverTitle !== '') {
+        this.Spacing = 34;
+        this.arrowTop = '34px';
+      } else {
+        this.Spacing = 34;
+        this.arrowTop = '12px';
+      }
     }
   }
 }
diff --git a/src/bossy-ui/components/popover/popover.config.ts b/src/bossy-ui/components/popover/popover.config.ts
index 894d789d..520693e4 100644
--- a/src/bossy-ui/components/popover/popover.config.ts
+++ b/src/bossy-ui/components/popover/popover.config.ts
@@ -5,6 +5,7 @@ export class BossyPopoverConfig {
               public name: string,
               public popoverID: string,
               public dismissable: boolean,
+              public placement: string,
               public popoverTitle: string,
               public popoverData: string) {
   }

From 1e75afab417e0e202439564d1206b818a372325a Mon Sep 17 00:00:00 2001
From: ZachW628 <ztron628@gmail.com>
Date: Sun, 11 Mar 2018 23:48:12 -0700
Subject: [PATCH 4/7] finished component may need more error checking

Signed-off-by: ZachW628 <ztron628@gmail.com>
---
 .../components/popover/popover.component.html |   2 +-
 .../components/popover/popover.component.ts   | 108 +++++++++---------
 2 files changed, 58 insertions(+), 52 deletions(-)

diff --git a/src/bossy-ui/components/popover/popover.component.html b/src/bossy-ui/components/popover/popover.component.html
index 4db22a0a..4f9cb982 100644
--- a/src/bossy-ui/components/popover/popover.component.html
+++ b/src/bossy-ui/components/popover/popover.component.html
@@ -1,6 +1,6 @@
 
   <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-danger" title="" data-original-title="Popover title">Click to toggle popover(ID: popover5678)</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>
diff --git a/src/bossy-ui/components/popover/popover.component.ts b/src/bossy-ui/components/popover/popover.component.ts
index 3f14863f..c0d4a822 100644
--- a/src/bossy-ui/components/popover/popover.component.ts
+++ b/src/bossy-ui/components/popover/popover.component.ts
@@ -39,14 +39,18 @@ export class BossyPopoverComponent implements OnInit {
       this.calcSpacing();
       const elements = document.body.querySelectorAll('[id=' + this.config.popoverID + ']');
       this.eventTarget = elements[0];
-      this.eventTarget.addEventListener('click', this.ShowPopoverOnClick.bind(this));
-      if (this.eventTarget.contains(event)) {
-        this.ShowPopoverOnClick(event);
+      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);
       }
     }
 
 
-    if (this.config.dismissable && this.hide) {
+    if (this.eventTarget !== undefined && this.config.dismissable && this.hide) {
       if (!this.eventTarget.contains(event)) {
         this.hide = false;
       }
@@ -55,58 +59,60 @@ export class BossyPopoverComponent implements OnInit {
 
 
   ShowPopoverOnClick(event: any) {
-    if (this.config.placement == 'top') {
-      this.hide = !this.hide;
-      this.cdRef.detectChanges();
-      let 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.arrowTop =  (popover_ref.offsetHeight - 10) + 'px';
-        this.arrowLeft = popover_ref.offsetWidth/2 + 'px';
-        this.rotate = 'rotate(270deg)';
-      }
-    } else if (this.config.placement == 'bottom') {
-      this.hide = !this.hide;
-      this.cdRef.detectChanges();
-      let 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.arrowTop = '-16px';
-        this.arrowLeft = popover_ref.offsetWidth/2 + 'px';
-        this.rotate = 'rotate(90deg)';
-      }
-    } else if (this.config.placement == 'left') {
-      this.hide = !this.hide;
-      this.cdRef.detectChanges();
-      let 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.arrowTop = popover_ref.offsetHeight/2 - (popover_ref.firstElementChild.offsetHeight/2) + 'px';
-        this.arrowLeft = (popover_ref.offsetWidth - 1) + 'px';
-        this.rotate = 'rotate(180deg)';
-      }
-    } else {
-      if (this.config.placement != 'right') {
-        console.error('invalid placement defaulting to {placement: right}');
-      }
-      this.hide = !this.hide;
-      this.cdRef.detectChanges();
-      let popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
-      if (popover_ref != null) {
-        this.Top = (this.eventTarget.offsetTop - ((popover_ref.offsetHeight/2) - this.eventTarget.offsetHeight/2)) + 'px';
-        this.Left = 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)';
+    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.arrowTop =  (popover_ref.offsetHeight - 10) + 'px';
+          this.arrowLeft = popover_ref.offsetWidth / 2 + 'px';
+          this.rotate = '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.arrowTop = '-16px';
+          this.arrowLeft = popover_ref.offsetWidth / 2 + 'px';
+          this.rotate = '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.arrowTop = popover_ref.offsetHeight / 2 - (popover_ref.firstElementChild.offsetHeight / 2) + 'px';
+          this.arrowLeft = (popover_ref.offsetWidth - 1) + 'px';
+          this.rotate = 'rotate(180deg)';
+        }
+      } else {
+        if (this.config.placement !== 'right') {
+          console.error('invalid placement defaulting to {placement: right}');
+        }
+        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 / 2) - this.eventTarget.offsetHeight / 2)) + 'px';
+          this.Left = 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)';
+        }
       }
     }
   }
 
   calcSpacing() {
-    if (this.config.placement == 'top' || this.config.placement == 'bottom') {
+    if (this.config.placement === 'top' || this.config.placement === 'bottom') {
       if (this.config.popoverData !== '' && this.config.popoverTitle !== '') {
         this.Spacing = 34;
         this.arrowTop = '34px';

From 634a2e4d5fe5fbcee65140fb543fcc32e80cd061 Mon Sep 17 00:00:00 2001
From: jmwilhite <jwilhite4@mail.csuchico.edu>
Date: Mon, 12 Mar 2018 12:03:23 -0700
Subject: [PATCH 5/7] 660: fixed quotation marks

---
 src/bossy-ui/components/alert/alert.config.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/bossy-ui/components/alert/alert.config.ts b/src/bossy-ui/components/alert/alert.config.ts
index 99706e62..18b4ee55 100644
--- a/src/bossy-ui/components/alert/alert.config.ts
+++ b/src/bossy-ui/components/alert/alert.config.ts
@@ -6,13 +6,13 @@ export class BossyAlertConfig {
               public large: boolean) {
   }
 }
-export enum alertType{
-    primary= "primary",
-    secondary= "secondary",
-    success= "success",
-    danger= "danger",
-    warning= "warning",
-    info= "info",
-    light= "light",
-    dark= "dark"
+export enum alertType {
+    primary= 'primary',
+    secondary= 'secondary',
+    success= 'success',
+    danger= 'danger',
+    warning= 'warning',
+    info= 'info',
+    light= 'light',
+    dark= 'dark'
 }

From 785d5803f34c3dfc3a96cac9a4a130fa54a26511 Mon Sep 17 00:00:00 2001
From: ZachW628 <ztron628@gmail.com>
Date: Mon, 26 Mar 2018 00:24:06 -0700
Subject: [PATCH 6/7] I think I'm finished with popover. Added comments, and
 made code more readable.

Signed-off-by: ZachW628 <ztron628@gmail.com>
---
 .../components/popover/popover.component.html |  4 +-
 .../components/popover/popover.component.ts   | 91 ++++++++++---------
 2 files changed, 50 insertions(+), 45 deletions(-)

diff --git a/src/bossy-ui/components/popover/popover.component.html b/src/bossy-ui/components/popover/popover.component.html
index 4f9cb982..74d48294 100644
--- a/src/bossy-ui/components/popover/popover.component.html
+++ b/src/bossy-ui/components/popover/popover.component.html
@@ -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>
diff --git a/src/bossy-ui/components/popover/popover.component.ts b/src/bossy-ui/components/popover/popover.component.ts
index c0d4a822..114c08b9 100644
--- a/src/bossy-ui/components/popover/popover.component.ts
+++ b/src/bossy-ui/components/popover/popover.component.ts
@@ -15,49 +15,49 @@ 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') {
@@ -65,33 +65,33 @@ 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)) - (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') {
@@ -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';
       }
     }

From 9d796447b85980186808339a217c48089895c825 Mon Sep 17 00:00:00 2001
From: ZachW628 <ztron628@gmail.com>
Date: Mon, 26 Mar 2018 00:24:06 -0700
Subject: [PATCH 7/7] I think I'm finished with popover. Added comments, and
 made code more readable.

Signed-off-by: ZachW628 <ztron628@gmail.com>
---
 .../components/popover/popover.component.html |  4 +-
 .../components/popover/popover.component.ts   | 91 ++++++++++---------
 2 files changed, 50 insertions(+), 45 deletions(-)

diff --git a/src/bossy-ui/components/popover/popover.component.html b/src/bossy-ui/components/popover/popover.component.html
index 4f9cb982..74d48294 100644
--- a/src/bossy-ui/components/popover/popover.component.html
+++ b/src/bossy-ui/components/popover/popover.component.html
@@ -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>
diff --git a/src/bossy-ui/components/popover/popover.component.ts b/src/bossy-ui/components/popover/popover.component.ts
index c0d4a822..4de14696 100644
--- a/src/bossy-ui/components/popover/popover.component.ts
+++ b/src/bossy-ui/components/popover/popover.component.ts
@@ -15,49 +15,49 @@ 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') {
@@ -65,33 +65,33 @@ 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)) - (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') {
@@ -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';
       }
     }