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

Switch crop editor to bootstrap layout #32

Merged
Aaron merged 3 commits from cron-editor into master 2023-06-02 17:24:50 +02:00
Conversation 0 Commits 3 Files Changed 2 +52 -45
2 changed files with 52 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/css/admin.css
View File

@ -33,17 +33,24 @@
z-index: 100; z-index: 100;
color: #fff; color: #fff;
} }
#crop_editor input[type=number] { #crop_editor .input-group-text {
width: 75px; background-color: rgba(233, 236, 239, 0.5);
background: #555; border-color: rgba(233, 236, 239, 0.5);
color: #fff; color: #fff;
} }
#crop_editor input[type=number] {
background: #555;
border-color: rgba(233, 236, 239, 0.5);
color: #fff;
width: 85px;
}
#crop_editor input[type=checkbox] { #crop_editor input[type=checkbox] {
vertical-align: middle; vertical-align: middle;
} }
.crop_position { .crop_position {
background: rgba(0, 0, 0, 1.0); background: rgba(0, 0, 0, 1.0);
border: none; border: none;
display: flex;
padding: 5px; padding: 5px;
text-align: center; text-align: center;
} }

84
public/js/crop_editor.js
View File

@ -16,6 +16,7 @@ class CropEditor {
initDOM() { initDOM() {
this.container = document.createElement("div"); this.container = document.createElement("div");
this.container.className = 'container-fluid';
this.container.id = "crop_editor"; this.container.id = "crop_editor";
this.initPositionForm(); this.initPositionForm();
@ -27,71 +28,70 @@ class CropEditor {
initPositionForm() { initPositionForm() {
this.position = document.createElement("fieldset"); this.position = document.createElement("fieldset");
this.position.className = "crop_position"; this.position.className = "crop_position flex-row justify-content-center";
this.container.appendChild(this.position); this.container.appendChild(this.position);
let source_x_label = document.createTextNode("Source X:"); const addNumericControl = (label, changeEvent) => {
this.position.appendChild(source_x_label); const column = document.createElement('div');
column.className = 'col-auto';
this.position.appendChild(column);
this.source_x = document.createElement("input"); const group = document.createElement('div');
this.source_x.className = 'form-control d-inline'; group.className = 'input-group';
this.source_x.type = 'number'; column.appendChild(group);
this.source_x.addEventListener("change", this.positionBoundary.bind(this));
this.source_x.addEventListener("keyup", this.positionBoundary.bind(this));
this.position.appendChild(this.source_x);
let source_y_label = document.createTextNode("Source Y:"); const labelEl = document.createElement("span");
this.position.appendChild(source_y_label); labelEl.className = 'input-group-text';
labelEl.textContent = label;
group.appendChild(labelEl);
this.source_y = document.createElement("input"); const control = document.createElement("input");
this.source_y.className = 'form-control d-inline'; control.className = 'form-control';
this.source_y.type = 'number'; control.type = 'number';
this.source_y.addEventListener("change", this.positionBoundary.bind(this)); control.addEventListener("change", changeEvent);
this.source_y.addEventListener("keyup", this.positionBoundary.bind(this)); control.addEventListener("keyup", changeEvent);
this.position.appendChild(this.source_y); group.appendChild(control);
let crop_width_label = document.createTextNode("Crop width:"); return control;
this.position.appendChild(crop_width_label); };
this.crop_width = document.createElement("input"); this.source_x = addNumericControl("Source X:", this.positionBoundary);
this.crop_width.className = 'form-control d-inline'; this.source_y = addNumericControl("Source Y:", this.positionBoundary);
this.crop_width.type = 'number'; this.crop_width = addNumericControl("Crop width:", this.positionBoundary);
this.crop_width.addEventListener("change", this.positionBoundary.bind(this)); this.crop_height = addNumericControl("Crop height:", this.positionBoundary);
this.crop_width.addEventListener("keyup", this.positionBoundary.bind(this));
this.position.appendChild(this.crop_width);
let crop_height_label = document.createTextNode("Crop height:"); const otherColumn = document.createElement('div');
this.position.appendChild(crop_height_label); otherColumn.className = 'col-auto text-nowrap';
this.position.appendChild(otherColumn);
this.crop_height = document.createElement("input"); const constrainContainer = document.createElement("div");
this.crop_height.className = 'form-control d-inline'; constrainContainer.className = 'form-checkbox d-inline';
this.crop_height.type = 'number'; otherColumn.appendChild(constrainContainer);
this.crop_height.addEventListener("change", this.positionBoundary.bind(this));
this.crop_height.addEventListener("keyup", this.positionBoundary.bind(this));
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 = document.createElement("input");
this.crop_constrain.checked = true; this.crop_constrain.checked = true;
this.crop_constrain.className = 'form-check-input';
this.crop_constrain.id = 'check_constrain';
this.crop_constrain.type = 'checkbox'; this.crop_constrain.type = 'checkbox';
this.crop_constrain_label.appendChild(this.crop_constrain); constrainContainer.appendChild(this.crop_constrain);
this.crop_constrain_text = document.createTextNode('Constrain proportions'); this.crop_constrain_label = document.createElement("label");
this.crop_constrain_label.appendChild(this.crop_constrain_text); this.crop_constrain_label.className = 'form-check-label';
this.crop_constrain_label.htmlFor = 'check_constrain';
this.crop_constrain_label.textContent = 'Constrain proportions';
constrainContainer.appendChild(this.crop_constrain_label);
this.save_button = document.createElement("span"); this.save_button = document.createElement("span");
this.save_button.className = "btn btn-light"; this.save_button.className = "btn btn-light";
this.save_button.textContent = "Save"; this.save_button.textContent = "Save";
this.save_button.addEventListener('click', this.save.bind(this)); this.save_button.addEventListener('click', this.save.bind(this));
this.position.appendChild(this.save_button); otherColumn.appendChild(this.save_button);
this.abort_button = document.createElement("span"); this.abort_button = document.createElement("span");
this.abort_button.className = "btn btn-danger"; this.abort_button.className = "btn btn-danger";
this.abort_button.textContent = "Abort"; this.abort_button.textContent = "Abort";
this.abort_button.addEventListener('click', this.hide.bind(this)); this.abort_button.addEventListener('click', this.hide.bind(this));
this.position.appendChild(this.abort_button); otherColumn.appendChild(this.abort_button);
} }
initImageContainer() { initImageContainer() {
@ -175,7 +175,7 @@ class CropEditor {
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})`; this.crop_constrain_label.textContent = `Constrain proportions (${current.crop_width} × ${current.crop_height})`;
} }
showContainer() { showContainer() {