Skip to content

Commit 03486e7

Browse files
lokesh-coderlokesh-coder
authored
chrore: merge fix/allow-custom-props-in-host-component with master
2 parents 19c04e1 + 7432714 commit 03486e7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+480
-645
lines changed

‎README.md‎

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -232,8 +232,8 @@ new FullScreenPosition();
232232

233233
```typescript
234234
this.toppy
235-
.position(position:Position)
236-
.config(configuration:ToppyConfig = {})
235+
.position(position: ToppyPosition)
236+
.config(configuration: ToppyConfig = {})
237237
.content('hello')
238238
.create();
239239
```
@@ -255,23 +255,7 @@ this.toppy
255255

256256
#### Component Data
257257

258-
When you host a component, you can control the overlay through `CurrentOverlay` service. As of now, this service has only one method called `close` to close the overlay from the host component. But, soon more API will be added to this service.
259-
260-
```typescript
261-
// host component
262-
@Component({
263-
template: '<div>Some text</div>'
264-
})
265-
export class HostComponent {
266-
constructor(private _overlay: CurrentOverlay) {}
267-
268-
close() {
269-
this._overlay.close();
270-
}
271-
}
272-
```
273-
274-
You can also set properties to component when creating the overlay.
258+
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`.
275259

276260
```typescript
277261
this.overlay = this._toppy
@@ -280,17 +264,18 @@ this.overlay = this._toppy
280264
.create();
281265
```
282266

283-
Now automatically all props are attached to host component and you can access it like,
284-
285267
```typescript
286268
// host component
287269
@Component({
288270
template: '<div>Some text</div>'
289271
})
290-
export class HostComponent {
291-
propName; // else tslint will throw error
292-
constructor() {
293-
console.log(this.propName); // will return 'toppy-test-prop'
272+
export class HelloComponent {
273+
constructor(public overlay: ToppyOverlay) {
274+
console.log(this.overlay.props.propName); // will return 'toppy-test-prop'
275+
}
276+
277+
close() {
278+
this.overlay.close();
294279
}
295280
}
296281
```
@@ -334,15 +319,15 @@ this.overlay = this._toppy
334319

335320
/* Toppy */
336321

337-
Toppy.position(position:Position):Toppy
322+
Toppy.position(position: ToppyPosition):Toppy
338323

339-
Toppy.config(config:ToppyConfig):Toppy
324+
Toppy.config(config: ToppyConfig):Toppy
340325

341326
Toppy.content(data: ContentData, props: ContentProps = {}):Toppy
342327

343328
Toppy.create(key: string = ''):ToppyControl
344329

345-
Toppy.getCtrl(id:string):ToppyControl
330+
Toppy.getCtrl(id: string):ToppyControl
346331

347332
Toppy.destroy():void
348333
```
@@ -361,7 +346,7 @@ ToppyControl.onDocumentClick():Observable<any>
361346

362347
ToppyControl.onWindowResize():Observable<any>
363348

364-
ToppyControl.changePosition(newPosition: Position): void
349+
ToppyControl.changePosition(newPosition: ToppyPosition): void
365350

366351
ToppyControl.updateContent(content: ContentData, props: ContentProps = {}):void
367352

‎docs/app/app.component.html‎

Lines changed: 62 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<img src="./assets/toppy-logo.png" alt="Toppy" width="100" />
77
<p class="text-center mt-3">
88
Toppy is a tiny library to create overlays for Angular applications. Overlays are used in
9-
<span>tooltip</span>, <span>modal</span>, <span>sidemenu</span>, <span>dropdowns</span>,<span>popup</span>,
9+
<span>tooltip</span>, <span>modal</span>, <span>sidemenu</span>, <span>dropdowns</span>, <span>popup</span>,
1010
<span>context menu</span>, <span>toaster</span>, <span>alerts</span>, <span>datepicker</span>,
1111
<span>popovers</span> etc
1212
</p>
@@ -54,6 +54,66 @@
5454
</div>
5555
<div class="container">
5656
<div class="row">
57-
<div class="col-md-8 mx-auto"><app-content class="table"></app-content></div>
57+
<div class="col-md-4">
58+
<div class="sidemenu d-none d-md-block">
59+
<ul snScrollSpy id="sb">
60+
<li>
61+
<a (click)="scrollTo('installation')" [ngClass]="{ active: currentSection === 'installation' }"
62+
><span class="toppy-icon icon-terminal"></span> Installation</a
63+
>
64+
</li>
65+
<li>
66+
<a (click)="scrollTo('content-types')" [ngClass]="{ active: currentSection === 'content-types' }"
67+
><span class="toppy-icon icon-tag"></span> Content types</a
68+
>
69+
</li>
70+
<li>
71+
<a (click)="scrollTo('positions')" [ngClass]="{ active: currentSection === 'positions' }"
72+
><span class="toppy-icon icon-navigation"></span> Positions</a
73+
>
74+
</li>
75+
<li>
76+
<a (click)="scrollTo('communication')" [ngClass]="{ active: currentSection === 'communication' }"
77+
><span class="toppy-icon icon-rss"></span> Communication</a
78+
>
79+
</li>
80+
<li>
81+
<a (click)="scrollTo('examples')" [ngClass]="{ active: currentSection === 'examples' }"
82+
><span class="toppy-icon icon-zap"></span> Examples</a
83+
>
84+
</li>
85+
<li>
86+
<a (click)="scrollTo('configuration')" [ngClass]="{ active: currentSection === 'configuration' }"
87+
><span class="toppy-icon icon-settings"></span> Configuration</a
88+
>
89+
</li>
90+
<li>
91+
<a (click)="scrollTo('api')" [ngClass]="{ active: currentSection === 'api' }"
92+
><span class="toppy-icon icon-file"></span> API</a
93+
>
94+
</li>
95+
<li>
96+
<a (click)="scrollTo('contribution')" [ngClass]="{ active: currentSection === 'contribution' }"
97+
><span class="toppy-icon icon-users"></span> Contribution</a
98+
>
99+
</li>
100+
<li>
101+
<a (click)="scrollTo('credits')" [ngClass]="{ active: currentSection === 'credits' }"
102+
><span class="toppy-icon icon-hash"></span> Credits</a
103+
>
104+
</li>
105+
<li>
106+
<a (click)="scrollTo('issues')" [ngClass]="{ active: currentSection === 'issues' }"
107+
><span class="toppy-icon icon-help"></span> Issues</a
108+
>
109+
</li>
110+
</ul>
111+
</div>
112+
</div>
113+
<div class="col-md-8">
114+
<div id="parentDiv" scrollSpy [spiedTags]="['H3']" (sectionChange)="onSectionChange($event)">
115+
<app-content class="table"></app-content>
116+
</div>
117+
</div>
58118
</div>
59119
</div>

‎docs/app/app.component.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { HttpClient } from '@angular/common/http';
22
import { Component, ElementRef, ViewChild } from '@angular/core';
3+
import { fromEvent } from 'rxjs';
34
// import { Toppy } from 'toppy';
45
import { code } from './codes';
56

@@ -25,6 +26,20 @@ export class AppComponent {
2526
this.getCurrentVerison();
2627
});
2728
}
29+
currentSection = '';
30+
31+
onSectionChange(sectionId: string) {
32+
this.currentSection = sectionId;
33+
}
34+
35+
scrollTo(section) {
36+
this.currentSection = section;
37+
document.querySelector('#' + section).scrollIntoView();
38+
}
39+
40+
ngOnInit() {
41+
this.onScroll();
42+
}
2843

