added additional tags to user profile

This commit is contained in:
2024-11-23 14:47:28 -05:00
parent 8b2c4b6f07
commit 01a8ff8b97
9 changed files with 264 additions and 99 deletions
-42
View File
@@ -1,42 +0,0 @@
async function renderLikes(data, ipcRenderer) {
let container;
/** @type {Map<String, Element>} */
let a;
if (document.querySelector('#likescontainer')) {
container = document.querySelector('#likescontainer');
a = new Map(Array.from(container.querySelectorAll('.post-card')).map(o => ([o.dataset.bskyid, o])));
}
else {
container = document.createElement('div');
container.classList.add('cards-container');
container.id = 'likescontainer';
a = new Map();
}
// setupWorker();
// renderLikesFeed(posts.map(p => (p?.reply?.root?.uri || p.post.uri)?.trim()), likes, ipcRenderer);
for (const post of data) renderPostSingle(post, a, likes.map(o => ({ posturi: o.post.uri, likeuri: o.post.viewer?.like })), ipcRenderer, container);
const postids = Array.from(document.querySelectorAll('[data-like-bskyid]')).map(o => o.dataset.bskyid);
console.log(postids);
// "force" garbage collection
// delete a;
a.clear();
a = null;
// append container to the document body or a specific section
const postdiv = document.querySelector('#posts');
postdiv.querySelector('.placeholder')?.remove();
if (!document.querySelector('#likescontainer')) {
postdiv.appendChild(container);
document.addEventListener('click', (e) => {
if (e.target.tagName === "VIDEO") zoomvid(e);
else if (e.target.tagName === "IMG" || e.target.classList.contains('overlay')) zoomimg(e);
});
}
}
module.exports = renderLikes;
+60 -6
View File
@@ -559,6 +559,47 @@ function renderPostSingle(post, a, likes, ipcRenderer, container, idkey = 'bskyi
}
}
if (post.post.embed && post.post.embed.$type === 'app.bsky.embed.external#view') {
const embedContainer = document.createElement('div'),
embed = post.post.embed.external;
embedContainer.classList.add('external-embed-container');
// thumbnail (if exists)
if (embed.thumb) {
const thumbnail = document.createElement('img');
thumbnail.classList.add('external-embed-thumb');
thumbnail.src = embed.thumb;
thumbnail.alt = `${embed.title} thumbnail`;
embedContainer.appendChild(thumbnail);
}
// title
const titleElement = document.createElement('h3');
titleElement.classList.add('external-embed-title');
titleElement.textContent = embed.title;
// description
const descriptionElement = document.createElement('p');
descriptionElement.classList.add('external-embed-description');
descriptionElement.textContent = embed.description;
// link
const linkElement = document.createElement('a');
linkElement.classList.add('external-embed-link');
linkElement.href = embed.uri;
linkElement.target = '_blank'; // opens in a new tab
linkElement.rel = 'noopener noreferrer'; // improves security
linkElement.textContent = 'Visit';
// append elements to the container
embedContainer.appendChild(titleElement);
embedContainer.appendChild(descriptionElement);
embedContainer.appendChild(linkElement);
card.appendChild(embedContainer);
}
// interaction counts
if (!card.querySelector('.interaction-counts')) {
const counts = document.createElement('div');
@@ -585,7 +626,6 @@ function renderPostSingle(post, a, likes, ipcRenderer, container, idkey = 'bskyi
* @param {*} ipcRenderer
*/
module.exports = function renderPosts(posts, likes, pinnedPost, ipcRenderer, idkey = 'bskyid', containerid = 'posts') {
console.log(`${idkey}, ${containerid}container, ${posts.length}`);
let container;
/** @type {Map<String, Element>} */
let a;
@@ -596,14 +636,26 @@ module.exports = function renderPosts(posts, likes, pinnedPost, ipcRenderer, idk
else {
container = document.createElement('div');
container.classList.add('cards-container');
container.id = containerid;
container.id = `${containerid}container`;
a = new Map();
}
// setupWorker();
// renderLikesFeed(posts.map(p => (p?.reply?.root?.uri || p.post.uri)?.trim()), likes, ipcRenderer);
for (const post of posts) renderPostSingle(post, a, likes.map(o => ({ posturi: o.post.uri, likeuri: o.post.viewer?.like })), ipcRenderer, container, idkey, containerid);
for (const post of posts) {
try {
renderPostSingle(
post,
a,
likes.map(o => ({ posturi: o.post.uri, likeuri: o.post.viewer?.like })),
ipcRenderer,
container,
idkey,
containerid
);
}
catch (err) {
console.error(err);
}
}
const postids = Array.from(document.querySelectorAll(`[data-${idkey}]`)).map(o => o.dataset[`${idkey} `]);
console.log(postids);
@@ -614,6 +666,8 @@ module.exports = function renderPosts(posts, likes, pinnedPost, ipcRenderer, idk
a = null;
if (pinnedPost) {
console.log("PINNED", posts.find(p => p.post.uri === pinnedPost.uri));
const pinnedcard = container.querySelector(`[data-${idkey}="${pinnedPost.uri}"]`);
if (pinnedcard) {
const pinnedLabel = document.createElement('div');
+1 -3
View File
@@ -86,12 +86,10 @@ function createPostPreview(post, isParent = false) {
}
module.exports = function renderReplies(replyObj) {
module.exports = function renderReplies({ cursor, replies }) {
const repliesContainer = document.querySelector('#replies');
repliesContainer.querySelector('.placeholder')?.remove();
const { cursor, replies } = replyObj;
if (cursor) sessionStorage.setItem('repliescursor', cursor);
else sessionStorage.removeItem('repliescursor');
+62 -13
View File
@@ -1,12 +1,27 @@
document.addEventListener('scroll', () => bottomscrolled(document.querySelector('#posts')));
async function bottomscrolled(targetDiv) {
document.addEventListener('scroll', bottomscrolled);
async function bottomscrolled(e) {
const scrollPosition = window.scrollY + window.innerHeight,
pageHeight = document.documentElement.scrollHeight,
atbottom = (scrollPosition >= pageHeight);
if (!atbottom) return;
window.electronAPI.getnewposts();
// get the current div
const targetDiv = document.querySelector('.content.active')
switch (targetDiv.id) {
case 'posts': window.electronAPI.getnewposts();
break;
case 'replies': window.electronAPI.getReplies()
break;
case 'likes': window.electronAPI.getnewlikes();
break;
case 'media':
window.electronAPI.getnewmedia();
break;
default: console.log(`unknown scroll div ID ${targetDiv.id}`);
}
}
// function to toggle the active section
@@ -24,16 +39,55 @@ function showSection(sectionId) {
// show the selected section and activate the button
document.getElementById(sectionId).classList.add('active');
document.getElementById(sectionId + 'Btn').classList.add('active');
createDropdown();
}
function createDropdown() {
document.querySelector('.dropdown')?.remove();
const activeDiv = document.querySelector('.content.active');
if (activeDiv.id === 'replies') return;
const dropdown = document.createElement('div');
dropdown.classList.add('dropdown');
const button = document.createElement('button');
button.classList.add('dropdown-button');
button.textContent = 'Layout: Compact';
const content = document.createElement('div');
content.classList.add('dropdown-content');
content.id = 'layoutDropdown';
const options = [
{ text: 'Large', value: 'large' },
{ text: 'Relaxed', value: 'relaxed' },
{ text: 'Compact', value: 'compact', selected: true }
];
options.forEach(({ text, value, selected }) => {
const link = document.createElement('a');
link.href = '#';
link.dataset.value = value;
link.textContent = text;
if (selected) link.classList.add('selected');
link.addEventListener('click', togglerelaxed);
content.appendChild(link);
})
dropdown.append(button, content);
activeDiv.prepend(dropdown);
}
// function to handle layout selection
function togglerelaxed(e) {
e.preventDefault(); // prevent the default anchor behavior
const value = e.target.getAttribute('data-value');
const container = document.querySelector(`#${sessionStorage.getItem('currenttab') || 'cardscontainer'}`);
console.log(value)
const container = document.querySelector('.content.active [class*="cards-container"]'),
value = e.target.getAttribute('data-value');
if (!container) return console.warn('container not found!');
@@ -50,9 +104,4 @@ function togglerelaxed(e) {
document.querySelector('.dropdown-button').textContent = `Layout: ${value.charAt(0).toUpperCase() + value.slice(1)}`;
}
document.addEventListener('DOMContentLoaded', () => {
// event listener for dropdown items
document.querySelectorAll('#layoutDropdown a').forEach(item => {
item.addEventListener('click', togglerelaxed);
});
});
document.addEventListener('DOMContentLoaded', createDropdown);