From 6b503044db5175df01b77be1114fb1c89a929786 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20=C5=A0pa=C4=8Dek?= <mail@michalspacek.cz>
Date: Sun, 14 Jan 2024 04:08:54 +0100
Subject: [PATCH] Display a custom ABBR title which also works on mobiles

On mobiles, there's no way to display the ABBR title attribute. So let's create one way.

Heavily inspired by this https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse/ and a bit by this https://stackoverflow.com/a/69353021/10537872

The relevant changes are that the title is read from the `data-title` attribute, which is created on mouseover from the regular `title` attribute which is then removed and added back on mouseout. Trying to keep the original attribute there for screen readers etc.

On mouseout, the `blur()` method is also called which "cancels" the focus state, in which the element is when it was clicked on. Without this, if you clicked the ABBR tag on desktop, the title would be visible until you've clicked again somewhere.

JS is also used to add `tabindex=0` because the attribute tag is created by Texy and it would require some more work to add it to HTML. The attribute makes the element reachable by using a keyboard.
---
 .../www.michalspacek.cz/i/css/screen.css      | 20 ++++++++++++++++++-
 .../www.michalspacek.cz/i/js/scripts.js       | 12 +++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/site/public/www.michalspacek.cz/i/css/screen.css b/site/public/www.michalspacek.cz/i/css/screen.css
index 11bb11dcb..440ce7055 100644
--- a/site/public/www.michalspacek.cz/i/css/screen.css
+++ b/site/public/www.michalspacek.cz/i/css/screen.css
@@ -72,7 +72,25 @@ blockquote {
 q::before { content: "«"; }
 q::after { content: "»"; }
 img { border: none; }
-abbr.dtstart, abbr.dtend { text-decoration: none; }
+abbr.dtstart, abbr.dtend { text-decoration: none !important; }
+abbr[data-title] {
+	position: relative;
+	text-decoration: underline dotted;
+}
+abbr[data-title]:hover::after, abbr[data-title]:focus::after {
+	content: attr(data-title);
+	position: absolute;
+	left: 0;
+	bottom: -2.1em;
+	width: auto;
+	white-space: nowrap;
+	background-color: #DEDEDE;
+	color: #1E1E1E;
+	border-radius: 2px;
+	box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
+	font-size: small;
+	padding: 3px 5px;
+}
 code, .highlight pre code {
 	padding: 0.2em 0.1em;
 	margin: 0;
diff --git a/site/public/www.michalspacek.cz/i/js/scripts.js b/site/public/www.michalspacek.cz/i/js/scripts.js
index 2f34e26fc..128ae624f 100644
--- a/site/public/www.michalspacek.cz/i/js/scripts.js
+++ b/site/public/www.michalspacek.cz/i/js/scripts.js
@@ -109,4 +109,16 @@ App.ready(document, function () {
 			'behavior': 'smooth',
 		});
 	}
+
+	App.on('mouseover', 'abbr', function (event) {
+		event.target.dataset.title = event.target.title;
+		event.target.removeAttribute('title');
+	});
+	App.on('mouseout', 'abbr', function (event) {
+		event.target.title = event.target.dataset.title;
+		event.target.blur();
+	});
+	for (const item of document.querySelectorAll('abbr')) {
+		item.tabIndex = 0;
+	}
 });