PrivateCoffee/quackscape
PrivateCoffee/quackscape
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor(editor.js): streamline element creation form generation

Browse source 
Replaced multiple specific functions for creating MarkerElement,
ImageElement, and TeleportElement forms in the editor with a single,
switch-based function titled createElementPropertiesForm. This
enhancement consolidates form generation logic, reducing redundancy and
improving maintainability. It dynamically generates input fields based
on the element type selected, simplifying future extensions or
modifications to element properties. Additionally, this refactoring
ensures a more consistent user experience by uniform handling of
different element types during creation and modification.

The new approach allows for easier addition of new element types and
their corresponding inputs, adhering to the DRY principle and promoting
code readability.
This commit is contained in:
Kumi 2024-03-28 11:06:14 +01:00
parent 4f676e3b6a
commit 4043f031ab
Signed by: kumi
GPG key ID: ECBCC9082395383F
1 changed files with 65 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
assets/js/editor.js
View file

@ -82,60 +82,70 @@ function startCreateElement(event) {
document.getElementById("resetButton").style = "display: none;";
document.getElementById("buttons").style = "display: block;";
document.getElementById("resourcetype").addEventListener("change", function () {
document
.getElementById("resourcetype")
.addEventListener("change", function () {
var selectedType = document.getElementById("resourcetype").value;
if (selectedType == "MarkerElement") {
createMarkerElement(event, thetaStart);
} else if (selectedType == "ImageElement") {
createImageElement(event, thetaStart);
} else if (selectedType == "TeleportElement") {
createTeleportElement(event, thetaStart);
}
createElementPropertiesForm(selectedType, event, thetaStart);
});
}
function createMarkerElement(event, thetaStart) {
var elementProperties = document.getElementById("elementProperties");
elementProperties.innerHTML = `
<div class="mb-2">
<label for="title" class="form-label">Title</label>
<input type="text" class="form-control" id="title" placeholder="Title">
</div>
<div class="mb-2">
<label for="elementUpload" class="form-label">Text</label>
<input type="text" class="form-control" id="text" placeholder="Text">
</div>
`;
}
function createElementPropertiesForm(elementType, event, thetaStart) {
const elementProperties = document.getElementById("elementProperties");
let inputFields = "";
function createImageElement(event, thetaStart) {
var elementProperties = document.getElementById("elementProperties");
elementProperties.innerHTML = `
switch (elementType) {
case "MarkerElement":
case "ImageElement":
case "TeleportElement":
inputFields = `
<div class="mb-2">
<label for="title" class="form-label">Title</label>
<input type="text" class="form-control" id="title" placeholder="Title">
</div>
</div>`;
if (elementType !== "MarkerElement") {
inputFields += `
<div class="mb-2">
<label for="elementUpload" class="form-label">Image</label>
<input id="elementUpload" type="file" class="form-control">
</div>`;
}
if (elementType === "TeleportElement") {
inputFields += `
<div class="dropdown mb-2">
<label for="destinationDropdownSearch" class="form-label">Teleport Destination</label>
<input class="form-control" autocomplete="off" id="destinationDropdownSearch" type="text" placeholder="Search...">
<input type="hidden" id="destination">
<div class="dropdown-menu" id="destinationDropdownMenu">
<!-- Dropdown items will be populated here by JavaScript -->
</div>
</div>
<div class="mb-2">
<label for="destination_x" class="form-label">Destination X/Y/Z Rotation</label>
<div class="row g-2">
<div class="col">
<input type="number" class="form-control" id="destination_x" name="input1" min="0" max="360" placeholder="X">
</div>
<div class="col">
<input type="number" class="form-control" id="destination_y" name="input2" min="0" max="360" placeholder="Y">
</div>
<div class="col">
<input type="number" class="form-control" id="destination_z" name="input3" min="0" max="360" placeholder="Z">
</div>
</div>
</div>
</div>
`;
}
}
break;
default:
// Handle unknown element type
}
function createTeleportElement(event, thetaStart) {
var elementProperties = document.getElementById("elementProperties");
elementProperties.innerHTML = `
<div class="mb-2">
<label for="title" class="form-label">Title</label>
<input type="text" class="form-control" id="title" placeholder="Title">
</div>
<div class="mb-2">
</div>
`;
elementProperties.innerHTML = inputFields;
}
function startModifyElement(event) {
// Make the element draggable for positioning
event.target.setAttribute("click-drag", "enabled: true;");
@ -170,39 +180,16 @@ function startModifyElement(event) {
"csrftoken"
)}">
<input type="hidden" id="id" value="${event.target.getAttribute("id")}">
<div class="dropdown mb-2">
<label for="destinationDropdownSearch" class="form-label">Teleport Destination</label>
<input class="form-control" autocomplete="off" id="destinationDropdownSearch" type="text" placeholder="Search...">
<input type="hidden" id="destination">
<div class="dropdown-menu" id="destinationDropdownMenu">
<!-- Dropdown items will be populated here by JavaScript -->
</div>
</div>
<div class="mb-2">
<label for="destination_x" class="form-label">Destination X/Y/Z Rotation</label>
<div class="row g-2">
<div class="col">
<input type="number" class="form-control" id="destination_x" name="input1" min="0" max="360" placeholder="X">
</div>
<div class="col">
<input type="number" class="form-control" id="destination_y" name="input2" min="0" max="360" placeholder="Y">
</div>
<div class="col">
<input type="number" class="form-control" id="destination_z" name="input3" min="0" max="360" placeholder="Z">
</div>
</div>
</div>
</div>
<div class="mb-2">
<label for="elementUpload" class="form-label">Marker image</label>
<input id="elementUpload" type="file" class="form-control">
</div>
<div id="elementProperties"></div>
</form>
`;
createElementPropertiesForm(
element_data.obj.resourcetype,
event,
element_data.obj.thetaStart
);
var scene_data_request = getScene(scene.getAttribute("id"));
scene_data_request.then((scene_data) => {
var category_data_request = getCategory(scene_data.obj.category);