Tumblr Theme Development - Loading and Manipulating Post Notes Appearance

Question

I'm currently working on a Tumblr theme development project and could use some guidance.

I know Tumblr theme development isn't as common nowadays, but I'm stuck and hoping someone can shed some light.

Issue:
I've created a script to manipulate the appearance of post notes, mimicking the Tumblr dashboard with categories for reblogs, likes, and comments. However, I'm facing problems when attempting to load more notes.

Specifics:

1. I'm unsure how to re-run the script that Tumblr uses when loading more notes.
2. I need to re-assign the newly loaded notes to the script I created.

Example:
Notes are coming from this URL, and when inspecting the "Show more notes" text, there's an inline script to dynamically load the next notes via onclick.

if(window.tumblrNotesLoaded)if(tumblrNotesLoaded(notes_html)==false)return;var more_notes_link=document.getElementById('more_notes_737590887394263041');var notes=more_notes_link.parentNode;notes.removeChild(more_notes_link);notes.innerHTML+=notes_html;if(window.tumblrNotesInserted)tumblrNotesInserted(notes_html);}};tumblrReq.open('GET','/notes/737590887394263041/ValQ0Ka2H?from_c=1700827272',true);tumblrReq.send();return false;"

---

Current Code:

HTML:

{block:Posts}
...

{block:PermalinkPage}
 <article class="posts__perma__tumblr" data-notes-url="{PostNotesURL}" id="notes">
     <!-- the notes will be dynamically inserted here -->
     <div class="posts__perma__tumblr"></div>
 </article>
{/block:PermalinkPage}

{/block:Posts}

