ngx-img-zoom-viewer
Version:
The NGX IMG Zoom Viewer is a Angular library that can help to create a magnified preview of any image in any kind of angular app
244 lines (234 loc) • 13.1 kB
JavaScript
import { DOCUMENT } from '@angular/common';
import * as i0 from '@angular/core';
import { Component, Inject, Input, HostListener, NgModule } from '@angular/core';
class NGXImgZoomViewerComponent {
constructor(el, renderer, document) {
this.el = el;
this.renderer = renderer;
this.providedPreviewBox = { height: 350, width: 350 };
this.defaultConfigs = {
imgHeight: 500,
megnification: 2.5,
priviewBoxSize: {
height: 350,
width: 350,
},
};
this.cursorSize = { height: 0, width: 0 };
this._src = '';
this.cursorPosition = { x: 0, y: 0 };
this.host = this.renderer.createElement('div');
this.document = document;
this.renderer.addClass(this.host, 'image_container');
this.renderer.appendChild(el.nativeElement, this.host); // assigning host
}
set src(srcValue) {
if (typeof srcValue === 'string') {
this._src = srcValue;
this.createImage();
}
else {
console.error('src must be of type string, current type found ' + typeof srcValue);
}
}
ngOnChanges(changes) {
var _a, _b, _c, _d, _e, _f, _g;
this.defaultConfigs.imgHeight =
(_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.imgHeight) !== null && _b !== void 0 ? _b : this.defaultConfigs.imgHeight;
this.defaultConfigs.megnification =
(_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.megnification) !== null && _d !== void 0 ? _d : this.defaultConfigs.megnification;
this.defaultConfigs.priviewBoxSize.height =
(_g = (_f = (_e = this.config) === null || _e === void 0 ? void 0 : _e.priviewBoxSize) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : this.defaultConfigs.priviewBoxSize.height;
if (this.defaultConfigs.priviewBoxSize.height + 20 > window.innerHeight) {
this.defaultConfigs.priviewBoxSize.height = window.innerHeight - 20;
}
this.defaultConfigs.priviewBoxSize.width =
this.defaultConfigs.priviewBoxSize.height;
this.providedPreviewBox = Object.assign({}, this.defaultConfigs.priviewBoxSize);
this.createImage();
}
ngOnInit() {
if (!this._src)
console.error('unable to read src attribute');
}
onMouseLeave(e) {
if (this.cursorSize.width < 50 && this.cursorSize.height > 50)
return;
this.renderer.removeChild(this.host, this.cursor);
this.renderer.removeChild(this.document, this.img_preview);
}
onMouseEnter(e) {
var _a, _b, _c;
this.checkwidth();
if (this.cursorSize.width < 50 && this.cursorSize.height > 50)
return;
if (this.host.children.length > 1) {
this.onMouseLeave(e);
}
if (this.document.getElementById('ngx-img-zoom-viewer')) {
this.renderer.removeChild(this.document, this.document.getElementById('ngx-img-zoom-viewer'));
this.renderer.removeChild(this.document, this.document.getElementById('ngx-img-zoom-cursor'));
}
this.cursor = this.renderer.createElement('div');
this.renderer.addClass(this.cursor, 'cursor');
this.renderer.setStyle(this.cursor, `height`, `${(_a = this.cursorSize) === null || _a === void 0 ? void 0 : _a.height}px`);
this.renderer.setStyle(this.cursor, `width`, `${(_b = this.cursorSize) === null || _b === void 0 ? void 0 : _b.width}px`);
this.renderer.setAttribute(this.cursor, 'id', 'ngx-img-zoom-cursor');
this.renderer.appendChild(this.host, this.cursor);
this.setCursorPosition(e);
this.img_preview = this.renderer.createElement('div');
this.renderer.addClass(this.img_preview, 'img_preview');
this.renderer.setStyle(this.img_preview, 'height', `${this.defaultConfigs.priviewBoxSize.height}px`);
this.renderer.setStyle(this.img_preview, 'width', `${this.defaultConfigs.priviewBoxSize.width}px`);
this.renderer.setStyle(this.img_preview, 'left', `${window.innerWidth - 10 - this.defaultConfigs.priviewBoxSize.width}px`);
this.renderer.setAttribute(this.img_preview, 'id', 'ngx-img-zoom-viewer');
this.renderer.appendChild((_c = this.host.ownerDocument.lastChild) === null || _c === void 0 ? void 0 : _c.lastChild, this.img_preview);
}
onMouseMove(e) {
if (this.cursorSize.width < 50 && this.cursorSize.height > 50)
return;
this.setCursorPosition(e);
this.setImgPreview(e);
}
setCursorPosition(e) {
var _a, _b, _c, _d, _e, _f, _g, _h;
/* handling Left & top position for cursor box */
const imagex = this.image.getBoundingClientRect().x;
const imagey = this.image.getBoundingClientRect().y;
let cursorPosition = {
x: e.pageX - ((_a = this.cursorSize) === null || _a === void 0 ? void 0 : _a.width) / 2 - imagex >= 0 // checking if cursor box left is less then 0
? e.pageX - ((_b = this.cursorSize) === null || _b === void 0 ? void 0 : _b.width) / 2 - imagex
: 0,
y: e.pageY - ((_c = this.cursorSize) === null || _c === void 0 ? void 0 : _c.height) / 2 - imagey >= 0 // checking if cursor box top is less then 0
? e.pageY - ((_d = this.cursorSize) === null || _d === void 0 ? void 0 : _d.height) / 2 - imagey
: 0, // making sure if it is then only take 0 not negative value
};
/* handling bottom & right position for cursor box */
if (cursorPosition.x + ((_e = this.cursorSize) === null || _e === void 0 ? void 0 : _e.width) > this.image.offsetWidth) {
// checking if cursor left + cursor width is greater then image width
// making sure that any single pixel of cursor box can't go out from image respective on width
cursorPosition.x = this.image.offsetWidth - ((_f = this.cursorSize) === null || _f === void 0 ? void 0 : _f.width);
}
if (cursorPosition.y + ((_g = this.cursorSize) === null || _g === void 0 ? void 0 : _g.height) > this.image.offsetHeight) {
// making sure that any single pixel of cursor box can't go out from image respective on height
cursorPosition.y = this.image.offsetHeight - ((_h = this.cursorSize) === null || _h === void 0 ? void 0 : _h.height);
}
/* setting final value */
this.renderer.setStyle(this.cursor, 'top', `${cursorPosition.y}px`); // setting cursor box position for y axis
this.renderer.setStyle(this.cursor, 'left', `${cursorPosition.x}px`); // setting cursor box position for x axis
this.cursorPosition = cursorPosition; // saving data to global variable
}
setImgPreview(e) {
const zoomedImage = this.renderer.createElement('img'); // created new local image element
this.renderer.setAttribute(zoomedImage, 'src', this._src); // setting src for local image element
this.renderer.setStyle(zoomedImage, 'height', `${this.image.offsetHeight * this.defaultConfigs.megnification}px`); // changed zoomed image height based on real image
this.renderer.setStyle(zoomedImage, 'width', `${this.image.offsetWidth * this.defaultConfigs.megnification}px`); // changed zoomed image width based on real image
this.renderer.setStyle(zoomedImage, 'top', `-${this.cursorPosition.y * this.defaultConfigs.megnification}px`); // changed zoomed image position based on cursor position
this.renderer.setStyle(zoomedImage, 'left', `-${this.cursorPosition.x * this.defaultConfigs.megnification}px`); // changed zoomed image position based on cursor position
this.img_preview.innerHTML = '';
this.renderer.appendChild(this.img_preview, zoomedImage); // added image into img_preview box
}
createImage() {
this.host.innerHTML = '';
this.image = this.renderer.createElement('img');
this.renderer.setAttribute(this.image, 'src', this._src);
this.renderer.addClass(this.image, 'main_image');
this.renderer.setStyle(this.image, 'max-height', this.defaultConfigs.imgHeight + 'px');
this.renderer.appendChild(this.host, this.image);
}
checkwidth() {
this.defaultConfigs.priviewBoxSize.width = this.providedPreviewBox.width;
const def = this.image.getBoundingClientRect().x +
this.image.width +
this.defaultConfigs.priviewBoxSize.width +
20 -
window.innerWidth;
if (def >= 0) {
this.defaultConfigs.priviewBoxSize.width =
this.defaultConfigs.priviewBoxSize.width - def - 30;
}
this.cursorSize.height =
this.defaultConfigs.priviewBoxSize.height /
this.defaultConfigs.megnification;
this.cursorSize.width =
this.defaultConfigs.priviewBoxSize.width /
this.defaultConfigs.megnification;
}
}
NGXImgZoomViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NGXImgZoomViewerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
NGXImgZoomViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: NGXImgZoomViewerComponent, selector: "ngx-img-zoom-viewer", inputs: { config: "config", src: "src" }, host: { listeners: { "mouseleave": "onMouseLeave($event)", "mouseenter": "onMouseEnter($event)", "mousemove": "onMouseMove($event)" } }, usesOnChanges: true, ngImport: i0, template: ``, isInline: true, styles: [".image_container{position:relative;display:inline-block}.image_container img{width:100%}.cursor{position:absolute;background-color:#ffffff80}.img_preview{position:fixed;z-index:1000;top:10px;right:10px;overflow:hidden}.img_preview img{position:absolute}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NGXImgZoomViewerComponent, decorators: [{
type: Component,
args: [{
selector: 'ngx-img-zoom-viewer',
template: ``,
styles: [
`
.image_container {
position: relative;
display: inline-block;
}
.image_container img {
width: 100%;
}
.cursor {
position: absolute;
background-color: rgba(255, 255, 255, 0.5);
}
.img_preview {
position: fixed;
z-index: 1000;
top: 10px;
right: 10px;
overflow: hidden;
}
.img_preview img {
position: absolute;
}
`,
],
}]
}], ctorParameters: function () {
return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }];
}, propDecorators: { config: [{
type: Input
}], src: [{
type: Input
}], onMouseLeave: [{
type: HostListener,
args: ['mouseleave', ['$event']]
}], onMouseEnter: [{
type: HostListener,
args: ['mouseenter', ['$event']]
}], onMouseMove: [{
type: HostListener,
args: ['mousemove', ['$event']]
}] } });
class NGXImgZoomViewerModule {
}
NGXImgZoomViewerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NGXImgZoomViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NGXImgZoomViewerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NGXImgZoomViewerModule, declarations: [NGXImgZoomViewerComponent], exports: [NGXImgZoomViewerComponent] });
NGXImgZoomViewerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NGXImgZoomViewerModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NGXImgZoomViewerModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NGXImgZoomViewerComponent
],
imports: [],
exports: [
NGXImgZoomViewerComponent
]
}]
}] });
/*
* Public API Surface of ngx-img-zoom-viewer
*/
/**
* Generated bundle index. Do not edit.
*/
export { NGXImgZoomViewerComponent, NGXImgZoomViewerModule };
//# sourceMappingURL=ngx-img-zoom-viewer.mjs.map