v2.0.1: Event manager plugin instead extending event manager + provided inside forRoot()

Gaillard · Gaillard · commit ef33fb931dcd · 2018-12-21T16:12:29.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,10 @@
 
+<a name="2.0.1"></a>
+# 2.0.1 (2018-12-21)
+
+* **Module import:** Service now provided inside `AngularSplitModule.forRoot()` method instead of directly in module annotation. **Warning:** Be sure to import module using `forRoot()` method otherwise it will not works anymore.
+* **Internal:** Now use an `EventManagerPlugin` instead of extending `EventManager` and use "as-split-undetected." template event prefix.
+
 <a name="2.0.0"></a>
 # 2.0.0 (2018-12-09)
 
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # angular-split [![npm latest version](https://img.shields.io/npm/v/angular-split/latest.svg?style=flat-square)](https://www.npmjs.com/package/angular-split) [![NPM next version](https://img.shields.io/npm/v/angular-split/next.svg?style=flat-square)](https://www.npmjs.com/package/angular-split) [![Travis build](https://img.shields.io/travis/com/bertrandg/angular-split/master.svg?style=flat-square&label=Cypress+E2E+tests)](https://travis-ci.com/bertrandg/angular-split)
-Lightweight Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.
+Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.
 
 Documentation and examples:
 [https://bertrandg.github.io/angular-split/](https://bertrandg.github.io/angular-split/)
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/angular-split/README.md b/projects/angular-split/README.md
@@ -1,5 +1,5 @@
 # angular-split [![npm latest version](https://img.shields.io/npm/v/angular-split/latest.svg?style=flat-square)](https://www.npmjs.com/package/angular-split) [![NPM next version](https://img.shields.io/npm/v/angular-split/next.svg?style=flat-square)](https://www.npmjs.com/package/angular-split) [![Travis build](https://img.shields.io/travis/com/bertrandg/angular-split/master.svg?style=flat-square&label=Cypress+E2E+tests)](https://travis-ci.com/bertrandg/angular-split)
-Lightweight Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.
+Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.
 
 Documentation and examples:
 [https://bertrandg.github.io/angular-split/](https://bertrandg.github.io/angular-split/)
diff --git a/projects/angular-split/package.json b/projects/angular-split/package.json
@@ -1,7 +1,7 @@
 {
   "name": "angular-split",
-  "version": "2.0.0",
-  "description": "Lightweight Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.",
+  "version": "2.0.1",
+  "description": "Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.",
   "author": "bertrandg",
   "repository": {
       "type": "git",
diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts
@@ -51,9 +51,9 @@ import { getPointFromEvent, getPixelSize, getInputBoolean, isValidTotalSize } fr
                  class="as-split-gutter"
                  [style.flex-basis.px]="gutterSize"
                  [style.order]="index*2+1"
-                 (undetected.click)="clickGutter($event, index+1)"
-                 (undetected.mousedown)="startDragging($event, index*2+1, index+1)"
-                 (undetected.touchstart)="startDragging($event, index*2+1, index+1)">
+                 (as-split-undetected.click)="clickGutter($event, index+1)"
+                 (as-split-undetected.mousedown)="startDragging($event, index*2+1, index+1)"
+                 (as-split-undetected.touchstart)="startDragging($event, index*2+1, index+1)">
                 <div class="as-split-gutter-icon"></div>
             </div>
         </ng-template>`,
diff --git a/projects/angular-split/src/lib/module.ts b/projects/angular-split/src/lib/module.ts
@@ -17,21 +17,18 @@ import { UndetectedEventPlugin } from "./service/UndetectedEventPlugin";
     exports: [
         SplitComponent,
         SplitAreaDirective,
-    ],
-    providers: [
-        {
-            provide: EVENT_MANAGER_PLUGINS,
-            useClass: UndetectedEventPlugin,
-            multi: true
-        }
     ]
 })
 export class AngularSplitModule {
 
     public static forRoot(): ModuleWithProviders {
         return {
             ngModule: AngularSplitModule,
-            providers: []
+            providers: [{
+                provide: EVENT_MANAGER_PLUGINS,
+                useClass: UndetectedEventPlugin,
+                multi: true
+            }]
         };
     }
 
diff --git a/projects/angular-split/src/lib/service/UndetectedEventPlugin.ts b/projects/angular-split/src/lib/service/UndetectedEventPlugin.ts
@@ -1,5 +1,5 @@
-import { Injectable} from '@angular/core';
-import { EventManager} from '@angular/platform-browser';
+import { Injectable } from '@angular/core';
+import { EventManager } from '@angular/platform-browser';
 
 /**
  * Credit to Michael Strobel from:
@@ -10,13 +10,11 @@ export class UndetectedEventPlugin {
     manager: EventManager;
 
     supports(eventName: string): boolean {
-        console.log('SUPPROT ? eventName', eventName)
-        return eventName.indexOf('undetected.') === 0;
+        return eventName.indexOf('as-split-undetected.') === 0;
     }
 
     addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
-        console.log('addEventListener > eventName', eventName)
-        const realEventName = eventName.slice(11);
+        const realEventName = eventName.slice(20);
 
         return this.manager.getZone().runOutsideAngular(() => this.manager.addEventListener(element, realEventName, handler));
     }
diff --git a/projects/angular-split/src/lib/service/customEventManager.service.ts b/projects/angular-split/src/lib/service/customEventManager.service.ts
diff --git a/src_app/app/app.module.ts b/src_app/app/app.module.ts
@@ -71,7 +71,7 @@ const routes = [
         CollapseModule.forRoot(),
         BsDropdownModule.forRoot(),
         SortableModule.forRoot(),
-        AngularSplitModule,
+        AngularSplitModule.forRoot(),
     ],
     providers: [{
         provide: LocationStrategy, useClass: HashLocationStrategy},
diff --git a/src_app/app/component/doc/doc.route.component.ts b/src_app/app/component/doc/doc.route.component.ts
@@ -42,10 +42,10 @@ export class DocComponent {
             {name: 'dragStart',         value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when drag starts.'},
             {name: 'dragEnd',           value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when drag ends.'},
             {name: 'gutterClick',       value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when user clicks on a gutter.'},
-            {name: 'transitionEnd',     value: 'Array<number>',                             details: 'Emit when transition ends (could be triggered from <code>[visible]</code> or <code>[size]</code>).<br>Only if <code>[useTransition]="true"</code>.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>'},
+            {name: 'transitionEnd',     value: 'Array<number>',                             details: 'Emit when transition ends (could be triggered from <code>[visible]</code> or <code>[size]</code> changes).<br>Only if <code>[useTransition]="true"</code>.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>'},
         ],
         class: [
-            {name: 'dragProgress$',         type: 'Observable<{gutterNum: number, sizes: Array<number>}>',  details: 'Emit when dragging. Replace old <code>(dragProgress)</code> template event for better flexibility about change detection mechanism.'},
+            {name: 'dragProgress$',         type: 'Observable<{gutterNum: number, sizes: Array<number>}>',  details: `Emit when dragging. Replace old <code>(dragProgress)</code> template event for better flexibility about change detection mechanism.<br><u>Warning: Running outside zone by design, if you need to notify angular add</u> <code>this.splitEl.dragProgress$.subscribe(x => this.ngZone.run(() => this.x = x));</code>`},
             {name: 'setVisibleAreaSizes()', type: '(Array<number>) => boolean',                             details: 'Set all <b>visible</b> area sizes in one go, return a boolean to know if input values were correct. Useful when combined with <code>dragProgress$</code> to sync multiple splits.'},
             {name: 'getVisibleAreaSizes()', type: '() => Array<number>',                                    details: 'Get all <b>visible</b> area sizes.'},
         ],
diff --git a/src_app/app/component/home/home.route.component.ts b/src_app/app/component/home/home.route.component.ts
@@ -32,7 +32,7 @@ import { Component } from '@angular/core';
                     angular-split 
                     <a href="https://www.npmjs.com/package/angular-split"><img src="https://img.shields.io/npm/v/angular-split/latest.svg?style=flat-square" alt="npm latest version" height="18"></a>&nbsp;<a href="https://www.npmjs.com/package/angular-split"><img src="https://img.shields.io/npm/v/angular-split/next.svg?style=flat-square" alt="npm next version" height="18"></a>&nbsp;<a href="https://travis-ci.com/bertrandg/angular-split"><img src="https://img.shields.io/travis/com/bertrandg/angular-split/master.svg?style=flat-square&label=Cypress+E2E+tests" alt="Build Status" height="18"></a> 
                 </h1>
-                <h4>Lightweight Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.</h4>
+                <h4>Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.</h4>
                 <br>
                 <h5>Install npm module:</h5>
                 <pre [innerText]="code1"></pre>
@@ -52,7 +52,7 @@ export class HomeComponent {
   
 @NgModule({
   imports: [
-    AngularSplitModule,
+    AngularSplitModule.forRoot(),
     ...
   ],
   ...
diff --git a/src_lazy_app/app/app.module.ts b/src_lazy_app/app/app.module.ts
@@ -2,7 +2,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
-// import { AngularSplitModule } from 'angular-split';
 
 import { SharedModule } from  './shared-module/shared.module';
 import { AppComponent } from './app.component';
@@ -22,10 +21,12 @@ const routes: Routes = [
   imports: [
     BrowserModule,
     RouterModule.forRoot(routes),
-    SharedModule,
-    // AngularSplitModule
+    SharedModule.forRoot(),
   ],
-  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
+  providers: [{
+    provide: LocationStrategy, 
+    useClass: HashLocationStrategy
+  }],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/src_lazy_app/app/home.component.ts b/src_lazy_app/app/home.component.ts
@@ -12,7 +12,7 @@ import { Component } from '@angular/core';
   `],
   template: `
     <h1>HomeComponent from AppModule using a split</h1>
-    <button (undetected.click)="test()">(undetected.click)</button> $ 
+    <button (as-split-undetected.click)="test()">(as-split-undetected.click)</button> $ 
     <button (click)="test()">(click)</button>
     <hr>
     <div style="height: 200px; background: yellow;">
diff --git a/src_lazy_app/app/lazy-loaded-module/lazy-loaded.component.ts b/src_lazy_app/app/lazy-loaded-module/lazy-loaded.component.ts
@@ -12,7 +12,7 @@ import { Component } from '@angular/core';
   `],
   template: `
     <h1>LazyLoadedComponent from LazyLoadedModule using a split</h1>
-    <button (undetected.click)="test()">(undetected.click)</button> $ 
+    <button (as-split-undetected.click)="test()">(as-split-undetected.click)</button> $ 
     <button (click)="test()">(click)</button>
     <hr>
     <div style="height: 200px; background: red;">
diff --git a/src_lazy_app/app/shared-module/shared.module.ts b/src_lazy_app/app/shared-module/shared.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AngularSplitModule } from 'angular-split';
 
@@ -12,4 +12,14 @@ import { AngularSplitModule } from 'angular-split';
     AngularSplitModule
   ]
 })
-export class SharedModule {}
+export class SharedModule {
+
+  public static forRoot(): ModuleWithProviders {
+      return {
+          ngModule: SharedModule,
+          providers: [
+            ...AngularSplitModule.forRoot().providers
+          ]
+      };
+  }
+}
