This commit is contained in:
Aevann1 2021-12-11 00:49:39 +02:00
parent 3b6330e757
commit 4adf03be48
7 changed files with 123 additions and 165 deletions

View file

@ -13,4 +13,80 @@ function expandDesktopImage(image) {
document.getElementById("desktop-expanded-image").src = image.replace("200w_d.webp", "giphy.webp");
document.getElementById("desktop-expanded-image-link").href = image;
document.getElementById("desktop-expanded-image-wrap-link").href=image;
};
};
function popovertrigger() {
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
const popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
const popoverId = popoverTriggerEl.getAttribute('data-content-id');
const contentEl = document.getElementById(popoverId);
if (contentEl) {
return new bootstrap.Popover(popoverTriggerEl, {
content: contentEl.innerHTML,
html: true,
});
}
})
}
popovertrigger()
function popoverEventListener(value){
//get the id of the popover that will be created for this user
var content_id = value.getAttributeNode("data-content-id").value;
//add an event listener that will trigger the creation of a replacement popover when the username is clicked
value.addEventListener("click", function(){createNewPopover(content_id)});
}
function checkIfPopover(){
//check if a replacement popover already exists and remove it if so
if (document.getElementById("popover-fix") != null){
document.body.removeChild(document.getElementById("popover-fix"));
}
}
function closePopover(e){
//get the element that was clicked on
active = document.activeElement;
//if the element is not a username then check if a popover replacement already exists
if (active.attributes.getNamedItem("data-bs-toggle").nodeValue != "popover"){
checkIfPopover();
}
}
function createNewPopover(value){
//check for an existing replacement popover and then copy the original popover node
checkIfPopover();
var popover_old = document.getElementsByClassName("popover")[0];
var popover_new = document.createElement("DIV");
//copy the contents of the original popover
popover_new.innerHTML = popover_old.outerHTML;
popover_new.id = "popover-fix";
//append the replacement popover to the document and remove the original one
document.body.appendChild(popover_new);
document.body.removeChild(popover_old);
}
window.addEventListener('load', (e) => {
//grab all of the usernames on the page and create event listeners for them
var usernames = document.querySelectorAll("a[data-bs-toggle=popover]");
usernames.forEach(popoverEventListener);
//create an event listener to check if a clicked element is a username
document.addEventListener("click", function(e){closePopover(e)});
});
function popclick(author) {
for (const x of document.getElementsByClassName('pop-banner')) {x.src = author["bannerurl"]}
for (const x of document.getElementsByClassName('pop-picture')) {x.src = author["profile_url"]}
for (const x of document.getElementsByClassName('pop-username')) {x.innerHTML = author["username"]}
for (const x of document.getElementsByClassName('pop-bio')) {x.innerHTML = author["bio_html"]}
for (const x of document.getElementsByClassName('pop-postcount')) {x.innerHTML = author["post_count"]}
for (const x of document.getElementsByClassName('pop-commentcount')) {x.innerHTML = author["comment_count"]}
for (const x of document.getElementsByClassName('pop-coins')) {x.innerHTML = author["coins"]}
for (const x of document.getElementsByClassName('pop-viewmore')) {x.href = author["url"]}
}

View file

@ -1,48 +0,0 @@
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
const popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
const popoverId = popoverTriggerEl.getAttribute('data-content-id');
const contentEl = document.getElementById(popoverId);
if (contentEl) {
return new bootstrap.Popover(popoverTriggerEl, {
content: contentEl.innerHTML,
html: true,
});
}
})
function eventasdf(value){
var content_id = value.getAttributeNode("data-content-id").value;
value.addEventListener("click", function(){jhkj(content_id)});
}
function checkIfBussy(){
if (document.getElementById("bussy") != null){
document.body.removeChild(document.getElementById("bussy"));
}
}
function dfgh(e){
active = document.activeElement;
if (active.getAttributeNode("class") == null || active.getAttributeNode("class").nodeValue != "user-name text-decoration-none"){
checkIfBussy();
}
}
function jhkj(value){
checkIfBussy();
var popover_shit = document.getElementsByClassName("popover")[0];
var uiop = document.createElement("DIV");
uiop.innerHTML = popover_shit.outerHTML;
uiop.id = "bussy";
document.body.appendChild(uiop);
document.body.removeChild(popover_shit);
}
var usernames = document.querySelectorAll("a.user-name");
usernames.forEach(eventasdf);
document.addEventListener("click", function(e){dfgh(e)});

