☰

AO3 Browsing Notes

Userscript for notes that appear next to works when you're browsing AO3

  1. // ==UserScript==
  2. // @name        AO3 Browsing Notes
  3. // @description Userscript for notes that appear next to works when you're browsing AO3
  4. // @include     *://archiveofourown.org/tags/*/works*
  5. // @include     *://archiveofourown.org/collections/*/works*
  6. // @include     *://archiveofourown.org/works?*
  7. // @include     *://archiveofourown.org/users/*/works*
  8. // @include     *://archiveofourown.org/works/search?*
  9. // @namespace   https://greasyfork.org/en/scripts/422830-ao3-browsing-notes
  10. // @version     0.3
  11. // @run-at      document-end
  12. // @grant       GM.getValue
  13. // @grant       GM.setValue
  14.  
  15. // ==/UserScript==
  16.  
  17.  
  18. 'use strict';
  19.  
  20. const createElem = (elemType, idName, workID, clsName, text = "") => {
  21.     const elem = document.createElement(elemType)
  22.     elem.setAttribute("work-id", workID)
  23.     elem.id = idName
  24.     elem.className = clsName
  25.     elem.textContent = text
  26.     return elem
  27. }
  28.  
  29.  
  30. const createAddBtn = workID => {
  31.     const addChangeNote = async () => {
  32.  
  33.         const displayDiv = document.querySelector(`#displayDiv${workID}`)
  34.         const noteTextarea = document.querySelector(`#noteTextarea${workID}`)
  35.         const addBtn = document.querySelector(`#addBtn${workID}`)
  36.         if(noteTextarea.style.display === "none"){
  37.             noteTextarea.style.display = "block"
  38.             displayDiv.style.display = "none"
  39.             noteTextarea.value = displayDiv.textContent
  40.             addBtn.textContent = "Save Note"
  41.         }else {
  42.             noteTextarea.style.display = "none"
  43.             displayDiv.style.display = "block"
  44.             displayDiv.textContent = noteTextarea.value
  45.             await GM.setValue(workID, noteTextarea.value)
  46.             addBtn.textContent = "Add/Edit Note"
  47.         }
  48.     }
  49.     const newBtn = createElem("button", `addBtn${workID}`, workID, "ao3-note-btn", "Add/Edit Note")
  50.     newBtn.addEventListener("click", addChangeNote)
  51.     return newBtn
  52. }
  53.  
  54. const createNoteTextarea = (workID, text) => {
  55.     const noteTextarea = createElem("textarea", `noteTextarea${workID}`, workID, "ao3-note-textarea", text)
  56.     noteTextarea.style.display = "none"
  57.     return noteTextarea
  58. }
  59.  
  60. const createButtonDiv = workID => {
  61.     const btnDiv = createElem("div", `btnDiv${workID}`, workID, "ao3-note-div ao3-note-btn-div", undefined)
  62.     btnDiv.appendChild(createAddBtn(workID))
  63.     return btnDiv
  64. }
  65.  
  66. const createTextDisplayDiv = (workID, text) => {
  67.     const displayDiv = createElem("div", `displayDiv${workID}`, workID, "ao3-note-div ao3-note-display-div", text)
  68.     displayDiv.style.whiteSpace = "pre"
  69.     return displayDiv
  70. }
  71.  
  72. const createOuterDiv = (workID, text) => {
  73.     const outerDiv = createElem("div", `outerDiv${workID}`, workID, "ao3-note-div ao3-note-outer-div", undefined)
  74.     outerDiv.style.backgroundColor = "#ECECEC"
  75.     outerDiv.style.border = "thin solid #000000"
  76.     outerDiv.appendChild(createButtonDiv(workID))
  77.     outerDiv.appendChild(createTextDisplayDiv(workID, text))
  78.     outerDiv.appendChild(createNoteTextarea(workID, text))
  79.     return outerDiv
  80. }
  81.  
  82. const createFullDisplay = async () => {
  83.     const worksList = document.querySelectorAll("li.work.blurb.group")
  84.     for(let work of worksList){
  85.         const summary = work.querySelector("blockquote.userstuff.summary")
  86.         const workID = work.id
  87.         const storedText = await GM.getValue(workID, "")
  88.         summary.appendChild(createOuterDiv(workID, storedText))
  89.     }
  90. }
  91.  
  92. createFullDisplay()