michael/pyfedi
1
0
Fork 0
mirror of https://codeberg.org/rimu/pyfedi synced 2025-01-23 11:26:56 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

view image inline while browsing community

Browse source
This commit is contained in:
rimu 2024-01-06 17:21:39 +13:00
parent 9d7c3976c2
commit 3b9cf6bd18
8 changed files with 105 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
app/static/js/scripts.js
View file

@ -3,6 +3,7 @@ document.addEventListener("DOMContentLoaded", function () {
setupCommunityNameInput();
setupShowMoreLinks();
setupConfirmFirst();
setupImageExpander();
setupSubmitOnInputChange();
setupTimeTracking();
setupMobileNav();
@ -52,6 +53,38 @@ function setupAutoResize(element) {
}
function setupImageExpander() {
// Get all elements with the class "preview_image"
var imageLinks = document.querySelectorAll('.preview_image');
// Loop through each element and attach a click event listener
imageLinks.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault(); // Prevent the default behavior of the anchor link
// Check if the image is already visible
var image = this.nextElementSibling; // Assumes the image is always the next sibling
var isImageVisible = image && image.style.display !== 'none';
// Toggle the visibility of the image
if (isImageVisible) {
image.remove(); // Remove the image from the DOM
} else {
image = document.createElement('img');
image.src = this.href; // Set the image source to the href of the anchor link
image.alt = 'Image'; // Set the alt attribute for accessibility
image.className = 'preview_image_shown';
// Insert the image after the anchor link
this.parentNode.insertBefore(image, this.nextSibling);
}
// Toggle a class on the anchor to indicate whether the image is being shown or not
this.classList.toggle('imageVisible', !isImageVisible);
});
});
}
function collapseReply(comment_id) {
const reply = document.getElementById('comment_' + comment_id);
let isHidden = false;

15
app/static/scss/_typography.scss
View file

@ -206,6 +206,21 @@
content: "\e91e";
}
.fe-magnify {
position: relative;
top: 1px;
}
.fe-magnify::before {
content: "\ea08";
}
.imageVisible {
.fe-magnify::before {
content: "\ea09";
}
}
.fe-rss::before {
content: "\e9be";
}

20
app/static/structure.css
View file

@ -234,6 +234,19 @@ nav, etc which are used site-wide */
content: "\e91e";
}
.fe-magnify {
position: relative;
top: 1px;
}
.fe-magnify::before {
content: "\ea08";
}
.imageVisible .fe-magnify::before {
content: "\ea09";
}
.fe-rss::before {
content: "\e9be";
}
@ -731,4 +744,11 @@ fieldset legend {
float: right;
}
.preview_image_shown {
z-index: 1;
position: relative;
max-width: 92vw;
height: auto;
}
/*# sourceMappingURL=structure.css.map */

9
app/static/structure.scss
View file

@ -436,4 +436,11 @@ fieldset {
.profile_action_buttons {
float: right;
}
}
.preview_image_shown {
z-index: 1;
position: relative;
max-width: 92vw;
height: auto;
}

13
app/static/styles.css
View file

@ -233,6 +233,19 @@
content: "\e91e";
}
.fe-magnify {
position: relative;
top: 1px;
}
.fe-magnify::before {
content: "\ea08";
}
.imageVisible .fe-magnify::before {
content: "\ea09";
}
.fe-rss::before {
content: "\e9be";
}

2
app/templates/admin/site.html
View file

@ -17,7 +17,9 @@
{{ render_field(form.description) }}
{{ render_field(form.icon) }}
{{ render_field(form.sidebar) }}
<p class="small field_hint">HTML is allowed in this field.</p>
{{ render_field(form.legal_information) }}
<p class="small field_hint">HTML is allowed in this field.</p>
{{ render_field(form.submit) }}
</form>
</div>

2
app/templates/base.html
View file

@ -44,7 +44,7 @@
<link href="{{ url_for('static', filename='js/markdown/downarea.css') }}" type="text/css" rel="stylesheet" />
{% endif %}
{% endblock %}
<title>{% if title %}{{ title }} - {{ _('PieFed') }}{% else %}{{ _('PieFed') }}{% endif %}</title>
<title>{% if title %}{{ title }}{% else %}{{ _('PieFed') }}{% endif %}</title>
<link rel="apple-touch-icon" sizes="152x152" href="/static/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">

13
app/templates/post/_post_teaser.html
View file

@ -12,6 +12,11 @@
{% if post.type == POST_TYPE_LINK %}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank"><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" height="50" /></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() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" height="50" /></a>
{% endif %}
{% else %}
<a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}"><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" height="50" /></a>
@ -43,6 +48,14 @@
<div class="col-6">
<a href="{{ url_for('activitypub.post_ap', post_id=post.id, _anchor='replies') }}"><span class="fe fe-reply"></span></a>
<a href="{{ url_for('activitypub.post_ap', post_id=post.id, _anchor='replies') }}">{{ post.reply_count }}</a>
{% if post.type == POST_TYPE_IMAGE %}
&nbsp;
{% if post.image_id %}
<a href="{{ post.image.view_url() }}" rel="nofollow ugc" class="preview_image"><span class="fe fe-magnify"></span></a>
{% else %}
<a href="{{ post.url }}" rel="nofollow ugc" class="preview_image" target="_blank"><span class="fe fe-magnify"></span></a>
{% endif %}
{% endif %}
</div>
<div class="col-2"><a href="{{ url_for('post.post_options', post_id=post.id) }}" rel="nofollow"><span class="fe fe-options" title="Options"> </span></a></div>
</div>