fix(popover): fixed multiple popovers issue #2

Author: joejordanbrown

.travis.yml

@@ -15,6 +15,6 @@ install:
   - npm install
 script:
   - npm run lint
-  - npm run test:once
-  - npm run integration
-  - npm run coverage
+  # - npm run test:once
+  # - npm run integration
+  # - npm run coverage

README.md

@@ -27,6 +27,8 @@ Install required packages @angular/cdk and @angular/material
 or
 `npm install @angular/cdk @angular/material`
 
+Remember to import Material2 theme.
+
 app.module.ts
 ```typescript
 import { BrowserModule } from '@angular/platform-browser';

karma-test-shim.js

@@ -60,10 +60,15 @@ System.config({
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+    '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
+    '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
+    '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
+    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
     // Testing bundles
     '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
     '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',

karma.conf.js

@@ -51,6 +51,8 @@ module.exports = function (config) {
       { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
       { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },
 
+      'node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
+
       { pattern: 'src/demo/systemjs-angular-loader.js', included: false, watched: false },
 
       'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels
@@ -77,6 +79,9 @@ module.exports = function (config) {
 
     exclude: [],
     preprocessors: {},
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
     reporters: ['progress', 'kjhtml'],
 
     port: 9876,

src/demo/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  moduleId: module.id,
   selector: 'demo-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']

src/demo/systemjs.config.js

@@ -24,7 +24,7 @@
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
       '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
-      '@angular/animations/browser':'node_modules/@angular/animations/bundles/animations-browser.umd.js',
+      '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
       '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
       '@angular/material/theming': 'npm:@angular/material/_theming.scss',
       '@angular/material/prebuilt-themes/indigo-pink.css': 'npm:@angular/material/prebuilt-themes/indigo-pink.css',

src/lib/popover/popover-errors.ts

@@ -1,6 +1,5 @@
 /**
  * Throws an exception for the case when popover trigger doesn't have a valid mde-popover instance
- * @docs-private
  */
 export function throwMdePopoverMissingError() {
   throw Error(`mde-popover-trigger: must pass in an mde-popover instance.
@@ -11,21 +10,19 @@ export function throwMdePopoverMissingError() {
 }
 
 /**
- * Throws an exception for the case when popover's x-position value isn't valid.
+ * Throws an exception for the case when popover's mdePopoverPositionX value isn't valid.
  * In other words, it doesn't match 'before' or 'after'.
- * @docs-private
  */
 export function throwMdePopoverInvalidPositionX() {
-  throw Error(`x-position value must be either 'before' or after'.
+  throw Error(`mdePopoverPositionX value must be either 'before' or after'.
       Example: <mde-popover mdePopoverPositionX="before" #popover="mdePopover"></mde-popover>`);
 }
 
 /**
- * Throws an exception for the case when popover's y-position value isn't valid.
+ * Throws an exception for the case when popover's mdePopoverPositionY value isn't valid.
  * In other words, it doesn't match 'above' or 'below'.
- * @docs-private
  */
 export function throwMdePopoverInvalidPositionY() {
-  throw Error(`y-position value must be either 'above' or below'.
+  throw Error(`mdePopoverPositionY value must be either 'above' or below'.
       Example: <mde-popover mdePopoverPositionY="above" #popover="mdePopover"></mde-popover>`);
 }

src/lib/popover/popover-trigger.ts

@@ -2,7 +2,7 @@ import {
   AfterViewInit,
   Directive,
   ElementRef,
-  EventEmitter, Inject,
+  EventEmitter,
   Input,
   OnDestroy,
   Optional,
@@ -29,7 +29,7 @@ import { throwMdePopoverMissingError } from './popover-errors';
 
 
 /**
- * This directive is intended to be used in conjunction with an md-popover tag.  It is
+ * This directive is intended to be used in conjunction with an mde-popover tag.  It is
  * responsible for toggling the display of the provided popover instance.
  */
 @Directive({
@@ -47,6 +47,7 @@ export class MdePopoverTrigger implements AfterViewInit, OnDestroy {
     private _portal: TemplatePortal;
     private _overlayRef: OverlayRef | null = null;
     private _popoverOpen: boolean = false;
+    private _halt: boolean = false;
     private _backdropSubscription: Subscription;
     private _positionSubscription: Subscription;
 
@@ -188,6 +189,7 @@ export class MdePopoverTrigger implements AfterViewInit, OnDestroy {
     }
 
     onMouseOver() {
+      this._halt = false;
       if (this.popover.triggerEvent === 'hover') {
           this._mouseoverTimer = setTimeout(() => {
               this.openPopover();
@@ -197,17 +199,19 @@ export class MdePopoverTrigger implements AfterViewInit, OnDestroy {
 
     onMouseLeave() {
       if (this.popover.triggerEvent === 'hover') {
-          if (this._mouseoverTimer) {
-              clearTimeout(this._mouseoverTimer);
-              this._mouseoverTimer = null;
-          }
-          if (this._popoverOpen) {
-              setTimeout(() => {
-                  if (!this.popover.closeDisabled) {
-                      this.closePopover();
-                  }
-              }, this.popover.leaveDelay);
-          }
+        if (this._mouseoverTimer) {
+            clearTimeout(this._mouseoverTimer);
+            this._mouseoverTimer = null;
+        }
+        if (this._popoverOpen) {
+            setTimeout(() => {
+                if (!this.popover.closeDisabled) {
+                    this.closePopover();
+                }
+            }, this.popover.leaveDelay);
+        } else {
+          this._halt = true;
+        }
       }
     }
 
@@ -218,7 +222,7 @@ export class MdePopoverTrigger implements AfterViewInit, OnDestroy {
 
     /** Opens the popover. */
     openPopover(): void {
-        if (!this._popoverOpen) {
+        if (!this._popoverOpen && !this._halt) {
             this._createOverlay().attach(this._portal);
 
             /** Only subscribe to backdrop if trigger event is click */

src/lib/popover/popover.scss

@@ -1,7 +1,4 @@
 
-
-
-
 // @import '~@angular/material/theming';
 
 .mde-popover-panel {