feat(editor): enhance element creation UX
Adjusted the modal content in the editor's JavaScript to dynamically update based on the type of element being created, improving user interaction and feedback during the element creation process. The change includes fixing incorrect references to modal labels and contents, adding CSRF token support for form submissions, and dynamically showing/hiding buttons based on the context of the element creation. Additionally, event listeners are set up to handle different element types (Marker, Image, Teleport), further enhancing the user experience by tailoring the UI to the selected element type. This update aims to make the editor more intuitive and responsive to user actions, reducing potential confusion and improving the flow of creating various types of elements within the application.
This commit is contained in:
parent
6da2f19f42
commit
db17637b9d
1 changed files with 20 additions and 2 deletions
|
@ -42,7 +42,7 @@ function addEventListeners(element) {
|
|||
// Open a modal for creating a new Element
|
||||
function startCreateElement(event) {
|
||||
var propertiesTitle = document.getElementById("propertiesTitle");
|
||||
modalLabel.textContent = "Create Element";
|
||||
propertiesTitle.textContent = "Create Element";
|
||||
|
||||
var propertiesContent = document.getElementById("propertiesContent");
|
||||
|
||||
|
@ -51,7 +51,7 @@ function startCreateElement(event) {
|
|||
event.detail.intersection.point.z
|
||||
);
|
||||
|
||||
modalContent.innerHTML = `<b>Creating element at:</b><br/>
|
||||
propertiesContent.innerHTML = `<b>Creating element at:</b><br/>
|
||||
X: ${event.detail.intersection.point.x}<br/>
|
||||
Y: ${event.detail.intersection.point.y}<br/>
|
||||
Z: ${event.detail.intersection.point.z}<br/>
|
||||
|
@ -68,8 +68,26 @@ function startCreateElement(event) {
|
|||
<option value="ImageElement">Image</option>
|
||||
<option value="ImageElement">Teleport</option>
|
||||
</select>
|
||||
<input type="hidden" id="csrfmiddlewaretoken" value="${getCookie(
|
||||
"csrftoken"
|
||||
)}">
|
||||
</form>
|
||||
`;
|
||||
|
||||
document.getElementById("resetButton").style = "display: none;";
|
||||
document.getElementById("buttons").style = "display: block;";
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function startModifyElement(event) {
|
||||
|
|
Loading…
Reference in a new issue