View file

@ -14,18 +14,7 @@ function viewmore(pid,sort,offset) {
tooltipTriggerList.map(function(element){
return new bootstrap.Tooltip(element);
});
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
const popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
const popoverId = popoverTriggerEl.getAttribute('data-content-id');
const contentEl = document.getElementById(popoverId);
if (contentEl) {
return new bootstrap.Popover(popoverTriggerEl, {
content: contentEl.innerHTML,
html: true,
});
}
})
popovertrigger()
}
}
xhr.send(form)

View file

@ -267,6 +267,7 @@ class User(Base):
@property
@lazy
def bio_html_eager(self):
if self.bio_html == None: return ''
return self.bio_html.replace('data-src', 'src').replace('src="/assets/images/loading.webp"', '')
@property
@ -434,7 +435,7 @@ class User(Base):
'profile_url': self.profile_url,
'bannerurl': self.bannerurl,
'bio': self.bio,
'bio_html': self.bio_html,
'bio_html': self.bio_html_eager,
'flair': self.customtitle
}

View file

@ -27,54 +27,46 @@
}
</style>
{% macro single_comment(c, level=1) %}
<div style="display:none" id="popover-{{c.id}}">
<div style="display:none" id="popover">
<div class="popover-user-profile" role="tooltip">
<img loading="lazy" class="w-100 h-64 object-cover" src="{{c.author.banner_url}}">
<div class="d-flex align-items-end px-3 mt-n6 mb-3">
<img loading="lazy" class="avatar-72 rounded img-thumbnail shadow-sm" src="{{c.author.profile_url}}">
<div class="px-3 text-truncate">
<h5 class="text-truncate text-black">{{c.author.username}}</h5>
<img loading="lazy" class="pop-banner w-100 h-64 object-cover">
<div class="d-flex align-items-end px-3 mt-n6 mb-3">
<img loading="lazy" class="pop-picture avatar-72 rounded img-thumbnail shadow-sm">
<div class="px-3 text-truncate">
<h5 class="pop-username text-truncate text-black"></h5>
</div>
</div>
<div class="px-3">
<span class="pop-bio popover-bio text-black"></span>
</div>
</div>
<div class="px-3">
<span class="popover-bio text-black">{% if c.author.bio_html %}{{c.author.bio_html_eager | safe}}{% endif %}</span>
</div>
<div class="ml-3 mr-3 my-2">
{% for b in c.author.badges %}
{% if b.url %}
<a rel="nofollow noopener noreferrer" href="{{b.url}}"><img width="32" loading="lazy" src="{{b.path}}" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{b.name}} - {{b.text}}"></a>
{% else %}
<img width="32" loading="lazy" src="{{b.path}}" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{b.name}} - {{b.text}}">
{% endif %}
{% endfor %}
</div>
<div class="ml-3 mr-3 my-2">
</div>
<div class="border-top d-flex align-items-center p-3 gap-3 smol">
<div class="border-top d-flex align-items-center p-3 gap-3 smol">
<span>
<strong class="text-black">{{c.author.post_count}}</strong>
<span class="text-black">posts</span>
<strong class="pop-postcount text-black"></strong>
<span class="text-black">posts</span>
</span>
<span class="ml-3">
<strong class="text-black">{{c.author.comment_count}}</strong>
<span class="text-black">comments</span>
<strong class="pop-commentcount text-black"></strong>
<span class="text-black">comments</span>
</span>
<span class="ml-3">
<strong class="text-black">{{c.author.coins}}</strong>
<strong class="pop-coins text-black"></strong>
<span class="text-black">coins</span>
</span>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="{{c.author.url}}" target="_blank" class="ml-auto text-decoration-none">
View
<i class="fas fa-arrow-right fa-sm px-1"></i>
<a target="_blank" class="pop-viewmore ml-auto text-decoration-none">
View
<i class="fas fa-arrow-right fa-sm px-1"></i>
</a>
</div>
</div>
</div>
</div>
{% macro single_comment(c, level=1) %}
{% set ups=c.upvotes %}
{% set downs=c.downvotes %}
{% set score=ups-downs %}
@ -212,7 +204,7 @@
{% if c.author.verified %}<i class="fas fa-badge-check align-middle ml-1" style="color:{% if c.author.verifiedcolor %}#{{c.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{c.author.verified}}"></i>
{% endif %}
<a class="user-name text-decoration-none" data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="focus" data-content-id="popover-{{c.id}}" href="javascript:void(0)" tabindex="0" style="color:#{{c.author.namecolor}}; font-size:12px; font-weight:bold;"><img loading="lazy" src="{{c.author.profile_url}}" class="profile-pic-25 mr-2"><span {% if c.author.patron and not c.distinguish_level %}class="patron" style="background-color:#{{c.author.namecolor}};"{% elif c.distinguish_level and 'rama' in request.host %}class="mod"{% endif %}>{{c.author.username}}</span></a>
<a class="user-name text-decoration-none" onclick='popclick({{c.author.json | tojson}})' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="focus" data-content-id="popover" href="javascript:void(0)" tabindex="0" style="color:#{{c.author.namecolor}}; font-size:12px; font-weight:bold;"><img loading="lazy" src="{{c.author.profile_url}}" class="profile-pic-25 mr-2"><span {% if c.author.patron and not c.distinguish_level %}class="patron" style="background-color:#{{c.author.namecolor}};"{% elif c.distinguish_level and 'rama' in request.host %}class="mod"{% endif %}>{{c.author.username}}</span></a>
{% if c.author.customtitle %}&nbsp;<bdi style="color: #{{c.author.titlecolor}}">&nbsp;{% if c.author.quadrant %}<img loading="lazy" height="20" src="/assets/images/quadrants/{{c.author.quadrant}}.webp?v=1">{% endif %}{{c.author.customtitle | safe}}</bdi>{% endif %}
{% if c.parent_comment_id and not standalone and level != 1 %}<a href="#comment-{{ c.parent_comment_id }}-only" class="text-muted ml-2"><i class="fas fa-reply fa-sm fa-fw fa-flip-horizontal mr-1"></i>{{ c.parent_comment.author.username }}</a>{% endif %}
@ -764,8 +756,7 @@
{% include "expanded_image_modal.html" %}
<script src="/assets/js/popover.js?v=12"></script>
<script src="/assets/js/comments+submission_listing.js?v=9"></script>
<script src="/assets/js/comments+submission_listing.js?v=72"></script>
<script src="/assets/js/comments.js?v=13"></script>
<script>

