Refactor crop editor into a proper class.

public/js/crop_editor.js

@@ -1,9 +1,10 @@
-function CropEditor(opt) {
+class CropEditor {
+	constructor(opt) {
 		this.opt = opt;
 
 		this.edit_crop_button = document.createElement("span");
 		this.edit_crop_button.className = "btn";
-	this.edit_crop_button.innerHTML = "Edit crop";
+		this.edit_crop_button.textContent = "Edit crop";
 		this.edit_crop_button.addEventListener('click', this.show.bind(this));
 
 		this.thumbnail_select = document.getElementById(opt.thumbnail_select_id);
@@ -11,9 +12,9 @@ function CropEditor(opt) {
 		this.thumbnail_select.parentNode.insertBefore(this.edit_crop_button, this.thumbnail_select.nextSibling);
 
 		this.toggleCropButton();
-}
+	}
 
-CropEditor.prototype.buildContainer = function() {
+	buildContainer() {
 		this.container = document.createElement("div");
 		this.container.id = "crop_editor";
 
@@ -21,28 +22,28 @@ CropEditor.prototype.buildContainer = function() {
 		this.position.className = "crop_position";
 		this.container.appendChild(this.position);
 
-	var source_x_label = document.createTextNode("Source X:");
+		let source_x_label = document.createTextNode("Source X:");
 		this.position.appendChild(source_x_label);
 
 		this.source_x = document.createElement("input");
 		this.source_x.addEventListener("keyup", this.positionBoundary.bind(this));
 		this.position.appendChild(this.source_x);
 
-	var source_y_label = document.createTextNode("Source Y:");
+		let source_y_label = document.createTextNode("Source Y:");
 		this.position.appendChild(source_y_label);
 
 		this.source_y = document.createElement("input");
 		this.source_y.addEventListener("keyup", this.positionBoundary.bind(this));
 		this.position.appendChild(this.source_y);
 
-	var crop_width_label = document.createTextNode("Crop width:");
+		let crop_width_label = document.createTextNode("Crop width:");
 		this.position.appendChild(crop_width_label);
 
 		this.crop_width = document.createElement("input");
 		this.crop_width.addEventListener("keyup", this.positionBoundary.bind(this));
 		this.position.appendChild(this.crop_width);
 
-	var crop_height_label = document.createTextNode("Crop height:");
+		let crop_height_label = document.createTextNode("Crop height:");
 		this.position.appendChild(crop_height_label);
 
 		this.crop_height = document.createElement("input");
@@ -51,13 +52,13 @@ CropEditor.prototype.buildContainer = function() {
 
 		this.save_button = document.createElement("span");
 		this.save_button.className = "btn";
-	this.save_button.innerHTML = "Save";
+		this.save_button.textContent = "Save";
 		this.save_button.addEventListener('click', this.save.bind(this));
 		this.position.appendChild(this.save_button);
 
 		this.abort_button = document.createElement("span");
 		this.abort_button.className = "btn btn-red";
-	this.abort_button.innerHTML = "Abort";
+		this.abort_button.textContent = "Abort";
 		this.abort_button.addEventListener('click', this.hide.bind(this));
 		this.position.appendChild(this.abort_button);
 
@@ -76,13 +77,13 @@ CropEditor.prototype.buildContainer = function() {
 
 		this.parent = document.getElementById(this.opt.editor_container_parent_id);
 		this.parent.appendChild(this.container);
-};
+	}
 
-CropEditor.prototype.setInputValues = function() {
+	setInputValues() {
-	var current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
+		let current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
 
 		if (typeof current.crop_region === "undefined") {
-		var source_ratio = this.original_image.naturalWidth / this.original_image.naturalHeight,
+			let source_ratio = this.original_image.naturalWidth / this.original_image.naturalHeight,
 				crop_ratio = current.crop_width / current.crop_height,
 				min_dim = Math.min(this.original_image.naturalWidth, this.original_image.naturalHeight);
 
@@ -121,23 +122,23 @@ CropEditor.prototype.setInputValues = function() {
 				}
 			}
 		} else {
-		var region = current.crop_region.split(',');
+			let region = current.crop_region.split(',');
 			this.crop_width.value = region[0];
 			this.crop_height.value = region[1];
 			this.source_x.value = region[2];
 			this.source_y.value = region[3];
 		}
-};
+	}
 
-CropEditor.prototype.showContainer = function() {
+	showContainer() {
 		this.container.style.display = "block";
 		this.setInputValues();
 		this.positionBoundary();
-}
+	}
 
-CropEditor.prototype.save = function() {
+	save() {
-	var current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
+		let current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
-	var payload = {
+		let payload = {
 			thumb_width: current.crop_width,
 			thumb_height: current.crop_height,
 			crop_method: current.crop_method,
@@ -146,14 +147,14 @@ CropEditor.prototype.save = function() {
 			source_x: this.source_x.value,
 			source_y: this.source_y.value
 		};
-	var req = HttpRequest("post", this.opt.submitUrl + "?id=" + this.opt.asset_id + "&updatethumb",
+		let req = HttpRequest("post", this.opt.submitUrl + "?id=" + this.opt.asset_id + "&updatethumb",
 			"data=" + encodeURIComponent(JSON.stringify(payload)), function(response) {
 				this.opt.after_save(response);
 				this.hide();
 			}.bind(this));
-};
+	}
 
-CropEditor.prototype.show = function() {
+	show() {
 		if (typeof this.container === "undefined") {
 			this.buildContainer();
 		}
@@ -167,39 +168,39 @@ CropEditor.prototype.show = function() {
 				this.showContainer();
 			}.bind(this));
 		}
-};
+	}
 
-CropEditor.prototype.hide = function() {
+	hide() {
 		this.container.style.display = "none";
-};
+	}
 
-CropEditor.prototype.addEvents = function(event) {
+	addEvents(event) {
-	var drag_target = document.getElementById(opt.drag_target);
+		let drag_target = document.getElementById(opt.drag_target);
 		drag_target.addEventListener('dragstart', this.dragStart);
 		drag_target.addEventListener('drag', this.drag);
 		drag_target.addEventListener('dragend', this.dragEnd);
-};
+	}
 
-CropEditor.prototype.dragStart = function(event) {
+	dragStart(event) {
 		console.log(event);
 		event.preventDefault();
-};
+	}
 
-CropEditor.prototype.dragEnd = function(event) {
+	dragEnd(event) {
 		console.log(event);
-};
+	}
 
-CropEditor.prototype.drag = function(event) {
+	drag(event) {
 		console.log(event);
-};
+	}
 
-CropEditor.prototype.toggleCropButton = function() {
+	toggleCropButton() {
-	var current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
+		let current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
 		this.edit_crop_button.style.display = typeof current.crop_method === "undefined" ? "none" : "";
-};
+	}
 
-CropEditor.prototype.positionBoundary = function(event) {
+	positionBoundary(event) {
-	var source_x = parseInt(this.source_x.value),
+		let source_x = parseInt(this.source_x.value),
 			source_y = parseInt(this.source_y.value),
 			crop_width = parseInt(this.crop_width.value),
 			crop_height = parseInt(this.crop_height.value),
@@ -208,11 +209,12 @@ CropEditor.prototype.positionBoundary = function(event) {
 			scaled_width = this.original_image.clientWidth,
 			scaled_height = this.original_image.clientHeight;
 
-	var width_scale = scaled_width / real_width,
+		let width_scale = scaled_width / real_width,
 			height_scale = scaled_height / real_height;
 
 		crop_boundary.style.left = (this.source_x.value) * width_scale + "px";
 		crop_boundary.style.top = (this.source_y.value) * height_scale + "px";
 		crop_boundary.style.width = (this.crop_width.value) * width_scale + "px";
 		crop_boundary.style.height = (this.crop_height.value) * height_scale + "px";
-};
+	}
+}