rb-fab-speed-dial
Version:
Fab speed dial for angular and material2.
195 lines (192 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';
var RbFabSpeedDialComponent = /** @class */ (function () {
function RbFabSpeedDialComponent() {
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();
}
RbFabSpeedDialComponent.prototype.clickon = function (event) {
event.stopPropagation();
};
RbFabSpeedDialComponent.prototype.clickout = function () {
if (this.actions) {
this.toggle();
}
};
RbFabSpeedDialComponent.prototype.ngOnInit = function () {
this.open.emit(this.actions);
};
RbFabSpeedDialComponent.prototype.toggle = function () {
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";
}
}
}
};
RbFabSpeedDialComponent.prototype.done = function () {
this.animationDone = true;
};
return RbFabSpeedDialComponent;
}());
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'}\">\n <button class=\"trigger\" [color]=\"color\" (click)=\"toggle()\" mat-fab>\n <mat-icon *ngIf=\"!actions\">{{openIcon}}</mat-icon>\n <mat-icon *ngIf=\"actions\">{{closeIcon}}</mat-icon>\n </button>\n <div class=\"actions\" [@listAnimation]=\"state\" (@listAnimation.done)=\"done()\">\n <ng-content *ngIf=\"actions\"></ng-content>\n </div>\n</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 })
]),
]),
],
},] },
];
RbFabSpeedDialComponent.ctorParameters = function () { return []; };
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',] },],
};
var RbFabItemDirective = /** @class */ (function () {
function RbFabItemDirective(el) {
this.el = el;
this.el.nativeElement.style.margin = "6px";
}
return RbFabItemDirective;
}());
RbFabItemDirective.decorators = [
{ type: Directive, args: [{
selector: '[rbFabItem]'
},] },
];
RbFabItemDirective.ctorParameters = function () { return [
{ type: ElementRef, },
]; };
var RbFabSpeedDialModule = /** @class */ (function () {
function RbFabSpeedDialModule() {
}
return RbFabSpeedDialModule;
}());
RbFabSpeedDialModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatIconModule,
MatButtonModule
],
declarations: [RbFabSpeedDialComponent, RbFabItemDirective],
exports: [RbFabSpeedDialComponent, RbFabItemDirective]
},] },
];
export { RbFabSpeedDialModule, RbFabItemDirective as ɵb, RbFabSpeedDialComponent as ɵa };
//# sourceMappingURL=rb-fab-speed-dial.js.map