more keyboard shortcuts

This commit is contained in:
rimu 2024-01-20 09:47:36 +13:00
parent cdc685ba8a
commit 70768dadff
3 changed files with 26 additions and 10 deletions

View file

@ -366,29 +366,45 @@ var currentPost;
function setupKeyboardShortcuts() {
document.addEventListener('keydown', function(event) {
if (document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
var didSomething = false;
if (event.key === 'a') {
if(currentPost) {
currentPost.querySelector('.upvote_button').click();
didSomething = true;
}
} else if (event.key === 'z') {
if(currentPost) {
currentPost.querySelector('.downvote_button').click();
didSomething = true;
}
} else if (event.key === 'x') {
if(currentPost) {
currentPost.querySelector('.preview_image').click();
didSomething = true;
}
} else if (event.key === 'l') {
if(currentPost) {
currentPost.querySelector('.post_link').click();
didSomething = true;
}
} else if (event.key === 'Enter') {
if(document.activeElement.classList.contains('downvote_button') || document.activeElement.classList.contains('upvote_button')) {
document.activeElement.click();
didSomething = true;
}
}
event.preventDefault();
if(didSomething) {
event.preventDefault();
}
}
});
const postTeasers = document.querySelectorAll('.post_teaser, .comments .comment');
postTeasers.forEach(postTeaser => {
postTeaser.addEventListener('mouseover', event => {
const votableElements = document.querySelectorAll('.post_teaser, .comments .comment, .post_type_image, .post_type_normal');
votableElements.forEach(votable => {
votable.addEventListener('mouseover', event => {
currentPost = event.currentTarget;
});
postTeaser.addEventListener('mouseout', event => {
votable.addEventListener('mouseout', event => {
currentPost = null;
});
});

View file

@ -70,7 +70,7 @@
</h1>
{% if post.type == POST_TYPE_LINK and post.image_id and not (post.url and 'youtube.com' in post.url) %}
<div class="url_thumbnail">
<a href="{{ post.url }}" target="_blank"><img src="{{ post.image.thumbnail_url() }}" alt="{{ post.image.alt_text }}"
<a href="{{ post.url }}" target="_blank" rel="nofollow ugc" class="post_link"><img src="{{ post.image.thumbnail_url() }}" alt="{{ post.image.alt_text }}"
width="{{ post.image.thumbnail_width }}" height="{{ post.image.thumbnail_height }}" /></a>
</div>
{% endif %}
@ -81,7 +81,7 @@
{% if post.edited_at %} edited {{ moment(post.edited_at).fromNow() }}{% endif %}</small>
</p>
{% if post.type == POST_TYPE_LINK %}
<p><small><a href="{{ post.url }}" rel="nofollow ugc" target="_blank">{{ post.url|shorten_url }}
<p><small><a href="{{ post.url }}" rel="nofollow ugc" target="_blank" class="post_link">{{ post.url|shorten_url }}
<img src="/static/images/external_link_black.svg" class="external_link_icon" alt="External link" /></a>
</small></p>
{% if 'youtube.com' in post.url %}
@ -89,12 +89,12 @@
{% endif %}
{% elif post.type == POST_TYPE_IMAGE %}
<div class="post_image">
<a href="{{ post.image.view_url() }}" target="_blank"><img src="{{ post.image.view_url() }}" alt="{{ post.image.alt_text }}"
<a href="{{ post.image.view_url() }}" target="_blank" class="post_link" rel="nofollow ugc"><img src="{{ post.image.view_url() }}" alt="{{ post.image.alt_text }}"
width="{{ post.image.width }}" height="{{ post.image.height }}" /></a>
</div>
{% else %}
{% if post.image_id and not (post.url and 'youtube.com' in post.url) %}
<a href="{{ post.image.view_url() }}" target="_blank"><img src="{{ post.image.thumbnail_url() }}" alt="{{ post.image.alt_text }}"
<a href="{{ post.image.view_url() }}" target="_blank" class="post_link" rel="nofollow ugc"><img src="{{ post.image.thumbnail_url() }}" alt="{{ post.image.alt_text }}"
width="{{ post.image.thumbnail_width }}" height="{{ post.image.thumbnail_height }}" /></a>
{% endif %}
{% endif %}

View file

@ -16,7 +16,7 @@
<div class="thumbnail">
{% if post.type == POST_TYPE_LINK %}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Read article') }}"><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" height="50" /></a>
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" height="50" class="post_link" /></a>
{% elif post.type == POST_TYPE_IMAGE %}
{% if post.image_id %}
<a href="{{ post.image.view_url() }}" rel="nofollow ugc" target="_blank"><img src="{{ post.image.thumbnail_url() }}"