thubrecht/poulpe
1
0
Fork 0
Code Issues 5 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Improve event detail popup positionning (no above-positionning yet).

Browse source 
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 :).
This commit is contained in:
Daru13 2018-11-24 03:37:40 +01:00
parent a0d158ca77
commit 3c848fe47c
1 changed files with 20 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
event/static/js/calendar.js
View file

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