2944
ngafterViewInit() {
3045
this.getCurrentVerison();
@@ -42,4 +57,18 @@ export class AppComponent {
4257
onVersionChange(version) {
4358
(window as any).location = `https://lokesh-coder.github.io/toppy/${version}`;
4459
}
60+
61+
onScroll() {
62+
fromEvent(window, 'scroll')
63+
.pipe()
64+
.subscribe(res => {
65+
const heroHeight = document.querySelector('.hero').getBoundingClientRect().height;
66+
const scrolledTo = document.documentElement.scrollTop;
67+
if (scrolledTo >= heroHeight) {
68+
document.querySelector('body').classList.add('sidebar-fixed');
69+
} else {
70+
document.querySelector('body').classList.remove('sidebar-fixed');
71+
}
72+
});
73+
}
4574
}

‎docs/app/app.module.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import { HttpClient, HttpClientModule } from '@angular/common/http';
1+
import { HttpClientModule } from '@angular/common/http';
22
import { NgModule } from '@angular/core';
33
import { FormsModule } from '@angular/forms';
44
import { BrowserModule } from '@angular/platform-browser';
5-
import { MarkdownModule } from 'ngx-markdown';
65
import { ToppyModule } from 'toppy';
76
import { AppComponent } from './app.component';
87
import { ControlExampleComponent } from './examples/control-example/control-example.component';
@@ -21,7 +20,7 @@ import { SimpleModalComponent } from './host-components/simple-modal/simple-moda
2120
import { TooltipComponent } from './host-components/tooltip/tooltip.component';
2221
import { TestComponent } from './test/test.component';
2322
import { ContentComponent } from './utils/content/content.component';
24-
import { ScollSpyDirective } from './utils/scollspy.directive';
23+
import { ScrollSpyDirective } from './utils/scollspy.directive';
2524
import { SectionComponent } from './utils/section/section.component';
2625
import { SubSectionComponent } from './utils/sub-section/sub-section.component';
2726

@@ -40,15 +39,15 @@ import { SubSectionComponent } from './utils/sub-section/sub-section.component';
4039
FullscreenPositionExampleComponent,
4140
DragExampleComponent,
4241
HeroScreenComponent,
43-
ScollSpyDirective,
4442
ModalExampleComponent,
4543
ContentComponent,
4644
DynamicTextExampleComponent,
4745
DropdownExampleComponent,
4846
RibbonExampleComponent,
49-
ControlExampleComponent
47+
ControlExampleComponent,
48+
ScrollSpyDirective
5049
],
51-
imports: [BrowserModule, FormsModule, HttpClientModule, MarkdownModule.forRoot({ loader: HttpClient }), ToppyModule],
50+
imports: [BrowserModule, FormsModule, HttpClientModule, ToppyModule],
5251
providers: [],
5352
entryComponents: [TestComponent, TooltipComponent, SimpleModalComponent, SimpleListComponent, HeroScreenComponent],
5453
bootstrap: [AppComponent],

