harmacist/vichan
1
0
Fork 0
forked from GithubBackups/vichan
Code Pull Requests Activity

post-hover.js: refactor and add support for small screens

Browse Source
This commit is contained in:
Zankaria 2024-08-18 11:52:30 +02:00 committed by Zankaria
parent dffc22ddf3
commit 9eb36fe3f3
1 changed files with 81 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
js/post-hover.js
View File

@ -20,6 +20,18 @@
*/ */
if (!window.matchMedia('(any-hover: none)').matches) { if (!window.matchMedia('(any-hover: none)').matches) {
onReady(function() { onReady(function() {
let isScreenSmall = false
/*
* Set up screen size detection.
* If the method is not defined, suppose the screen is always not-small.
*/
if (window.matchMedia) {
let query = window.matchMedia('(max-width: 48em)');
query.addEventListener('change', (e) => isScreenSmall = e.matches);
isScreenSmall = query.matches;
}
let dontFetchAgain = []; let dontFetchAgain = [];
initHover = function() { initHover = function() {
let link = $(this); let link = $(this);
@ -58,36 +70,82 @@ if (!window.matchMedia('(any-hover: none)').matches) {
let post = false; let post = false;
let hovering = false; let hovering = false;
let hoveredAt; let hoveredAt;
let updatePreviewPosition = function(pageX, pageY, hoverPreview) {
let scrollTop = $(window).scrollTop();
if (link.is("[data-thread]")) {
scrollTop = 0;
}
let epy = pageY;
if (link.is("[data-thread]")) {
epy -= $(window).scrollTop();
}
let top = (epy ? epy : hoveredAt['y']) - 10;
if (epy < scrollTop + 15) {
top = scrollTop;
} else if (epy > scrollTop + $(window).height() - hoverPreview.height() - 15) {
top = scrollTop + $(window).height() - hoverPreview.height() - 15;
}
let hovery = pageY ? pageY : hoveredAt['y'];
if ((hovery - top) > 20){
top = hovery;
}
let previewX;
if (isScreenSmall) {
previewX = 0;
} else {
previewX = (pageX ? pageX : hoveredAt['x']) + 1
}
hoverPreview.css('left', previewX).css('top', top);
};
link.hover(function(e) { link.hover(function(e) {
hovering = true; hovering = true;
hoveredAt = {'x': e.pageX, 'y': e.pageY}; hoveredAt = {'x': e.pageX, 'y': e.pageY};
let startHover = function(link) { let startHover = function(link) {
if (post.is(':visible') && if ($.contains(post[0], link[0])) {
// link links to itself or to op; ignore
} else if (post.is(':visible') &&
post.offset().top >= $(window).scrollTop() && post.offset().top >= $(window).scrollTop() &&
post.offset().top + post.height() <= $(window).scrollTop() + $(window).height()) { post.offset().top + post.height() <= $(window).scrollTop() + $(window).height()) {
// post is in view // Post is in view, highlight it.
post.addClass('highlighted'); post.addClass('highlighted');
} else { } else {
let newPost = post.clone(); // Creates the preview, and displays it,
newPost.find('>.reply, >br').remove(); let hoverPreview = post.clone();
newPost.find('span.mentioned').remove(); hoverPreview.find('>.reply, >br').remove();
newPost.find('a.post_anchor').remove(); hoverPreview.find('a.post_anchor').remove();
newPost hoverPreview
.attr('id', 'post-hover-' + id) .attr('id', 'post-hover-' + id)
.attr('data-board', board) .attr('data-board', board)
.addClass('post-hover') .addClass('post-hover')
.css('border-style', 'solid') .css('display', 'inline-block')
.css('box-shadow', '1px 1px 1px #999')
.css('display', 'block')
.css('position', 'absolute') .css('position', 'absolute')
.css('font-style', 'normal') .css('font-style', 'normal')
.css('z-index', '100') .css('z-index', '100');
.addClass('reply').addClass('post')
if (isScreenSmall) {
hoverPreview
.css('margin-top', '1em')
.css('border-top', 'solid')
.css('border-bottom', 'solid');
} else {
hoverPreview
.css('margin-left', '1em')
.css('border-style', 'solid');
}
hoverPreview.addClass('reply').addClass('post')
.insertAfter(link.parent()) .insertAfter(link.parent())
link.trigger('mousemove'); updatePreviewPosition(e.pageX, e.pageY, hoverPreview);
} }
}; };
@ -133,6 +191,8 @@ if (!window.matchMedia('(any-hover: none)').matches) {
}); });
} }
}, function() { }, function() {
// Remove the preview.
hovering = false; hovering = false;
if (!post) { if (!post) {
return; return;
@ -144,33 +204,19 @@ if (!window.matchMedia('(any-hover: none)').matches) {
} }
$('.post-hover').remove(); $('.post-hover').remove();
}).mousemove(function(e) { }).mousemove(function(e) {
// Update the preview position if the mouse moves.
if (!post) { if (!post) {
return; return;
} }
let hover = $('#post-hover-' + id + '[data-board="' + board + '"]'); // The actual displayed preview.
if (hover.length == 0) { let hoverPreview = $('#post-hover-' + id + '[data-board="' + board + '"]');
if (hoverPreview.length === 0) {
return; return;
} }
let scrollTop = $(window).scrollTop(); updatePreviewPosition(e.pageX, e.pageY, hoverPreview);
if (link.is("[data-thread]")) {
scrollTop = 0;
}
let epy = e.pageY;
if (link.is("[data-thread]")) {
epy -= $(window).scrollTop();
}
let top = (epy ? epy : hoveredAt['y']) - 10;
if (epy < scrollTop + 15) {
top = scrollTop;
} else if (epy > scrollTop + $(window).height() - hover.height() - 15) {
top = scrollTop + $(window).height() - hover.height() - 15;
}
hover.css('left', (e.pageX ? e.pageX : hoveredAt['x'])).css('top', top);
}); });
}; };