rb-fab-speed-dial
Version:
Fab speed dial for angular and material2.
246 lines (239 loc) • 13.3 kB
JavaScript
import { Component, HostListener, Input, Output, EventEmitter, Directive, ElementRef, NgModule } from '@angular/core';
import { trigger, style, transition, animate, keyframes, query, stagger, group } from '@angular/animations';
import { CommonModule } from '@angular/common';
import { MatIconModule, MatButtonModule } from '@angular/material';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class RbFabSpeedDialComponent {
constructor() {
this.actions = false;
this.state = "10";
this.animationDone = true;
this.direction = 'right';
this.mode = "patata";
this.color = "accent";
this.openIcon = "add";
this.closeIcon = "clear";
this.open = new EventEmitter();
}
/**
* @param {?} event
* @return {?}
*/
clickon(event) {
event.stopPropagation();
}
/**
* @return {?}
*/
clickout() {
if (this.actions) {
this.toggle();
}
}
/**
* @return {?}
*/
ngOnInit() {
this.open.emit(this.actions);
}
/**
* @return {?}
*/
toggle() {
if (this.animationDone) {
this.animationDone = false;
this.actions = !this.actions;
this.open.emit(this.actions);
if (this.mode == "scale") {
this.state = (this.state == "scale") ? "10" : "scale";
}
else {
if (this.direction == "right") {
this.state = (this.state == "right") ? "10" : "right";
}
if (this.direction == "down") {
this.state = (this.state == "down") ? "10" : "down";
}
if (this.direction == "left") {
this.state = (this.state == "left") ? "10" : "left";
}
if (this.direction == "up") {
this.state = (this.state == "up") ? "10" : "up";
}
}
}
}
/**
* @return {?}
*/
done() {
this.animationDone = true;
}
}
RbFabSpeedDialComponent.decorators = [
{ type: Component, args: [{
selector: 'rb-fab-speed-dial',
template: `<div [ngClass]="{'main': direction == 'right', 'main-down': direction == 'down', 'main-left': direction == 'left','main-up': direction == 'up'}">
<button class="trigger" [color]="color" (click)="toggle()" mat-fab>
<mat-icon *ngIf="!actions">{{openIcon}}</mat-icon>
<mat-icon *ngIf="actions">{{closeIcon}}</mat-icon>
</button>
<div class="actions" []="state" (.done)="done()">
<ng-content *ngIf="actions"></ng-content>
</div>
</div>`,
styles: [`.main{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;z-index:102}.main .trigger{z-index:101;margin:6px}.main .actions{z-index:100;position:absolute;height:68px;left:68px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.main .actions>button{margin:6px}.main-down{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.main-down .trigger{z-index:101;margin:6px}.main-down .actions{z-index:100;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;width:68px;top:68px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.main-down .actions>button{margin:6px}.main-left{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.main-left .trigger{z-index:101;margin:6px}.main-left .actions{z-index:100;position:absolute;right:68px;height:68px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.main-left .actions>button{margin:6px}.main-up{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.main-up .trigger{z-index:101;margin:6px}.main-up .actions{z-index:100;position:absolute;width:68px;bottom:68px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.main-up .actions>button{margin:6px}`],
animations: [
trigger('listAnimation', [
transition('* => right', [
query(':enter', style({ opacity: 0 }), { optional: true }),
query(':enter', stagger('50ms', animate('200ms', keyframes([
style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(15px)', offset: 0.3 }),
style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 })
]))), { optional: true })
]),
transition('right => *', [
query(':leave', group([style({ opacity: 1 }), stagger('50ms reverse', animate('200ms', keyframes([
style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(15px)', offset: 0.7 }),
style({ opacity: 0, transform: 'translateX(-100%)', offset: 1.0 })
])))
]), { optional: true })
]),
transition('* => down', [
query(':enter', style({ opacity: 0 }), { optional: true }),
query(':enter', stagger('50ms', animate('200ms', keyframes([
style({ opacity: 0, transform: 'translateY(-100%)', offset: 0 }),
style({ opacity: 1, transform: 'translateY(15px)', offset: 0.3 }),
style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 })
]))), { optional: true }),
]),
transition('down => *', [
query(':leave', group([style({ opacity: 1 }), stagger('50ms reverse', animate('200ms', keyframes([
style({ opacity: 1, transform: 'translateY(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateY(15px)', offset: 0.7 }),
style({ opacity: 0, transform: 'translateY(-100%)', offset: 1.0 })
])))
]), { optional: true })
]),
transition('* => left', [
query(':enter', style({ opacity: 0 }), { optional: true }),
query(':enter', stagger('50ms', animate('200ms', keyframes([
style({ opacity: 0, transform: 'translateX(100%)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(-15px)', offset: 0.3 }),
style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 })
]))), { optional: true }),
]),
transition('left => *', [
query(':leave', group([style({ opacity: 1 }), stagger('50ms reverse', animate('200ms', keyframes([
style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(-15px)', offset: 0.7 }),
style({ opacity: 0, transform: 'translateX(100%)', offset: 1.0 })
])))
]), { optional: true })
]),
transition('* => up', [
query(':enter', style({ opacity: 0 }), { optional: true }),
query(':enter', stagger('50ms', animate('200ms', keyframes([
style({ opacity: 0, transform: 'translateY(100%)', offset: 0 }),
style({ opacity: 1, transform: 'translateY(-15px)', offset: 0.3 }),
style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 })
]))), { optional: true }),
]),
transition('up => *', [
query(':leave', group([style({ opacity: 1 }), stagger('50ms reverse', animate('200ms', keyframes([
style({ opacity: 1, transform: 'translateY(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateY(-15px)', offset: 0.7 }),
style({ opacity: 0, transform: 'translateY(100%)', offset: 1.0 })
])))
]), { optional: true })
]),
transition('* => scale', [
query(':enter', style({ opacity: 0 }), { optional: true }),
query(':enter', stagger('50ms', animate('200ms', keyframes([
style({ opacity: 0, transform: 'scale(0)', offset: 0 }),
style({ opacity: 1, transform: 'scale(0.3)', offset: 0.3 }),
style({ opacity: 1, transform: 'scale(1)', offset: 1.0 })
]))), { optional: true }),
]),
transition('scale => *', [
query(':leave', group([style({ opacity: 1 }), stagger('50ms reverse', animate('200ms', keyframes([
style({ opacity: 1, transform: 'scale(1)', offset: 0 }),
style({ opacity: 1, transform: 'scale(0.7)', offset: 0.7 }),
style({ opacity: 0, transform: 'scale(0)', offset: 1.0 })
])))
]), { optional: true })
]),
]),
],
},] },
];
/** @nocollapse */
RbFabSpeedDialComponent.ctorParameters = () => [];
RbFabSpeedDialComponent.propDecorators = {
"state": [{ type: Input },],
"direction": [{ type: Input },],
"mode": [{ type: Input },],
"color": [{ type: Input },],
"openIcon": [{ type: Input },],
"closeIcon": [{ type: Input },],
"open": [{ type: Output },],
"clickon": [{ type: HostListener, args: ['click', ['$event'],] },],
"clickout": [{ type: HostListener, args: ['document:click',] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class RbFabItemDirective {
/**
* @param {?} el
*/
constructor(el) {
this.el = el;
this.el.nativeElement.style.margin = "6px";
}
}
RbFabItemDirective.decorators = [
{ type: Directive, args: [{
selector: '[rbFabItem]'
},] },
];
/** @nocollapse */
RbFabItemDirective.ctorParameters = () => [
{ type: ElementRef, },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class RbFabSpeedDialModule {
}
RbFabSpeedDialModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatIconModule,
MatButtonModule
],
declarations: [RbFabSpeedDialComponent, RbFabItemDirective],
exports: [RbFabSpeedDialComponent, RbFabItemDirective]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Generated bundle index. Do not edit.
*/
export { RbFabSpeedDialModule, RbFabItemDirective as ɵb, RbFabSpeedDialComponent as ɵa };
//# sourceMappingURL=rb-fab-speed-dial.js.map