Add Library Listing page card ctrl-click support (#1796) (#1983)

static/js/utils.js

@@ -0,0 +1,15 @@
+/**
+ * handles card click navigation with modifier key support
+ * @param {Event} event - the click event
+ * @param {string} url - the URL to navigate to
+ */
+function handleCardClick(event, url) {
+  if (event.target.tagName === 'A' || event.target.closest('a')) {
+    return;
+  }
+  if (event.ctrlKey || event.metaKey || event.shiftKey) {
+    window.open(url, '_blank');
+    return;
+  }
+  window.location = url;
+}

templates/base.html

@@ -36,6 +36,7 @@
     <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script src="{% static 'js/theme_handling.js' %}"></script>
     <script src="{% static 'js/scroll-to-link.js' %}" defer></script>
+    <script src="{% static 'js/utils.js' %}"></script>
     <script src="{% static 'js/boost-gecko/main.C3hPHS6-.js' %}" defer></script>
     {% block extra_head %}
       <link href="{% static 'css/styles.css' %}" rel="stylesheet">

templates/libraries/_library_categorized_list_item.html

@@ -1,5 +1,5 @@
 <tr class="border-0 md:border border-gray-200/10 border-dotted md:border-t-0 md:border-r-0 md:border-l-0 md:border-b-1  hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out cursor-pointer"
-onclick="window.location='{% url 'library-detail' library_slug=library_version.library.slug version_slug=version_str %}'">
+onclick="handleCardClick(event, '{% url 'library-detail' library_slug=library_version.library.slug version_slug=version_str %}')">
   <td class="py-2 align-top md:w-1/5">
     <a class="mr-1 font-bold capitalize text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange"
        href="{% url 'library-detail' library_slug=library_version.library.slug version_slug=version_str %}"

templates/libraries/_library_grid_list_item.html

@@ -2,7 +2,7 @@
 {% load date_filters %}
 
 <div class="relative content-between p-3 bg-white md:rounded-lg md:shadow-lg md:p-5 dark:bg-charcoal hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out cursor-pointer"
-onclick="window.location='{% url 'library-detail' library_slug=library_version.library.slug version_slug=version_str %}'">
+onclick="handleCardClick(event, '{% url 'library-detail' library_slug=library_version.library.slug version_slug=version_str %}')">
   <div class="">
     <h3 class="pb-2 text-xl md:text-2xl capitalize border-b border-gray-700">
     <div class="flex justify-between">

templates/libraries/_library_vertical_list_item.html

@@ -1,5 +1,5 @@
 <tr class="border-0 md:border border-gray-200/10 border-dotted md:border-t-0 md:border-r-0 md:border-l-0 md:border-b-1  hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300 ease-in-out cursor-pointer"
-onclick="window.location='{% url 'library-detail' library_slug=library_version.library.slug version_slug=version_str %}'">
+onclick="handleCardClick(event, '{% url 'library-detail' library_slug=library_version.library.slug version_slug=version_str %}')">
   <td class="align-top md:w-1/5 pt-3">
     <a class="mr-1 pl-1 font-bold capitalize text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange"
        href="{% url 'library-detail' library_slug=library_version.library.slug version_slug=version_str %}">{{ library_version.library.name }}</a>