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

feat(editor): add element property forms

Browse source 
Adding dynamic form rendering in the editor for marker, image, and
teleport elements. Now, when creating a new element, a form is
dynamically generated based on the element type selected. This
enhancement improves the user experience by providing a tailored
interface for inputting properties specific to each type of element,
such as title, text for markers, and file upload for images. This update
streamlines the creation process and ensures users have a clear,
context-specific set of fields when adding new elements to their
projects.
This commit is contained in:
Kumi 2024-03-27 10:51:05 +01:00
parent db17637b9d
commit b2da4b381b
Signed by: kumi
GPG key ID: ECBCC9082395383F
1 changed files with 42 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
assets/js/editor.js
View file

@ -71,6 +71,7 @@ function startCreateElement(event) {
<input type="hidden" id="csrfmiddlewaretoken" value="${getCookie(
"csrftoken"
)}">
<div id="elementProperties"></div>
</form>
`;
@ -90,6 +91,47 @@ function startCreateElement(event) {
});
}
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 createImageElement(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">Image</label>
<input id="elementUpload" type="file" class="form-control">
</div>
`;
}
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>
`;
}
function startModifyElement(event) {
var propertiesTitle = document.getElementById("propertiesTitle");
propertiesTitle.textContent = "Modify Element";