Skip to content

Commit 4e3e456

Browse files
EvilAlexeivalorkin
EvilAlexei
authored and
valorkin
committed
feat(docs): new aside menu (#2851)
* refactor(demo pages): new add-nav and content dynamic loading [WIP] * refactor(demo pages): new add-nav and content dynamic loading [WIP] * refactor(demo pages): new add-nav and content dynamic loading [WIP] * refactor(demo pages): new add-nav and content dynamic loading [WIP] * refactor(demo pages): new add-nav and content dynamic loading [WIP] * refactor(demo pages): new add-nav and content dynamic loading [WIP] * refactor(demo pages): new add-nav and content dynamic loading [WIP] * WIP feat(docs): new aside menu * WIP feat(docs): new aside menu * WIP feat(docs): new aside menu * WIP feat(docs): new aside menu * WIP feat(docs): new aside menu * WIP feat(docs): new aside menu * WIP feat(docs): new aside menu * WIP feat(docs): new aside menu * chore(docs): added docs-section component * chore(demo): made docs section to run on push * chore(demo): unified demo section component * feat(docs): New content management and generation logic for demo pages * feat(docs): New content management and generation logic for demo pages * feat(docs): New content management and generation logic for demo pages
1 parent a86e549 commit 4e3e456

File tree

145 files changed

+3172
-2356
lines changed

Some content is hidden

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

145 files changed

+3172
-2356
lines changed

‎demo/src/app/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
PageScrollService
1414
} from 'ng2-page-scroll';
1515
import { DOCUMENT } from '@angular/common';
16-
import { Analytics } from './api-docs/analytics/analytics';
16+
import { Analytics } from './docs/api-docs/analytics/analytics';
1717

1818
PageScrollConfig.defaultDuration = 11;
1919
PageScrollConfig.defaultScrollOffset = 70;

‎demo/src/app/app.module.ts

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,27 @@ import { RouterModule } from '@angular/router';
66
import { Ng2PageScrollModule } from 'ng2-page-scroll/ng2-page-scroll';
77
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
88
import { ngdoc } from '../ng-api-doc';
9-
import { NgApiDoc } from './api-docs/api-docs.model';
9+
import { NgApiDoc } from './docs/api-docs/api-docs.model';
1010

11-
import { NgApiDocModule } from './api-docs/index';
1211
import { AppComponent } from './app.component';
1312
import { routes } from './app.routing';
1413
import { LandingComponent } from './common/landing/landing.component';
15-
import { DocumentationComponent } from './common/documentation/documentation.component';
1614
import { TopMenuComponent } from './common/top-menu/top-menu.component';
1715
import { GettingStartedComponent } from './common/getting-started/getting-started.component';
16+
1817
import { ThemeStorage } from './theme/theme-storage';
1918
import { StyleManager } from './theme/style-manager';
20-
import { SharedModule } from './shared/shared.module';
19+
import { DocsModule } from './docs';
2120

