@evan.network/ui-angular-core
Version:
The angular-core operates as an global and central library for the evan.network Angular 5 frontend development. Using this project you will be able to to the following things:
207 lines (206 loc) • 6.82 kB
TypeScript
import { DomSanitizer, MenuController, ChangeDetectorRef, EventEmitter } from 'angular-libs';
import { EvanRoutingService } from '../../services/ui/routing';
import { EvanCoreService } from '../../services/bcc/core';
import { EvanDescriptionService } from '../../services/bcc/description';
import { EvanQueue } from '../../services/bcc/queue';
import { EvanAddressBookService } from '../../services/bcc/address-book';
import { EvanSlidesService } from '../../services/ui/slides';
import { EvanMailboxService } from '../../services/bcc/mailbox';
import { EvanUtilService } from '../../services/utils';
import { AsyncComponent } from '../../classes/AsyncComponent';
/**************************************************************************************************/
/**
* Create easy Dashboards
* - generates an left panel using Ionic (will be folded on small displays)
* - With a click into the header it will show a small view on big devices.
* - include footer select box to navigate to root dapps
*
* Notice: powerfull in combination with DApps that using dapp-wrapper.
*
* ng-content selectors:
* - "evan-menu-content" for left panel contents
* - "evan-content" for right side
*
* Usage:
* typescript:
* this.dapps = await this.descriptionService.getMultipleDescriptions([
* 'favorites',
* 'addressbook',
* 'mailbox',
* 'profile'
* ]);
*
* html:
* <evan-split-pane #splitPane *ngIf="!loading" (smallToolbarToggled)="ref.detectChanges()">
* <div evan-menu-content>
* <ion-list>
* <button ion-item menuClose
* color="light"
* *ngFor="let dapp of dapps"
* routerLink="./{{ dapp.ensAddress }}"
* routerLinkActive="active">
* <ion-avatar item-start *ngIf="dapp.imgSquare">
* <img item-start large *oneTime [src]="_DomSanitizer.bypassSecurityTrustUrl(dapp.imgSquare)" />
* </ion-avatar>
* <h2 *ngIf="!splitPane.isSmallToolbar()">{{ dapp.translated.name | translate }}</h2>
* <h3 *ngIf="!splitPane.isSmallToolbar()">{{ dapp.translated.description | translate }}</h3>
*
* <div class="left-panel-notification"
* *ngIf="dapp.name === 'mailbox' && mailboxService.newMailCount > 0">
* {{ mailboxService.newMailCount > 9 ? 9 + '+' : mailboxService.newMailCount }}
* </div>
* </button>
* </ion-list>
* </div>
* <div evan-content
* [@routerTransition]="o?.activatedRouteData?.state">
* <router-outlet #o="outlet"></router-outlet>
* </div>
* </evan-split-pane>
*
* @class Component EvanSplitPaneComponent
*/
export declare class EvanSplitPaneComponent extends AsyncComponent {
private core;
private routing;
private evanQueue;
private addressBookService;
private _DomSanitizer;
private slidesService;
private menuController;
private mailboxService;
private descriptionService;
private utils;
private ref;
/***************** inputs & outpus *****************/
/**
* use dashboard wrapper functions, but hide the sidepanel
*/
disableSidepanel: boolean;
/**
* Check if a custom header should be displayed
*/
customHeader: boolean;
/**
* check if the small view can be enabled or not
*/
allowSmall: boolean;
/**
* check if the small view can be enabled or not
*/
rootDAppOpen: Function;
/**
* Event triggered, when user clicks of dashboard header
*/
smallToolbarToggled: EventEmitter<any>;
/**
* Event triggered, when a new root dapp was loaded (can be submitted multiple times)
*/
rootDAppLoaded: EventEmitter<any>;
/**
* Event triggered, when a new root dapp was loaded (can be submitted multiple times)
*/
/***************** variables *****************/
/**
* active account id
*/
private accountId;
/**
* check if the current route has navigate back configured
*/
private canNavigateBack;
/**
* hide or show the split pane additionally
*/
private displaySplitPane;
/**
* if footer is enabled, pass ion-select options
*/
private footerSelectOptions;
/**
* active root DApp routing instance (dashboard, taskboard, ...)
*/
private rootDApp;
/**
* show loading indicator for header
*/
private rootDAppLoading;
/**
* name of the root DApp
*/
private rootDAppName;
/**
* all root dapps (dashboard, favorites, mailbox, profile, addressbook)
*/
private rootDApps;
/**
* selected value of the footer
*/
private rootDAppSelectValue;
/**
* should the footer select box be displayed?
*/
private showRootDApps;
/**
* use to check for small or big toolbarr
*/
private smallToolbar;
/**
* active route name watcher
*/
private watchActiveRouteName;
/**
* screen size watcher
*/
private watchScreenSize;
/**
* hear on 'toggle-split-pane' event (triggered by dapp-wrapper on mobile devices)
*/
private watchToggleSplitPane;
/**
* cache the loggingDApp to handle development mode
*/
private loggingDApp;
/**
* watch for developer mode switch
*/
private developerModeSwitch;
/***************** initialization *****************/
constructor(core: EvanCoreService, routing: EvanRoutingService, evanQueue: EvanQueue, addressBookService: EvanAddressBookService, _DomSanitizer: DomSanitizer, slidesService: EvanSlidesService, menuController: MenuController, mailboxService: EvanMailboxService, descriptionService: EvanDescriptionService, utils: EvanUtilService, ref: ChangeDetectorRef);
/**
* apply watchers, load rootDapps, load addressbook
*/
_ngOnInit(): Promise<void>;
/**
* clear subscriptions
*/
_ngOnDestroy(): Promise<void>;
/**
* at startup, the left panel is hanging sometimes
*/
_ngAfterViewInit(): Promise<void>;
/***************** functions *****************/
/**
* Watch for route changes and load DBCP definitions for route DApp to be able
* to display name and img of the dapp
*/
watchRouteName(): any;
/**
* toggle toolbar small / big
*/
toggleSmallToolbar(): void;
/**
* Check if toolbar should displayed as small
*/
isSmallToolbar(): boolean;
/**
* open a route dapp
*
* @param {any} rootDAppSelect select value of the footer select
*/
openDApp(rootDAppSelect: any): void;
/**
* Check if developer mode is enabled and add the logging dapp to dashboard apps
*/
checkDevelopmentMode(): Promise<any>;
}