feat: attach component custom props on initialize without ToppyOverlay

lokesh-coder · lokesh-coder · commit e96a5f4a4e11 · 2018-12-31T10:25:06.000+05:30
diff --git a/docs/app/app.component.html b/docs/app/app.component.html
@@ -91,8 +91,8 @@
             >
           </li>
           <li>
-            <a (click)="scrollTo('communication')" [ngClass]="{ active: currentSection === 'communication' }"
-              ><span class="toppy-icon icon-rss"></span> Communication</a
+            <a (click)="scrollTo('content-properties')" [ngClass]="{ active: currentSection === 'content-properties' }"
+              ><span class="toppy-icon icon-rss"></span> Content Properties</a
             >
           </li>
           <li>
diff --git a/docs/app/host-components/hero-screen/hero-screen.component.ts b/docs/app/host-components/hero-screen/hero-screen.component.ts
@@ -1,14 +1,14 @@
 import { Component } from '@angular/core';
-import { ToppyOverlay } from 'toppy';
 
 @Component({
   selector: 'app-hero-screen',
   templateUrl: './hero-screen.component.html',
   styles: []
 })
 export class HeroScreenComponent {
-  constructor(public overlay: ToppyOverlay) {}
+  close;
+  constructor() {}
   dispose() {
-    this.overlay.close();
+    this.close();
   }
 }
diff --git a/docs/app/test/test.component.html b/docs/app/test/test.component.html
@@ -1,4 +1,4 @@
 <div class="box">
   <p>Hello Everyone!</p>
-  <span (click)="close()">close</span>
-</div>
+  <span (click)="dismiss()">close</span>
+</div>
diff --git a/docs/app/test/test.component.ts b/docs/app/test/test.component.ts
@@ -1,18 +1,16 @@
 import { Component, OnInit } from '@angular/core';
-import { ToppyOverlay } from 'toppy';
 
 @Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.scss']
 })
 export class TestComponent implements OnInit {
-  constructor(private oc: ToppyOverlay) {}
+  close;
+  constructor() {}
 
-  ngOnInit() {
-    console.log('ID', this.oc);
-  }
-  close() {
-    this.oc.close();
+  ngOnInit() {}
+  dismiss() {
+    this.close();
   }
 }
diff --git a/docs/app/utils/content/content.component.html b/docs/app/utils/content/content.component.html
@@ -120,9 +120,9 @@ <h5 id="fullscreen-position"><a href="#fullscreen-position">Fullscreen position<
 </p>
 <pre><code class="hljs language-typescript"><span class="hljs-keyword">new</span> FullscreenPosition();
 </code></pre>
-<h3 id="communication"><a href="#communication"><span class="toppy-icon icon-rss"></span> Communication</a></h3>
-<h5 id="component-data"><a href="#component-data">Component Data</a></h5>
-<p>When you host a component, you can control the overlay through <code>ToppyOverlay</code> service. Using this service you can access all properties that is provided in content. Also the properties comes with <code>close</code>.</p>
+<h3 id="content-properties"><a href="#content-properties"><span class="toppy-icon icon-rss"></span> Content Properties</a></h3>
+<p>When you are adding content, optionally you can add additional custom data to them. Which can be accessed later inside the content. This applies only if the content type is <strong>Component</strong> or <strong>TemplateRef</strong>. The data will be auto attached with the content and comes with <code>close</code> property, to dismiss the overlay programatically.</p>
+<h5 id="component-props"><a href="#component-props">Component Props</a></h5>
 <pre><code class="hljs language-typescript"><span class="hljs-keyword">this</span>.overlay = <span class="hljs-keyword">this</span>._toppy
   .position(position)
   .content(HelloComponent, &#123; propName: <span class="hljs-string">'toppy-test-prop'</span> &#125;)
@@ -133,30 +133,29 @@ <h5 id="component-data"><a href="#component-data">Component Data</a></h5>
   template: <span class="hljs-string">'&#x3C;div>Some text&#x3C;/div>'</span>
 &#125;)
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> HelloComponent &#123;
-  <span class="hljs-keyword">constructor</span>(<span class="hljs-params"><span class="hljs-keyword">public</span> overlay: ToppyOverlay</span>) &#123;
-    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.overlay.props.propName); <span class="hljs-comment">// will return 'toppy-test-prop'</span>
+  propName; <span class="hljs-comment">// declare. Else TSlint throws error</span>
+  close; <span class="hljs-comment">// just declare</span>
+  <span class="hljs-keyword">constructor</span>(<span class="hljs-params"></span>) &#123;
+    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.propName); <span class="hljs-comment">// will return 'toppy-test-prop'</span>
   &#125;
 
