From 3c848fe47c999a8c0c405fc649b2057d2167e038 Mon Sep 17 00:00:00 2001
From: Daru13 <daru14@gmail.com>
Date: Sat, 24 Nov 2018 03:37:40 +0100
Subject: [PATCH] Improve event detail popup positionning (no
 above-positionning yet).

The popup is horizontally aligned with the click location, and
vertically close to event (slightly on top of it, from below).

If the click occurs too much on the left or the right side of the
screen, the horizontal position is shifted accordingly, so that it is
never displayed outside of the screen. Note, however, that the small
arrow supposed to point the related event is not shifted as well as of
now (not as straightforward since it is a CSS pseudo-element).

This commit also removes the ability to display the popup _above_ the
event in case the click occurs too close to the bottom of the screen.
This feature should be reintroduced by a later commit once it will have
been fixed :).
---
 event/static/js/calendar.js | 36 ++++++++++++++++++++----------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/event/static/js/calendar.js b/event/static/js/calendar.js
index 02c1990..0f30b7f 100644
--- a/event/static/js/calendar.js
+++ b/event/static/js/calendar.js
@@ -906,37 +906,41 @@ class EventDetails {
   }
 
   setPopupPosition (mouseClickEvent) {
-    let eventOffset = this.event.node.offset();
+    let calendarOffset = this.event.calendar.containerNode.offset();
+
+    let eventOffset = this.event.node.position();
     let eventNodeHeight = this.event.node.outerHeight();
 
-    let detailNodeOffset = this.node.offset();
+    let detailNodeOffset = this.node.position();
     let detailsNodeWidth = this.node.outerWidth();
     let detailsNodeHeight = this.node.outerHeight();
 
-    let x = mouseClickEvent.pageX - (detailsNodeWidth / 2);
-    let y = eventOffset.top + eventNodeHeight + 10;
+    let x = mouseClickEvent.pageX - (detailsNodeWidth / 2)
+                                  - calendarOffset.left;
+    let y = eventOffset.top + eventNodeHeight + 50;
 
     // If the popup is too high to vertically fit in the window,
     // it is displayed above the event instead
-    let bottomMargin = 50; // px
-    let detailsNodeBottom = eventOffset.top
-                          + eventNodeHeight
-                          + detailsNodeHeight;
+    // let bottomMargin = 50; // px
+    // let detailsNodeBottom = y
+    //                       + calendarOffset.top
+    //                       + detailsNodeHeight;
 
-    if (detailsNodeBottom > window.innerHeight - bottomMargin) {
-      y = eventOffset.top - detailsNodeHeight - 10;
-      this.node.addClass("above-event")
-    }
+    // if (detailsNodeBottom > $(window).height() - bottomMargin) {
+    //   y = eventOffset.top - detailsNodeHeight - 10;
+    //   this.node.addClass("above-event")
+    // }
 
     // If the popup is about to be displayed outside of
     // the left/right side of the screen, correct its future x position
+    let absoluteX = x + calendarOffset.left;
     let sideMargin = 20; // px
 
-    if (x < sideMargin) {
-      x += sideMargin - x;
+    if (absoluteX < sideMargin) {
+      x += sideMargin - absoluteX;
     }
-    else if (x + detailsNodeWidth > window.innerWidth - sideMargin) {
-      x -= (x + detailsNodeWidth) - (window.innerWidth - sideMargin);
+    else if (absoluteX + detailsNodeWidth > $(window).width() - sideMargin) {
+      x -= (absoluteX + detailsNodeWidth) - ($(window).width() - sideMargin);
     }
 
     this.node.css({