From ab6ae15836d18b8950ec07dc3ad5e4e5ee04274c Mon Sep 17 00:00:00 2001
From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com>
Date: Tue, 17 Dec 2024 23:34:32 +0000
Subject: [PATCH] Add automatic native titles to all truncateable elements

---
 internal/glance/static/js/main.js              | 18 ++++++++++++++++++
 internal/glance/static/main.css                | 11 -----------
 internal/glance/templates/markets.html         |  2 +-
 .../templates/reddit-horizontal-cards.html     |  2 +-
 .../templates/reddit-vertical-cards.html       |  2 +-
 internal/glance/templates/repository.html      |  4 ++--
 .../templates/rss-horizontal-cards-2.html      |  2 +-
 .../glance/templates/rss-horizontal-cards.html |  2 +-
 internal/glance/templates/rss-list.html        |  2 +-
 .../glance/templates/video-card-contents.html  |  2 +-
 10 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/internal/glance/static/js/main.js b/internal/glance/static/js/main.js
index 114cbde..1e823d4 100644
--- a/internal/glance/static/js/main.js
+++ b/internal/glance/static/js/main.js
@@ -619,6 +619,20 @@ function setupClocks() {
     updateClocks();
 }
 
+function setupTruncatedElementTitles() {
+    const elements = document.querySelectorAll(".text-truncate, .single-line-titles .title, .text-truncate-2-lines, .text-truncate-3-lines");
+
+    if (elements.length == 0) {
+        return;
+    }
+
+    for (let i = 0; i < elements.length; i++) {
+        const element = elements[i];
+        console.log(element.title);
+        if (element.title === "") element.title = element.textContent;
+    }
+}
+
 async function setupPage() {
     const pageElement = document.getElementById("page");
     const pageContentElement = document.getElementById("page-content");
@@ -644,6 +658,10 @@ async function setupPage() {
             contentReadyCallbacks[i]();
         }
 
+        setTimeout(() => {
+            setupTruncatedElementTitles();
+        }, 50);
+
         setTimeout(() => {
             document.body.classList.add("page-columns-transitioned");
         }, 300);
diff --git a/internal/glance/static/main.css b/internal/glance/static/main.css
index f0b8bc6..f2a7b1b 100644
--- a/internal/glance/static/main.css
+++ b/internal/glance/static/main.css
@@ -931,17 +931,6 @@ details[open] .summary::after {
     border-radius: var(--border-radius) var(--border-radius) 0 0;
 }
 
-.video-title {
-    margin-bottom: auto;
-    overflow: hidden;
-    display: block;
-    text-overflow: ellipsis;
-    line-clamp: 2;
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-}
-
 .search-icon {
     width: 2.3rem;
 }
diff --git a/internal/glance/templates/markets.html b/internal/glance/templates/markets.html
index 5cb5213..a979321 100644
--- a/internal/glance/templates/markets.html
+++ b/internal/glance/templates/markets.html
@@ -6,7 +6,7 @@
     <div class="flex items-center gap-15">
         <div class="min-width-0">
             <a{{ if ne "" .SymbolLink }} href="{{ .SymbolLink }}" target="_blank" rel="noreferrer"{{ end }} class="color-highlight size-h3 block text-truncate">{{ .Symbol }}</a>
-            <div title="{{ .Name }}" class="text-truncate">{{ .Name }}</div>
+            <div class="text-truncate">{{ .Name }}</div>
         </div>
 
         <a class="market-chart" {{ if ne "" .ChartLink }} href="{{ .ChartLink }}" target="_blank" rel="noreferrer"{{ end }}>
diff --git a/internal/glance/templates/reddit-horizontal-cards.html b/internal/glance/templates/reddit-horizontal-cards.html
index 2012435..6961216 100644
--- a/internal/glance/templates/reddit-horizontal-cards.html
+++ b/internal/glance/templates/reddit-horizontal-cards.html
@@ -18,7 +18,7 @@
                 {{ else }}
                 <div class="color-highlight size-h5 text-truncate">/r/{{ $.Subreddit }}</div>
                 {{ end }}
-                <a href="{{ .DiscussionUrl }}" title="{{ .Title }}" class="text-truncate-3-lines color-primary-if-not-visited margin-top-7 margin-bottom-auto" target="_blank" rel="noreferrer">{{ .Title }}</a>
+                <a href="{{ .DiscussionUrl }}" class="text-truncate-3-lines color-primary-if-not-visited margin-top-7 margin-bottom-auto" target="_blank" rel="noreferrer">{{ .Title }}</a>
                 <ul class="list-horizontal-text margin-top-7">
                     <li {{ dynamicRelativeTimeAttrs .TimePosted }}></li>
                     <li>{{ .Score | formatNumber }} points</li>
diff --git a/internal/glance/templates/reddit-vertical-cards.html b/internal/glance/templates/reddit-vertical-cards.html
index 38ec9e8..94c8b94 100644
--- a/internal/glance/templates/reddit-vertical-cards.html
+++ b/internal/glance/templates/reddit-vertical-cards.html
@@ -17,7 +17,7 @@
             {{ else }}
             <div class="color-highlight size-h5 text-truncate">/r/{{ $.Subreddit }}</div>
             {{ end }}
-            <a href="{{ .DiscussionUrl }}" title="{{ .Title }}" class="text-truncate-3-lines color-primary-if-not-visited margin-top-7" target="_blank" rel="noreferrer">{{ .Title }}</a>
+            <a href="{{ .DiscussionUrl }}" class="text-truncate-3-lines color-primary-if-not-visited margin-top-7" target="_blank" rel="noreferrer">{{ .Title }}</a>
             <ul class="list-horizontal-text margin-top-7">
                 <li {{ dynamicRelativeTimeAttrs .TimePosted }}></li>
                 <li>{{ .Score | formatNumber }} points</li>
diff --git a/internal/glance/templates/repository.html b/internal/glance/templates/repository.html
index 5013b00..d0d1b8e 100644
--- a/internal/glance/templates/repository.html
+++ b/internal/glance/templates/repository.html
@@ -35,7 +35,7 @@
     </ul>
     <ul class="list list-gap-2 min-width-0">
         {{ range .Repository.PullRequests }}
-        <li><a class="color-primary-if-not-visited text-truncate block" title="{{ .Title }}" target="_blank" rel="noreferrer" href="https://github.com/{{ $.Repository.Name }}/pull/{{ .Number }}">{{ .Title }}</a></li>
+        <li><a class="color-primary-if-not-visited text-truncate block" target="_blank" rel="noreferrer" href="https://github.com/{{ $.Repository.Name }}/pull/{{ .Number }}">{{ .Title }}</a></li>
         {{ end }}
     </ul>
 </div>
@@ -52,7 +52,7 @@
     </ul>
     <ul class="list list-gap-2 min-width-0">
         {{ range .Repository.Issues }}
-        <li><a class="color-primary-if-not-visited text-truncate block" title="{{ .Title }}" target="_blank" rel="noreferrer" href="https://github.com/{{ $.Repository.Name }}/issues/{{ .Number }}">{{ .Title }}</a></li>
+        <li><a class="color-primary-if-not-visited text-truncate block" target="_blank" rel="noreferrer" href="https://github.com/{{ $.Repository.Name }}/issues/{{ .Number }}">{{ .Title }}</a></li>
         {{ end }}
     </ul>
 </div>
diff --git a/internal/glance/templates/rss-horizontal-cards-2.html b/internal/glance/templates/rss-horizontal-cards-2.html
index 0404fce..496e56a 100644
--- a/internal/glance/templates/rss-horizontal-cards-2.html
+++ b/internal/glance/templates/rss-horizontal-cards-2.html
@@ -16,7 +16,7 @@
             </svg>
             {{ end }}
             <div class="rss-card-2-content padding-inline-widget">
-                <a href="{{ .Link }}" title="{{ .Title }}" class="block text-truncate color-primary-if-not-visited" target="_blank" rel="noreferrer">{{ .Title }}</a>
+                <a href="{{ .Link }}" class="block text-truncate color-primary-if-not-visited" target="_blank" rel="noreferrer">{{ .Title }}</a>
                 <ul class="list-horizontal-text flex-nowrap margin-top-5">
                     <li class="shrink-0" {{ dynamicRelativeTimeAttrs .PublishedAt }}></li>
                     <li class="min-width-0 text-truncate">{{ .ChannelName }}</li>
diff --git a/internal/glance/templates/rss-horizontal-cards.html b/internal/glance/templates/rss-horizontal-cards.html
index 0f79b56..d8eef92 100644
--- a/internal/glance/templates/rss-horizontal-cards.html
+++ b/internal/glance/templates/rss-horizontal-cards.html
@@ -16,7 +16,7 @@
             </svg>
             {{ end }}
             <div class="margin-bottom-widget padding-inline-widget flex flex-column grow">
-                <a href="{{ .Link }}" title="{{ .Title }}" class="text-truncate-3-lines color-primary-if-not-visited margin-top-10 margin-bottom-auto" target="_blank" rel="noreferrer">{{ .Title }}</a>
+                <a href="{{ .Link }}" class="text-truncate-3-lines color-primary-if-not-visited margin-top-10 margin-bottom-auto" target="_blank" rel="noreferrer">{{ .Title }}</a>
                 <ul class="list-horizontal-text flex-nowrap margin-top-7">
                     <li class="shrink-0" {{ dynamicRelativeTimeAttrs .PublishedAt }}></li>
                     <li class="min-width-0 text-truncate">{{ .ChannelName }}</li>
diff --git a/internal/glance/templates/rss-list.html b/internal/glance/templates/rss-list.html
index 0b6222a..c14eb60 100644
--- a/internal/glance/templates/rss-list.html
+++ b/internal/glance/templates/rss-list.html
@@ -4,7 +4,7 @@
 <ul class="list list-gap-14 collapsible-container{{ if .SingleLineTitles }} single-line-titles{{ end }}" data-collapse-after="{{ .CollapseAfter }}">
     {{ range .Items }}
     <li>
-        <a class="title size-title-dynamic color-primary-if-not-visited" href="{{ .Link }}" target="_blank" rel="noreferrer" title="{{ .Title }}">{{ .Title }}</a>
+        <a class="title size-title-dynamic color-primary-if-not-visited" href="{{ .Link }}" target="_blank" rel="noreferrer">{{ .Title }}</a>
         <ul class="list-horizontal-text flex-nowrap">
             <li {{ dynamicRelativeTimeAttrs .PublishedAt }}></li>
             <li class="min-width-0">
diff --git a/internal/glance/templates/video-card-contents.html b/internal/glance/templates/video-card-contents.html
index 375fd08..c6340c5 100644
--- a/internal/glance/templates/video-card-contents.html
+++ b/internal/glance/templates/video-card-contents.html
@@ -1,7 +1,7 @@
 {{ define "video-card-contents" }}
 <img class="video-thumbnail thumbnail" loading="lazy" src="{{ .ThumbnailUrl }}" alt="">
 <div class="margin-top-10 margin-bottom-widget flex flex-column grow padding-inline-widget">
-    <a class="video-title color-primary-if-not-visited" href="{{ .Url }}" target="_blank" rel="noreferrer" title="{{ .Title }}">{{ .Title }}</a>
+    <a class="text-truncate-2-lines margin-bottom-auto color-primary-if-not-visited" href="{{ .Url }}" target="_blank" rel="noreferrer">{{ .Title }}</a>
     <ul class="list-horizontal-text flex-nowrap margin-top-7">
         <li class="shrink-0" {{ dynamicRelativeTimeAttrs .TimePosted }}></li>
         <li class="min-width-0">