2221
@NgModule({
2322
declarations: [
2423
AppComponent,
2524
GettingStartedComponent,
2625
TopMenuComponent,
27-
LandingComponent,
28-
DocumentationComponent
26+
LandingComponent
2927
],
3028
imports: [
31-
SharedModule,
32-
NgApiDocModule,
29+
DocsModule,
3330
BrowserModule,
3431
FormsModule,
3532
HttpModule,

‎demo/src/app/common/add-nav/add-nav.component.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<ul *ngIf="componentContent" (click)="goToSection($event)">
2+
<li *ngFor="let item of componentContent">
3+
<a routerLink="." [fragment]="item.anchor" [attr.data-anchor]="item.anchor">{{ item.name }}</a>
4+
<ul *ngIf="item.content && item.content.length">
5+
<li *ngFor="let subItem of item.content">
6+
<a routerLink="." [fragment]="subItem.anchor" [attr.data-anchor]="item.anchor">{{ subItem.title }}</a>
7+
</ul>
8+
</li>
9+
</ul>

‎demo/src/app/common/add-nav/add-nav.component.ts

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,26 @@
1-
import { Component } from '@angular/core';
2-
import { Router } from '@angular/router';
3-
import { routes } from '../../app.routing';
4-
import { StyleManager } from '../../theme/style-manager';
5-
import { ThemeStorage } from '../../theme/theme-storage';
1+
import { Component, Inject, Input } from '@angular/core';
2+
import { DOCUMENT } from '@angular/common';
3+
4+
import { ContentSection } from '../../docs/models/content-section.model';
65

76
@Component({
87
selector: 'add-nav',
98
templateUrl: './add-nav.component.html'
109
})
1110
export class AddNavComponent {
12-
constructor() {}
11+
@Input() componentContent: ContentSection[];
12+
13+
constructor(@Inject(DOCUMENT) private document: Document) { }
14+
15+
goToSection(event): void {
16+
const item: HTMLElement = event.target;
17+
18+
if (item.dataset.anchor) {
19+
const anchor: string = item.dataset.anchor;
20+
const target: HTMLElement = this.document.getElementById(anchor);
21+
const header: HTMLElement = this.document.getElementById('header');
22+
const headerIndent: number = header.offsetHeight + 6;
23+
this.document.body.scrollTop = target.offsetTop - headerIndent;
24+
}
25+
}
1326
}

‎demo/src/app/common/documentation/documentation.component.html

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎demo/src/app/common/documentation/documentation.component.ts

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎demo/src/app/components/+accordion/accordion-section.component.ts

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
// todo: add more samples https://jqueryui.com/accordion/#default
22
// todo: add more samples http://getbootstrap.com/components/#panels-alternatives
33

4-
import { Component } from '@angular/core';
5-
import { DEMOS } from './demos';
4+
import { ChangeDetectionStrategy, Component } from '@angular/core';
5+
import { demoComponentContent } from './accordion-section.list';
6+
import { ContentSection } from '../../docs/models/content-section.model';
67

78
// webpack html imports
8-
let titleDoc = require('html-loader!markdown-loader!./docs/usage.md');
9-
109
@Component({
1110
selector: 'accordion-section',
12-
templateUrl: './accordion-section.components.html'
11+
templateUrl: './accordion-section.components.html',
12+
changeDetection: ChangeDetectionStrategy.OnPush
1313
})
1414
export class AccordionSectionComponent {
1515
name = 'Accordion';
1616
src = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/accordion';
17-
titleDoc: string = titleDoc;
18-
demos: any = DEMOS;
17+
componentContent: ContentSection[] = demoComponentContent;
1918
}

‎demo/src/app/components/+accordion/accordion-section.components.html

Lines changed: 4 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,7 @@
1-
<demo-section [name]="name" [src]="src">
1+
<demo-section [name]="name" [src]="src" [componentContent]="componentContent">
22
<p>Displays collapsible content panels for presenting information in a limited amount of space</p>
3-
<p>The <strong>accordion component</strong> builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.</p>
3+
<p>The <strong>accordion component</strong> builds on top of the collapse directive to provide a list
4+
of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.</p>
45

5-
<h2>Contents</h2>
6-
<ul>
7-
<li><a routerLink="." fragment="usage">Usage</a></li>
8-
<li><a routerLink="." fragment="examples">Examples</a>
9-
<ul>
10-
<li><a routerLink="." fragment="simple">Simple accordion</a></li>
11-
<li><a routerLink="." fragment="disabled">Disabled</a></li>
12-
<li><a routerLink="." fragment="dynamic">Dynamic accordion</a></li>
13-
<li><a routerLink="." fragment="one-time">Open only one at a time</a></li>
14-
<li><a routerLink="." fragment="styling">Styling</a></li>
15-
<li><a routerLink="." fragment="config">Configuring defaults</a></li>
16-
</ul>
17-
</li>
18-
<li><a routerLink="." fragment="api-reference">API Reference</a>
19-
<ul>
20-
<li><a routerLink="." fragment="accordion-panel-component">AccordionPanelComponent</a></li>
21-
<li><a routerLink="." fragment="accordion-config">AccordionConfig</a></li>
22-
</ul>
23-
</li>
24-
</ul>
25-
26-
<h2 routerLink="." fragment="usage" id="usage">Usage</h2>
27-
28-
<p [innerHtml]="titleDoc"></p>
29-
30-
<h2 routerLink="." fragment="examples" id="examples">Examples</h2>
31-
32-
<p>Click headers to expand/collapse content that is broken into logical sections, much like tabs.</p>
33-
34-
<h3 routerLink="." fragment="simple" id="simple">Simple accordion</h3>
35-
<ng-sample-box [ts]="demos.basic.component" [html]="demos.basic.html">
36-
<demo-accordion-basic></demo-accordion-basic>
37-
</ng-sample-box>
38-
39-
<h3 routerLink="." fragment="disabled" id="disabled">Disabled</h3>
40-
<ng-sample-box [ts]="demos.disabled.component" [html]="demos.disabled.html">
41-
<demo-accordion-disabled></demo-accordion-disabled>
42-
</ng-sample-box>
43-
44-
<h3 routerLink="." fragment="dynamic" id="dynamic">Dynamic accordion</h3>
45-
<ng-sample-box [ts]="demos.dynamic.component" [html]="demos.dynamic.html">
46-
<demo-accordion-dynamic></demo-accordion-dynamic>
47-
</ng-sample-box>
48-
49-
<h3 routerLink="." fragment="one-time" id="one-time">Open only one at a time</h3>
50-
<ng-sample-box [ts]="demos.oneAtATime.component" [html]="demos.oneAtATime.html">
51-
<demo-accordion-one-time></demo-accordion-one-time>
52-
</ng-sample-box>
53-
54-
<h3 routerLink="." fragment="styling" id="styling">Styling</h3>
55-
<ng-sample-box [ts]="demos.styling.component" [html]="demos.styling.html" [style]="demos.styling.css">
56-
<demo-accordion-styling></demo-accordion-styling>
57-
</ng-sample-box>
58-
59-
<h3 routerLink="." fragment="config" id="config">Configuring defaults</h3>
60-
<ng-sample-box [ts]="demos.config.component" [html]="demos.config.html">
61-
<demo-accordion-config></demo-accordion-config>
62-
</ng-sample-box>
63-
64-
<h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>
65-
<ng-api-doc routerLink="." fragment="accordion-panel-component" id="accordion-panel-component" directive="AccordionPanelComponent"></ng-api-doc>
66-
<ng-api-doc-config routerLink="." fragment="accordion-config" id="accordion-config" type="AccordionConfig"></ng-api-doc-config>
6+
<docs-section [content]="componentContent"></docs-section>
677
</demo-section>

‎demo/src/app/components/+accordion/accordion-section.list.ts

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { DemoAccordionBasicComponent } from './demos/basic/basic';
2+
import { DemoAccordionDisabledComponent } from './demos/disabled/disabled';
3+
import { DemoAccordionDynamicComponent } from './demos/dymanic/dynamic';
4+
import { DemoAccordionOneAtATimeComponent } from './demos/one-at-a-time/one-at-a-time';
5+
import { DemoAccordionStylingComponent } from './demos/styling/styling';
6+
import { DemoAccordionConfigComponent } from './demos/config/config';
7+
8+
import { ContentSection } from '../../docs/models/content-section.model';
9+
import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
10+
import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section/index';
11+
import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
12+
13+
import {
14+
NgApiDocComponent,
15+
NgApiDocConfigComponent
16+
} from '../../docs/api-docs';
17+
18+
export const demoComponentContent: ContentSection[] = [
19+
{
20+
name: 'Usage',
21+
anchor: 'usage',
22+
outlet: DemoTopSectionComponent,
23+
content: {
24+
doc: require('html-loader!markdown-loader!./docs/usage.md')
25+
}
26+
},
27+
{
28+
name: 'Examples',
29+
anchor: 'examples',
30+
outlet: ExamplesComponent,
31+
content: [
32+
{
33+
title: 'Simple accordion',
34+
anchor: 'simple-accordion',
35+
description: `<p>Click headers to expand/collapse content that is broken into logical sections, much
36+
like tabs.</p>`,
37+
component: require('!!raw-loader?lang=typescript!./demos/basic/basic'),
38+
html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
39+
outlet: DemoAccordionBasicComponent
40+
},
41+
{
42+
title: 'Disabled',
43+
anchor: 'disabled',
44+
component: require('!!raw-loader?lang=typescript!./demos/disabled/disabled'),
45+
html: require('!!raw-loader?lang=markup!./demos/disabled/disabled.html'),
46+
outlet: DemoAccordionDisabledComponent
47+
},
48+
{
49+
title: 'Dynamic accordion',
50+
anchor: 'dynamic-accordion',
51+
component: require('!!raw-loader?lang=typescript!./demos/dymanic/dynamic'),
52+
html: require('!!raw-loader?lang=markup!./demos/dymanic/dynamic.html'),
53+
outlet: DemoAccordionDynamicComponent
54+
},
55+
{
56+
title: 'Open only one at a time',
57+
anchor: 'one-time',
58+
component: require('!!raw-loader?lang=typescript!./demos/one-at-a-time/one-at-a-time'),
59+
html: require('!!raw-loader?lang=markup!./demos/one-at-a-time/one-at-a-time.html'),
60+
outlet: DemoAccordionOneAtATimeComponent
61+
},
62+
{
63+
title: 'Styling',
64+
anchor: 'styling',
65+
component: require('!!raw-loader?lang=typescript!./demos/styling/styling'),
66+
html: require('!!raw-loader?lang=markup!./demos/styling/styling.html'),
67+
css: require('!!raw-loader?lang=markup!./demos/styling/styling.css'),
68+
outlet: DemoAccordionStylingComponent
69+
},
70+
{
71+
title: 'Configuring defaults',
72+
anchor: 'config',
73+
component: require('!!raw-loader?lang=typescript!./demos/config/config'),
74+
html: require('!!raw-loader?lang=markup!./demos/config/config.html'),
75+
outlet: DemoAccordionConfigComponent
76+
}
77+
]
78+
},
79+
{
80+
name: 'API Reference',
81+
anchor: 'api-reference',
82+
outlet: ApiSectionsComponent,
83+
content: [
84+
{
85+
title: 'AccordionPanelComponent',
86+
anchor: 'AccordionPanelComponent',
87+
outlet: NgApiDocComponent
88+
},
89+
{
90+
title: 'AccordionConfig',
91+
anchor: 'AccordionConfig',
92+
outlet: NgApiDocConfigComponent
93+
}
94+
]
95+
}
96+
];

‎demo/src/app/components/+accordion/demo-accordion.module.ts

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,26 @@ import { CommonModule } from '@angular/common';
44
import { RouterModule } from '@angular/router';
55
import { AccordionModule } from 'ngx-bootstrap/accordion';
66

7-
import { SharedModule } from '../../shared';
7+
import { DocsModule } from '../../docs';
88
import { AccordionSectionComponent } from './accordion-section.component';
99
import { DEMO_COMPONENTS } from './demos';
1010

1111
import { routes } from './demo-accordion.routes';
1212

1313
@NgModule({
14-
declarations: [AccordionSectionComponent, ...DEMO_COMPONENTS],
14+
declarations: [
15+
AccordionSectionComponent,
16+
...DEMO_COMPONENTS
17+
],
1518
imports: [
1619
AccordionModule.forRoot(),
1720
CommonModule,
1821
FormsModule,
19-
SharedModule,
22+
DocsModule,
2023
RouterModule.forChild(routes)
2124
],
22-
exports: [AccordionSectionComponent]
25+
exports: [AccordionSectionComponent],
26+
entryComponents: [...DEMO_COMPONENTS]
2327
})
2428
export class DemoAccordionModule {
2529
static routes: any = routes;

0 commit comments

Comments
 (0)