View file

@ -171,52 +171,6 @@
{% block actionsModal %}
<div style="display:none" id="popover-{{p.id}}">
<div class="popover-user-profile" role="tooltip">
<img loading="lazy" class="w-100 h-64 object-cover" src="{{p.author.banner_url}}">
<div class="d-flex align-items-end px-3 mt-n6 mb-3">
<img loading="lazy" class="avatar-72 rounded img-thumbnail shadow-sm" src="{{p.author.profile_url}}">
<div class="px-3 text-truncate">
<h5 class="text-truncate text-black">{{p.author.username}}</h5>
</div>
</div>
<div class="px-3">
<span class="popover-bio text-black">{% if p.author.bio_html %}{{p.author.bio_html_eager | safe}}{% endif %}</span>
</div>
<div class="ml-3 mr-3 my-2">
{% for b in p.author.badges %}
{% if b.url %}
<a rel="nofollow noopener noreferrer" href="{{b.url}}"><img width="32" loading="lazy" src="{{b.path}}" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{b.name}} - {{b.text}}"></a>
{% else %}
<img width="32" loading="lazy" src="{{b.path}}" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{b.name}} - {{b.text}}">
{% endif %}
{% endfor %}
</div>
<div class="border-top d-flex align-items-center p-3 gap-3 smol">
<span>
<strong class="text-black">{{p.author.post_count}}</strong>
<span class="text-black">posts</span>
</span>
<span class="ml-3">
<strong class="text-black">{{p.author.comment_count}}</strong>
<span class="text-black">comments</span>
</span>
<span class="ml-3">
<strong class="text-black">{{p.author.coins}}</strong>
<span class="text-black">coins</span>
</span>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="{{p.author.url}}" target="_blank" class="ml-auto text-decoration-none">
View
<i class="fas fa-arrow-right fa-sm px-1"></i>
</a>
</div>
</div>
</div>
<div class="modal fade modal-sm-bottom d-md-none" id="actionsModal" tabindex="-1" role="dialog" aria-labelledby="actionsModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
@ -366,7 +320,7 @@
{% if p.active_flags %}<a class="btn btn-primary" href="javascript:void(0)" style="padding:1px 5px; font-size:10px;" onclick="document.getElementById('flaggers').classList.toggle('d-none')">{{p.active_flags}} Reports</a>{% endif %}
{% if p.author.verified %}<i class="fas fa-badge-check align-middle ml-1" style="color:{% if p.author.verifiedcolor %}#{{p.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{p.author.verified}}"></i>
{% endif %}
<a class="user-name text-decoration-none" data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="focus" data-content-id="popover-{{p.id}}" href="javascript:void(0)" tabindex="0" style="color: #{{p.author.namecolor}}; font-weight: bold;" class="user-name"><img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-25 mr-2"><span {% if p.author.patron and not p.distinguish_level %}class="patron" style="background-color:#{{p.author.namecolor}};"{% elif p.distinguish_level and 'rama' in request.host %}class="mod"{% endif %}>{{p.author.username}}</span></a>{% if p.author.customtitle %}&nbsp;<bdi style="color: #{{p.author.titlecolor}}">&nbsp;{% if p.author.quadrant %}<img loading="lazy" height="20" src="/assets/images/quadrants/{{p.author.quadrant}}.webp?v=1">{% endif %}{{p.author.customtitle | safe}}</bdi>{% endif %}
<a class="user-name text-decoration-none" onclick='popclick({{p.author.json | tojson}})' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="focus" data-content-id="popover" href="javascript:void(0)" tabindex="0" style="color: #{{p.author.namecolor}}; font-weight: bold;" class="user-name"><img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-25 mr-2"><span {% if p.author.patron and not p.distinguish_level %}class="patron" style="background-color:#{{p.author.namecolor}};"{% elif p.distinguish_level and 'rama' in request.host %}class="mod"{% endif %}>{{p.author.username}}</span></a>{% if p.author.customtitle %}&nbsp;<bdi style="color: #{{p.author.titlecolor}}">&nbsp;{% if p.author.quadrant %}<img loading="lazy" height="20" src="/assets/images/quadrants/{{p.author.quadrant}}.webp?v=1">{% endif %}{{p.author.customtitle | safe}}</bdi>{% endif %}
<span data-bs-toggle="tooltip" data-bs-placement="bottom" id="timestamp" onmouseover="timestamp('timestamp','{{p.created_utc}}')">&nbsp;{{p.age_string}}</span>
({% if p.realurl(v) %}<a href="/search/posts/?q=domain%3A{{p.domain}}&sort=new&t=all" {% if not v or v.newtabexternal %}target="_blank"{% endif %}>{{p.domain}}</a>{% else %}text post{% endif %})
@ -805,7 +759,7 @@
</div>
{% if offset %}
<script src="/assets/js/viewmore.js?v=3"></script>
<script src="/assets/js/viewmore.js?v=4"></script>
{% endif %}
{% elif not p.replies and p.deleted_utc == 0 %}

