Skip to content

Commit

Permalink
feat(docs): make urls easy to share
Browse files Browse the repository at this point in the history
  • Loading branch information
@valorkin
valorkin committed Jan 4, 2017
1 parent a1d7983 commit 47ab93b
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 62 deletions.
46 changes: 34 additions & 12 deletions demo/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { AfterContentInit, Component } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { AfterContentInit, Component, Inject } from '@angular/core';
import { NavigationEnd, Router, ActivatedRoute } from '@angular/router';
import { isBs3 } from 'ng2-bootstrap';
import { PageScrollConfig } from 'ng2-page-scroll';
PageScrollConfig.defaultDuration = 1;
import { PageScrollConfig, PageScrollService, PageScrollInstance } from 'ng2-page-scroll';
import { DOCUMENT } from '@angular/platform-browser';
PageScrollConfig.defaultDuration = 11;
PageScrollConfig.defaultScrollOffset = 70;

@Component({
Expand All @@ -14,20 +15,41 @@ export class AppComponent implements AfterContentInit {
return isBs3();
}

private route: ActivatedRoute;
private router: Router;
private pageScrollService: PageScrollService;
private document: Document;

public constructor(router: Router) {
public constructor(route: ActivatedRoute, router: Router, pageScrollService: PageScrollService, @Inject(DOCUMENT) document: Document) {
this.route = route;
this.router = router;
this.pageScrollService = pageScrollService;
this.document = document;
}

// almost same logic exists in top-menu component
public ngAfterContentInit(): any {
this.router.events.subscribe((event: any) => {
if (event instanceof NavigationEnd) {
if (typeof PR !== 'undefined') {
// google code-prettify
setTimeout(PR.prettyPrint, 50);
}
const getUrl = (router: Router) => router.routerState.snapshot.url.slice(0, router.routerState.snapshot.url.indexOf('#'));
let _prev = getUrl(this.router);
const justDoIt = (event: any): void => {
if (!(event instanceof NavigationEnd)) {
return;
}
});

let _cur = getUrl(this.router);
if (typeof PR !== 'undefined' && _prev !== _cur) {
_prev = _cur;
// google code-prettify
PR.prettyPrint();
}

let hash = this.route.snapshot.fragment;
if (hash) {
let pageScrollInstance: PageScrollInstance = PageScrollInstance.simpleDirectionInstance(this.document, `#${hash}`, true);
this.pageScrollService.start(pageScrollInstance);
}
};

this.router.events.subscribe((event: any) => setTimeout(() => justDoIt(event), 50));
}
}
25 changes: 15 additions & 10 deletions demo/src/app/common/top-menu/top-menu.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,38 @@
import { AfterViewInit, Component, Inject, Renderer } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
import { NavigationEnd, Router } from '@angular/router';
import { NavigationEnd, Router, ActivatedRoute } from '@angular/router';

@Component({
selector: 'top-menu',
templateUrl: './top-menu.component.html'
})
export class TopMenuComponent implements AfterViewInit {
public isShown:boolean = false;
public isShown: boolean = false;

private renderer:Renderer;
private document:any;
private renderer: Renderer;
private document: any;
private router: Router;

private router:Router;
public constructor(renderer:Renderer, @Inject(DOCUMENT) document:any, router:Router) {
public constructor(renderer: Renderer, @Inject(DOCUMENT) document: any, router: Router) {
this.router = router;
this.renderer = renderer;
this.document = document;
}

public ngAfterViewInit():any {
this.router.events.subscribe((event:any) => {
if (event instanceof NavigationEnd) {
public ngAfterViewInit(): any {
// todo: remove this sh**
const getUrl = (router: Router) => router.routerState.snapshot.url.slice(0, router.routerState.snapshot.url.indexOf('#'));
let _prev = getUrl(this.router);
this.router.events.subscribe((event: any) => {
let _cur = getUrl(this.router);
if (event instanceof NavigationEnd && _cur !== _prev) {
_prev = _cur;
this.toggle(false);
}
});
}

public toggle(isShown?:boolean):void {
public toggle(isShown?: boolean): void {
this.isShown = typeof isShown === 'undefined' ? !this.isShown : isShown;
if (this.document && this.document.body) {
this.renderer.setElementClass(this.document.body, 'isOpenMenu', this.isShown);
Expand Down
70 changes: 36 additions & 34 deletions demo/src/app/components/popover/popover-section.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import { DEMOS } from './demos';

// webpack html imports
let titleDoc = require('html!markdown!./docs/title.md');

Expand All @@ -11,107 +12,108 @@ let titleDoc = require('html!markdown!./docs/title.md');
<h2>Contents</h2>
<ul>
<li><a pageScroll href="#usage">Usage</a></li>
<li><a pageScroll href="#examples">Examples</a>
<li><a routerLink="." fragment="usage">Usage</a></li>
<li><a routerLink="." fragment="examples">Examples</a>
<ul>
<li><a pageScroll href="#four-directions">Four Directions</a></li>
<li><a pageScroll href="#dismiss">Dismissible</a></li>
<li><a pageScroll href="#dynamic-content">Dynamic Content</a></li>
<li><a pageScroll href="#dynamic-html">Dynamic Html</a></li>
<li><a pageScroll href="#container-body">Append to body</a></li>
<li><a pageScroll href="#config">Configuring defaults</a></li>
<li><a pageScroll href="#triggers-custom">Custom triggers</a></li>
<li><a pageScroll href="#triggers-manual">Manual triggering</a></li>
<li><a pageScroll href="#styling-local">Component level styling</a></li>
<!--<li><a pageScroll href="#styling-global">Global styling</a></li>-->
<!--href="#four-directions"-->
<li><a routerLink="." fragment="four-directions">Four Directions</a></li>
<li><a routerLink="." fragment="dismiss">Dismissible</a></li>
<li><a routerLink="." fragment="dynamic-content">Dynamic Content</a></li>
<li><a routerLink="." fragment="dynamic-html">Dynamic Html</a></li>
<li><a routerLink="." fragment="container-body">Append to body</a></li>
<li><a routerLink="." fragment="config">Configuring defaults</a></li>
<li><a routerLink="." fragment="triggers-custom">Custom triggers</a></li>
<li><a routerLink="." fragment="triggers-manual">Manual triggering</a></li>
<li><a routerLink="." fragment="styling-local">Component level styling</a></li>
<!--<li><a routerLink="." fragment="styling-global">Global styling</a></li>-->
</ul>
</li>
<li><a pageScroll href="#api-reference">API Reference</a>
<li><a routerLink="." fragment="api-reference">API Reference</a>
<ul>
<li><a pageScroll href="#popover-directive">PopoverDirective</a></li>
<li><a pageScroll href="#popover-config">PopoverConfig</a></li>
<li><a routerLink="." fragment="popover-directive">PopoverDirective</a></li>
<li><a routerLink="." fragment="popover-config">PopoverConfig</a></li>
</ul>
</li>
</ul>
<h2 id="usage">Usage</h2>
<h2 routerLink="." fragment="usage" id="usage">Usage</h2>
<p [innerHtml]="titleDoc"></p>
<h2 id="examples">Examples</h2>
<h2 routerLink="." fragment="examples" id="examples">Examples</h2>
<!-- basic -->
<ng-sample-box [ts]="demos.basic.component" [html]="demos.basic.html">
<demo-popover-basic></demo-popover-basic>
</ng-sample-box>
<!-- four directions -->
<h2 id="four-directions">Four directions</h2>
<h2 routerLink="." fragment="four-directions" id="four-directions">Four directions</h2>
Four positioning options are available: top, right, bottom, and left aligned.
<ng-sample-box [ts]="demos.forDirections.component" [html]="demos.forDirections.html">
<demo-popover-four-directions></demo-popover-four-directions>
</ng-sample-box>
<h2 id="dismiss">Dismiss on next click</h2>
<h2 routerLink="." fragment="dismiss" id="dismiss">Dismiss on next click</h2>
<p>Use the <code>focus</code> trigger to dismiss popovers on the next click that the user makes.</p>
<ng-sample-box [ts]="demos.dismiss.component" [html]="demos.dismiss.html">
<demo-popover-dismiss></demo-popover-dismiss>
</ng-sample-box>
<h2 id="dynamic-content">Dynamic Content</h2>
<h2 routerLink="." fragment="dynamic-content" id="dynamic-content">Dynamic Content</h2>
<p>Popover content can contain any html template. Just create <code>&lt;template #myId></code> with any
html allowed by Angular, and provide template ref (<code>#myId</code>) as popover content.</p>
<ng-sample-box [ts]="demos.dynamic.component" [html]="demos.dynamic.html">
<demo-popover-dynamic></demo-popover-dynamic>
</ng-sample-box>
<h2 id="dynamic-html">Dynamic Html</h2>
<h2 routerLink="." fragment="dynamic-html" id="dynamic-html">Dynamic Html</h2>
<p>By using small trick you can display any dynamic html, which you got from ajax request for example.</p>
<ng-sample-box [ts]="demos.dynamicHtml.component" [html]="demos.dynamicHtml.html">
<demo-popover-dynamic-html></demo-popover-dynamic-html>
</ng-sample-box>
<h2 id="container-body">Append to body</h2>
<h2 routerLink="." fragment="container-body" id="container-body">Append to body</h2>
<p>When you have some styles on a parent element that interfere with a popover, you’ll want to specify a <code>container="body"</code> so that the popover’s HTML will be appended to body. This will help to avoid rendering problems in more complex components (like our input groups, button groups, etc) or inside elements with <code>overflow: hidden</code></p>
<ng-sample-box [ts]="demos.container.component" [html]="demos.container.html">
<demo-popover-container></demo-popover-container>
</ng-sample-box>
<h2 id="config">Configuring defaults</h2>
<h2 routerLink="." fragment="config" id="config">Configuring defaults</h2>
<ng-sample-box [ts]="demos.config.component" [html]="demos.config.html">
<demo-popover-config></demo-popover-config>
</ng-sample-box>
<h2 id="triggers-custom">Custom triggers</h2>
<h2 routerLink="." fragment="triggers-custom" id="triggers-custom">Custom triggers</h2>
<ng-sample-box [ts]="demos.triggersCustom.component" [html]="demos.triggersCustom.html">
<demo-popover-triggers-custom></demo-popover-triggers-custom>
</ng-sample-box>
<h2 id="triggers-manual">Manual triggering</h2>
<h2 routerLink="." fragment="triggers-manual" id="triggers-manual">Manual triggering</h2>
<ng-sample-box [ts]="demos.triggersManual.component" [html]="demos.triggersManual.html">
<demo-popover-triggers-manual></demo-popover-triggers-manual>
</ng-sample-box>
<h2 id="styling-local">Component level styling</h2>
<h2 routerLink="." fragment="styling-local" id="styling-local">Component level styling</h2>
<ng-sample-box [ts]="demos.stylingComponent.component" [html]="demos.stylingComponent.html">
<demo-popover-styling-local></demo-popover-styling-local>
</ng-sample-box>
<!-- todo: add custom class -->
<!--<h2 id="styling-global">Global styling</h2>-->
<!--<h2 routerLink="." fragment="styling-global" id="styling-global">Global styling</h2>-->
<!--<ng-sample-box [ts]="demos.stylingGlobal.component" [html]="demos.stylingGlobal.html">-->
<!--<demo-popover-styling-global></demo-popover-styling-global>-->
<!--</ng-sample-box>-->
<h2 id="api-reference">API Reference</h2>
<h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>
<ng-api-doc id="popover-directive" directive="PopoverDirective"></ng-api-doc>
<ng-api-doc-config id="popover-config" type="PopoverConfig"></ng-api-doc-config>
<ng-api-doc routerLink="." fragment="popover-directive" id="popover-directive" directive="PopoverDirective"></ng-api-doc>
<ng-api-doc-config routerLink="." fragment="popover-config" id="popover-config" type="PopoverConfig"></ng-api-doc-config>
</demo-section>`
})
export class PopoverSectionComponent {
public name:string = 'Popover';
public src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/popover';
export class PopoverSectionComponent {
public name: string = 'Popover';
public src: string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/popover';
public demos: any = DEMOS;
public titleDoc:string = titleDoc;
public titleDoc: string = titleDoc;
}
7 changes: 5 additions & 2 deletions demo/src/app/shared/shared.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,22 @@ import { TabsModule } from 'ng2-bootstrap';
import { DemoSectionComponent } from './demo-section/demo-section.component';
import { NgApiDocModule } from '../api-docs';
import { Ng2PageScrollModule } from 'ng2-page-scroll';
import { RouterModule } from '@angular/router';

@NgModule({
declarations: [DemoSectionComponent],
imports: [
TabsModule.forRoot(),
CommonModule,
NgApiDocModule,
Ng2PageScrollModule
Ng2PageScrollModule,
RouterModule
],
exports: [
DemoSectionComponent,
NgApiDocModule,
Ng2PageScrollModule
Ng2PageScrollModule,
RouterModule
]
})
export class SharedModule {
Expand Down
4 changes: 0 additions & 4 deletions demo/src/typings.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,4 @@ declare module jasmine {
interface Matchers {
toHaveCssClass(expected: any): boolean;
}
// Some do it the other way around.
declare module '!!json!*' {
const value: any;
export default value;
}

0 comments on commit 47ab93b

Please sign in to comment.