@sd-angular/core
Version:
Sd Angular Core Lib
173 lines (167 loc) • 10.6 kB
JavaScript
import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
import { EventEmitter, Component, ChangeDetectionStrategy, ComponentFactoryResolver, ApplicationRef, Injector, ChangeDetectorRef, ViewChild, Input, Output, NgModule } from '@angular/core';
import { DomPortalOutlet, CdkPortal, PortalModule } from '@angular/cdk/portal';
import { v4 } from 'uuid';
import { SdLoadingService } from '@sd-angular/core/loading';
import $ from 'jquery';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { SdButtonModule } from '@sd-angular/core/button';
var _embeddedViewRef, _drawMiniumBar;
class SdModalResizable {
constructor(cfr, ar, injector, ref, loadingService) {
this.cfr = cfr;
this.ar = ar;
this.injector = injector;
this.ref = ref;
this.loadingService = loadingService;
this.id = `I${v4()}`;
this.width = '480px';
this.editingChanged = new EventEmitter();
_embeddedViewRef.set(this, void 0);
this.isEditing = false;
this.isOpened = false;
this.isHover = false;
this.isLoading = false;
this.isMinium = false;
this.isFullscreen = false;
this.open = () => {
this.ref.markForCheck();
this.isOpened = true;
// console.log('OPEN isMinium' + this.id, this.isMinium);
// tinh toan width maxium lần đầu khi không ở trạng thái minium
if (!$('#' + this.id).hasClass('c-minium')) {
setTimeout(() => {
const maxiumWidth = $('#' + this.id).width();
if (maxiumWidth > 0) {
$('#' + this.id).attr('data-width', maxiumWidth);
}
$('#' + this.id).removeClass('c-closed');
}, 100);
}
this.maxium();
};
this.close = () => {
this.ref.markForCheck();
this.isOpened = false;
setTimeout(() => {
$('#' + this.id).css({ width: '0px', right: '0px' }).removeClass('c-minium').addClass('c-closed');
}, 100);
this.stopLoading();
__classPrivateFieldGet(this, _drawMiniumBar).call(this);
};
this.minium = () => {
this.ref.markForCheck();
this.isMinium = true;
// console.log('MINIUM isMinium' + this.id, this.isMinium);
__classPrivateFieldGet(this, _drawMiniumBar).call(this);
};
this.maxium = () => {
this.ref.markForCheck();
this.isMinium = false;
// console.log('MAXIUM isMinium' + this.id, this.isMinium);
__classPrivateFieldGet(this, _drawMiniumBar).call(this);
};
this.changeFullScreen = () => {
this.ref.markForCheck();
this.isFullscreen = !this.isFullscreen;
__classPrivateFieldGet(this, _drawMiniumBar).call(this);
};
_drawMiniumBar.set(this, () => {
setTimeout(() => {
let totalRight = 0;
const miniumWidth = 300;
$('.modal-custom').each((index, item) => {
if ($(item).hasClass('c-minium')) {
$(item).css({ width: miniumWidth + 'px', right: totalRight + 'px' });
totalRight += miniumWidth + 8;
}
else if (!$(item).hasClass('c-closed')) {
const maxiumWidth = parseInt($(item).attr('data-width'), 0);
if (!isNaN(maxiumWidth)) {
if ($(item).hasClass('c-fullscreen')) {
$(item).css({ width: 'calc(100% - 16px)', right: '8px' });
}
else {
$(item).css({ width: maxiumWidth + 'px', right: totalRight + 'px' });
}
totalRight += maxiumWidth + 8;
}
}
});
}, 200);
});
this.startLoading = () => {
this.isLoading = true;
this.loadingService.stop();
this.loadingService.start(`#${this.id}`);
};
this.stopLoading = () => {
this.isLoading = false;
this.loadingService.stop();
};
}
ngAfterViewInit() {
__classPrivateFieldSet(this, _embeddedViewRef, new DomPortalOutlet(document.body, this.cfr, this.ar, this.injector).attachTemplatePortal(this.portal));
}
ngOnDestroy() {
__classPrivateFieldGet(this, _embeddedViewRef).destroy();
}
toggleEditable() {
this.isEditing = !this.isEditing;
this.editingChanged.emit(this.isEditing);
}
}
_embeddedViewRef = new WeakMap(), _drawMiniumBar = new WeakMap();
SdModalResizable.decorators = [
{ type: Component, args: [{
selector: 'sd-modal-resizable',
template: "<ng-template cdkPortal>\r\n <div [id]=\"id\" class=\"modal-custom\" [ngStyle]=\"{'width': width}\"\r\n [ngClass]=\"{'modal-custom--active': isOpened,'modal-custom--loading': isLoading\r\n , 'c-minium': isMinium, 'c-fullscreen': isFullscreen}\"\r\n (mouseover)=\"isHover = true\" (mouseout)=\"isHover = false\">\r\n <ng-container *ngIf=\"isOpened\">\r\n <div class=\"modal-custom__header media align-items-center\">\r\n <div class=\"modal-custom__title media-body\">\r\n <ng-content select=\"[sdTitle]\"></ng-content>\r\n </div>\r\n <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minium()\" *ngIf=\"!isMinium\" mat-icon-button\r\n title=\"Thu nh\u1ECF\">\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maxium()\" *ngIf=\"isMinium\" mat-icon-button\r\n title=\"Ph\u00F3ng to\">\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n <button type=\"button\" class=\"c-action--white\" (click)=\"changeFullScreen()\" *ngIf=\"!isFullscreen\" mat-icon-button\r\n title=\"To\u00E0n m\u00E0n h\u00ECnh\">\r\n <mat-icon>open_in_full</mat-icon>\r\n </button>\r\n <button type=\"button\" class=\"c-action--white\" (click)=\"changeFullScreen()\" *ngIf=\"isFullscreen\" mat-icon-button\r\n title=\"Tho\u00E1t to\u00E0n m\u00E0n h\u00ECnh\">\r\n <mat-icon>fullscreen_exit</mat-icon>\r\n </button>\r\n <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"\u0110\u00F3ng\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n <div *ngIf=\"isOpened\" class=\"modal-custom__body\">\r\n <div class=\"modal-custom__content\">\r\n <ng-content select=\"[sdBody]\"></ng-content>\r\n </div>\r\n </div>\r\n <div class=\"modal-custom__footer\">\r\n <ng-content select=\"[sdFooter]\"></ng-content>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".text-black400{color:#757575}.modal-custom{background-color:#fff;border-radius:4px 4px 0 0;bottom:0;box-shadow:0 .4px .8px rgba(0,0,0,.1),0 3px 6px rgba(0,0,0,.2);display:flex;flex-direction:column;opacity:0;pointer-events:none;position:fixed;right:12px;top:80px;transform:translate3d(0,100%,0);transition:all .3s ease-in-out;visibility:hidden;z-index:998}.modal-custom button.c-action--white:focus{outline:none!important}.modal-custom.c-minium-of-list{bottom:0;opacity:1;pointer-events:all;top:auto;transform:translateZ(0);visibility:visible}.modal-custom.c-minium{top:auto!important;z-index:998!important}.modal-custom.c-minium .modal-custom__body,.modal-custom.c-minium .modal-custom__footer{display:none}.modal-custom.c-fullscreen{top:0;z-index:999}.c-action{color:#212121}.c-action:focus{outline:none}.c-action--white{color:#fff}.c-action--white.c-min{margin-bottom:-12px}.c-action--white.c-max{margin-top:-12px}.modal-custom__icon{background:transparent;border:0;color:#212121;outline:none;overflow:hidden}.modal-custom__icon .mat-icon{float:left}.modal-custom__header{background-color:#5d6165;border-radius:4px 4px 0 0;color:#fff;min-height:40px;padding:0 16px}.modal-custom__body{flex:1;position:relative}.modal-custom__content{bottom:0;left:0;overflow:auto;padding:8px 16px 16px;position:absolute;right:0;top:0}.modal-custom__footer{border-top:1px solid #dde0e5;padding:5px 0}.modal-custom-backdrop{background:none;border:0;bottom:0;height:100%;left:0;outline:none!important;position:fixed;right:0;top:0;transition:all .3s ease-in-out;width:100%;z-index:99}.modal-custom-backdrop--active{background-color:rgba(0,0,0,.4)}.modal-custom--active{opacity:1;pointer-events:all;transform:translateZ(0);visibility:visible}.modal-custom__title{font-size:14px;font-weight:500;line-height:20px}"]
},] }
];
SdModalResizable.ctorParameters = () => [
{ type: ComponentFactoryResolver },
{ type: ApplicationRef },
{ type: Injector },
{ type: ChangeDetectorRef },
{ type: SdLoadingService }
];
SdModalResizable.propDecorators = {
portal: [{ type: ViewChild, args: [CdkPortal,] }],
editable: [{ type: Input }],
width: [{ type: Input }],
editingChanged: [{ type: Output }]
};
class SdModalResizableModule {
}
SdModalResizableModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatIconModule,
MatDialogModule,
MatButtonModule,
SdButtonModule,
PortalModule
],
declarations: [
SdModalResizable
],
exports: [
SdModalResizable
],
providers: []
},] }
];
/*
* Public API Surface of superdev-angular-core
*/
/**
* Generated bundle index. Do not edit.
*/
export { SdModalResizable, SdModalResizableModule };
//# sourceMappingURL=sd-angular-core-modal-resizable.js.map