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

feat(editor): enhance element creation UX

Browse source 
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:
Kumi 2024-03-27 10:16:14 +01:00
parent 6da2f19f42
commit db17637b9d
Signed by: kumi
GPG key ID: ECBCC9082395383F
1 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
assets/js/editor.js
View file

@ -42,7 +42,7 @@ function addEventListeners(element) {
// Open a modal for creating a new Element // Open a modal for creating a new Element
function startCreateElement(event) { function startCreateElement(event) {
var propertiesTitle = document.getElementById("propertiesTitle"); var propertiesTitle = document.getElementById("propertiesTitle");
modalLabel.textContent = "Create Element"; propertiesTitle.textContent = "Create Element";
var propertiesContent = document.getElementById("propertiesContent"); var propertiesContent = document.getElementById("propertiesContent");
@ -51,7 +51,7 @@ function startCreateElement(event) {
event.detail.intersection.point.z 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/> X: ${event.detail.intersection.point.x}<br/>
Y: ${event.detail.intersection.point.y}<br/> Y: ${event.detail.intersection.point.y}<br/>
Z: ${event.detail.intersection.point.z}<br/> Z: ${event.detail.intersection.point.z}<br/>
@ -68,8 +68,26 @@ function startCreateElement(event) {
<option value="ImageElement">Image</option> <option value="ImageElement">Image</option>
<option value="ImageElement">Teleport</option> <option value="ImageElement">Teleport</option>
</select> </select>
<input type="hidden" id="csrfmiddlewaretoken" value="${getCookie(
"csrftoken"
)}">
</form> </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) { function startModifyElement(event) {