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

143
assets/js/editor.js
View file

@ -82,59 +82,69 @@ function startCreateElement(event) {
document.getElementById("resetButton").style = "display: none;"; document.getElementById("resetButton").style = "display: none;";
document.getElementById("buttons").style = "display: block;"; document.getElementById("buttons").style = "display: block;";
document.getElementById("resourcetype").addEventListener("change", function () { document
var selectedType = document.getElementById("resourcetype").value; .getElementById("resourcetype")
.addEventListener("change", function () {
if (selectedType == "MarkerElement") { var selectedType = document.getElementById("resourcetype").value;
createMarkerElement(event, thetaStart); createElementPropertiesForm(selectedType, event, thetaStart);
} else if (selectedType == "ImageElement") { });
createImageElement(event, thetaStart);
} else if (selectedType == "TeleportElement") {
createTeleportElement(event, thetaStart);
}
});
} }
function createMarkerElement(event, thetaStart) { function createElementPropertiesForm(elementType, event, thetaStart) {
var elementProperties = document.getElementById("elementProperties"); const elementProperties = document.getElementById("elementProperties");
elementProperties.innerHTML = ` let 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 class="mb-2">
<label for="elementUpload" class="form-label">Text</label>
<input type="text" class="form-control" id="text" placeholder="Text">
</div>
`;
}
function createImageElement(event, thetaStart) { switch (elementType) {
var elementProperties = document.getElementById("elementProperties"); case "MarkerElement":
elementProperties.innerHTML = ` case "ImageElement":
<div class="mb-2"> case "TeleportElement":
<label for="title" class="form-label">Title</label> inputFields = `
<input type="text" class="form-control" id="title" placeholder="Title"> <div class="mb-2">
</div> <label for="title" class="form-label">Title</label>
<div class="mb-2"> <input type="text" class="form-control" id="title" placeholder="Title">
<label for="elementUpload" class="form-label">Image</label> </div>`;
<input id="elementUpload" type="file" class="form-control"> if (elementType !== "MarkerElement") {
</div> 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>
function createTeleportElement(event, thetaStart) { <div class="mb-2">
var elementProperties = document.getElementById("elementProperties"); <label for="destination_x" class="form-label">Destination X/Y/Z Rotation</label>
elementProperties.innerHTML = ` <div class="row g-2">
<div class="mb-2"> <div class="col">
<label for="title" class="form-label">Title</label> <input type="number" class="form-control" id="destination_x" name="input1" min="0" max="360" placeholder="X">
<input type="text" class="form-control" id="title" placeholder="Title"> </div>
</div> <div class="col">
<div class="mb-2"> <input type="number" class="form-control" id="destination_y" name="input2" min="0" max="360" placeholder="Y">
</div> </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
}
elementProperties.innerHTML = inputFields;
}
function startModifyElement(event) { function startModifyElement(event) {
// Make the element draggable for positioning // Make the element draggable for positioning
@ -170,39 +180,16 @@ function startModifyElement(event) {
"csrftoken" "csrftoken"
)}"> )}">
<input type="hidden" id="id" value="${event.target.getAttribute("id")}"> <input type="hidden" id="id" value="${event.target.getAttribute("id")}">
<div class="dropdown mb-2"> <div id="elementProperties"></div>
<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>
</form> </form>
`; `;
createElementPropertiesForm(
element_data.obj.resourcetype,
event,
element_data.obj.thetaStart
);
var scene_data_request = getScene(scene.getAttribute("id")); var scene_data_request = getScene(scene.getAttribute("id"));
scene_data_request.then((scene_data) => { scene_data_request.then((scene_data) => {
var category_data_request = getCategory(scene_data.obj.category); var category_data_request = getCategory(scene_data.obj.category);