From 12fca724805bd86bfed5099092faa93d7673240d Mon Sep 17 00:00:00 2001 From: "Max L." Date: Fri, 24 Nov 2023 12:08:19 +0100 Subject: [PATCH 1/5] Filter out duplicate carousel cards Also respect reply config option in carousel --- script.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index b87dded..02e5f8d 100644 --- a/script.js +++ b/script.js @@ -165,9 +165,17 @@ const updateCarousel = function(slides, posts) { var newHTML = ` ` newHTML += `
- ` + `; + + let existingCards = []; + for( let i = 0; i < posts.length; i++ ) { let post = posts[i]; + + if (existingCards.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) continue; + + existingCards.push(post.id); + /*console.log( post.content )*/ if ( i == 0 ) { newHTML += `
`; From b0051867aadf2cadc01e029ef79b79814b4c34c8 Mon Sep 17 00:00:00 2001 From: "Max L." Date: Fri, 24 Nov 2023 12:25:34 +0100 Subject: [PATCH 2/5] Fix wrong links getting their time updated --- script.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/script.js b/script.js index 02e5f8d..d7b2b46 100644 --- a/script.js +++ b/script.js @@ -95,8 +95,10 @@ const fetchPosts = async function(serverUrl, hashtag) { // updateTimesOnPage updates the time information displayed for each post const updateTimesOnPage = function() { - $('.card-text a').each(function() { - const date = new Date($(this).attr('data-time')); + $('.card-text a.time').each(function() { + const timeValue = $(this).attr('data-time'); + if (timeValue === '') return; + const date = new Date(timeValue); const newTimeAgo = timeAgo(secondsAgo(date)); $(this).text(newTimeAgo); }); @@ -118,7 +120,7 @@ const displayPost = function(post) { ${post.media_attachments[0] ? `` : ''}

${DOMPurify.sanitize(post.content)}

${post.spoiler_text ? `

${DOMPurify.sanitize(post.spoiler_text)}

` : ''} -

${timeAgo(secondsAgo(new Date(post.created_at)))}

+

${timeAgo(secondsAgo(new Date(post.created_at)))}

`; @@ -196,7 +198,7 @@ const updateCarousel = function(slides, posts) {

- ${timeAgo(secondsAgo(new Date(post.created_at)))} + ${timeAgo(secondsAgo(new Date(post.created_at)))} ${post.favourites_count ? `, ${post.favourites_count} mal favorisiert` : '' } ${post.replies_count ? `, ${post.replies_count} mal kommentiert` : '' } ${post.reblogs_count ? `, ${post.reblogs_count} mal geteilt` : '' } From 6f9459fb3e43a37d69b8b85e192bfc4b57c54eb6 Mon Sep 17 00:00:00 2001 From: "Max L." Date: Fri, 24 Nov 2023 12:26:44 +0100 Subject: [PATCH 3/5] Fix post content not being child of card-text --- script.js | 2 +- styles.css | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/script.js b/script.js index d7b2b46..2efb796 100644 --- a/script.js +++ b/script.js @@ -193,7 +193,7 @@ const updateCarousel = function(slides, posts) {

- ${post.media_attachments[0] ? `

${DOMPurify.sanitize(post.content)}

` : `

${DOMPurify.sanitize(post.content)}

`} + ${post.media_attachments[0] ? `
${DOMPurify.sanitize(post.content)}
` : `
${DOMPurify.sanitize(post.content)}
`} ${post.media_attachments[0] ? `
` : ''}
diff --git a/styles.css b/styles.css index b2f4fc5..dd40322 100644 --- a/styles.css +++ b/styles.css @@ -50,6 +50,10 @@ margin-bottom: 1px !important; } +.carousel .card-text { + font-size: 1.4em; +} + .card { font-size: 0.9em; /* adjust this value to get the desired text size */ } @@ -186,10 +190,6 @@ body { margin-bottom: 20px !important; } -.card-text ~ p { - font-size: 1.4em; -} - .card-img-bottom { max-width: 600px; max-height: 500px; From 876f2bb7ad154153ad1215fb73251e6a36ff0f97 Mon Sep 17 00:00:00 2001 From: "Max L." Date: Fri, 24 Nov 2023 12:45:28 +0100 Subject: [PATCH 4/5] Try to deal better with overflow ALso align images right in carousel --- script.js | 8 +++++++- styles.css | 3 +++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index 2efb796..f2722dd 100644 --- a/script.js +++ b/script.js @@ -185,6 +185,7 @@ const updateCarousel = function(slides, posts) { else { newHTML += `
`; } + const postContent = DOMPurify.sanitize(post.content); newHTML += `
@@ -193,7 +194,7 @@ const updateCarousel = function(slides, posts) {
- ${post.media_attachments[0] ? `
${DOMPurify.sanitize(post.content)}
` : `
${DOMPurify.sanitize(post.content)}
`} +
800 ? `style="font-size: 0.9em;"`: ``}>${postContent}
${post.media_attachments[0] ? `
` : ''}
@@ -228,6 +229,11 @@ const showCarousel = function() { $('#myCarousel').carousel("cycle"); } +const strip = function(html) { + let doc = new DOMParser().parseFromString(html, 'text/html'); + return doc.body.textContent || ""; +} + const hideCarousel = function() { // show popover document.getElementById('popover').style.opacity = '0'; diff --git a/styles.css b/styles.css index dd40322..3291ebf 100644 --- a/styles.css +++ b/styles.css @@ -52,6 +52,8 @@ .carousel .card-text { font-size: 1.4em; + overflow: hidden; + max-height: 60vh; } .card { @@ -201,6 +203,7 @@ body { margin-top: 0px !important; margin-bottom: 10px !important; align-items: center; + float: right; } .text-muted { From c274648f099c3047fcb704002693ea14f81125b5 Mon Sep 17 00:00:00 2001 From: "Max L." Date: Fri, 24 Nov 2023 13:07:14 +0100 Subject: [PATCH 5/5] Fix duration not being used for carousel --- script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index f2722dd..fa94ffb 100644 --- a/script.js +++ b/script.js @@ -180,10 +180,10 @@ const updateCarousel = function(slides, posts) { /*console.log( post.content )*/ if ( i == 0 ) { - newHTML += `
`; + newHTML += `
`; } else { - newHTML += `
`; + newHTML += `
`; } const postContent = DOMPurify.sanitize(post.content); newHTML += `