@mdrajibul/zoomify
Version:
A simple zoomify image library
112 lines (110 loc) • 4.51 kB
JavaScript
/**
A simple utility class to zoomify background image
@param container - HTMLElement
@param autoStop - Set true to stop automatically when use mouse out. false to control from outside
@returns IMagnifyImage */
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
export class Zoomify {
constructor(container, autoStop = false) {
this.imageUrl = '';
this.imageWidth = 0;
this.imageHeight = 0;
this.ratio = 0;
this.isLoaded = false;
this.container = container;
this.autoStop = autoStop;
const imageCss = window.getComputedStyle(container);
if (imageCss.backgroundImage) {
this.imageUrl = imageCss.backgroundImage.slice(4, -1).replace(/['"]/g, '');
}
this.imageSrc = new Image();
}
/**
* static function to start zoomify immediately
* @param container - A html element where to load
* @returns Promise<IZoomifyImage>
*/
static run(container) {
return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
const zoomify = new Zoomify(container, true);
yield zoomify.start();
resolve(zoomify);
}));
}
/**
* Initialize image
* @returns Promise<boolean>
*/
init() {
return new Promise(resolve => {
this.imageSrc.onload = () => {
this.imageWidth = this.imageSrc.naturalWidth;
this.imageHeight = this.imageSrc.naturalHeight;
this.ratio = this.imageHeight / this.imageWidth;
const percentage = this.ratio * 100 + '%';
this.container.style.paddingBottom = percentage;
this.isLoaded = true;
};
this.imageSrc.src = this.imageUrl;
resolve(this.isLoaded);
});
}
/**
* Start zoomify. Useful method to control from outside
*/
start() {
return __awaiter(this, void 0, void 0, function* () {
if (!this.isLoaded) {
yield this.init();
}
this.afterLoad();
});
}
/**
* Stop zoomify. Useful to control from outside
*/
stop() {
this.reset();
this.container.onmousemove = null;
this.container.onmouseout = null;
}
afterLoad() {
this.container.style.cursor = 'crosshair';
this.container.onmousemove = (ev) => this.move(ev, this.ratio, this.imageWidth);
if (this.autoStop) {
this.container.onmouseout = () => this.reset();
}
}
move(event, ratio, imageWidth) {
const scrollLeft = this.container.scrollLeft > 0
? this.container.scrollLeft
: this.container.parentElement && this.container.parentElement.scrollLeft > 0
? this.container.parentElement.scrollLeft
: 0;
const scrollTop = this.container.scrollTop > 0
? this.container.scrollTop
: this.container.parentElement && this.container.parentElement.scrollTop > 0
? this.container.parentElement.scrollTop
: 0;
const boxWidth = this.container.clientWidth, x = event.pageX - this.container.offsetLeft, y = event.pageY - this.container.offsetTop, xPercent = (x + scrollLeft) / (boxWidth / 100) + '%', yPercent = (y + scrollTop) / ((boxWidth * ratio) / 100) + '%';
Object.assign(this.container.style, {
backgroundPosition: xPercent + ' ' + yPercent,
backgroundSize: imageWidth + 'px',
});
}
reset() {
Object.assign(this.container.style, {
backgroundPosition: 'top',
backgroundSize: 'cover',
cursor: 'default',
});
}
}