use hoverIntent to open Notifications menu more intentionally

DOAJ · Jul 24, 2023 · f6f0717 · f6f0717
1 parent 6f3a86e
commit f6f0717
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 2 deletions.
diff --git a/cms/sass/components/_dropdown.scss b/cms/sass/components/_dropdown.scss
@@ -15,6 +15,10 @@
   }
 }
 
+.dropdown--notifications {
+  @extend .dropdown;
+}
+
 .dropdown__menu {
   display: none;
   padding: 0;

diff --git a/portality/static/js/notifications.js b/portality/static/js/notifications.js
@@ -58,6 +58,14 @@ doaj.notifications.notificationsReceived = function(data) {
     }
 
     $(".notification_action_link").on("click", doaj.notifications.notificationClicked);
+    $("#dropdown__trigger--notifications").hoverIntent(doaj.notifications.showDropdown, doaj.notifications.hideDropdown);
+}
+
+doaj.notifications.showDropdown = function(e) {
+    $("#top_notifications").show();
+}
+doaj.notifications.hideDropdown = function() {
+    $("#top_notifications").hide();
 }
 
 doaj.notifications.notificationClicked = function(event) {

diff --git a/portality/static/js/vendors/jquery.hoverIntent.min.js b/portality/static/js/vendors/jquery.hoverIntent.min.js
diff --git a/portality/templates/_js_includes.html b/portality/templates/_js_includes.html
@@ -3,6 +3,7 @@
 
 {# get jquery js #}
 <script type="text/javascript" src="/static/vendor/jquery-3.4.1/jquery-3.4.1.min.js"></script>
+<script src="/static/js/vendors/jquery.hoverIntent.min.js"></script>
 {# get bootstrap js #}
 {# TODO: this is probably not the right place to keep this file #}
 {# I’m using a much smaller & reduced version of Boostrap’s JS, with some modified classes and only the components we need #}

diff --git a/portality/templates/layouts/dashboard_base.html b/portality/templates/layouts/dashboard_base.html
@@ -23,8 +23,8 @@ <h2 class="sr-only">DOAJ Dashboard</h2>
         </a>
         <ul class="unstyled-list flex-center">
             {# ~~->Notifications:Feature~~ #}
-          <li class="dropdown flex-center">
-            <a href="/dashboard/notifications" class="dropdown__trigger label" role="button" aria-haspopup="true" aria-expanded="false">
+          <li class="dropdown--notifications flex-center">
+            <a href="/dashboard/notifications" class="dropdown__trigger label" id="dropdown__trigger--notifications" role="button" aria-haspopup="true" aria-expanded="false">
               <span><span data-feather="bell" aria-hidden="true"></span> Notifications <span class="js-notifications-count"></span></span>
             </a>
             <ul class="dropdown__menu notifications" id="top_notifications"></ul>