Post Bookmarks

Preview #1 - Preview #2

Admin CP → Custom Content → Pages → Create page

Title: Post Bookmarks
SEO URL: post-bookmarks
Content Format: HTML
Content: <ul id="post-bookmarks"></ul>
Published: Enabled
Show in menu: Your Choice

Admin CP → Themes → Board Templates → Below the board

<script>
const bookmarkIMG = 'https://files.jcink.net/uploads/cory//stargold.png';
const replyLink = document.querySelectorAll('div.reply-link');
const postBookmarks = document.querySelector('#post-bookmarks');
let replyID = [];

for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);

if (key.includes('bookmark-reply')) {
    const href = value.split('~')[0].split('#')[0] + key.split('bookmark-reply')[1];
    const username = value.split('~')[1];
    const username2 = value.split('~')[2].split('~')[0];
    const date = value.split('~')[3];
    replyID.push(key.split('bookmark-reply')[1]);

    if (postBookmarks) {
        const li = document.createElement('li');
        li.innerHTML = `From: <a href="${href}">${username}</a> - By ${username2} at ${date}<br>`;
        postBookmarks.appendChild(li);
    }
}
}

if (replyLink) {
    replyLink.forEach(element => {
        const bMark = document.createElement('img');
        bMark.src = bookmarkIMG;
        bMark.alt = 'Bookmark This Post';
        bMark.title = 'Bookmark This Post';
        bMark.className = 'bookmark-post';
        bMark.style.opacity = '0.5';
        bMark.style.padding = '0 5px';
        bMark.style.cursor = 'pointer';
        element.appendChild(bMark);
    });

const bookmarkThisPost = document.querySelectorAll('img.bookmark-post');

bookmarkThisPost.forEach(element => {
    element.addEventListener('click', function() {
        const reply = element.previousElementSibling.getAttribute('href');
        const date = element.parentElement.previousElementSibling.querySelector('span[x-show="showRelative"]').innerText;
        const username = element.parentElement.parentElement.previousElementSibling.querySelector('a').innerHTML;

        if (localStorage.getItem('bookmark-reply' + reply)) {
            localStorage.removeItem('bookmark-reply' + reply);
            alert('Post Bookmark Removed');
            element.title = 'Bookmark This Post';
            element.style.opacity = '0.5';
        } else {
            localStorage.setItem('bookmark-reply' + reply, location.href + '~' + document.title.split(' - ')[0] + '~' + username + '~' + date);
            alert('Post Bookmark Saved');
            element.title = 'Remove This Bookmark';
            element.style.opacity = '1';
        }
    });
});

bookmarkThisPost.forEach(element => {
    const isBookmarked = element.previousElementSibling.getAttribute('href');

    if (replyID.includes(isBookmarked)) {
        element.style.opacity = '1';
        element.title = 'Remove This Bookmark';
    }
});
}
</script>