ng-devui
Version:
DevUI components based on Angular
79 lines • 8.62 kB
JavaScript
import { Directive, ElementRef, HostBinding, HostListener, Input } from '@angular/core';
import { ModalService } from 'ng-devui/modal';
import { Subject } from 'rxjs';
import { DImagePreviewComponent } from './image-preview.component';
import * as i0 from "@angular/core";
import * as i1 from "ng-devui/modal";
export class ImagePreviewDirective {
get defaultClasses() {
return !this.disableDefault;
}
onClick($event) {
if (this.disableDefault) {
return;
}
const target = $event.target;
if (target && target.nodeName.toLowerCase() === 'img') {
this.imagePreView(target);
}
}
constructor(elementRef, modalService) {
this.elementRef = elementRef;
this.modalService = modalService;
this.disableDefault = false;
}
ngOnInit() {
if (this.customSub) {
this.customSub.subscribe((target) => {
this.imagePreView(target);
});
}
}
ngOnDestroy() {
if (this.customSub) {
this.customSub.unsubscribe();
}
}
imagePreView(imageHTMLElement) {
const modalRef = this.modalService.open({
id: 'devui-image-preview-modal',
component: DImagePreviewComponent,
zIndex: this.zIndex,
backDropZIndex: this.backDropZIndex,
showAnimation: false,
data: {
targetImage: imageHTMLElement,
toolbar: this.toolbar,
images: Array.from(this.elementRef.nativeElement.querySelectorAll('img')),
onClose: () => {
modalRef.modalInstance.hide();
},
},
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImagePreviewDirective, deps: [{ token: i0.ElementRef }, { token: i1.ModalService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ImagePreviewDirective, selector: "[dImagePreview]", inputs: { customSub: "customSub", disableDefault: "disableDefault", toolbar: "toolbar", zIndex: "zIndex", backDropZIndex: "backDropZIndex" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.devui-image-preview-container": "this.defaultClasses" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImagePreviewDirective, decorators: [{
type: Directive,
args: [{
selector: '[dImagePreview]',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ModalService }], propDecorators: { customSub: [{
type: Input
}], disableDefault: [{
type: Input
}], toolbar: [{
type: Input
}], zIndex: [{
type: Input
}], backDropZIndex: [{
type: Input
}], defaultClasses: [{
type: HostBinding,
args: ['class.devui-image-preview-container']
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UtcHJldmlldy5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9kZXZ1aS9pbWFnZS1wcmV2aWV3L2ltYWdlLXByZXZpZXcuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUMzRyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDOUMsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMvQixPQUFPLEVBQUUsc0JBQXNCLEVBQXdCLE1BQU0sMkJBQTJCLENBQUM7OztBQUl6RixNQUFNLE9BQU8scUJBQXFCO0lBT2hDLElBQ0ksY0FBYztRQUNoQixPQUFPLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQztJQUM5QixDQUFDO0lBR0QsT0FBTyxDQUFDLE1BQU07UUFDWixJQUFJLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN4QixPQUFPO1FBQ1QsQ0FBQztRQUNELE1BQU0sTUFBTSxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUM7UUFDN0IsSUFBSSxNQUFNLElBQUksTUFBTSxDQUFDLFFBQVEsQ0FBQyxXQUFXLEVBQUUsS0FBSyxLQUFLLEVBQUUsQ0FBQztZQUN0RCxJQUFJLENBQUMsWUFBWSxDQUFDLE1BQXFCLENBQUMsQ0FBQztRQUMzQyxDQUFDO0lBQ0gsQ0FBQztJQUVELFlBQW9CLFVBQXNCLEVBQVUsWUFBMEI7UUFBMUQsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUFVLGlCQUFZLEdBQVosWUFBWSxDQUFjO1FBckJyRSxtQkFBYyxHQUFHLEtBQUssQ0FBQztJQXFCaUQsQ0FBQztJQUVsRixRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDbkIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRTtnQkFDbEMsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLENBQUMsQ0FBQztZQUM1QixDQUFDLENBQUMsQ0FBQztRQUNMLENBQUM7SUFDSCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1lBQ25CLElBQUksQ0FBQyxTQUFTLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDL0IsQ0FBQztJQUNILENBQUM7SUFFRCxZQUFZLENBQUMsZ0JBQTZCO1FBQ3hDLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDO1lBQ3RDLEVBQUUsRUFBRSwyQkFBMkI7WUFDL0IsU0FBUyxFQUFFLHNCQUFzQjtZQUNqQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU07WUFDbkIsY0FBYyxFQUFFLElBQUksQ0FBQyxjQUFjO1lBQ25DLGFBQWEsRUFBRSxLQUFLO1lBQ3BCLElBQUksRUFBRTtnQkFDSixXQUFXLEVBQUUsZ0JBQWdCO2dCQUM3QixPQUFPLEVBQUUsSUFBSSxDQUFDLE9BQU87Z0JBQ3JCLE1BQU0sRUFBRSxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLEtBQUssQ0FBQyxDQUFDO2dCQUN6RSxPQUFPLEVBQUUsR0FBRyxFQUFFO29CQUNaLFFBQVEsQ0FBQyxhQUFhLENBQUMsSUFBSSxFQUFFLENBQUM7Z0JBQ2hDLENBQUM7YUFDRjtTQUNGLENBQUMsQ0FBQztJQUNMLENBQUM7K0dBdkRVLHFCQUFxQjttR0FBckIscUJBQXFCOzs0RkFBckIscUJBQXFCO2tCQUhqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxpQkFBaUI7aUJBQzVCOzBHQUVVLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBR0YsY0FBYztzQkFEakIsV0FBVzt1QkFBQyxxQ0FBcUM7Z0JBTWxELE9BQU87c0JBRE4sWUFBWTt1QkFBQyxPQUFPLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNb2RhbFNlcnZpY2UgfSBmcm9tICduZy1kZXZ1aS9tb2RhbCc7XHJcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgREltYWdlUHJldmlld0NvbXBvbmVudCwgSUltYWdlUHJldmlld1Rvb2xiYXIgfSBmcm9tICcuL2ltYWdlLXByZXZpZXcuY29tcG9uZW50JztcclxuQERpcmVjdGl2ZSh7XHJcbiAgc2VsZWN0b3I6ICdbZEltYWdlUHJldmlld10nLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgSW1hZ2VQcmV2aWV3RGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xyXG4gIEBJbnB1dCgpIGN1c3RvbVN1YjogU3ViamVjdDxIVE1MRWxlbWVudD47XHJcbiAgQElucHV0KCkgZGlzYWJsZURlZmF1bHQgPSBmYWxzZTtcclxuICBASW5wdXQoKSB0b29sYmFyOiBJSW1hZ2VQcmV2aWV3VG9vbGJhcjtcclxuICBASW5wdXQoKSB6SW5kZXg6IG51bWJlcjtcclxuICBASW5wdXQoKSBiYWNrRHJvcFpJbmRleDogbnVtYmVyO1xyXG5cclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmRldnVpLWltYWdlLXByZXZpZXctY29udGFpbmVyJylcclxuICBnZXQgZGVmYXVsdENsYXNzZXMoKSB7XHJcbiAgICByZXR1cm4gIXRoaXMuZGlzYWJsZURlZmF1bHQ7XHJcbiAgfVxyXG5cclxuICBASG9zdExpc3RlbmVyKCdjbGljaycsIFsnJGV2ZW50J10pXHJcbiAgb25DbGljaygkZXZlbnQpIHtcclxuICAgIGlmICh0aGlzLmRpc2FibGVEZWZhdWx0KSB7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuICAgIGNvbnN0IHRhcmdldCA9ICRldmVudC50YXJnZXQ7XHJcbiAgICBpZiAodGFyZ2V0ICYmIHRhcmdldC5ub2RlTmFtZS50b0xvd2VyQ2FzZSgpID09PSAnaW1nJykge1xyXG4gICAgICB0aGlzLmltYWdlUHJlVmlldyh0YXJnZXQgYXMgSFRNTEVsZW1lbnQpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmLCBwcml2YXRlIG1vZGFsU2VydmljZTogTW9kYWxTZXJ2aWNlKSB7fVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIGlmICh0aGlzLmN1c3RvbVN1Yikge1xyXG4gICAgICB0aGlzLmN1c3RvbVN1Yi5zdWJzY3JpYmUoKHRhcmdldCkgPT4ge1xyXG4gICAgICAgIHRoaXMuaW1hZ2VQcmVWaWV3KHRhcmdldCk7XHJcbiAgICAgIH0pO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5jdXN0b21TdWIpIHtcclxuICAgICAgdGhpcy5jdXN0b21TdWIudW5zdWJzY3JpYmUoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGltYWdlUHJlVmlldyhpbWFnZUhUTUxFbGVtZW50OiBIVE1MRWxlbWVudCkge1xyXG4gICAgY29uc3QgbW9kYWxSZWYgPSB0aGlzLm1vZGFsU2VydmljZS5vcGVuKHtcclxuICAgICAgaWQ6ICdkZXZ1aS1pbWFnZS1wcmV2aWV3LW1vZGFsJyxcclxuICAgICAgY29tcG9uZW50OiBESW1hZ2VQcmV2aWV3Q29tcG9uZW50LFxyXG4gICAgICB6SW5kZXg6IHRoaXMuekluZGV4LFxyXG4gICAgICBiYWNrRHJvcFpJbmRleDogdGhpcy5iYWNrRHJvcFpJbmRleCxcclxuICAgICAgc2hvd0FuaW1hdGlvbjogZmFsc2UsXHJcbiAgICAgIGRhdGE6IHtcclxuICAgICAgICB0YXJnZXRJbWFnZTogaW1hZ2VIVE1MRWxlbWVudCxcclxuICAgICAgICB0b29sYmFyOiB0aGlzLnRvb2xiYXIsXHJcbiAgICAgICAgaW1hZ2VzOiBBcnJheS5mcm9tKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJ2ltZycpKSxcclxuICAgICAgICBvbkNsb3NlOiAoKSA9PiB7XHJcbiAgICAgICAgICBtb2RhbFJlZi5tb2RhbEluc3RhbmNlLmhpZGUoKTtcclxuICAgICAgICB9LFxyXG4gICAgICB9LFxyXG4gICAgfSk7XHJcbiAgfVxyXG59XHJcbiJdfQ==