still some bugs and auth issues to iron out. need to implement a new action button/bar, the card for moments in a space, creating new moments and essays, dynamically refreshing the spaces view when a new post is created.

2025-05-20 19:46:09 -06:00
parent a93c30c40f
commit 54a01f0f1f
20 changed files with 1018 additions and 1191 deletions
@@ -0,0 +1,118 @@
+let actionButton = document.querySelector("#actionButton");
+let newPostButton = document.querySelector("#newPost");
+let newSpaceButton = document.querySelector("#newSpace");
+let filterSortButton = document.querySelector("#filterSort");
+let circle = document.querySelector(".circleLayout");
+let modal = document.querySelector("#stdModal");
+
+let state = "hide";
+
+actionButton.addEventListener("click", () => {
+  if (state == "hide") {
+    state = "show";
+    newPostButton.style.display = "flex";
+    newSpaceButton.style.display = "flex";
+    filterSortButton.style.display = "flex";
+    circle.style.backgroundColor = "#FFFFFF";
+
+    newPostButton.addEventListener("click", () => {
+      fetch("director.php", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+        body: "ajaxId=newPostHTML",
+      })
+        .then((response) => {
+          return response.json();
+        })
+        .then((data) => {
+          modal.innerHTML = data["html"];
+          modal.style.display = "flex";
+
+          let newNavThought = document.querySelector("#newNavThought");
+          let newThought = document.querySelector("#newThought");
+          let newNavMoment = document.querySelector("#newNavMoment");
+          let newMoment = document.querySelector("#newMoment");
+          let newNavEssay = document.querySelector("#newNavEssay");
+          let newEssay = document.querySelector("#newEssay");
+          let newPostLabel = document.querySelector("#newPostLabel");
+          let postType = document.querySelector("#postType");
+
+          let share = document.querySelector("#share");
+
+          share.addEventListener("click", (e) => {
+            e.preventDefault();
+            switch (postType.value) {
+              case "Thought":
+                let thought = document.querySelector("#thought");
+
+                // TODO: Retrieve space dynamically.
+
+                fetch("director.php", {
+                  method: "POST",
+
+                  // TODO: Add Authorization header with JWT
+                  headers: {
+                    "Content-Type": "application/x-www-form-urlencoded",
+                  },
+                  body:
+                    "ajaxId=newThought&space=1&thought=" +
+                    encodeURIComponent(thought.value),
+                }).then((response) => {
+                  console.log(response.json());
+                  modal.style.display = "none";
+                });
+                break;
+              case "Moment":
+                break;
+              case "Essay":
+                break;
+            }
+          });
+
+          newNavThought.addEventListener("click", () => {
+            newMoment.style.display = "none";
+            newEssay.style.display = "none";
+
+            newThought.style.display = "flex";
+            newPostLabel.innerText = "New Thought";
+            newThought.querySelector('input[type="text"]').focus();
+            postType.value = "Thought";
+          });
+
+          newNavMoment.addEventListener("click", () => {
+            newThought.style.display = "none";
+            newEssay.style.display = "none";
+
+            newMoment.style.display = "flex";
+            newPostLabel.innerText = "New Moment";
+            newMoment.querySelector('input[type="text"]').focus();
+            postType.value = "Moment";
+          });
+
+          newNavEssay.addEventListener("click", () => {
+            newThought.style.display = "none";
+            newMoment.style.display = "none";
+
+            newEssay.style.display = "flex";
+            newPostLabel.innerText = "New Essay";
+            newEssay.querySelector('input[type="text"]').focus();
+            postType.value = "Essay";
+          });
+
+          return data;
+        });
+    });
+
+    newSpaceButton.addEventListener("click", () => { });
+
+    filterSortButton.addEventListener("click", () => { });
+  } else if (state == "show") {
+    state = "hide";
+    newPostButton.style.display = "none";
+    newSpaceButton.style.display = "none";
+    filterSortButton.style.display = "none";
+    circle.style.backgroundColor = "transparent";
+  }
+});