diff --git a/CSS/compose.css b/CSS/compose.css index 78f9f6e..6d63bd9 100644 --- a/CSS/compose.css +++ b/CSS/compose.css @@ -1,5 +1,5 @@ /* overlay backdrop */ -#overlay { +#overlay, .overlay { display: none; position: fixed; top: 0; @@ -31,7 +31,7 @@ } /* show popup and overlay */ -#new-post-form.show, #overlay.show { +#new-post-form.show, #overlay.show, .overlay.show { display: block; opacity: 1; } diff --git a/HTML/index.html b/HTML/index.html index 38bb144..d375914 100644 --- a/HTML/index.html +++ b/HTML/index.html @@ -68,7 +68,7 @@ -
+
diff --git a/JS/compose.cjs b/JS/compose.cjs index a59bf44..72ccb84 100644 --- a/JS/compose.cjs +++ b/JS/compose.cjs @@ -1,5 +1,7 @@ // set up the overlay and form toggling async function setup() { + if (document.querySelector('#overlay')) return; + const composeButton = document.querySelector('#composebtn'); const newPostForm = document.querySelector('#new-post-form'); const overlay = document.createElement('div'); diff --git a/JS/posts.cjs b/JS/posts.cjs index 1aef757..02b9db5 100644 --- a/JS/posts.cjs +++ b/JS/posts.cjs @@ -11,6 +11,7 @@ function zoomimg(e) { zoomContainer.querySelector('img').src = src; zoomContainer.classList.toggle('zoomed'); overlayEl.classList.toggle('hidden'); + overlayEl.classList.toggle('show'); document.querySelector('.profile-container').classList.toggle('.noscroll'); } @@ -29,6 +30,7 @@ function zoomvid(e) { zoomContainer.querySelector('video').src = src; zoomContainer.classList.toggle('zoomed'); document.querySelector('.overlay').classList.toggle('hidden'); + document.querySelector('.overlay').classList.toggle('show'); document.querySelector('.profile-container').classList.toggle('.noscroll'); const isZoomed = zoomContainer.classList.contains('zoomed'); @@ -569,33 +571,43 @@ function renderPostSingle(post, a, likes, ipcRenderer, container, idkey = 'bskyi if (embed.thumb) { const thumbnail = document.createElement('img'); 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`; embedContainer.appendChild(thumbnail); } - // title - const titleElement = document.createElement('h3'); - titleElement.classList.add('external-embed-title'); - titleElement.textContent = embed.title; + // this is an image + if (embed.description.startsWith('ALT:') && embed.title === embed.description.substring(4).trim()) { + const thumbnail = embedContainer.querySelector('.external-embed-thumb'); + 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 - const descriptionElement = document.createElement('p'); - descriptionElement.classList.add('external-embed-description'); - descriptionElement.textContent = embed.description; + // 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'; + // 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); + // append elements to the container + embedContainer.appendChild(titleElement); + embedContainer.appendChild(descriptionElement); + embedContainer.appendChild(linkElement); + } card.appendChild(embedContainer); }