From 52ab785764b4f1edd33a574dd8979e4f23f97867 Mon Sep 17 00:00:00 2001
From: Arjun Singh Yadav <arjunsinghy96@gmail.com>
Date: Thu, 1 Jul 2021 00:04:44 +0530
Subject: [PATCH] fix: set answer notification alignment to bottom (#27022)

On focus to the answer submition notification, the
notification was scrolled to center of screen. This
behaviour was on Chrome(87+) browser.
This commits overrides the focus jQuery plugin to
set the alignment of answer notifications to the bottom of the
viewport.

Fix the custom focus jQuery plugin

Co-authored-by: Agrendalath
---
 lms/templates/courseware/courseware.html | 42 ++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/lms/templates/courseware/courseware.html b/lms/templates/courseware/courseware.html
index 2e53b5611a..9391881336 100644
--- a/lms/templates/courseware/courseware.html
+++ b/lms/templates/courseware/courseware.html
@@ -112,6 +112,48 @@ from openedx.features.course_experience import course_home_page_title, DISABLE_C
       </script>
   % endif
 
+  <script type="text/javascript">
+    /* Helper function isInViewport checks whether
+    the given element is in viewport vertically or not */
+    function isInViewport(el) {
+      const scroll = window.scrollY || window.pageYOffset
+      const elementTop = el.getBoundingClientRect().top + scroll
+      const viewport = {
+        top: scroll,
+        bottom: scroll + window.innerHeight,
+      }
+      const elementMid = elementTop + el.clientHeight/2
+      // Returns true if the middle of the element is in the viewport.
+      return elementMid >= viewport.top && elementMid <= viewport.bottom
+    }
+
+    /* Add a jQuery plugin to override the focus behavior.
+    When focused, if the element in not in the viewport then
+    the element will be scrolled to the bottom of the viewport.
+    */
+    (function ($) {
+      $.fn.extend({
+        focus: (function(orig) {
+          return function(delay, fn) {
+            orig.apply(this, arguments);
+            this.each(function(){
+              var elem = this;
+              // Scroll only when the element is not in the viewport and it contains the notification-btn.
+              if (elem.classList.contains('notification-btn') && !isInViewport(elem)) {
+                this.scrollIntoView({
+                  behaviour: 'auto',
+                  block: 'end',
+                })
+              }
+            })
+            return this;
+          }
+        })($.fn.focus),
+
+      })
+    })(jQuery)
+  </script>
+
 ${HTML(fragment.foot_html())}
 
 </%block>