‎docs/app/examples/drag-example/drag-example.component.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@
77
-->
88
<div class="drag-element-holder">
99
<img
10-
src="./assets/svg/elephant.svg"
10+
src="./assets/img/fly.png"
1111
draggable="true"
12-
style="width: 100px;"
1312
#el
1413
class="drag-element"
1514
(mouseenter)="onMouseOver()"

‎docs/app/examples/dropdown-example/dropdown-example.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<div class="dropdown-field" #el (click)="open()" [ngClass]="{ open: isOpen }">
2-
<img src="./assets/svg/{{selectedData.icon}}.svg" alt="" /> {{ selectedData.name }}
2+
<img src="./assets/img/{{ selectedData.icon }}.png" alt="" /> {{ selectedData.name }}
33
</div>
44

55
<div class="text-selection" #el2 (click)="open2()">
6-
I like <span>{{ selectedEatable.name }}</span>
6+
Do you like it? <span>{{ selectedEatable.name }}</span>
77
</div>
88

99
<ng-template #tpl let-toppy>
1010
<ul class="dropdown-ist">
1111
<li (click)="select(item)" *ngFor="let item of items" [ngClass]="{ selected: item.name == selectedData.name }">
12-
<img src="./assets/svg/{{item.icon}}.svg" alt="" /> {{ item.name }}
12+
<img src="./assets/img/{{ item.icon }}.png" alt="" /> {{ item.name }}
1313
</li>
1414
</ul>
1515
</ng-template>
@@ -21,7 +21,7 @@
2121
*ngFor="let item of eatables"
2222
[ngClass]="{ selected: item.name == selectedEatable.name }"
2323
>
24-
<img src="./assets/svg/{{item.icon}}.svg" alt="" />
24+
<img src="./assets/img/{{ item.icon }}.png" alt="" />
2525
</li>
2626
</ul>
2727
</ng-template>

