more keyboard shortcuts

app/static/js/scripts.js

@@ -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');
+    const votableElements = document.querySelectorAll('.post_teaser, .comments .comment, .post_type_image, .post_type_normal');
-    postTeasers.forEach(postTeaser => {
+    votableElements.forEach(votable => {
-        postTeaser.addEventListener('mouseover', event => {
+        votable.addEventListener('mouseover', event => {
             currentPost = event.currentTarget;
         });
-        postTeaser.addEventListener('mouseout', event => {
+        votable.addEventListener('mouseout', event => {
             currentPost = null;
         });
     });

app/templates/post/_post_full.html

@@ -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 %}

app/templates/post/_post_teaser.html

@@ -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() }}"