JS (so long...)

 document.addEventListener("DOMContentLoaded", function () {
     separateNotesAndShow();
     loadNotesViaAjax();
 });
 
 // Function to load the notes via AJAX
 // the URL comes from {PostNotesURL}
 // e.g https://fukuotest.tumblr.com/notes/737590887394263041/ValQ0Ka2H
 async function loadNotesViaAjax() {
     var nextNotesURL = document
         .querySelector(".posts__perma__tumblr")
         .getAttribute("data-notes-url");

     if (nextNotesURL) {
         try {
             var response = await fetch(nextNotesURL);
             if (response.status >= 200 && response.status < 300) {
                 var notesHtml = await response.text();
                 tumblrNotesLoaded(notesHtml);
             } else {
                 console.error("Error loading more notes");
             }
         } catch (error) {
             console.error("Fetch error:", error);
         }
     }
 }

 // Function to handle the loading of new notes
 function tumblrNotesLoaded(notes_html) {
     const newNotesContainer = document.createElement("div");
     newNotesContainer.className = "posts__notes__temporary";
     newNotesContainer.innerHTML = notes_html;

     // Extract the notes and update the nextNotesURL for potential further loading
     let newNoteElements =
         newNotesContainer.querySelectorAll("ol.notes > li.note");

     // Append the new notes to their respective categories
     const reblogNotes = [];
     const likeNotes = [];
     const replyNotes = [];
     newNoteElements.forEach((noteElement) => {
         if (noteElement.classList.contains("reblog")) {
             reblogNotes.push(noteElement);
         } else if (noteElement.classList.contains("like")) {
             likeNotes.push(noteElement);
         } else if (noteElement.classList.contains("reply")) {
             replyNotes.push(noteElement);
         }
     });

     appendNewNotes("reblog", reblogNotes);
     appendNewNotes("like", likeNotes);
     appendNewNotes("reply", replyNotes);
 }

 function appendNewNotes(category, newNotes) {
     const container = document.querySelector(`.posts__notes__${ category }`);
     newNotes.forEach((note) => {
         container.appendChild(note);
     });
 }

 function separateNotesAndShow() {
     var reblogNotes = [];
     var likeNotes = [];
     var replyNotes = [];

     var noteElements = document.querySelectorAll("ol.notes > li.note");
     var noteContainer = document.querySelector("ol.notes");
     var noteLoads = document.createElement("div");
     noteLoads.className =
         "posts__notes__load flex flex--align-center flex--justify-center";

     var postsPerma = document.querySelector(".posts__perma__tumblr");

     noteElements.forEach(function (noteElement) {
         if (noteElement.classList.contains("reblog")) {
             reblogNotes.push(noteElement);
         } else if (noteElement.classList.contains("like")) {
             likeNotes.push(noteElement);
         } else if (noteElement.classList.contains("reply")) {
             replyNotes.push(noteElement);
         } else if (noteElement.classList.contains("more_notes_link_container")) {
             noteLoads.appendChild(noteElement);
         }
     });

     createTabButtons();

     // Wrap the notes into a single container
     var notesContainer = document.createElement("div");
     notesContainer.className = "posts__notes__container";

     showNotes("reblog", reblogNotes, notesContainer);
     showNotes("like", likeNotes, notesContainer);
     showNotes("reply", replyNotes, notesContainer);

     postsPerma.appendChild(notesContainer);
     postsPerma.appendChild(noteLoads);

     // Show the reblog notes by default, and hide the others
     showCategory("reblog");
 }

 function createTabButtons() {
     var categories = ["reblog", "like", "reply"];
     var tabsContainer = document.createElement("div");

     tabsContainer.className = "posts__notes__button";

     categories.forEach(function (category) {
         var tabButton = document.createElement("button");
         var notesCount = document.querySelectorAll(
             ".posts__notes__" + category + " > li.note"
         ).length;

         var svgPath = getSVGPath(category);

         tabButton.innerHTML =
             ' <svg fill="currentColor" stroke="1" viewBox="0 0 20 18" width="18px" height="18px" class="margin--right-10">' +
             svgPath +
             '</svg> (' +
             notesCount +
             ') ' +
             category;

         tabButton.className =
             "posts__notes__button-tabs | posts__notes__button-" + category;
         tabButton.id = category + "-button";
         tabButton.addEventListener("click", function () {
             return showCategory(category);
         });
         tabsContainer.appendChild(tabButton);
     });

     var postsPerma = document.querySelector(".posts__perma__tumblr");
     postsPerma.appendChild(tabsContainer);

     var reblogButton = document.getElementById("reblog-button");
     reblogButton.classList.add("active");
 }



 function showCategory(category) {
     var allContainers = document.querySelectorAll(
         ".posts__notes__container > div"
     );
     allContainers.forEach(function (container) {
         container.style.display = "none";
     });

     var allButtons = document.querySelectorAll(".posts__notes__button > button");
     allButtons.forEach(function (button) {
         button.classList.remove("active");
     });

     var selectedContainer = document.querySelector(
         ".posts__notes__" + category
     );
     selectedContainer.style.display = "block";

     var selectedButton = document.getElementById(category + "-button");
     selectedButton.classList.add("active");
 }

 function showNotes(category, notes, container) {
     var notesContainer = document.createElement("div");
     notesContainer.className = "posts__notes__" + category;
     notes.forEach(function (note) {
         notesContainer.appendChild(note);
     });
     container.appendChild(notesContainer);
 }

 function getSVGPath(category) {
     switch (category) {
     case "like":
         return 'M14.658 0c-1.625 0-3.21.767-4.463 2.156-.06.064-.127.138-.197.225-.074-.085-.137-.159-.196-.225C8.547.766 6.966 0 5.35 0 4.215 0 3.114.387 2.162 1.117c-2.773 2.13-2.611 5.89-1.017 8.5 2.158 3.535 6.556 7.18 7.416 7.875A2.3 2.3 0 0 0 9.998 18c.519 0 1.028-.18 1.436-.508.859-.695 5.257-4.34 7.416-7.875 1.595-2.616 1.765-6.376-1-8.5C16.895.387 15.792 0 14.657 0h.001zm0 2.124c.645 0 1.298.208 1.916.683 1.903 1.461 1.457 4.099.484 5.695-1.973 3.23-6.16 6.7-6.94 7.331a.191.191 0 0 1-.241 0c-.779-.631-4.966-4.101-6.94-7.332-.972-1.595-1.4-4.233.5-5.694.619-.475 1.27-.683 1.911-.683 1.064 0 2.095.574 2.898 1.461.495.549 1.658 2.082 1.753 2.203.095-.12 1.259-1.654 1.752-2.203.8-.887 1.842-1.461 2.908-1.461h-.001z';

     case "reblog":
         return 'M12.8.2c-.4-.4-.8-.2-.8.4v2H2c-2 0-2 2-2 2v5s0 1 1 1 1-1 1-1v-4c0-1 .5-1 1-1h9v2c0 .6.3.7.8.4L17 3.6 12.8.2zM4.2 17.9c.5.4.8.2.8-.3v-2h10c2 0 2-2 2-2v-5s0-1-1-1-1 1-1 1v4c0 1-.5 1-1 1H5v-2c0-.6-.3-.7-.8-.4L0 14.6l4.2 3.3z';

     case "reply":
         return 'M8.7 0C4.1 0 .4 3.7.4 8.3c0 1.2.2 2.3.7 3.4-.2.6-.4 1.5-.7 2.5L0 15.8c-.2.7.5 1.4 1.2 1.2l1.6-.4 2.4-.7c1.1.5 2.2.7 3.4.7 4.6 0 8.3-3.7 8.3-8.3C17 3.7 13.3 0 8.7 0zM15 8.3c0 3.5-2.8 6.3-6.4 6.3-1.2 0-2.3-.3-3.2-.9l-3.2.9.9-3.2c-.5-.9-.9-2-.9-3.2.1-3.4 3-6.2 6.5-6.2S15 4.8 15 8.3z';

     default:
         return '';
     }
 }

What I've Achieved So Far:
I've structured the HTML and JS to handle note separation and loading more notes via AJAX. You can find the demo in the provided test blog.

---

Reference

• There is a reference from Tumblr docs:
  Using the tumblrNotesInserted() but still don't know how to incorporate this.

• There is a reference for the blog that achieves this. And I think their approach is cleaner and easy-to-understand, but not sure about the load of more notes thing (no load more buttons).

---

Request for Help:

• I'm looking for guidance on re-running the script for loading more notes and re-assigning them correctly. There is a similar question on 2012 but still have no idea how to append the new notes.
• An approach to dynamically load more new notes via AJAX.
• And be able to implement the function without an issue.