‎docs/app/examples/dropdown-example/dropdown-example.component.ts‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,13 @@ export class DropdownExampleComponent implements OnInit {
1414
private _toppyControl2: ToppyControl;
1515
@ViewChild('tpl', { read: TemplateRef }) tpl: TemplateRef<any>;
1616
@ViewChild('tpl2', { read: TemplateRef }) tpl2: TemplateRef<any>;
17-
items = [
18-
{ name: 'giraffe', icon: 'giraffe' },
19-
{ name: 'elephant', icon: 'elephant' },
20-
{ name: 'bottle', icon: 'bottle' }
21-
];
17+
items = [{ name: 'Cow', icon: 'cow' }, { name: 'Goat', icon: 'goat' }, { name: 'Snake', icon: 'snake' }];
2218
eatables = [
23-
{ name: 'Beer', icon: 'beer' },
24-
{ name: 'Lollipop', icon: 'lollipop' },
25-
{ name: 'Sandwich', icon: 'sandwich' },
26-
{ name: 'Pizza', icon: 'pizza' },
27-
{ name: 'Candy', icon: 'candy' }
19+
{ name: 'Nah!', icon: 'one' },
20+
{ name: 'Not so much', icon: 'two' },
21+
{ name: 'Okay', icon: 'three' },
22+
{ name: 'looks good!', icon: 'four' },
23+
{ name: 'Yes, it is cool!!', icon: 'five' }
2824
];
2925
selectedData;
3026
selectedEatable;

‎docs/app/examples/dynamic-text-example/dynamic-text-example.component.html‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
11
<div class="drag-element-holder">
2-
<img
3-
src="./assets/svg/clock.svg"
4-
style="width: 100px;"
5-
#el
6-
(mouseenter)="onMouseOver()"
7-
(mouseleave)="onMouseLeave()"
8-
/>
2+
<img src="./assets/img/clock.png" #el (mouseenter)="onMouseOver()" (mouseleave)="onMouseLeave()" />
93
</div>

‎docs/app/examples/modal-example/modal-example.component.html‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
<div class="drag-element-holder">
2-
<img src="./assets/svg/bottle.svg" class="pointer" style="width: 100px;" #el (click)="open()" />
3-
</div>
1+
<div class="drag-element-holder"><img src="./assets/img/mail.png" class="pointer" #el (click)="open()" /></div>
42

5-
<div class="drag-element-holder">
6-
<img src="./assets/svg/giraffe.svg" class="pointer" style="width: 100px;" #el2 (click)="openImage()" />
7-
</div>
3+
<div class="drag-element-holder"><img src="./assets/img/bomb.png" class="pointer" #el2 (click)="openImage()" /></div>
84

95
<ng-template #modalTpl let-foo>
106
<div class="modal-container">
@@ -19,3 +15,4 @@
1915
<div class="modal-footer"><button class="dismiss btn btn-danger" (click)="foo.close()">Close</button></div>
2016
</div>
2117
</ng-template>
18+
<img src="./assets/img/blast.png" style="display:none;" />

‎docs/app/examples/modal-example/modal-example.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export class ModalExampleComponent implements OnInit {
4242
closeOnEsc: true,
4343
closeOnDocClick: true
4444
})
45-
.content('<img src="./assets/svg/giraffe.svg"/>', { hasHTML: true })
45+
.content('<img src="./assets/img/blast.png" width="100%"/>', { hasHTML: true })
4646
.create();
4747
}
4848
open() {

0 commit comments

Comments
 (0)