scribo 1.0.38 → 1.0.40

data/app/javascript/scribo/controllers/open_editors_controller.js

@@ -0,0 +1,291 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["tabs", "list", "contents"]
+
+  connect() {
+    this.editors = {}
+    this.editorActive = null
+    window.scriboEditors = this
+
+    document.addEventListener("content-editor.changed", (event) => {
+      let tab = this._tabForId(event.detail.contentId)
+      let content = this._contentForId(event.detail.contentId)
+      let item = this._itemForId(event.detail.contentId)
+
+      if (!tab || !content || !item) {
+        return
+      }
+
+      if (event.detail.dirty == true) {
+        tab.classList.add("editor-tab--dirty")
+        content.classList.add("dirty")
+        item.classList.add("dirty")
+      } else if (event.detail.dirty == false) {
+        tab.classList.remove("editor-tab--dirty")
+        content.classList.remove("dirty")
+        item.classList.remove("dirty")
+      } else if (event.detail.path) {
+        tab.querySelector(".name").innerText = event.detail.path
+        item.querySelector(".name").firstChild.data = event.detail.path
+        item.querySelector("small").innerText = event.detail.fullPath
+      }
+    })
+
+    document.addEventListener("keydown", (event) => {
+      if (event.key == "s" && event.metaKey == true && event.shiftKey == true) {
+        event.preventDefault()
+        event.stopPropagation()
+        event.cancelBubble = true
+
+        this.saveAll(event)
+      } else if (event.key == "s" && event.metaKey == true) {
+        event.preventDefault()
+        event.stopPropagation()
+        event.cancelBubble = true
+
+        if (this.editorActive) {
+          let elm = document.getElementById("content-editor-" + this.editorActive)
+          let controller = this._editorControllerForElement(elm)
+          controller.save()
+        }
+      }
+    })
+
+    let readme = document.getElementById("readme")
+    if (readme) {
+      let id = readme.getAttribute("data-id")
+      let url = readme.getAttribute("data-url")
+      let path = readme.getAttribute("data-path")
+      let full_path = readme.getAttribute("data-full-path")
+
+      window.scriboEditors.open(id, path, full_path, url, readme.innerHTML)
+      readme.remove()
+    }
+  }
+
+  open(id, name, path, url, data) {
+    if (id != "0" && id != "1") {
+      this.close(0)
+    }
+
+    let existingEditor = this.editors[id]
+
+    if (existingEditor) {
+      this._activateEditor(existingEditor.id)
+    } else {
+      this._createEditor(id, name, path, url, data)
+    }
+  }
+
+  close(id) {
+    let existingEditor = this.editors[id]
+    if (existingEditor) {
+      let tab = this._tabForId(id)
+      if (tab.classList.contains("editor-tab--dirty")) {
+        let result = confirm("You have unsaved changes, do you want close this editor?")
+        if (!result) {
+          return
+        }
+      }
+      this._removeEditor(id)
+    }
+  }
+
+  closeAll(event) {
+    this.tabsTarget.querySelectorAll(".editor-tab").forEach((element) => {
+      if (!element.classList.contains("editor-tab--dirty")) {
+        this._removeEditor(element.dataset.tab)
+      }
+    })
+  }
+
+  clickTabs(event) {
+    let close = event.target.closest(".close")
+    let tab = event.target.closest(".editor-tab")
+
+    if (tab) {
+      if (close) {
+        this.close(tab.dataset.tab)
+      } else {
+        this._activateEditor(tab.dataset.tab)
+      }
+    }
+  }
+
+  clickList(event) {
+    // TODO: Include close button and dirty indicator in list too
+    let tab = event.target.closest("li.editor")
+    if (tab) {
+      this._activateEditor(tab.dataset.tab)
+    }
+  }
+
+  save(event) {
+    event.stopPropagation()
+    let tab = event.target.closest("li.editor")
+    let contentId = tab.dataset.tab
+
+    let elm = document.getElementById("content-editor-" + contentId)
+    let controller = this._editorControllerForElement(elm)
+    controller.save()
+  }
+
+  saveAll(event) {
+    this.tabsTarget.querySelectorAll(".editor-tab").forEach((element) => {
+      if (element.classList.contains("editor-tab--dirty")) {
+        let elm = document.getElementById("content-editor-" + element.dataset.tab)
+        let controller = this._editorControllerForElement(elm)
+        controller.save()
+      }
+    })
+  }
+
+  _editorControllerForElement(elm) {
+    let result = this.application.getControllerForElementAndIdentifier(elm, "text-editor")
+
+    if (!result) {
+      result = this.application.getControllerForElementAndIdentifier(elm, "image-editor")
+    }
+
+    return result
+  }
+
+  _createEditor(id, name, path, url, data) {
+    this.editors[id] = { id: id, name: name, path: path, url: url, data: data }
+    this._createTab(id, name)
+    this._createListEntry(id, name, path)
+    this._createTabContent(id, url, data)
+    this._activateEditor(id)
+  }
+
+  _removeEditor(id) {
+    delete this.editors[id]
+    if (this.editorActive == id) {
+      // Can be null/undefined which is fine
+      this._activateEditor(Object.keys(this.editors)[0])
+    }
+    this._removeTab(id)
+    this._removeItem(id)
+    this._removeContent(id)
+  }
+
+  _activateEditor(id) {
+    this.editorActive = id
+    this._activateTabs()
+    this._activateContents()
+  }
+
+  _createTab(id, name) {
+    let tab = document.createElement("div")
+    tab.setAttribute("data-tab", id)
+    tab.setAttribute("class", "editor-tab")
+
+    let icon = document.createElement("i")
+    icon.setAttribute("class", "close fa fa-xmark")
+
+    let nameSpan = document.createElement("span")
+    nameSpan.setAttribute("class", "name")
+    nameSpan.setAttribute("data-path", name)
+    nameSpan.appendChild(document.createTextNode(name))
+
+    tab.appendChild(nameSpan)
+    tab.appendChild(icon)
+
+    this.tabsTarget.appendChild(tab)
+  }
+
+  _createListEntry(id, name, path) {
+    let entry = document.createElement("li")
+    entry.setAttribute("data-tab", id)
+    entry.setAttribute("class", "editor file")
+
+    let link = document.createElement("a")
+    link.setAttribute("class", "list-item")
+
+    let nameSpan = document.createElement("span")
+    nameSpan.setAttribute("class", "name")
+    nameSpan.setAttribute("data-path", path)
+    nameSpan.appendChild(document.createTextNode(name))
+
+    let nameSmall = document.createElement("small")
+    nameSmall.appendChild(document.createTextNode(path))
+    nameSpan.appendChild(nameSmall)
+
+    link.appendChild(nameSpan)
+
+    entry.appendChild(link)
+
+    let tools = document.createElement("span")
+    tools.setAttribute("class", "tools")
+
+    let saveIcon = document.createElement("i")
+    saveIcon.setAttribute("class", "close fal fa-floppy-disk")
+    saveIcon.setAttribute("data-action", "click->open-editors#save")
+
+    tools.appendChild(saveIcon)
+
+    link.appendChild(tools)
+
+    this.listTarget.appendChild(entry)
+  }
+
+  _createTabContent(id, url, data) {
+    let content = document.createElement("div")
+    content.setAttribute("data-tab", id)
+    content.setAttribute("class", "editor-content")
+
+    content.innerHTML = data
+
+    this.contentsTarget.appendChild(content)
+  }
+
+  _activateTabs() {
+    this.tabsTarget.querySelectorAll(".editor-tab").forEach((element) => {
+      element.classList.remove("editor-tab--active")
+    })
+
+    if (this.editorActive) {
+      let tab = this._tabForId(this.editorActive)
+      tab.classList.add("editor-tab--active")
+    }
+  }
+
+  _activateContents() {
+    this.contentsTarget.querySelectorAll(".editor-content").forEach((element) => {
+      element.classList.remove("editor-content--active")
+    })
+
+    if (this.editorActive) {
+      let tabContent = this._contentForId(this.editorActive)
+      tabContent.classList.add("editor-content--active")
+    }
+  }
+
+  _removeTab(id) {
+    let tab = this._tabForId(id)
+    tab.remove()
+  }
+
+  _removeItem(id) {
+    let item = this._itemForId(id)
+    item.remove()
+  }
+
+  _removeContent(id) {
+    let content = this._contentForId(id)
+    content.remove()
+  }
+
+  _tabForId(id) {
+    return this.tabsTarget.querySelector(".editor-tab[data-tab='" + id + "']")
+  }
+
+  _itemForId(id) {
+    return this.listTarget.querySelector(".editor[data-tab='" + id + "']")
+  }
+
+  _contentForId(id) {
+    return this.contentsTarget.querySelector(".editor-content[data-tab='" + id + "']")
+  }
+}