-  close() &#123;
-    <span class="hljs-keyword">this</span>.overlay.close();
+  dismiss() &#123;
+    <span class="hljs-keyword">this</span>.close(); <span class="hljs-comment">// auto binded</span>
   &#125;
 &#125;
 </code></pre>
-<h5 id="template-data"><a href="#template-data">Template Data</a></h5>
-<p>This is very similar to above one. When you use template as a content, you can pass additional data to it.</p>
+<h5 id="template-props"><a href="#template-props">Template props</a></h5>
 <pre><code class="hljs language-typescript"><span class="hljs-keyword">this</span>.overlay = <span class="hljs-keyword">this</span>._toppy
   .position(position)
   .content(template, &#123; name: <span class="hljs-string">'Johny'</span> &#125;)
   .create();
 </code></pre>
-<p>Then in your template you can refer the data like this,</p>
 <pre><code class="hljs language-html" id="tpl"><span class="hljs-tag">&#x3C;<span class="hljs-name">ng-template</span> #<span class="hljs-attr">tpl</span> <span class="hljs-attr">let-toppy</span>></span>
   <span class="hljs-tag">&#x3C;<span class="hljs-name">div</span>></span>Hello <span class="hljs-tag">&#x3C;<span class="hljs-name">span</span> [<span class="hljs-attr">innerText</span>]=<span class="hljs-string">"toppy.name"</span>></span><span class="hljs-tag">&#x3C;/<span class="hljs-name">span</span>></span> !<span class="hljs-tag">&#x3C;/<span class="hljs-name">div</span>></span>
   <span class="hljs-tag">&#x3C;<span class="hljs-name">button</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"toppy.close()"</span>></span>Close<span class="hljs-tag">&#x3C;/<span class="hljs-name">button</span>></span>
 <span class="hljs-tag">&#x3C;/<span class="hljs-name">ng-template</span>></span>
 </code></pre>
-<p>Method <code>close</code> is automatically binded.</p>
-<h5 id="plain-text"><a href="#plain-text">Plain text</a></h5>
+<h5 id="plain-text-props"><a href="#plain-text-props">Plain text props</a></h5>
 <p>When you use Plain text as a content, optionally you can able to set a class name to that <code>div</code> block.</p>
 <pre><code class="hljs language-typescript"><span class="hljs-keyword">this</span>.overlay = <span class="hljs-keyword">this</span>._toppy
   .position(position)
diff --git a/docs/markdown/main.md b/docs/markdown/main.md
@@ -157,11 +157,11 @@ new SlidePosition({
 new FullscreenPosition();
 ```
 
-### [ ]{.toppy-icon .icon-rss} Communication
+### [ ]{.toppy-icon .icon-rss} Content Properties
 
-##### Component Data
+When you are adding content, optionally you can add additional custom data to them. Which can be accessed later inside the content. This applies only if the content type is **Component** or **TemplateRef**. The data will be auto attached with the content and comes with `close` property, to dismiss the overlay programatically.
 
-When you host a component, you can control the overlay through `ToppyOverlay` service. Using this service you can access all properties that is provided in content. Also the properties comes with `close`.
+##### Component Props
 
 ```typescript
 this.overlay = this._toppy
@@ -176,19 +176,19 @@ this.overlay = this._toppy
   template: '<div>Some text</div>'
 })
 export class HelloComponent {
-  constructor(public overlay: ToppyOverlay) {
-    console.log(this.overlay.props.propName); // will return 'toppy-test-prop'
+  propName; // declare. Else TSlint throws error
+  close; // just declare
+  constructor() {
+    console.log(this.propName); // will return 'toppy-test-prop'
   }
 
-  close() {
-    this.overlay.close();
+  dismiss() {
+    this.close(); // auto binded
   }
 }
 ```
 
-##### Template Data
-
-This is very similar to above one. When you use template as a content, you can pass additional data to it.
+##### Template props
 
 ```typescript
 this.overlay = this._toppy
@@ -197,18 +197,14 @@ this.overlay = this._toppy
   .create();
 ```
 
-Then in your template you can refer the data like this,
-
 ```html
 <ng-template #tpl let-toppy>
   <div>Hello <span [innerText]="toppy.name"></span> !</div>
   <button (click)="toppy.close()">Close</button>
 </ng-template>
 ```
 
-Method `close` is automatically binded.
-
-##### Plain text
+##### Plain text props
 
 When you use Plain text as a content, optionally you can able to set a class name to that `div` block.
 
diff --git a/projects/toppy/src/lib/template.html b/projects/toppy/src/lib/template.html
@@ -8,8 +8,6 @@
     <ng-container *ngSwitchCase="'t'">
       <ng-container *ngTemplateOutlet="content.data; context: { $implicit: content.props }"></ng-container>
     </ng-container>
-    <ng-container *ngSwitchCase="'c'">
-      <ng-container *ngComponentOutlet="content.data; injector: overlayInj || createInj"></ng-container>
-    </ng-container>
+    <ng-container *ngSwitchCase="'c'"> <ng-container *ngComponentOutlet="content.data"></ng-container> </ng-container>
   </ng-container>
 </div>
diff --git a/projects/toppy/src/lib/toppy-overlay.ts b/projects/toppy/src/lib/toppy-overlay.ts
diff --git a/projects/toppy/src/lib/toppy.component.ts b/projects/toppy/src/lib/toppy.component.ts
@@ -12,8 +12,7 @@ import { Observable, Subject } from 'rxjs';
 import { startWith, takeUntil, tap } from 'rxjs/operators';
 import { Content, ContentType, TID, ToppyConfig } from './models';
 import { ToppyPosition } from './position/position';
-import { ToppyOverlay } from './toppy-overlay';
-import { Bus, cssClass, newInjector, toCss } from './utils';
+import { Bus, cssClass, toCss } from './utils';
 
 @Component({
   // tslint:disable-next-line:component-selector
@@ -34,7 +33,6 @@ export class ToppyComponent implements OnInit, AfterViewInit, OnDestroy {
   el: HTMLElement | any;
   wrapperEl: HTMLElement | any;
   extra: string;
-  overlayInj: Injector = null;
   private die: Subject<1> = new Subject();
 
   constructor(private inj: Injector, private cd: ChangeDetectorRef, private elRef: ElementRef) {}
@@ -49,24 +47,15 @@ export class ToppyComponent implements OnInit, AfterViewInit, OnDestroy {
     this.el.setAttribute('data-tid', this.tid);
     cssClass('add', cls, `[data-tid='${[this.tid]}']`);
     cssClass('add', [this.config.bodyClass]);
+    if (this.content.type === ContentType.COMPONENT) {
+      Object.assign(this.content.data['prototype'], this.content.props);
+    }
   }
 
   ngAfterViewInit() {
     this.listenPos().subscribe();
   }
 
-  get createInj(): Injector {
-    this.overlayInj = newInjector(
-      {
-        provide: ToppyOverlay,
-        useFactory: () => new ToppyOverlay(this.content.props),
-        deps: []
-      },
-      this.inj
-    );
-    return this.overlayInj;
-  }
-
   updateTextContent(data: string): void {
     if (this.content.type === ContentType.STRING) {
       this.content.data = data;
diff --git a/projects/toppy/src/lib/toppy.ts b/projects/toppy/src/lib/toppy.ts
@@ -4,7 +4,7 @@ import { ContentData, ContentProps, ContentType, Inputs, InsidePlacement, TID, T
 import { GlobalPosition } from './position';
 import { ToppyPosition } from './position/position';
 import { ToppyControl } from './toppy-control';
-import { Bus, createId, getContent, newInjector } from './utils';
+import { Bus, createId, getContent } from './utils';
 
 @Injectable({
   providedIn: 'root'
@@ -41,13 +41,16 @@ export class Toppy {
   create(key: string = null): ToppyControl {
     this.tid = this.inputs.tid = key || createId();
 
-    const injector = newInjector(
-      {
-        provide: ToppyControl,
-        deps: [ApplicationRef, ComponentFactoryResolver, Injector]
-      },
+    const injector = Injector.create(
+      [
+        {
+          provide: ToppyControl,
+          deps: [ApplicationRef, ComponentFactoryResolver, Injector]
+        }
+      ],
       this.injector
     );
+
     const tc = injector.get(ToppyControl);
     if (Toppy.controls[this.tid]) {
       this.tid = createId();
diff --git a/projects/toppy/src/lib/utils.ts b/projects/toppy/src/lib/utils.ts
@@ -1,4 +1,4 @@
-import { Injector, StaticProvider, TemplateRef } from '@angular/core';
+import { TemplateRef } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import { Content, ContentData, ContentProps, ContentType, ToppyEvent, ToppyEventName } from './models';
@@ -19,10 +19,6 @@ export function createId() {
     .substr(2, 5);
 }
 
-export function newInjector(provider: StaticProvider, parent: Injector) {
-  return Injector.create({ providers: [provider], parent });
-}
-
 /* html dom utils */
 
 export function cssClass(method: 'add' | 'remove', cls: string[], target: string = 'body') {
diff --git a/projects/toppy/src/public_api.ts b/projects/toppy/src/public_api.ts
@@ -2,5 +2,4 @@ export { InsidePlacement, OutsidePlacement, SlidePlacement } from './lib/models'
 export { FullscreenPosition, GlobalPosition, RelativePosition, SlidePosition } from './lib/position';
 export { Toppy } from './lib/toppy';
 export { ToppyControl } from './lib/toppy-control';
-export { ToppyOverlay } from './lib/toppy-overlay';
 export { ToppyModule } from './lib/toppy.module';
diff --git a/projects/toppy/src/tests/toppy.component.spec.ts b/projects/toppy/src/tests/toppy.component.spec.ts
@@ -4,16 +4,15 @@ import { By } from '@angular/platform-browser';
 import { skip, take } from 'rxjs/operators';
 import { DefaultConfig } from '../lib/config';
 import { ContentType } from '../lib/models';
-import { ToppyOverlay } from '../lib/toppy-overlay';
 import { ToppyComponent } from '../lib/toppy.component';
 import { Bus } from '../lib/utils';
 
 @Component({
   selector: 'test-comp',
-  template: 'Hello {{o.props.name||"John"}}'
+  template: 'Hello {{name||"John"}}'
 })
 export class TestComponent {
-  constructor(public o: ToppyOverlay) {}
+  name;
 }
 
 @NgModule({
@@ -101,30 +100,13 @@ describe('@ ToppyComponent', () => {
       Bus.send('abc', 't_dynpos', { x: 10, y: 12 });
       expect(el.querySelector('.t-wrapper').getAttribute('style')).toEqual('left: 10px; top: 12px;');
     });
-  });
-
-  describe('#createInj', () => {
-    it('should return new StaticInjector ', () => {
-      expect(toppyComp.createInj.constructor.name).toEqual('StaticInjector');
-    });
-    it('should have CurrentOverlay', () => {
-      expect(toppyComp.createInj.get(ToppyOverlay)).toBeTruthy();
-      expect(toppyComp.createInj.get(ToppyOverlay).close).toBeTruthy();
-    });
-    it('should return close function on calling `close` method', () => {
-      toppyComp.content.props.close = () => '123';
-      const co = toppyComp.createInj.get(ToppyOverlay);
-      expect(co.close()).toBe('123');
-    });
-    it('should return all props', () => {
+    it('should render custom props in the template', () => {
       toppyComp.content.data = TestComponent;
       toppyComp.content.type = ContentType.COMPONENT;
       toppyComp.content.props = {
         name: 'Peter',
         id: 22
       };
-      // tslint:disable-next-line:no-unused-expression
-      const foo = toppyComp.createInj;
       fixture.detectChanges();
       expect(fixture.debugElement.query(By.css('test-comp')).nativeElement.textContent).toBe('Hello Peter');
     });

Original file line number	Diff line number	Diff line change
`@@ -91,8 +91,8 @@`
`91`	`91`	`>`
`92`	`92`	`</li>`
`93`	`93`	`<li>`
`94`		`- <a (click)="scrollTo('communication')" [ngClass]="{ active: currentSection === 'communication' }"`
`95`		`- ><span class="toppy-icon icon-rss"></span> Communication</a`
	`94`	`+ <a (click)="scrollTo('content-properties')" [ngClass]="{ active: currentSection === 'content-properties' }"`
	`95`	`+ ><span class="toppy-icon icon-rss"></span> Content Properties</a`
`96`	`96`	`>`
`97`	`97`	`</li>`
`98`	`98`	`<li>`