ION_Archive/bluesky-client
1
0
Fork 0
mirror of https://github.com/ION606/bluesky-client.git synced 2026-05-14 21:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed image embeds in posts

Browse Source
This commit is contained in:
ION606
2024-11-23 21:54:43 -05:00
parent 01a8ff8b97
commit eb9b093485
4 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CSS/compose.css
+2 -2
View File
@@ -1,5 +1,5 @@
/* overlay backdrop */ /* overlay backdrop */
#overlay { #overlay, .overlay {
display: none; display: none;
position: fixed; position: fixed;
top: 0; top: 0;
@@ -31,7 +31,7 @@
} }
/* show popup and overlay */ /* show popup and overlay */
#new-post-form.show, #overlay.show { #new-post-form.show, #overlay.show, .overlay.show {
display: block; display: block;
opacity: 1; opacity: 1;
} }
HTML/index.html
+1 -1
View File
@@ -68,7 +68,7 @@
<i class="fa-solid fa-pen"></i> <i class="fa-solid fa-pen"></i>
</button> </button>
<div id="overlay"></div> <div class="overlay"></div>
<div id="new-post-form" aria-labelledby="new-post-label"> <div id="new-post-form" aria-labelledby="new-post-label">
<form id="postForm"> <form id="postForm">
<label id="new-post-label" for="postContent">New Post:</label> <label id="new-post-label" for="postContent">New Post:</label>
JS/compose.cjs
+2
View File
@@ -1,5 +1,7 @@
// set up the overlay and form toggling // set up the overlay and form toggling
async function setup() { async function setup() {
if (document.querySelector('#overlay')) return;
const composeButton = document.querySelector('#composebtn'); const composeButton = document.querySelector('#composebtn');
const newPostForm = document.querySelector('#new-post-form'); const newPostForm = document.querySelector('#new-post-form');
const overlay = document.createElement('div'); const overlay = document.createElement('div');
JS/posts.cjs
+32 -20
View File
@@ -11,6 +11,7 @@ function zoomimg(e) {
zoomContainer.querySelector('img').src = src; zoomContainer.querySelector('img').src = src;
zoomContainer.classList.toggle('zoomed'); zoomContainer.classList.toggle('zoomed');
overlayEl.classList.toggle('hidden'); overlayEl.classList.toggle('hidden');
overlayEl.classList.toggle('show');
document.querySelector('.profile-container').classList.toggle('.noscroll'); document.querySelector('.profile-container').classList.toggle('.noscroll');
} }
@@ -29,6 +30,7 @@ function zoomvid(e) {
zoomContainer.querySelector('video').src = src; zoomContainer.querySelector('video').src = src;
zoomContainer.classList.toggle('zoomed'); zoomContainer.classList.toggle('zoomed');
document.querySelector('.overlay').classList.toggle('hidden'); document.querySelector('.overlay').classList.toggle('hidden');
document.querySelector('.overlay').classList.toggle('show');
document.querySelector('.profile-container').classList.toggle('.noscroll'); document.querySelector('.profile-container').classList.toggle('.noscroll');
const isZoomed = zoomContainer.classList.contains('zoomed'); const isZoomed = zoomContainer.classList.contains('zoomed');
@@ -569,33 +571,43 @@ function renderPostSingle(post, a, likes, ipcRenderer, container, idkey = 'bskyi
if (embed.thumb) { if (embed.thumb) {
const thumbnail = document.createElement('img'); const thumbnail = document.createElement('img');
thumbnail.classList.add('external-embed-thumb'); thumbnail.classList.add('external-embed-thumb');
thumbnail.src = embed.thumb;
if (embed.uri.match(/\.gif(?:\?.*|$)/)) thumbnail.src = embed.uri
else thumbnail.src = embed.thumb;
thumbnail.alt = `${embed.title} thumbnail`; thumbnail.alt = `${embed.title} thumbnail`;
embedContainer.appendChild(thumbnail); embedContainer.appendChild(thumbnail);
} }
// title // this is an image
const titleElement = document.createElement('h3'); if (embed.description.startsWith('ALT:') && embed.title === embed.description.substring(4).trim()) {
titleElement.classList.add('external-embed-title'); const thumbnail = embedContainer.querySelector('.external-embed-thumb');
titleElement.textContent = embed.title; thumbnail.alt = embed.description.substring(4).trim();
}
else {
// title
const titleElement = document.createElement('h3');
titleElement.classList.add('external-embed-title');
titleElement.textContent = embed.title;
// description // description
const descriptionElement = document.createElement('p'); const descriptionElement = document.createElement('p');
descriptionElement.classList.add('external-embed-description'); descriptionElement.classList.add('external-embed-description');
descriptionElement.textContent = embed.description; descriptionElement.textContent = embed.description;
// link // link
const linkElement = document.createElement('a'); const linkElement = document.createElement('a');
linkElement.classList.add('external-embed-link'); linkElement.classList.add('external-embed-link');
linkElement.href = embed.uri; linkElement.href = embed.uri;
linkElement.target = '_blank'; // opens in a new tab linkElement.target = '_blank'; // opens in a new tab
linkElement.rel = 'noopener noreferrer'; // improves security linkElement.rel = 'noopener noreferrer'; // improves security
linkElement.textContent = 'Visit'; linkElement.textContent = 'Visit';
// append elements to the container // append elements to the container
embedContainer.appendChild(titleElement); embedContainer.appendChild(titleElement);
embedContainer.appendChild(descriptionElement); embedContainer.appendChild(descriptionElement);
embedContainer.appendChild(linkElement); embedContainer.appendChild(linkElement);
}
card.appendChild(embedContainer); card.appendChild(embedContainer);
} }