data/app/javascript/scribo/controllers/text_editor_controller.js

@@ -0,0 +1,39 @@
+import EditorComponentController from "satis/components/editor/component_controller"
+
+/***
+ * Text editor controller
+ *
+ * Control codemirror
+ */
+export default class extends EditorComponentController {
+  static targets = ["textarea"]
+
+  save() {
+    const self = this
+
+    const formData = new FormData()
+    formData.append("_method", "PATCH")
+    formData.append("content[data_with_frontmatter]", this.inputTarget.value)
+
+    fetch(self.data.get("save-url"), {
+      method: "POST",
+      headers: {
+        Accept: "application/json, text/javascript",
+        "X-CSRF-Token": document.querySelector("meta[name=csrf-token]").content,
+      },
+      body: formData,
+    }).then((response) => {
+      if (response.status == 200) {
+        let event = new CustomEvent("content-editor.changed", {
+          bubbles: true,
+          cancelable: true,
+          detail: {
+            contentId: self.data.get("content-id"),
+            dirty: false,
+          },
+        })
+        self.element.dispatchEvent(event)
+      }
+    })
+  }
+}

data/app/javascript/scribo/controllers/tree_view_controller.js

@@ -0,0 +1,378 @@
+import { Controller } from "@hotwired/stimulus"
+import Sortable from "sortablejs"
+
+/***
+ * Treeview controller
+ *
+ * Manages the tree view
+ */
+export default class extends Controller {
+  static targets = ["folderTemplate", "entryTemplate", "collapseExpand", "contentItems"]
+
+  connect() {
+    const self = this
+
+    self.element.addEventListener("click", (event) => {
+      event.stopPropagation()
+      let el = event.target.closest("li.entry")
+      if (!el) {
+        return
+      }
+      if (el && event.target.closest("li.entry").classList.contains("directory")) {
+        el.classList.toggle("open")
+        el.classList.toggle("closed")
+
+        self._updateCollapseExpandAll()
+      }
+    })
+
+    self.element.querySelectorAll("ul").forEach((el) => {
+      this._addSortable(el)
+    })
+  }
+
+  // Collapse or expand all folders
+  collapseExpandAll(event) {
+    const self = this
+    if (self.collapseExpandTarget.classList.contains("fa-square-plus")) {
+      self.element.querySelectorAll("li.directory").forEach((el) => {
+        el.classList.add("open")
+        el.classList.remove("closed")
+      })
+    } else {
+      self.element.querySelectorAll("li.directory").forEach((el) => {
+        el.classList.remove("open")
+        el.classList.add("closed")
+      })
+    }
+    self._updateCollapseExpandAll()
+  }
+
+  // Create content
+  create(event) {
+    const kind = event.target.closest("[data-action]").getAttribute("data-kind")
+    const url = event.target.closest("[data-action]").getAttribute("data-url")
+
+    let template = "entryTemplateTarget"
+    if (kind == "folder") {
+      template = "folderTemplateTarget"
+    }
+
+    const newContentNode = document.importNode(this[template].content, true)
+
+    const closestDirectory = event.target.closest("li.directory")
+    let newContentContainer = event.target.closest(".section").querySelector("ul")
+    if (closestDirectory) {
+      newContentContainer = closestDirectory.querySelector("ul")
+    }
+    newContentContainer.prepend(newContentNode)
+
+    const input = newContentContainer.querySelector("input")
+    input.setAttribute("data-kind", kind)
+    input.setAttribute("data-url", url)
+    input.focus()
+    input.setSelectionRange(0, input.value.length)
+
+    input.addEventListener(
+      "keyup",
+      function (event) {
+        this._createContent(event, newContentContainer)
+      }.bind(this)
+    )
+    input.addEventListener(
+      "blur",
+      function (event) {
+        this._cancelCreate(event, newContentContainer)
+      }.bind(this)
+    )
+
+    event.stopPropagation()
+  }
+
+  // Delete content
+  delete(event) {
+    const self = this
+
+    event.stopPropagation()
+    event.cancelBubble = true
+
+    const elm = event.target.closest("[data-action]")
+
+    let result = true
+    if (elm.getAttribute("data-confirm")) {
+      result = confirm(elm.getAttribute("data-confirm"))
+    }
+    if (!result) {
+      return
+    }
+
+    const formData = new FormData()
+    formData.append("_method", "DELETE")
+    fetch(elm.getAttribute("data-url"), {
+      method: "POST",
+      headers: {
+        "X-CSRF-Token": document.querySelector("meta[name=csrf-token]").content,
+      },
+      body: formData,
+    }).then((response) => {
+      if (response.status == 200) {
+        const node = elm.closest("li")
+        const contentId = node.getAttribute("data-content")
+        if (node.parentNode) {
+          window.scriboEditors.close(contentId)
+          node.parentNode.removeChild(node)
+        }
+      }
+    })
+  }
+
+  // Opens content in the editor pane
+  open(event) {
+    const self = this
+    const closestA = event.target.closest("a")
+
+    // Is a rename currently happening? If so abort
+    if (closestA.querySelector("input")) {
+      return
+    }
+    this.clicked = event
+    setTimeout(this._open.bind(this, event), 500)
+    event.stopPropagation()
+    event.preventDefault()
+    return false
+  }
+
+  // Rename content
+  rename(event) {
+    const self = this
+    this.clicked = null
+    const closestA = event.target.closest("a")
+
+    // Is a rename currently happening? If so abort
+    if (closestA.querySelector("input")) {
+      return
+    }
+
+    const input = document.createElement("input")
+    const nameSpan = closestA.firstChild
+    input.type = "text"
+    input.value = nameSpan.innerText
+
+    input.addEventListener("keyup", this._renameContent.bind(this))
+    input.addEventListener("blur", this._cancelRename.bind(this))
+
+    closestA.querySelector(".tools").style.display = "none"
+    nameSpan.innerText = ""
+    nameSpan.appendChild(input)
+
+    input.focus()
+    input.setSelectionRange(0, input.value.length)
+
+    event.stopPropagation()
+    event.preventDefault()
+    return false
+  }
+
+  disconnect() {}
+
+  // Private
+
+  _updateCollapseExpandAll() {
+    const self = this
+    if (!self.contentItemsTarget.querySelector("li.entry.directory.open")) {
+      // All are closed
+      self.collapseExpandTarget.classList.remove("fa-square-minus")
+      self.collapseExpandTarget.classList.add("fa-square-plus")
+    } else {
+      self.collapseExpandTarget.classList.add("fa-square-minus")
+      self.collapseExpandTarget.classList.remove("fa-square-plus")
+    }
+  }
+
+  _open(event) {
+    const self = this
+
+    if (this.clicked == null) {
+      return
+    }
+
+    this.clicked = null
+    event.stopPropagation()
+    const closestA = event.target.closest("a")
+
+    fetch(closestA.getAttribute("data-tree-view-url"), {
+      method: "GET",
+      headers: {
+        Accept: "application/json, text/javascript",
+      },
+    }).then((response) => {
+      response.json().then(function (data) {
+        window.scriboEditors.open(data.content.id, data.content.path, data.content.full_path, data.content.url, data.html)
+        self._selectEntry(closestA.closest("li.entry"))
+      })
+    })
+  }
+
+  _renameContent(event) {
+    const self = this
+
+    const node = event.target.closest("li")
+    const contentId = node.getAttribute("data-content")
+
+    const closestA = event.target.closest("a")
+
+    const input = closestA.querySelector("input")
+    const nameSpan = closestA.querySelector("span.name")
+    nameSpan.setAttribute("data-path", input.value)
+
+    const newName = input.value
+    if (event.key == "Enter") {
+      fetch(closestA.getAttribute("data-tree-view-rename-url"), {
+        method: "PUT",
+        headers: {
+          Accept: "application/json, text/javascript",
+          "Content-Type": "application/json",
+          "X-CSRF-Token": document.querySelector("meta[name=csrf-token]").content,
+        },
+        body: JSON.stringify({
+          to: newName,
+        }),
+      }).then((response) => {
+        response.json().then(function (data) {
+          let changeEvent = new CustomEvent("content-editor.changed", {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+              contentId: data.content.id,
+              path: data.content.path,
+              fullPath: data.content.full_path,
+            },
+          })
+          self.element.dispatchEvent(changeEvent)
+          self._cancelRename(event)
+        })
+      })
+    } else if (event.key == "Escape") {
+      self._cancelRename(event)
+    }
+  }
+
+  _cancelRename(event) {
+    const closestA = event.target.closest("a")
+    const nameSpan = closestA.firstChild
+    const input = nameSpan.querySelector("input")
+    closestA.querySelector(".tools").style.display = ""
+
+    const name = input.value
+    nameSpan.removeChild(input)
+    nameSpan.innerText = name
+  }
+
+  _createContent(event, newContentContainer) {
+    const self = this
+
+    const input = newContentContainer.querySelector("input")
+    const nameSpan = newContentContainer.querySelector("span.name")
+    nameSpan.setAttribute("data-path", input.value)
+
+    if (event.key == "Enter") {
+      const parent = newContentContainer.getAttribute("data-parent")
+
+      fetch(input.getAttribute("data-url"), {
+        method: "POST",
+        headers: {
+          Accept: "application/json, text/javascript",
+          "Content-Type": "application/json",
+          "X-CSRF-Token": document.querySelector("meta[name=csrf-token]").content,
+        },
+        body: JSON.stringify({
+          parent: parent,
+          kind: input.getAttribute("data-kind"),
+          path: input.value,
+        }),
+      }).then((response) => {
+        if (response.status == 200) {
+          response.json().then(function (data) {
+            self._cancelCreate(event, newContentContainer)
+            newContentContainer.insertAdjacentHTML("afterbegin", data.itemHtml)
+            if (data.content.kind != "folder") {
+              // document.querySelector(".editor-pane").innerHTML = data.html
+              self._selectEntry(newContentContainer.querySelector("li." + (data.content.kind == "folder" ? "folder" : "file")))
+              window.scriboEditors.open(data.content.id, data.content.path, data.content.full_path, data.content.url, data.html)
+            } else {
+              // A folder
+              let folderUl = newContentContainer.querySelector(`[data-content="${data.content.id}"] ul`)
+              self._addSortable(folderUl)
+            }
+          })
+        }
+      })
+    } else if (event.key == "Escape") {
+      self._cancelCreate(event, newContentContainer)
+    }
+  }
+
+  _cancelCreate(event, newContentContainer) {
+    newContentContainer.removeChild(newContentContainer.firstChild)
+  }
+
+  _selectEntry(element) {
+    const treeView = document.querySelector(".tree-view")
+    const lastSelected = treeView.querySelector("li.entry.selected")
+    if (lastSelected) {
+      lastSelected.classList.remove("selected")
+    }
+
+    element.classList.add("selected")
+  }
+
+  _addSortable(el) {
+    const self = this
+    new Sortable(el, {
+      group: "nested",
+      animation: 150,
+      fallbackOnBody: true,
+      swapThreshold: 0.65,
+      onEnd: (evt) => {
+        const contentId = evt.item.getAttribute("data-content")
+        const parentId = evt.to.getAttribute("data-parent")
+        fetch(self.data.get("update-url"), {
+          method: "PUT",
+          headers: {
+            Accept: "application/json, text/javascript",
+            "Content-Type": "application/json",
+            "X-CSRF-Token": document.querySelector("meta[name=csrf-token]").content,
+          },
+          body: JSON.stringify({
+            id: contentId,
+            to: parentId,
+            index: evt.newIndex,
+          }),
+        }).then((response) => {
+          response.json().then(function (data) {
+            let changeEvent = new CustomEvent("content-editor.changed", {
+              bubbles: true,
+              cancelable: true,
+              detail: {
+                contentId: data.content.id,
+                path: data.content.path,
+                fullPath: data.content.full_path,
+              },
+            })
+            self.element.dispatchEvent(changeEvent)
+          })
+        })
+      },
+      onMove: function (evt) {
+        const parentId = evt.to.getAttribute("data-parent")
+        if (parentId) {
+          const file = document.querySelector('[data-content="' + parentId + '"]').classList.contains("file")
+          if (file) {
+            evt.preventDefault()
+            return false
+          }
+        }
+      },
+    })
+  }
+}