Remove js-way and add filter for showing abbreviations on mobile apps

myhpi/core/templates/core/information_page.html

@@ -12,7 +12,7 @@ <h1 class="page-title">
                 {{ page.title }}
             </span>
         </h1>
-        {{ parsed_md.0 }}
+        {{ parsed_md.0|touchify_abbrevations }}
     </div>
     <div class="col-lg-3">
         <div class="side-panel-container">

myhpi/core/templates/core/minutes.html

@@ -11,7 +11,7 @@
             <h1>{{  page.title }}</h1>
         </div>
         <div class="col-9 minutes-text">
-            {{ parsed_md.0 }}
+            {{ parsed_md.0|touchify_abbrevations }}
         </div>
         <div class="col-3 minutes-meta">
             <aside class="side-panel border-accent">

myhpi/core/templatetags/core_extras.py

@@ -49,6 +49,20 @@ def tag_external_links(content):
     return template.render(Context())
 
 
+@register.filter(name="touchify_abbrevations")
+def touchify_abbrevations(content):
+    """Takes the content of a website and inserts external link icons after every external link."""
+    external_links = re.finditer('<abbr[^>]*>[^<]*', content)
+    for link in reversed(list(external_links)):
+        content = (
+            content[: link.start() + 5]
+            + " tabindex=0"
+            + content[link.start() + 5 :]
+        )
+    template = Template("{% load bootstrap_icons %}" + content)
+    return template.render(Context())
+
+
 @register.filter(name="markdown")
 def markdown(value):
     return render_markdown(value)

myhpi/static/js/myHPI.js

@@ -109,8 +109,3 @@ window.onresize = () => {
     adaptNavbarToWindowSize()
     updateNavbarPosition()
 }
-
-/* https://stackoverflow.com/questions/12539006/tooltips-for-mobile-browsers */
-// To enable tooltips on mobile, add tabindex=0 to abbr elements.
-document.querySelectorAll("abbr")
-    .forEach(node => node.setAttribute("tabindex", "0"))