Public/pics
2
2
Fork 2
Code Issues 6 Pull Requests 2 Releases Wiki Activity

Constrain crop proportions by default, with checkbox to disable.

Browse Source
This commit is contained in:
Aaron van Geffen 2020-12-17 13:05:24 +01:00
parent a83b938f8a
commit 66a411973a
2 changed files with 31 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/css/admin.css
View File

@ -156,14 +156,13 @@ body {
z-index: 100; z-index: 100;
color: #fff; color: #fff;
} }
#crop_editor input { #crop_editor input[type=number] {
width: 50px; width: 50px;
background: #555; background: #555;
color: #fff; color: #fff;
} }
.crop_image_container { #crop_editor input[type=checkbox] {
position: relative; vertical-align: middle;
flex-grow: 1;
} }
.crop_position { .crop_position {
background: rgba(0, 0, 0, 1.0); background: rgba(0, 0, 0, 1.0);

28
public/js/crop_editor.js
View File

@ -66,6 +66,17 @@ class CropEditor {
this.crop_height.addEventListener("keyup", this.positionBoundary.bind(this)); this.crop_height.addEventListener("keyup", this.positionBoundary.bind(this));
this.position.appendChild(this.crop_height); this.position.appendChild(this.crop_height);
this.crop_constrain_label = document.createElement("label");
this.position.appendChild(this.crop_constrain_label);
this.crop_constrain = document.createElement("input");
this.crop_constrain.checked = true;
this.crop_constrain.type = 'checkbox';
this.crop_constrain_label.appendChild(this.crop_constrain);
this.crop_constrain_text = document.createTextNode('Constrain proportions');
this.crop_constrain_label.appendChild(this.crop_constrain_text);
this.save_button = document.createElement("span"); this.save_button = document.createElement("span");
this.save_button.className = "btn"; this.save_button.className = "btn";
this.save_button.textContent = "Save"; this.save_button.textContent = "Save";
@ -159,6 +170,8 @@ class CropEditor {
this.crop_height.max = source.naturalHeight; this.crop_height.max = source.naturalHeight;
this.source_x.max = source.naturalWidth - 1; this.source_x.max = source.naturalWidth - 1;
this.source_y.max = source.naturalHeight - 1; this.source_y.max = source.naturalHeight - 1;
this.crop_constrain_text.textContent = `Constrain proportions (${current.crop_width} × ${current.crop_height})`;
} }
showContainer() { showContainer() {
@ -272,6 +285,21 @@ class CropEditor {
let height = Math.ceil(Math.abs(this.dragEndY - this.dragStartY) * scaleFactor); let height = Math.ceil(Math.abs(this.dragEndY - this.dragStartY) * scaleFactor);
this.crop_height.value = Math.min(height, this.original_image.naturalHeight - this.source_y.value); this.crop_height.value = Math.min(height, this.original_image.naturalHeight - this.source_y.value);
if (this.crop_constrain.checked) {
let current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
let currentAspectRatio = parseInt(this.crop_width.value) / parseInt(this.crop_height.value);
let targetAspectRatio = current.crop_width / current.crop_height;
if (Math.abs(currentAspectRatio - targetAspectRatio) > 0.001) {
if (targetAspectRatio > 1.0) {
this.crop_height.value = Math.ceil(this.crop_width.value / targetAspectRatio);
} else {
this.crop_width.value = Math.ceil(this.crop_height.value * targetAspectRatio);
}
}
}
this.positionBoundary(); this.positionBoundary();
} }