script to expand original filename if truncated

js/expand-filename.js

@@ -0,0 +1,53 @@
+/*
+ * expand-filename.js
+ * https://github.com/vichan-devel/vichan/blob/master/js/expand-filename.js
+ *
+ * Released under the MIT license
+ * Copyright (c) 2024 Perdedora <weav@anche.no>
+ *
+ * Usage:
+ *   $config['additional_javascript'][] = 'js/expand-filename.js';
+ *
+ */
+
+function doFilename(element) {
+    const filenames = element.querySelectorAll('[data-truncate="true"]');
+    filenames.forEach(filename => {
+        filename.addEventListener('mouseover', event => addHover(event.target));
+        filename.addEventListener('mouseout', event => removeHover(event.target));
+    });
+}
+
+function addHover(element) {
+    element.dataset.truncatedFilename = element.textContent;
+    element.textContent = element.download;
+}
+
+function removeHover(element) {
+    element.textContent = element.dataset.truncatedFilename;
+    delete element.dataset.truncatedFilename;
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    doFilename(document);
+
+    // Create a MutationObserver to watch for new elements
+    const observer = new MutationObserver(mutationsList => {
+        mutationsList.forEach(mutation => {
+            if (mutation.type === 'childList') {
+                mutation.addedNodes.forEach(addedNode => {
+                    if (addedNode.nodeType === Node.ELEMENT_NODE) {
+                        // Apply `doFilename` to newly added elements
+                        doFilename(addedNode);
+                    }
+                });
+            }
+        });
+    });
+
+    // Start observing the document body for changes
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
+});

js/expand-too-long.js

@@ -1,39 +0,0 @@
-/*
- * expand-too-long.js
- * https://github.com/vichan-devel/vichan/blob/master/js/expand-too-long.js
- *
- * Released under the MIT license
- * Copyright (c) 2013-2014 Marcin Łabanowski <marcin@6irc.net>
- *
- * Usage:
- *   $config['additional_javascript'][] = 'js/jquery.min.js';
- *   $config['additional_javascript'][] = 'js/expand-too-long.js';
- *      
- */
-
-$(function() {
-	var do_expand = function() {
-		$(this).find('a').click(function(e) {
-			e.preventDefault();
-
-			var url = $(this).attr('href');
-			var body = $(this).parents('.body');
-
-			$.ajax({
-				url: url,
-				context: document.body,
-				success: function(data) {
-					var content = $(data).find('#'+url.split('#')[1]).parent().parent().find(".body").first().html();
-
-					body.html(content);
-				}
-			});
-		});
-	};
-
-        $('.toolong').each(do_expand);
-                       
-        $(document).on("new_post", function(e, post) {
-		$(post).find('.toolong').each(do_expand)
-	});
-});