ng-cw-v12
Version:
Angular UI Component Library
128 lines (123 loc) • 7.8 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import { __awaiter } from 'tslib';
class ImgEnlargementComponent {
constructor(eleRef) {
this.eleRef = eleRef;
/** 缩略图容器大小 */
this.ncSmallSize = 300;
/** 预览容器大小 */
this.ncPreviewSize = 600;
/** 缩略图地址 */
this.ncSmallUrl = '';
/** 预览图地址 */
this.ncPreviewUrl = '';
}
ngOnInit() {
let el_EnlargeContainer = this.eleRef.nativeElement.querySelector('#el_EnlargeContainer');
let el_SmallContainer = this.eleRef.nativeElement.querySelector('#el_SmallContainer');
let el_SmallImage = this.eleRef.nativeElement.querySelector('#el_SmallImage');
let el_maskEnarge = this.eleRef.nativeElement.querySelector('#el_maskEnarge');
let el_PreviewContainer = this.eleRef.nativeElement.querySelector('#el_PreviewContainer');
let el_PreviewImage = this.eleRef.nativeElement.querySelector('#el_PreviewImage');
let smallImgWidth = 0;
let smallImgHeight = 0;
el_SmallImage.src = this.ncSmallUrl;
el_SmallImage.onload = () => {
//计算缩放比
let { width, height } = el_SmallImage;
const smallScale = Math.min(this.ncSmallSize / width, this.ncSmallSize / height, 1);
//计算左侧区域宽高
smallImgWidth = width * smallScale;
smallImgHeight = height * smallScale;
//设置左侧区域宽高
el_EnlargeContainer.style.width = el_SmallContainer.style.width = el_SmallImage.style.width = smallImgWidth + 'px';
el_EnlargeContainer.style.height = el_SmallContainer.style.height = el_SmallImage.style.height = smallImgHeight + 'px';
};
el_SmallContainer.onmouseenter = () => __awaiter(this, void 0, void 0, function* () {
// 加载预览大图原始图
if (this.ncPreviewUrl) {
el_PreviewImage.src = this.ncPreviewUrl;
}
else {
el_PreviewImage.src = this.ncSmallUrl;
}
el_PreviewImage.onload = () => {
// 显示蒙层和预览大图区域
el_maskEnarge.style.display = 'block';
el_PreviewContainer.style.display = 'block';
//计算缩放比
let { width, height } = el_PreviewImage;
const previewScale = Math.min(this.ncPreviewSize / width, this.ncPreviewSize / height, 1);
//计算实际展示区域
el_PreviewContainer.style.width = width * previewScale + 'px';
el_PreviewContainer.style.height = height * previewScale + 'px';
el_PreviewContainer.style.left = (smallImgWidth + 10) + 'px';
//设置蒙层的大小，使用预览大图的缩放比，才能得到准确的蒙层内容用于在右侧放大区域呈现放大效果
el_maskEnarge.style.width = smallImgWidth * previewScale + 'px';
el_maskEnarge.style.height = smallImgHeight * previewScale + 'px';
};
});
el_SmallContainer.onmouseleave = () => {
el_maskEnarge.style.display = 'none';
el_PreviewContainer.style.display = 'none';
};
el_SmallContainer.onmousemove = (event) => {
//获取鼠标移动的位置信息
let x = event.pageX - el_EnlargeContainer.getBoundingClientRect().left - el_maskEnarge.offsetWidth / 2;
let y = event.pageY - el_EnlargeContainer.getBoundingClientRect().top - el_maskEnarge.offsetHeight / 2;
//限制蒙层移动的范围，不能超出缩略小图内容区域
const xMax = el_SmallContainer.offsetWidth - el_maskEnarge.offsetWidth;
x = x < 0 ? 0 : (x > xMax ? xMax : x);
const yMax = el_SmallContainer.offsetHeight - el_maskEnarge.offsetHeight;
y = y < 0 ? 0 : (y > yMax ? yMax : y);
//更新蒙层的位置信息，实时移动蒙层元素
el_maskEnarge.style.left = x + 'px';
el_maskEnarge.style.top = y + 'px';
//右侧的预览大图等比例移动
const rate = el_PreviewImage.offsetWidth / el_SmallContainer.offsetWidth;
el_PreviewImage.style.marginTop = -(rate * y) + 'px';
el_PreviewImage.style.marginLeft = -(rate * x) + 'px';
};
}
}
ImgEnlargementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ImgEnlargementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
ImgEnlargementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ImgEnlargementComponent, selector: "nc-img-enlargement", inputs: { ncSmallSize: "ncSmallSize", ncPreviewSize: "ncPreviewSize", ncSmallUrl: "ncSmallUrl", ncPreviewUrl: "ncPreviewUrl" }, ngImport: i0, template: "<div id=\"el_EnlargeContainer\" class=\"enlarge\">\r\n <!--\u539F\u59CB\u5C0F\u56FE\u533A\u57DF-->\r\n <div id=\"el_SmallContainer\" class=\"small\">\r\n <img id=\"el_SmallImage\" />\r\n <div id=\"el_maskEnarge\" class=\"mask\"></div>\r\n </div>\r\n <!--\u9884\u89C8\u5927\u56FE\u533A\u57DF-->\r\n <div id=\"el_PreviewContainer\" class=\"preview\">\r\n <img id=\"el_PreviewImage\" />\r\n </div>\r\n</div>", styles: [".enlarge,.small{position:relative}.mask{position:absolute;top:0;left:0;background:rgba(56,77,145,.3);cursor:move;display:none}.preview{position:absolute;top:0;left:150px;overflow:hidden;z-index:1001}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ImgEnlargementComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-img-enlargement',
templateUrl: './img-enlargement.component.html',
styleUrls: ['./img-enlargement.component.less']
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { ncSmallSize: [{
type: Input
}], ncPreviewSize: [{
type: Input
}], ncSmallUrl: [{
type: Input
}], ncPreviewUrl: [{
type: Input
}] } });
class NcImgEnlargementModule {
}
NcImgEnlargementModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcImgEnlargementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcImgEnlargementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcImgEnlargementModule, declarations: [ImgEnlargementComponent], exports: [ImgEnlargementComponent] });
NcImgEnlargementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcImgEnlargementModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcImgEnlargementModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ImgEnlargementComponent
],
imports: [],
exports: [
ImgEnlargementComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ImgEnlargementComponent, NcImgEnlargementModule };
//# sourceMappingURL=ng-cw-v12-img-enlargement.js.map