diff --git a/src/demo.ts b/src/demo.ts
index e5a449943..fad09dcd9 100644
--- a/src/demo.ts
+++ b/src/demo.ts
@@ -94,7 +94,8 @@ import {
SkyTileDemoTile1Component,
SkyTileDemoTile2Component,
SkyWizardDemoModalComponent,
- SkyFlyoutDemoInternalComponent
+ SkyFlyoutDemoInternalComponent,
+ SkyFlyoutDemoInternalSimpleComponent
} from './demos';
import { SkyDemoService } from './demos/demo.service';
@@ -121,6 +122,7 @@ const components = [
SkyFluidGridDemoComponent,
SkyFlyoutDemoComponent,
SkyFlyoutDemoInternalComponent,
+ SkyFlyoutDemoInternalSimpleComponent,
SkyGridDemoComponent,
SkyIconDemoComponent,
SkyHelpInlineDemoComponent,
diff --git a/src/demos/demo.service.ts b/src/demos/demo.service.ts
index 535da8207..d857bb27a 100644
--- a/src/demos/demo.service.ts
+++ b/src/demos/demo.service.ts
@@ -419,6 +419,11 @@ export class SkyDemoService {
fileContents: require('!!raw-loader!./flyout/flyout-demo-internal.component.ts'),
componentName: 'SkyFlyoutDemoInternalComponent'
},
+ {
+ name: 'flyout-demo-internal-simple.component.ts',
+ fileContents: require('!!raw-loader!./flyout/flyout-demo-internal-simple.component.ts'),
+ componentName: 'SkyFlyoutDemoInternalSimpleComponent'
+ },
{
name: 'flyout-demo-context.ts',
fileContents: require('!!raw-loader!./flyout/flyout-demo-context.ts')
diff --git a/src/demos/flyout/flyout-demo-context.ts b/src/demos/flyout/flyout-demo-context.ts
index 8409b8189..a6f4932ee 100644
--- a/src/demos/flyout/flyout-demo-context.ts
+++ b/src/demos/flyout/flyout-demo-context.ts
@@ -1,4 +1,7 @@
export class FlyoutDemoContext {
public id: number;
public name: string;
+ public constituentCode: string;
+ public latestGift: number;
+ public status: string;
}
diff --git a/src/demos/flyout/flyout-demo-internal-simple.component.ts b/src/demos/flyout/flyout-demo-internal-simple.component.ts
new file mode 100644
index 000000000..5f1d695c3
--- /dev/null
+++ b/src/demos/flyout/flyout-demo-internal-simple.component.ts
@@ -0,0 +1,23 @@
+import {
+ Component
+} from '@angular/core';
+
+@Component({
+ selector: 'sky-flyout-demo-internal',
+ template: `
+
+
Sample flyout
+
Flyouts can display large quantities of supplementary information related to a task, including:
+
+ lists record views
+ analytics
+ other information
+
+
-
-
- The internal flyout content is dynamic!
-
-
+ >
{{context.name}}
- Board member
+ {{context.constituentCode}}
- Fundraiser
+ labelType="{{ context.status === 'Past due' ? 'danger' : 'success' }}"
+ >
+ {{ context.status }}
- Inactive
- This is the arbitrary content section.
+
+ Constiuent Summary
+
+
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis quae mollitia rem obcaecati. Aspernatur vitae iusto cum corporis adipisci corrupti dolore odit a impedit enim. Porro ab exercitationem quidem? Maiores!
+
+
+
+
+ {{ context.latestGift }}
+
+
+ Latest gift
+
+
+
diff --git a/src/demos/flyout/flyout-demo.component.html b/src/demos/flyout/flyout-demo.component.html
index 80d549f59..312229b7b 100644
--- a/src/demos/flyout/flyout-demo.component.html
+++ b/src/demos/flyout/flyout-demo.component.html
@@ -1,72 +1,123 @@
-
-
-
-
-
-
-
-
+
+ Basic flyout
+
-
+
- View record
+ (click)="openSimpleFlyout()"
+ >
+ Standard width
+
-
-
+
-
-
- This button will close the flyout and then delete the host element from the document.
-
+
+ Flyout with customized headers
+
+
+ URL permalink
+
+
+
-
-
-
- The following button will open a flyout with a URL permalink in the header.
-
+ Iterators
+
+
+
+
+ Close the flyout programmatically
+
+
+
+
- Open flyout with a URL permalink
+ type="button"
+ [disabled]="!flyout"
+ (click)="closeAndRemoveFlyout()"
+ >
+ Close
-
-
- The following button will open a flyout with a button which invokes a custom action callback in the header.
-
+
+ Grid with flyout
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- Open flyout with a primary action
+ (click)="onNameClick(row)"
+ >
+ {{ row.name }}
- ;
+ public flyout: SkyFlyoutInstance;
+
+ public rowHighlightedId: string;
+
+ @ViewChild(SkyListViewGridComponent)
+ public listViewGridComponent: SkyListViewGridComponent;
+
+ private listState: ListItemModel[];
+
+ private openFlyoutStream = new Subject();
constructor(
private flyoutService: SkyFlyoutService
) { }
- public openRecord(record: FlyoutDemoContext) {
- this.flyout = this.flyoutService.open(SkyFlyoutDemoInternalComponent, {
+ public onNameClick(record: FlyoutDemoContext): void {
+ this.openRecord(record);
+ }
+
+ public closeAndRemoveFlyout(): void {
+ if (this.flyout && this.flyout.isOpen) {
+ this.flyoutService.close();
+ }
+ this.flyout = undefined;
+ }
+
+ public openSimpleFlyout(): void {
+ this.flyout = this.flyoutService.open(SkyFlyoutDemoInternalSimpleComponent);
+
+ this.flyout.closed.subscribe(() => {
+ this.flyout = undefined;
+ });
+ }
+
+ public openFlyoutWithCutsomWidth(): void {
+ const flyoutConfig: SkyFlyoutConfig = {
+ defaultWidth: 350,
+ maxWidth: 500,
+ minWidth: 200
+ };
+ this.flyout = this.flyoutService.open(SkyFlyoutDemoInternalSimpleComponent, flyoutConfig);
+
+ this.flyout.closed.subscribe(() => {
+ this.flyout = undefined;
+ });
+ }
+
+ public openFlyoutWithUrlPermalink(): void {
+ const flyoutConfig: SkyFlyoutConfig = {
+ permalink: {
+ label: `Visit blackbaud.com`,
+ url: 'http://www.blackbaud.com'
+ }
+ };
+ this.flyout = this.flyoutService.open(SkyFlyoutDemoInternalSimpleComponent, flyoutConfig);
+
+ this.flyout.closed.subscribe(() => {
+ this.flyout = undefined;
+ });
+ }
+
+ public openFlyoutWithRoutePermalink(): void {
+ const flyoutConfig: SkyFlyoutConfig = {
+ permalink: {
+ label: 'Go to Components page',
+ route: {
+ commands: ['/components'],
+ extras: {
+ fragment: 'helloWorld',
+ queryParams: {
+ foo: 'bar'
+ }
+ }
+ }
+ }
+ };
+ this.flyout = this.flyoutService.open(SkyFlyoutDemoInternalSimpleComponent, flyoutConfig);
+
+ this.flyout.closed.subscribe(() => {
+ this.flyout = undefined;
+ });
+ }
+
+ public openFlyoutWithIterators(): void {
+ const flyoutConfig: SkyFlyoutConfig = {
+ showIterator: true
+ };
+ this.flyout = this.flyoutService.open(SkyFlyoutDemoInternalSimpleComponent, flyoutConfig);
+
+ this.flyout.iteratorNextButtonClick.subscribe(() => {
+ alert('Next iterator button clicked!');
+ });
+
+ this.flyout.iteratorPreviousButtonClick.subscribe(() => {
+ alert('Prvious iterator button clicked!');
+ });
+
+ this.flyout.closed.subscribe(() => {
+ this.flyout = undefined;
+ });
+ }
+
+ private openRecord(record: FlyoutDemoContext) {
+
+ // Prevent highlight from being prematurely removed.
+ this.openFlyoutStream.next(true);
+
+ const flyoutConfig: SkyFlyoutConfig = {
providers: [{
provide: FlyoutDemoContext,
useValue: record
@@ -41,74 +174,86 @@ export class SkyFlyoutDemoComponent {
ariaDescribedBy: 'my-describedby-id',
ariaLabelledBy: 'my-labelledby-id',
ariaRole: 'modal',
- defaultWidth: 500,
- maxWidth: 1000,
- minWidth: 200,
permalink: {
route: {
commands: ['/users', record.id],
extras: {
- fragment: 'foobar',
queryParams: {
- envid: 'fooenvid'
+ envid: '123456789'
}
}
}
- }
- });
+ },
+ showIterator: true
+ };
+
+ this.flyout = this.flyoutService.open(SkyFlyoutDemoInternalComponent, flyoutConfig);
this.flyout.closed.subscribe(() => {
this.flyout = undefined;
});
- }
- public closeFlyout() {
- this.flyout.close();
+ this.initIterators(record, this.flyout);
}
- public removeFlyout() {
- this.flyoutService.close();
- this.flyout = undefined;
- }
+ private initIterators(record: any, flyout: SkyFlyoutInstance) {
+ this.rowHighlightedId = record.id;
- public isRecordOpen(record: FlyoutDemoContext): boolean {
- return (
- this.flyout &&
- this.flyout.componentInstance.context.id === record.id
- );
- }
+ // Remove highlights when flyout is closed.
+ flyout.closed
+ .takeUntil(this.openFlyoutStream)
+ .subscribe(() => {
+ this.rowHighlightedId = undefined;
+ });
- public openFlyoutWithUrlPermalink() {
- this.flyoutService.open(SkyFlyoutDemoInternalComponent, {
- providers: [{
- provide: FlyoutDemoContext,
- useValue: {
- id: '1',
- name: 'Jenkins'
- }
- }],
- permalink: {
- url: 'https://blackbaud.com'
- }
+ this.listViewGridComponent.items
+ .takeUntil(this.openFlyoutStream)
+ .subscribe(s => {
+ this.listState = s;
+
+ flyout.iteratorPreviousButtonDisabled = this.isFirstElementInArray(this.rowHighlightedId, this.listState);
+ flyout.iteratorNextButtonDisabled = this.isLastElementInArray(this.rowHighlightedId, this.listState);
+ });
+
+ flyout.iteratorPreviousButtonClick
+ .takeUntil(this.openFlyoutStream)
+ .subscribe(() => {
+ const previous = this.stepToItemInArray(this.listState, this.rowHighlightedId, -1);
+ this.openRecord(previous.data);
});
+
+ flyout.iteratorNextButtonClick
+ .takeUntil(this.openFlyoutStream)
+ .subscribe(() => {
+ const next = this.stepToItemInArray(this.listState, this.rowHighlightedId, 1);
+ this.openRecord(next.data);
+ });
+
+ flyout.iteratorPreviousButtonDisabled = this.isFirstElementInArray(this.rowHighlightedId, this.listState);
+ flyout.iteratorNextButtonDisabled = this.isLastElementInArray(this.rowHighlightedId, this.listState);
}
- public openFlyoutWithPrimaryAction() {
- this.flyoutService.open(SkyFlyoutDemoInternalComponent, {
- providers: [{
- provide: FlyoutDemoContext,
- useValue: {
- id: '2',
- name: 'Partridge'
- }
- }],
- primaryAction: {
- label: 'Invoke primary action',
- callback: () => {
- alert('Primary action invoked');
- },
- closeAfterInvoking: true
+ private stepToItemInArray(array: Array, currentId: string, step: number) {
+ for (let i = 0; i < array.length; i++) {
+ if (array[i].id === currentId) {
+ return array[i + step];
}
- });
+ }
+ }
+
+ private isFirstElementInArray(id: any, array: any[]) {
+ const element = array.find(x => x.id === id);
+ if (array[0] === element) {
+ return true;
+ }
+ return false;
+ }
+
+ private isLastElementInArray(id: any, array: any[]) {
+ const element = array.find(x => x.id === id);
+ if (array[array.length - 1] === element) {
+ return true;
+ }
+ return false;
}
}
diff --git a/src/demos/flyout/index.ts b/src/demos/flyout/index.ts
index d87385b9c..492e936d9 100644
--- a/src/demos/flyout/index.ts
+++ b/src/demos/flyout/index.ts
@@ -1,2 +1,3 @@
export * from './flyout-demo.component';
export * from './flyout-demo-internal.component';
+export * from './flyout-demo-internal-simple.component';