rails_den 2.0.0

data/app/assets/javascript/rails_den/chat_3d_management.js

@@ -0,0 +1,1230 @@
+(() => {
+  const SHELL_SELECTOR =
+    "[data-rails-den-chat-mode-shell]"
+
+  const WORLD_SELECTOR =
+    "[data-rails-den-chat-world-root]"
+
+  const MANAGEMENT_PAYLOAD_SELECTOR =
+    "[data-rails-den-chat-management-payload]"
+
+  const CHAT_PAYLOAD_SELECTOR =
+    "[data-rails-den-chat-payload]"
+
+  const ROOT_CLASS =
+    "rails-den-chat-3d-management"
+
+  function csrfToken() {
+    return document
+      .querySelector('meta[name="csrf-token"]')
+      ?.getAttribute("content")
+  }
+
+  function parsePayload(element) {
+    if (!element) {
+      return null
+    }
+
+    try {
+      return JSON.parse(
+        element.textContent
+      )
+    } catch (_error) {
+      return null
+    }
+  }
+
+  function managementPayload(shell) {
+    return parsePayload(
+      shell.querySelector(
+        MANAGEMENT_PAYLOAD_SELECTOR
+      )
+    )
+  }
+
+  function chatPayload(shell) {
+    return parsePayload(
+      shell.querySelector(
+        CHAT_PAYLOAD_SELECTOR
+      )
+    )
+  }
+
+  function currentChannelUrl() {
+    return window.location.href
+      .split("#")[0]
+      .split("?")[0]
+  }
+
+  function visit(url) {
+    if (
+      window.Turbo &&
+      typeof window.Turbo.visit === "function"
+    ) {
+      window.Turbo.visit(url)
+    } else {
+      window.location.href = url
+    }
+  }
+
+  async function request(
+    url,
+    {
+      method,
+      parameters = {}
+    }
+  ) {
+    const body =
+      new URLSearchParams()
+
+    Object.entries(
+      parameters
+    ).forEach(
+      ([key, value]) => {
+        body.append(
+          key,
+          value == null ? "" : value
+        )
+      }
+    )
+
+    const response =
+      await fetch(
+        url,
+        {
+          method,
+          credentials: "same-origin",
+          redirect: "follow",
+          headers: {
+            "Accept":
+              "text/html, application/xhtml+xml",
+            "Content-Type":
+              "application/x-www-form-urlencoded;charset=UTF-8",
+            "X-CSRF-Token":
+              csrfToken() || ""
+          },
+          body:
+            method === "GET" ?
+              undefined :
+              body.toString()
+        }
+      )
+
+    if (!response.ok) {
+      throw new Error(
+        `Request failed (${response.status})`
+      )
+    }
+
+    return response
+  }
+
+  function button(
+    label,
+    className
+  ) {
+    const element =
+      document.createElement(
+        "button"
+      )
+
+    element.type =
+      "button"
+
+    element.className =
+      className
+
+    element.textContent =
+      label
+
+    return element
+  }
+
+  function field(
+    {
+      label,
+      name,
+      value = "",
+      type = "text",
+      options = null
+    }
+  ) {
+    const wrapper =
+      document.createElement(
+        "label"
+      )
+
+    wrapper.className =
+      "rails-den-chat-3d-management-field"
+
+    const labelElement =
+      document.createElement(
+        "span"
+      )
+
+    labelElement.textContent =
+      label
+
+    wrapper.appendChild(
+      labelElement
+    )
+
+    let input
+
+    if (options) {
+      input =
+        document.createElement(
+          "select"
+        )
+
+      options.forEach(
+        ([optionValue, optionLabel]) => {
+          const option =
+            document.createElement(
+              "option"
+            )
+
+          option.value =
+            optionValue
+
+          option.textContent =
+            optionLabel
+
+          option.selected =
+            optionValue === value
+
+          input.appendChild(
+            option
+          )
+        }
+      )
+    } else if (
+      type === "textarea"
+    ) {
+      input =
+        document.createElement(
+          "textarea"
+        )
+
+      input.rows =
+        4
+
+      input.value =
+        value
+    } else {
+      input =
+        document.createElement(
+          "input"
+        )
+
+      input.type =
+        type
+
+      input.value =
+        value
+    }
+
+    input.name =
+      name
+
+    input.className =
+      "rails-den-chat-3d-management-input"
+
+    wrapper.appendChild(
+      input
+    )
+
+    return {
+      wrapper,
+      input
+    }
+  }
+
+  function closePanel(root) {
+    root?.remove()
+  }
+
+  function openPanel({
+    title,
+    subtitle,
+    build
+  }) {
+    if (
+      document.pointerLockElement &&
+      document.exitPointerLock
+    ) {
+      document.exitPointerLock()
+    }
+
+    document
+      .querySelectorAll(
+        `.${ROOT_CLASS}-overlay`
+      )
+      .forEach(
+        (element) =>
+          element.remove()
+      )
+
+    const overlay =
+      document.createElement(
+        "div"
+      )
+
+    overlay.className =
+      `${ROOT_CLASS}-overlay`
+
+    const panel =
+      document.createElement(
+        "section"
+      )
+
+    panel.className =
+      `${ROOT_CLASS}-panel`
+
+    panel.setAttribute(
+      "role",
+      "dialog"
+    )
+
+    panel.setAttribute(
+      "aria-modal",
+      "true"
+    )
+
+    const header =
+      document.createElement(
+        "header"
+      )
+
+    header.className =
+      `${ROOT_CLASS}-panel-header`
+
+    const heading =
+      document.createElement(
+        "div"
+      )
+
+    const kicker =
+      document.createElement(
+        "span"
+      )
+
+    kicker.className =
+      `${ROOT_CLASS}-kicker`
+
+    kicker.textContent =
+      "3-D Chat"
+
+    const h2 =
+      document.createElement(
+        "h2"
+      )
+
+    h2.textContent =
+      title
+
+    heading.append(
+      kicker,
+      h2
+    )
+
+    if (subtitle) {
+      const paragraph =
+        document.createElement(
+          "p"
+        )
+
+      paragraph.textContent =
+        subtitle
+
+      heading.appendChild(
+        paragraph
+      )
+    }
+
+    const close =
+      button(
+        "×",
+        `${ROOT_CLASS}-close`
+      )
+
+    close.setAttribute(
+      "aria-label",
+      "Close"
+    )
+
+    close.addEventListener(
+      "click",
+      () =>
+        closePanel(
+          overlay
+        )
+    )
+
+    header.append(
+      heading,
+      close
+    )
+
+    const content =
+      document.createElement(
+        "div"
+      )
+
+    content.className =
+      `${ROOT_CLASS}-content`
+
+    build(
+      content,
+      overlay
+    )
+
+    panel.append(
+      header,
+      content
+    )
+
+    overlay.appendChild(
+      panel
+    )
+
+    overlay.addEventListener(
+      "mousedown",
+      (event) => {
+        if (
+          event.target === overlay
+        ) {
+          closePanel(
+            overlay
+          )
+        }
+      }
+    )
+
+    const escapeHandler =
+      (event) => {
+        if (
+          event.key === "Escape"
+        ) {
+          closePanel(
+            overlay
+          )
+
+          document.removeEventListener(
+            "keydown",
+            escapeHandler
+          )
+        }
+      }
+
+    document.addEventListener(
+      "keydown",
+      escapeHandler
+    )
+
+    document.body.appendChild(
+      overlay
+    )
+  }
+
+  function statusElement() {
+    const status =
+      document.createElement(
+        "p"
+      )
+
+    status.className =
+      `${ROOT_CLASS}-status`
+
+    status.setAttribute(
+      "aria-live",
+      "polite"
+    )
+
+    return status
+  }
+
+  function openCreatePanel(
+    payload
+  ) {
+    openPanel({
+      title:
+        "Create channel",
+
+      subtitle:
+        "Create a new room without leaving the 3-D Atrium.",
+
+      build(
+        content,
+        overlay
+      ) {
+        const form =
+          document.createElement(
+            "form"
+          )
+
+        const title =
+          field({
+            label:
+              "Channel name",
+            name:
+              "title"
+          })
+
+        const description =
+          field({
+            label:
+              "Description",
+            name:
+              "description",
+            type:
+              "textarea"
+          })
+
+        const visibility =
+          field({
+            label:
+              "Visibility",
+            name:
+              "visibility",
+            value:
+              "public",
+            options: [
+              [
+                "public",
+                "Public"
+              ],
+              [
+                "private",
+                "Private"
+              ]
+            ]
+          })
+
+        const status =
+          statusElement()
+
+        const actions =
+          document.createElement(
+            "div"
+          )
+
+        actions.className =
+          `${ROOT_CLASS}-actions`
+
+        const cancel =
+          button(
+            "Cancel",
+            `${ROOT_CLASS}-secondary`
+          )
+
+        cancel.addEventListener(
+          "click",
+          () =>
+            closePanel(
+              overlay
+            )
+        )
+
+        const submit =
+          document.createElement(
+            "button"
+          )
+
+        submit.type =
+          "submit"
+
+        submit.className =
+          `${ROOT_CLASS}-primary`
+
+        submit.textContent =
+          "Create channel"
+
+        actions.append(
+          cancel,
+          submit
+        )
+
+        form.append(
+          title.wrapper,
+          description.wrapper,
+          visibility.wrapper,
+          status,
+          actions
+        )
+
+        form.addEventListener(
+          "submit",
+          async (event) => {
+            event.preventDefault()
+
+            const name =
+              title.input.value.trim()
+
+            if (!name) {
+              status.textContent =
+                "Channel name is required."
+
+              title.input.focus()
+
+              return
+            }
+
+            submit.disabled =
+              true
+
+            submit.textContent =
+              "Creating…"
+
+            status.textContent =
+              ""
+
+            try {
+              const response =
+                await request(
+                  payload.create_channel_url,
+                  {
+                    method:
+                      "POST",
+
+                    parameters: {
+                      "chat_channel[title]":
+                        name,
+
+                      "chat_channel[description]":
+                        description.input.value,
+
+                      "chat_channel[visibility]":
+                        visibility.input.value
+                    }
+                  }
+                )
+
+              visit(
+                response.url
+              )
+            } catch (error) {
+              status.textContent =
+                error.message
+
+              submit.disabled =
+                false
+
+              submit.textContent =
+                "Create channel"
+            }
+          }
+        )
+
+        content.appendChild(
+          form
+        )
+
+        window.setTimeout(
+          () =>
+            title.input.focus(),
+          0
+        )
+      }
+    })
+  }
+
+  function openManagePanel(
+    payload,
+    chat
+  ) {
+    const channel =
+      payload.channel
+
+    openPanel({
+      title:
+        `Manage #${channel.title}`,
+
+      subtitle:
+        "Manage this channel without leaving the 3-D room.",
+
+      build(
+        content,
+        overlay
+      ) {
+        const settings =
+          document.createElement(
+            "form"
+          )
+
+        settings.className =
+          `${ROOT_CLASS}-section`
+
+        const heading =
+          document.createElement(
+            "h3"
+          )
+
+        heading.textContent =
+          "Channel settings"
+
+        const title =
+          field({
+            label:
+              "Channel name",
+            name:
+              "title",
+            value:
+              channel.title || ""
+          })
+
+        const description =
+          field({
+            label:
+              "Description",
+            name:
+              "description",
+            type:
+              "textarea",
+            value:
+              chat?.channel?.description ||
+              ""
+          })
+
+        const visibility =
+          field({
+            label:
+              "Visibility",
+            name:
+              "visibility",
+            value:
+              channel.visibility ||
+              "private",
+            options: [
+              [
+                "public",
+                "Public"
+              ],
+              [
+                "private",
+                "Private"
+              ]
+            ]
+          })
+
+        const status =
+          statusElement()
+
+        const save =
+          document.createElement(
+            "button"
+          )
+
+        save.type =
+          "submit"
+
+        save.className =
+          `${ROOT_CLASS}-primary`
+
+        save.textContent =
+          "Save settings"
+
+        settings.append(
+          heading,
+          title.wrapper,
+          description.wrapper,
+          visibility.wrapper,
+          status,
+          save
+        )
+
+        settings.addEventListener(
+          "submit",
+          async (event) => {
+            event.preventDefault()
+
+            save.disabled =
+              true
+
+            save.textContent =
+              "Saving…"
+
+            status.textContent =
+              ""
+
+            try {
+              const response =
+                await request(
+                  currentChannelUrl(),
+                  {
+                    method:
+                      "PATCH",
+
+                    parameters: {
+                      "chat_channel[title]":
+                        title.input.value.trim(),
+
+                      "chat_channel[description]":
+                        description.input.value,
+
+                      "chat_channel[visibility]":
+                        visibility.input.value
+                    }
+                  }
+                )
+
+              visit(
+                response.url
+              )
+            } catch (error) {
+              status.textContent =
+                error.message
+
+              save.disabled =
+                false
+
+              save.textContent =
+                "Save settings"
+            }
+          }
+        )
+
+        content.appendChild(
+          settings
+        )
+
+        if (
+          payload.memberships_url
+        ) {
+          const members =
+            document.createElement(
+              "section"
+            )
+
+          members.className =
+            `${ROOT_CLASS}-section`
+
+          const memberHeading =
+            document.createElement(
+              "h3"
+            )
+
+          memberHeading.textContent =
+            "Members"
+
+          members.appendChild(
+            memberHeading
+          )
+
+          const list =
+            document.createElement(
+              "div"
+            )
+
+          list.className =
+            `${ROOT_CLASS}-members`
+
+          ;(
+            payload.memberships ||
+            []
+          ).forEach(
+            (membership) => {
+              const row =
+                document.createElement(
+                  "div"
+                )
+
+              row.className =
+                `${ROOT_CLASS}-member`
+
+              const identity =
+                document.createElement(
+                  "span"
+                )
+
+              identity.textContent =
+                membership.creator
+                  ? `${membership.display_name} · Creator`
+                  : membership.display_name
+
+              row.appendChild(
+                identity
+              )
+
+              if (
+                membership.removable &&
+                membership.remove_url
+              ) {
+                const remove =
+                  button(
+                    "Remove",
+                    `${ROOT_CLASS}-danger-small`
+                  )
+
+                remove.addEventListener(
+                  "click",
+                  async () => {
+                    remove.disabled =
+                      true
+
+                    try {
+                      await request(
+                        membership.remove_url,
+                        {
+                          method:
+                            "DELETE"
+                        }
+                      )
+
+                      visit(
+                        currentChannelUrl()
+                      )
+                    } catch (error) {
+                      remove.disabled =
+                        false
+
+                      window.alert(
+                        error.message
+                      )
+                    }
+                  }
+                )
+
+                row.appendChild(
+                  remove
+                )
+              }
+
+              list.appendChild(
+                row
+              )
+            }
+          )
+
+          members.appendChild(
+            list
+          )
+
+          const addForm =
+            document.createElement(
+              "form"
+            )
+
+          addForm.className =
+            `${ROOT_CLASS}-member-add`
+
+          const mention =
+            field({
+              label:
+                "Add member",
+              name:
+                "mention_name"
+            })
+
+          mention.input.placeholder =
+            "@username"
+
+          const add =
+            document.createElement(
+              "button"
+            )
+
+          add.type =
+            "submit"
+
+          add.className =
+            `${ROOT_CLASS}-secondary`
+
+          add.textContent =
+            "Add member"
+
+          const addStatus =
+            statusElement()
+
+          addForm.append(
+            mention.wrapper,
+            addStatus,
+            add
+          )
+
+          addForm.addEventListener(
+            "submit",
+            async (event) => {
+              event.preventDefault()
+
+              add.disabled =
+                true
+
+              try {
+                await request(
+                  payload.memberships_url,
+                  {
+                    method:
+                      "POST",
+
+                    parameters: {
+                      mention_name:
+                        mention.input.value.trim()
+                    }
+                  }
+                )
+
+                visit(
+                  currentChannelUrl()
+                )
+              } catch (error) {
+                addStatus.textContent =
+                  error.message
+
+                add.disabled =
+                  false
+              }
+            }
+          )
+
+          members.appendChild(
+            addForm
+          )
+
+          content.appendChild(
+            members
+          )
+        }
+
+        const danger =
+          document.createElement(
+            "section"
+          )
+
+        danger.className =
+          `${ROOT_CLASS}-section ${ROOT_CLASS}-danger-zone`
+
+        const dangerHeading =
+          document.createElement(
+            "h3"
+          )
+
+        dangerHeading.textContent =
+          "Delete channel"
+
+        const deleteButton =
+          button(
+            "Delete channel",
+            `${ROOT_CLASS}-danger`
+          )
+
+        deleteButton.addEventListener(
+          "click",
+          async () => {
+            const confirmed =
+              window.confirm(
+                `Delete #${channel.title}? This cannot be undone.`
+              )
+
+            if (!confirmed) {
+              return
+            }
+
+            deleteButton.disabled =
+              true
+
+            try {
+              const response =
+                await request(
+                  currentChannelUrl(),
+                  {
+                    method:
+                      "DELETE"
+                  }
+                )
+
+              visit(
+                response.url
+              )
+            } catch (error) {
+              window.alert(
+                error.message
+              )
+
+              deleteButton.disabled =
+                false
+            }
+          }
+        )
+
+        danger.append(
+          dangerHeading,
+          deleteButton
+        )
+
+        content.appendChild(
+          danger
+        )
+      }
+    })
+  }
+
+  function initializeShell(
+    shell
+  ) {
+    if (
+      shell.dataset
+        .railsDen3dManagementReady ===
+      "true"
+    ) {
+      return
+    }
+
+    const payload =
+      managementPayload(
+        shell
+      )
+
+    if (!payload) {
+      return
+    }
+
+    const world =
+      shell.querySelector(
+        WORLD_SELECTOR
+      )
+
+    if (!world) {
+      return
+    }
+
+    if (
+      !payload.can_create_channel &&
+      !payload.can_manage_channel
+    ) {
+      return
+    }
+
+    shell.dataset
+      .railsDen3dManagementReady =
+      "true"
+
+    const root =
+      document.createElement(
+        "div"
+      )
+
+    root.className =
+      ROOT_CLASS
+
+    const menu =
+      document.createElement(
+        "div"
+      )
+
+    menu.className =
+      `${ROOT_CLASS}-menu`
+
+    if (
+      payload.can_create_channel
+    ) {
+      const create =
+        button(
+          payload.channel
+            ? "+ New channel"
+            : "+ Create channel",
+          `${ROOT_CLASS}-hud-button`
+        )
+
+      create.addEventListener(
+        "click",
+        (event) => {
+          event.stopPropagation()
+
+          openCreatePanel(
+            payload
+          )
+        }
+      )
+
+      menu.appendChild(
+        create
+      )
+    }
+
+    if (
+      payload.channel &&
+      payload.can_manage_channel
+    ) {
+      const manage =
+        button(
+          "⚙ Channel settings",
+          `${ROOT_CLASS}-hud-button`
+        )
+
+      manage.addEventListener(
+        "click",
+        (event) => {
+          event.stopPropagation()
+
+          openManagePanel(
+            payload,
+            chatPayload(
+              shell
+            )
+          )
+        }
+      )
+
+      menu.appendChild(
+        manage
+      )
+    }
+
+    root.appendChild(
+      menu
+    )
+
+    world.appendChild(
+      root
+    )
+  }
+
+  function initialize() {
+    document
+      .querySelectorAll(
+        SHELL_SELECTOR
+      )
+      .forEach(
+        initializeShell
+      )
+  }
+
+  function cleanup() {
+    document
+      .querySelectorAll(
+        `.${ROOT_CLASS},
+         .${ROOT_CLASS}-overlay`
+      )
+      .forEach(
+        (element) =>
+          element.remove()
+      )
+
+    document
+      .querySelectorAll(
+        SHELL_SELECTOR
+      )
+      .forEach(
+        (shell) => {
+          delete shell.dataset
+            .railsDen3dManagementReady
+        }
+      )
+  }
+
+  document.addEventListener(
+    "DOMContentLoaded",
+    initialize
+  )
+
+  document.addEventListener(
+    "turbo:load",
+    initialize
+  )
+
+  document.addEventListener(
+    "turbo:before-cache",
+    cleanup
+  )
+})()