View file

@ -12,46 +12,40 @@
<script src="/assets/js/new_comments_count.js?v=53"></script>
{% endif %}
{% for p in listing %}
<script>
</script>
<div style="display:none" id="popover-{{p.id}}">
<div style="display:none" id="popover">
<div class="popover-user-profile" role="tooltip">
<img loading="lazy" class="w-100 h-64 object-cover" src="{{p.author.banner_url}}">
<img loading="lazy" class="pop-banner w-100 h-64 object-cover">
<div class="d-flex align-items-end px-3 mt-n6 mb-3">
<img loading="lazy" class="avatar-72 rounded img-thumbnail shadow-sm" src="{{p.author.profile_url}}">
<img loading="lazy" class="pop-picture avatar-72 rounded img-thumbnail shadow-sm">
<div class="px-3 text-truncate">
<h5 class="text-truncate text-black">{{p.author.username}}</h5>
<h5 class="pop-username text-truncate text-black"></h5>
</div>
</div>
<div class="px-3">
<span class="popover-bio text-black">{% if p.author.bio_html %}{{p.author.bio_html_eager | safe}}{% endif %}</span>
<span class="pop-bio popover-bio text-black"></span>
</div>
<div class="ml-3 mr-3 my-2">
{% for b in p.author.badges %}
{% if b.url %}
<a rel="nofollow noopener noreferrer" href="{{b.url}}"><img width="32" loading="lazy" src="{{b.path}}" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{b.name}} - {{b.text}}"></a>
{% else %}
<img width="32" loading="lazy" src="{{b.path}}" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{b.name}} - {{b.text}}">
{% endif %}
{% endfor %}
</div>
<div class="border-top d-flex align-items-center p-3 gap-3 smol">
<span>
<strong class="text-black">{{p.author.post_count}}</strong>
<strong class="pop-postcount text-black"></strong>
<span class="text-black">posts</span>
</span>
<span class="ml-3">
<strong class="text-black">{{p.author.comment_count}}</strong>
<strong class="pop-commentcount text-black"></strong>
<span class="text-black">comments</span>
</span>
<span class="ml-3">
<strong class="text-black">{{p.author.coins}}</strong>
<strong class="pop-coins text-black"></strong>
<span class="text-black">coins</span>
</span>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="{{p.author.url}}" target="_blank" class="ml-auto text-decoration-none">
<a target="_blank" class="pop-viewmore ml-auto text-decoration-none">
View
<i class="fas fa-arrow-right fa-sm px-1"></i>
</a>
@ -59,6 +53,8 @@
</div>
</div>
{% for p in listing %}
<script>
(() => {
{% if not v or v.highlightcomments %}
@ -186,7 +182,7 @@
{% if p.active_flags %}<a class="btn btn-primary" href="javascript:void(0)" style="padding:1px 5px; font-size:10px;" onclick="document.getElementById('flaggers-{{p.id}}').classList.toggle('d-none')">{{p.active_flags}} Reports</a>{% endif %}
{% if p.author.verified %}<i class="fas fa-badge-check align-middle ml-1" style="color:{% if p.author.verifiedcolor %}#{{p.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{p.author.verified}}"></i>
{% endif %}
<a class="user-name text-decoration-none" data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="focus" data-content-id="popover-{{p.id}}" href="javascript:void(0)" tabindex="0" style="color: #{{p.author.namecolor}}; font-weight: bold;"><img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-25 mr-2"><span {% if p.author.patron and not p.distinguish_level %}class="patron" style="background-color:#{{p.author.namecolor}};"{% elif p.distinguish_level and 'rama' in request.host %}class="mod"{% endif %}>{{p.author.username}}</span></a>{% if p.author.customtitle %}<bdi style="color: #{{p.author.titlecolor}}">&nbsp;&nbsp;{% if p.author.quadrant %}<img loading="lazy" height="20" src="/assets/images/quadrants/{{p.author.quadrant}}.webp?v=1">{% endif %}{{p.author.customtitle | safe}}</bdi>{% endif %}
<a class="user-name text-decoration-none" onclick='popclick({{p.author.json | tojson}})' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="focus" data-content-id="popover" href="javascript:void(0)" tabindex="0" style="color: #{{p.author.namecolor}}; font-weight: bold;"><img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-25 mr-2"><span {% if p.author.patron and not p.distinguish_level %}class="patron" style="background-color:#{{p.author.namecolor}};"{% elif p.distinguish_level and 'rama' in request.host %}class="mod"{% endif %}>{{p.author.username}}</span></a>{% if p.author.customtitle %}<bdi style="color: #{{p.author.titlecolor}}">&nbsp;&nbsp;{% if p.author.quadrant %}<img loading="lazy" height="20" src="/assets/images/quadrants/{{p.author.quadrant}}.webp?v=1">{% endif %}{{p.author.customtitle | safe}}</bdi>{% endif %}
<span data-bs-toggle="tooltip" data-bs-placement="bottom" onmouseover="timestamp('timestamp-{{p.id}}','{{p.created_utc}}')" id="timestamp-{{p.id}}">&nbsp;{{p.age_string}}</span>
&nbsp;
({% if p.realurl(v) %}<a href="/search/posts/?q=domain%3A{{p.domain}}&sort=new&t=all" target="_blank">{{p.domain}}</a>{% else %}text post{% endif %})
@ -658,6 +654,5 @@
</style>
<script src="/assets/js/clipboard.js?v=3"></script>
<script src="/assets/js/popover.js?v=12"></script>
<script src="/assets/js/comments+submission_listing.js?v=9"></script>
<script src="/assets/js/comments+submission_listing.js?v=71"></script>
<script src="/assets/js/submission_listing.js?v=10"></script>