Skip to content

Instantly share code, notes, and snippets.

@cdcarson

cdcarson/popover-demo-0.html

Last active August 19, 2017 18:09
Show Gist options
  • Save cdcarson/5afd85ea5ae5731112130269a4c5772c to your computer and use it in GitHub Desktop.
Save cdcarson/5afd85ea5ae5731112130269a4c5772c to your computer and use it in GitHub Desktop.
Download ZIP
Popover examples for nowzoo-angular-bootstrap-lite
Raw
popover-demo-0.html
<button class="btn btn-primary" nzbPopover
[nzbPopoverTitle]="quickstartTitle"
[nzbPopoverContent]="quickstartContent"
data-placement="auto">Quick Example</button>
<ng-template #quickstartTitle>Popover Title</ng-template>
<ng-template #quickstartContent>Some popover content.</ng-template>
Raw
popover-demo-add-class.component.ts
import { Component, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/filter';
declare const jQuery: any;
import { NzbPopoverDirective } from 'nowzoo-angular-bootstrap-lite';
@Component({
selector: 'app-popover-demo-add-class',
template: `
<p>
<button class="btn btn-primary"
nzbPopover
#popoverInstance="nzbPopover"
title="Popover"
[nzbPopoverContent]="popoverContent"
data-placement="auto">
Popover
</button>
<ng-template #popoverContent>
This popover
<strong *ngIf="!dangerClassOn">does not have</strong>
<strong *ngIf="dangerClassOn">has</strong>
the extra <code>.danger</code> class.
</ng-template>
</p>
<p>
<strong>dangerClassOn:</strong> {{dangerClassOn | json}}
<br>
<button class="btn btn-secondary btn-sm" (click)="toggle()">
Toggle
</button>
</p>
`,
styles: []
})
export class PopoverDemoAddClassComponent implements AfterViewInit, OnDestroy {
@ViewChild('popoverInstance') popoverInstance: NzbPopoverDirective;
dangerClassOn: boolean = true;
private sub: Subscription;
toggle() {
// check to see that tip exists...
let tip = this.popoverInstance.boostrapComponentData.tip || null;
this.dangerClassOn = ! this.dangerClassOn;
if (tip) {
jQuery(tip).toggleClass('danger', this.dangerClassOn);
}
}
ngAfterViewInit() {
// make sure we toggle the class at least once...
this.sub = this.popoverInstance.events
.filter((event:Event) => 'inserted' === event.type)
.subscribe(() => {
jQuery(this.popoverInstance.boostrapComponentData.tip)
.toggleClass('danger', this.dangerClassOn);
})
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}
Raw
popover-demo-attributes.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-popover-demo-attributes',
template: `<p>
<button class="btn btn-primary"
nzbPopover
title="Static Title"
data-content="Some static popover content.">
Simple Popover Example</button>
</p>`
})
export class PopoverDemoAttributesComponent {}
Raw
popover-demo-disable.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-popover-demo-disable',
template: `
<p>
<button class="btn btn-primary"
nzbPopover
#popoverInstance="nzbPopover"
title="Enable/Disable Demo"
data-content="Hi there.">
Popover
<span *ngIf="popoverInstance.enabled">Enabled</span>
<span *ngIf="!popoverInstance.enabled">Disabled</span>
</button>
</p>
<p>
<button class="btn btn-secondary btn-sm"
[disabled]="popoverInstance.enabled"
(click)="popoverInstance.enable()">enable()</button>
<button class="btn btn-secondary btn-sm"
[disabled]="!popoverInstance.enabled"
(click)="popoverInstance.disable()">disable()</button>
<button class="btn btn-secondary btn-sm"
(click)="popoverInstance.toggleEnabled()">toggleEnabled()</button>
</p>
`
})
export class PopoverDemoDisableComponent {}
Raw
popover-demo-dismiss-on-click-outside.component.ts
import {
Component,
AfterViewInit,
OnDestroy,
ViewChild,
Renderer2
} from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { NzbPopoverDirective } from 'nowzoo-angular-bootstrap-lite';
@Component({
selector: 'app-popover-demo-dismiss-on-click-outside',
template: `
<p>
<button class="btn btn-primary"
nzbPopover
#popoverInstance="nzbPopover"
title="Enter your name..."
[nzbPopoverContent]="popoverContent"
data-placement="auto"
data-trigger="click">
Enter Name...
</button>
<ng-template #popoverContent>
<div class="form-group">
<label for="app-popover-demo-dismiss-on-click-outside-name">Name</label>
<input type="text" class="form-control" [(ngModel)]="enteredInPopover">
</div>
<div class="form-group">
<button
class="btn btn-secondary"
(click)="popoverInstance.hide();">
Cancel</button>
<button
class="btn btn-success"
(click)="name = enteredInPopover; popoverInstance.hide();">
Save</button>
</div>
</ng-template>
</p>
<p>Hello, {{name}}</p>
`
})
export class PopoverDemoDismissOnClickOutsideComponent implements AfterViewInit, OnDestroy {
@ViewChild('popoverInstance') popoverInstance: NzbPopoverDirective;
name: string = 'World';
enteredInPopover: string = '';
private eventsSub: Subscription;
private bodyClickUnlisten: () => void | null = null;
constructor(
private renderer: Renderer2
){}
ngAfterViewInit(){
this.eventsSub = this.popoverInstance.events.subscribe((event:Event) => {
if ('shown' === event.type){
this.bodyClickUnlisten = this.renderer.listen(document.body, 'click', (event: Event) => {
// don't respond to clicks in the popover
if (! this.popoverInstance.boostrapComponentData.tip.contains(event.target)) {
// the click occurred outside, so close the popover...
this.popoverInstance.hide();
}
// the click is inside the popover, so do nothing
})
this.enteredInPopover = this.name;
}
if ('hide' === event.type){
// clean up the listener...
this.bodyClickUnlisten();
this.bodyClickUnlisten = null;
}
})
}
ngOnDestroy() {
if (this.bodyClickUnlisten){
this.bodyClickUnlisten();
}
this.eventsSub.unsubscribe();
}
}
Raw
popover-demo-get-instance.component.ts
import { Component, AfterViewInit, ViewChild, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { NzbPopoverDirective } from 'nowzoo-angular-bootstrap-lite';
@Component({
selector: 'app-popover-demo-get-instance',
template: `
<p>
<button class="btn btn-primary"
nzbPopover
#popoverInstance="nzbPopover"
title="Popover Instance Demo"
data-content="Hi there.">
Popover
</button>
</p>
<p>
<strong>Status:</strong> {{popoverInstance.status | async | json}}
</p>
<p><strong>Last 5 Events (Newest First):</strong></p>
<ol>
<li *ngFor="let e of last5Events">{{e.type}}.{{e.namespace}} at {{e.timeStamp | amDateFormat: 'H:mm:ss.SSSS'}}</li>
</ol>
`
})
export class PopoverDemoGetInstanceComponent implements AfterViewInit, OnDestroy {
@ViewChild('popoverInstance') popoverInstance: NzbPopoverDirective;
private sub: Subscription;
last5Events: Event[] = []
ngAfterViewInit() {
this.sub = this.popoverInstance.events.subscribe((boostrapEvent: Event) => {
this.last5Events.unshift(boostrapEvent);
this.last5Events = this.last5Events.slice(0, 5)
})
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}
Raw
popover-demo-hide-on-route-change.component.ts
import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { NzbPopoverDirective } from 'nowzoo-angular-bootstrap-lite';
@Component({
selector: 'app-popover-demo-hide-on-route-change',
template: `<p>
<button class="btn btn-primary"
nzbPopover
#popoverInstance="nzbPopover"
[nzbPopoverPlacement]="getPlacement"
title="Popover"
data-placement="bottom"
[nzbPopoverContent]="popoverContent">
Popover</button>
</p>
<ng-template #popoverContent>
<p>
Click on the link below to see how the popover
gracefully disapears when its target
is destroyed.
</p>
<p>
<a routerLink="/popovers">
Back to Popovers
</a>
</p>
</ng-template>
`
})
export class PopoverDemoHideOnRouteChangeComponent implements AfterViewInit {
@ViewChild('popoverInstance') popoverInstance: NzbPopoverDirective;
ngAfterViewInit() {
setTimeout(() => {
this.popoverInstance.show();
})
}
}
Raw
popover-demo-no-title.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-popover-demo-no-title',
template: `<p>
<button class="btn btn-primary"
nzbPopover
data-placement="auto"
data-content="This popover does not have a title.">
Popover Without Title</button>
</p>`
})
export class PopoverDemoNoTitleComponent {}
Raw
popover-demo-placement-func.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-popover-demo-placement-func',
template: `<p>
<button class="btn btn-primary"
nzbPopover
[nzbPopoverPlacement]="getPlacement"
title="Placement Function"
data-content="This popover was placed by a function.">
Placement via function</button>
</p>
`
})
export class PopoverDemoPlacementFuncComponent {
getPlacement(tooltipEl, targetEl){
// do some fancy calculation here based on the small breakpoint...
if (window.innerWidth < 576){
return 'top';
} else {
return 'left';
}
}
}
Raw
popover-demo-show-hide.component.ts
import { Component} from '@angular/core';
@Component({
selector: 'app-popover-demo-show-hide',
template: `
<p>
<button class="btn btn-primary"
nzbPopover
#popoverInstance="nzbPopover"
title="Show/Hide/Toggle Example"
data-placement="top"
data-content="This popover was shown programmatically."
data-trigger="manual">Manually Triggered Popover</button>
</p>
<p>
<button class="btn btn-secondary btn-sm"
[disabled]="popoverInstance.shown"
(click)="popoverInstance.show()">show()</button>
<button class="btn btn-secondary btn-sm"
[disabled]="popoverInstance.hidden"
(click)="popoverInstance.hide()">hide()</button>
<button class="btn btn-secondary btn-sm"
(click)="popoverInstance.toggle()">toggle()</button>
</p>
`,
})
export class PopoverDemoShowHideComponent {}
Raw
popover-demo-templates.component.ts
import { Component, AfterViewInit, OnDestroy, ViewChild} from '@angular/core';
@Component({
selector: 'app-popover-demo-templates',
template: `
<!-- templates example -->
<p>
<button class="btn btn-primary"
nzbPopover
[nzbPopoverTitle]="titleTemplate"
[nzbPopoverContent]="contentTemplate"
#popoverInstance="nzbPopover">Fancy Popover from Template</button>
</p>
<ng-template #titleTemplate >
<div class="clearfix">
<div class="pull-left">
Fancy Header
</div>
<i
(click)="popoverInstance.hide()"
type="button"
class="fa fa-times pull-right"
aria-label="Close"></i>
</div>
</ng-template>
<ng-template #contentTemplate >
<i class="fa fa-clock-o fa-spin"></i>
This popover has been open for
{{seconds}} second<span *ngIf="seconds!==1">s</span>!
</ng-template>
`
})
export class PopoverDemoTemplatesComponent implements AfterViewInit, OnDestroy {
@ViewChild('popoverInstance') popoverInstance: any;
interval: any = null;
seconds: number = 0;
constructor() { }
ngAfterViewInit() {
this.popoverInstance.events.subscribe((nativeBsEvent: Event) => {
switch(nativeBsEvent.type){
case 'show':
this.seconds = 0;
this.interval = setInterval(() => {
this.seconds++;
}, 1000);
break;
case 'hidden':
clearInterval(this.interval);
this.interval = null;
break;
}
})
}
ngOnDestroy() {
if (this.interval){
clearInterval(this.interval);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment