From f6f0717c5b9c83aa477bf06aa317bccf75c0e5eb Mon Sep 17 00:00:00 2001
From: Aga <aga@cottagelabs.com>
Date: Mon, 24 Jul 2023 12:29:04 +0100
Subject: [PATCH] use hoverIntent to open Notifications menu more intentionally

---
 cms/sass/components/_dropdown.scss                    | 4 ++++
 portality/static/js/notifications.js                  | 8 ++++++++
 portality/static/js/vendors/jquery.hoverIntent.min.js | 9 +++++++++
 portality/templates/_js_includes.html                 | 1 +
 portality/templates/layouts/dashboard_base.html       | 4 ++--
 5 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 portality/static/js/vendors/jquery.hoverIntent.min.js

diff --git a/cms/sass/components/_dropdown.scss b/cms/sass/components/_dropdown.scss
index 07524b5101..47ab4dc5e7 100644
--- 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
index 6bf24b3010..ad11ea577d 100644
--- 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
new file mode 100644
index 0000000000..270354a739
--- /dev/null
+++ b/portality/static/js/vendors/jquery.hoverIntent.min.js
@@ -0,0 +1,9 @@
+/*!
+ * hoverIntent v1.10.2 // 2020.04.28 // jQuery v1.7.0+
+ * http://briancherne.github.io/jquery-hoverIntent/
+ *
+ * You may use hoverIntent under the terms of the MIT license. Basically that
+ * means you are free to use hoverIntent as long as this header is left intact.
+ * Copyright 2007-2019 Brian Cherne
+ */
+!function(factory){"use strict";"function"==typeof define&&define.amd?define(["jquery"],factory):"object"==typeof module&&module.exports?module.exports=factory(require("jquery")):jQuery&&!jQuery.fn.hoverIntent&&factory(jQuery)}(function($){"use strict";function track(ev){cX=ev.pageX,cY=ev.pageY}function isFunction(value){return"function"==typeof value}var cX,cY,_cfg={interval:100,sensitivity:6,timeout:0},INSTANCE_COUNT=0,compare=function(ev,$el,s,cfg){if(Math.sqrt((s.pX-cX)*(s.pX-cX)+(s.pY-cY)*(s.pY-cY))<cfg.sensitivity)return $el.off(s.event,track),delete s.timeoutId,s.isActive=!0,ev.pageX=cX,ev.pageY=cY,delete s.pX,delete s.pY,cfg.over.apply($el[0],[ev]);s.pX=cX,s.pY=cY,s.timeoutId=setTimeout(function(){compare(ev,$el,s,cfg)},cfg.interval)};$.fn.hoverIntent=function(handlerIn,handlerOut,selector){var instanceId=INSTANCE_COUNT++,cfg=$.extend({},_cfg);$.isPlainObject(handlerIn)?(cfg=$.extend(cfg,handlerIn),isFunction(cfg.out)||(cfg.out=cfg.over)):cfg=isFunction(handlerOut)?$.extend(cfg,{over:handlerIn,out:handlerOut,selector:selector}):$.extend(cfg,{over:handlerIn,out:handlerIn,selector:handlerOut});function handleHover(e){var ev=$.extend({},e),$el=$(this),hoverIntentData=$el.data("hoverIntent");hoverIntentData||$el.data("hoverIntent",hoverIntentData={});var state=hoverIntentData[instanceId];state||(hoverIntentData[instanceId]=state={id:instanceId}),state.timeoutId&&(state.timeoutId=clearTimeout(state.timeoutId));var mousemove=state.event="mousemove.hoverIntent.hoverIntent"+instanceId;if("mouseenter"===e.type){if(state.isActive)return;state.pX=ev.pageX,state.pY=ev.pageY,$el.off(mousemove,track).on(mousemove,track),state.timeoutId=setTimeout(function(){compare(ev,$el,state,cfg)},cfg.interval)}else{if(!state.isActive)return;$el.off(mousemove,track),state.timeoutId=setTimeout(function(){!function(ev,$el,s,out){var data=$el.data("hoverIntent");data&&delete data[s.id],out.apply($el[0],[ev])}(ev,$el,state,cfg.out)},cfg.timeout)}}return this.on({"mouseenter.hoverIntent":handleHover,"mouseleave.hoverIntent":handleHover},cfg.selector)}});
\ No newline at end of file
diff --git a/portality/templates/_js_includes.html b/portality/templates/_js_includes.html
index 6fa762915e..50f3abdeff 100644
--- 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
index d6366735b4..137f05cdca 100644
--- 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>