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.
A screenshot of the post notes from the main dashboard
Specifics:
- I’m unsure how to re-run the script that Tumblr uses when loading more notes.
- 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: https://www.tumblr.com/docs/en/custom_themes#notes
Using thetumblrNotesLoaded(notes_html)but still don’t know how to incorporate this -
There is a reference for the blog that achieves this https://pouretrebelle.com/post/729813282406514688/tyler-boswell
But I think their approach is cleaner and easy-to-understand. But not sure about the load more notes thing
Any assistance would be greatly appreciated!
And I deeply apologize in advance if the question appears to be too complex as it’s my first time asking a question here!
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 Running a function when loading more notes in Tumblr but still have no idea how to append the new notes
- An approach to dynamically load more new notes via AJAX
- Able to implement the function without an issue