move all viewer scripts to javascript

res/include/script/file_viewer/viewer_scripts/ImageViewer.js

@@ -2,54 +2,55 @@ class ImageViewer {
 	viewer = null;
 	file   = null;
 
-	imgContainer = null;
-	imgElement   = null;
+	container = null;
+	element   = null;
 
 	zoomed = false;
 	x = 0;
 	y = 0;
 	dragging = false;
 
-	constructor(viewer, file) {let iv = this;
-		iv.viewer = viewer;
-		iv.file   = file;
+	constructor(viewer, file) {let v = this;
+		v.viewer = viewer;
+		v.file   = file;
 
-		iv.imgContainer = document.createElement("div");
-		iv.imgContainer.classList = "image-container";
+		v.container = document.createElement("dv");
+		v.container.classList = "image-container";
+		// v.container.style.lineHeight = "0";
 
-		iv.imgElement = document.createElement("img");
-		iv.imgElement.classList = "pannable drop-shadow";
-		iv.imgElement.src = apiEndpoint+"/file/"+iv.file.id;
-		iv.imgElement.addEventListener("mousedown", (e) => { return iv.mousedown(e); });
-		iv.imgElement.addEventListener("dblclick",  (e) => { return iv.doubleclick(e); });
-		iv.imgElement.addEventListener("doubletap", (e) => { return iv.doubleclick(e); });
-		document.addEventListener("mousemove", (e) => { return iv.mousemove(e); });
-		document.addEventListener("mouseup",   (e) => { return iv.mouseup(e); });
+		v.element = document.createElement("img");
+		v.element.classList = "pannable center drop-shadow";
+		v.element.src = apiEndpoint+"/file/"+v.file.id;
+		v.element.addEventListener("dblclick",  (e) => { return v.doubleclick(e); });
+		v.element.addEventListener("doubletap", (e) => { return v.doubleclick(e); });
+		v.element.addEventListener("mousedown", (e) => { return v.mousedown(e); });
+		document.addEventListener("mousemove",  (e) => { return v.mousemove(e); });
+		document.addEventListener("mouseup",    (e) => { return v.mouseup(e); });
 
-		iv.imgContainer.appendChild(iv.imgElement);
+		v.container.appendChild(v.element);
 	}
 
-	render(parent) {let iv = this;
-		parent.appendChild(iv.imgContainer);
+	render(parent) {let v = this;
+		parent.appendChild(v.container);
 	}
 
-	doubleclick(e) {let iv = this;
-		if (iv.zoomed) {
-			iv.imgElement.style.maxWidth = "100%";
-			iv.imgElement.style.maxHeight = "100%";
-			iv.imgElement.style.top = "50%";
-			iv.imgElement.style.left = "auto";
-			iv.imgElement.style.transform = "translateY(-50%)";
-			iv.imgContainer.style.overflow = "hidden";
-			iv.zoomed = false;
+	doubleclick(e) {let v = this;
+		if (v.zoomed) {
+			v.element.style.maxWidth = "100%";
+			v.element.style.maxHeight = "100%";
+			v.element.style.top = "50%";
+			v.element.style.left = "auto";
+			v.element.style.transform = "translateY(-50%)";
+			v.container.style.overflow = "hidden";
+			v.zoomed = false;
 		} else {
-			iv.imgElement.style.maxWidth = "none";
-			iv.imgElement.style.maxHeight = "none";
-			iv.imgElement.style.top = "0";
-			iv.imgElement.style.left = "";
-			iv.imgElement.style.transform = "none";
-			iv.imgContainer.style.overflow = "scroll";
-			iv.zoomed = true;
+			v.element.style.maxWidth = "none";
+			v.element.style.maxHeight = "none";
+			v.element.style.top = "0";
+			v.element.style.left = "";
+			v.element.style.transform = "none";
+			v.container.style.overflow = "scroll";
+			v.zoomed = true;
 		}
 
 		e.preventDefault();
@@ -57,11 +58,11 @@ class ImageViewer {
 		return false;
 	}
 
-	mousedown(e) {let iv = this;
-		if (!iv.dragging && e.which === 1 && iv.zoomed) {
-			iv.x = e.pageX;
-			iv.y = e.pageY;
-			iv.dragging = true;
+	mousedown(e) {let v = this;
+		if (!v.dragging && e.which === 1 && v.zoomed) {
+			v.x = e.pageX;
+			v.y = e.pageY;
+			v.dragging = true;
 
 			e.preventDefault();
 			e.stopPropagation();
@@ -69,13 +70,13 @@ class ImageViewer {
 		}
 	}
 
-	mousemove(e) {let iv = this;
-		if (iv.dragging) {
-			iv.imgContainer.scrollLeft = iv.imgContainer.scrollLeft - (e.pageX - iv.x);
-			iv.imgContainer.scrollTop  = iv.imgContainer.scrollTop  - (e.pageY - iv.y);
+	mousemove(e) {let v = this;
+		if (v.dragging) {
+			v.container.scrollLeft = v.container.scrollLeft - (e.pageX - v.x);
+			v.container.scrollTop  = v.container.scrollTop  - (e.pageY - v.y);
 
-			iv.x = e.pageX;
-			iv.y = e.pageY;
+			v.x = e.pageX;
+			v.y = e.pageY;
 
 			e.preventDefault();
 			e.stopPropagation();
@@ -84,9 +85,9 @@ class ImageViewer {
 
 	}
 
-	mouseup(e) {let iv = this;
-		if (iv.dragging) {
-			iv.dragging = false;
+	mouseup(e) {let v = this;
+		if (v.dragging) {
+			v.dragging = false;
 
 			e.preventDefault();
 			e.stopPropagation();
@@ -94,63 +95,3 @@ class ImageViewer {
 		}
 	}
 }
-
-// var zoomed = false;
-// // When a user clicks the image
-// $("#displayImg").on("dblclick doubletap", function (event) {
-// 	if (zoomed) {
-// 		$("#displayImg").css("max-width", "100%");
-// 		$("#displayImg").css("max-height", "100%");
-// 		$("#displayImg").css("top", "50%");
-// 		$("#displayImg").css("left", "auto");
-// 		$("#displayImg").css("transform", "translateY(-50%)");
-// 		$(".image-container").css("overflow", "hidden");
-// 		zoomed = false;
-// 	} else {
-// 		$("#displayImg").css("max-width", "none");
-// 		$("#displayImg").css("max-height", "none");
-// 		$("#displayImg").css("transform", "none");
-// 		$(".pannable").css("top", "0");
-// 		$(".image-container").css("overflow", "scroll");
-// 		zoomed = true;
-// 	}
-
-
-// 	return false;
-// });
-
-// Image dragging around the screen
-
-// var drag = {
-// 	x: 0,
-// 	y: 0,
-// 	state: false
-// };
-
-// $(".pannable").on("mousedown", function (e) {
-// 	if (!drag.state && e.which === 1 && zoomed) {
-// 		drag.x = e.pageX;
-// 		drag.y = e.pageY;
-// 		drag.state = true;
-
-// 		return false;
-// 	}
-// });
-
-// var img = $(".image-container");
-
-// $(document).on("mousemove", function (e) {
-// 	if (drag.state) {
-// 		img.scrollLeft(img.scrollLeft() - (e.pageX - drag.x));
-// 		img.scrollTop(img.scrollTop() - (e.pageY - drag.y));
-
-// 		drag.x = e.pageX;
-// 		drag.y = e.pageY;
-// 	}
-// });
-
-// $(document).on("mouseup", function () {
-// 	if (drag.state) {
-// 		drag.state = false;
-// 	}
-// });