paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

lightbox_canvas: Convert LightboxCanvas to an ES6 class.

Browse Source 
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
2020-07-22 14:47:08 -07:00
committed by Tim Abbott
parent d5a0ee612f
commit fc21417d67
1 changed files with 32 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
static/js/lightbox_canvas.js
View File

@@ -62,7 +62,7 @@ const funcs = {
// props don't exist, so we need to create them as a difference of // props don't exist, so we need to create them as a difference of
// where the last `layerX` and `layerY` movements since the last // where the last `layerX` and `layerY` movements since the last
// `mousemove` event in this `mousedown` event were registered. // `mousemove` event in this `mousedown` event were registered.
const polyfillMouseMovement = function (e) { const polyfillMouseMovement = (e) => {
e.movementX = e.layerX - lastPosition.x || 0; e.movementX = e.layerX - lastPosition.x || 0;
e.movementY = e.layerY - lastPosition.y || 0; e.movementY = e.layerY - lastPosition.y || 0;
@@ -257,11 +257,8 @@ const funcs = {
}, },
}; };
// a class w/ prototype to create a new `LightboxCanvas` instance. class LightboxCanvas {
const LightboxCanvas = function (el) { meta = {
const self = this;
this.meta = {
direction: -1, direction: -1,
zoom: 1, zoom: 1,
image: null, image: null,
@@ -276,6 +273,7 @@ const LightboxCanvas = function (el) {
maxZoom: 10, maxZoom: 10,
}; };
constructor(el) {
if (el instanceof Node) { if (el instanceof Node) {
this.canvas = el; this.canvas = el;
} else if (typeof el === "string") { } else if (typeof el === "string") {
@@ -288,42 +286,41 @@ const LightboxCanvas = function (el) {
this.meta.image = new Image(); this.meta.image = new Image();
this.meta.image.src = this.canvas.getAttribute("data-src"); this.meta.image.src = this.canvas.getAttribute("data-src");
this.meta.image.onload = function () { this.meta.image.onload = () => {
self.meta.ratio = funcs.imageRatio(this); this.meta.ratio = funcs.imageRatio(this.meta.image);
funcs.sizeCanvas(self.canvas, self.meta); funcs.sizeCanvas(this.canvas, this.meta);
funcs.displayImage(self.canvas, self.context, self.meta); funcs.displayImage(this.canvas, this.context, this.meta);
}; };
this.canvas.image = this.meta.image; this.canvas.image = this.meta.image;
funcs.attachEvents(this.canvas, this.context, self.meta); funcs.attachEvents(this.canvas, this.context, this.meta);
}; }
LightboxCanvas.prototype = {
// set the speed at which scrolling zooms in on a photo. // set the speed at which scrolling zooms in on a photo.
speed(speed) { speed(speed) {
this.meta.speed = speed; this.meta.speed = speed;
}, }
// set the max zoom of the `LightboxCanvas` canvas as a mult of the total width. // set the max zoom of the `LightboxCanvas` canvas as a mult of the total width.
maxZoom(maxZoom) { maxZoom(maxZoom) {
this.meta.maxZoom = maxZoom; this.meta.maxZoom = maxZoom;
}, }
reverseScrollDirection() { reverseScrollDirection() {
this.meta.direction = 1; this.meta.direction = 1;
}, }
setZoom(zoom) { setZoom(zoom) {
funcs.setZoom(this.meta, zoom); funcs.setZoom(this.meta, zoom);
funcs.displayImage(this.canvas, this.context, this.meta); funcs.displayImage(this.canvas, this.context, this.meta);
}, }
resize(callback) { resize(callback) {
this.meta.onresize = callback; this.meta.onresize = callback;
}, }
}; }
module.exports = LightboxCanvas; module.exports = LightboxCanvas;
window.LightboxCanvas = LightboxCanvas; window.LightboxCanvas = LightboxCanvas;