refactor popovers

pull/110/head
Aevann 2023-02-02 22:07:14 +02:00
parent 9d244af7f5
commit 8133b219a4
4 changed files with 33 additions and 57 deletions

View File

@ -134,7 +134,10 @@ function register_new_elements(e) {
const popover_triggers = document.getElementsByClassName('user-name'); const popover_triggers = document.getElementsByClassName('user-name');
for (const element of popover_triggers) { for (const element of popover_triggers) {
element.onclick = (e) => {popclick(e)}; element.onclick = (e) => {
if (!(e.ctrlKey || e.metaKey || e.shiftKey || e.altKey))
e.preventDefault();
};
} }
const expandable = document.querySelectorAll('.in-comment-image, img[alt^="![]("]'); const expandable = document.querySelectorAll('.in-comment-image, img[alt^="![]("]');

View File

@ -8,71 +8,44 @@ function pinned_timestamp(id) {
} }
} }
/** @type {HTMLImageElement} */
const popClickBadgeTemplateDOM = document.createElement("IMG"); const popClickBadgeTemplateDOM = document.createElement("IMG");
popClickBadgeTemplateDOM.classList.add("pop-badge"); popClickBadgeTemplateDOM.classList.add("pop-badge");
popClickBadgeTemplateDOM.loading = "lazy"; popClickBadgeTemplateDOM.loading = "lazy";
popClickBadgeTemplateDOM.alt = "badge"; popClickBadgeTemplateDOM.alt = "badge";
/** document.addEventListener('shown.bs.popover', (e) => {
* @param {MouseEvent} e let popover = document.getElementsByClassName("popover")
*/ popover = popover[popover.length-1]
function popclick(e) {
// We let through those methods
if(e.ctrlKey || e.metaKey || e.shiftKey || e.altKey)
return;
e.preventDefault();
if(e.currentTarget.dataset.popInfo === undefined) const author = JSON.parse(e.target.dataset.popInfo);
throw new SyntaxError("ill formed HTML! data-pop-info not present!!!");
const author = JSON.parse(e.currentTarget.dataset.popInfo); if (popover.getElementsByClassName('pop-username')[0].innerHTML == author["username"])
if(!(author instanceof Object)) return
throw new SyntaxError("data-pop-info was not valid!");
// This is terrible lol. in header.js:bs_trigger() we should add if (popover.getElementsByClassName('pop-badges')) {
// to the ANCHOR element an event handler for "show.bs.tooltip" to build this const badgesDOM = popover.getElementsByClassName('pop-badges')[0];
// when the DOM is ready. badgesDOM.innerHTML = "";
// PROBLEM: IT DOES NOT WORK :MARSEYCRAZYTROLL: idk why it should work according to for (const badge of author["badges"]) {
// boostrap docs! const badgeDOM = popClickBadgeTemplateDOM.cloneNode();
setTimeout(() => { badgeDOM.src = badge + "?b=6";
let popover = document.getElementsByClassName("popover")
popover = popover[popover.length-1]
if (popover.getElementsByClassName('pop-badges')) { badgesDOM.append(badgeDOM);
const badgesDOM = popover.getElementsByClassName('pop-badges')[0];
badgesDOM.innerHTML = "";
for (const badge of author["badges"]) {
const badgeDOM = popClickBadgeTemplateDOM.cloneNode();
badgeDOM.src = badge + "?b=6";
badgesDOM.append(badgeDOM);
}
} }
popover.getElementsByClassName('pop-banner')[0].src = author["bannerurl"]
popover.getElementsByClassName('pop-picture')[0].src = author["profile_url"]
if (author["hat"]) popover.getElementsByClassName('pop-hat')[0].src = author['hat'] + "?h=7"
popover.getElementsByClassName('pop-username')[0].innerHTML = author["username"]
if (popover.getElementsByClassName('pop-bio').length > 0) {
popover.getElementsByClassName('pop-bio')[0].innerHTML = author["bio_html"]
}
popover.getElementsByClassName('pop-postcount')[0].innerHTML = author["post_count"]
popover.getElementsByClassName('pop-commentcount')[0].innerHTML = author["comment_count"]
popover.getElementsByClassName('pop-coins')[0].innerHTML = author["coins"]
popover.getElementsByClassName('pop-view_more')[0].href = author["url"]
popover.getElementsByClassName('pop-created-date')[0].innerHTML = author["created_date"]
}, 5);
}
document.addEventListener("click", function(){
active = document.activeElement.getAttributeNode("class");
if (active && active.nodeValue == "user-name text-decoration-none"){
pops = document.getElementsByClassName('popover')
if (pops.length > 1) pops[0].remove()
} }
else document.querySelectorAll('.popover').forEach(e => e.remove());
}); popover.getElementsByClassName('pop-banner')[0].src = author["bannerurl"]
popover.getElementsByClassName('pop-picture')[0].src = author["profile_url"]
if (author["hat"]) popover.getElementsByClassName('pop-hat')[0].src = author['hat'] + "?h=7"
popover.getElementsByClassName('pop-username')[0].innerHTML = author["username"]
if (popover.getElementsByClassName('pop-bio').length > 0) {
popover.getElementsByClassName('pop-bio')[0].innerHTML = author["bio_html"]
}
popover.getElementsByClassName('pop-postcount')[0].innerHTML = author["post_count"]
popover.getElementsByClassName('pop-commentcount')[0].innerHTML = author["comment_count"]
popover.getElementsByClassName('pop-coins')[0].innerHTML = author["coins"]
popover.getElementsByClassName('pop-view_more')[0].href = author["url"]
popover.getElementsByClassName('pop-created-date')[0].innerHTML = author["created_date"]
})
function post(url) { function post(url) {
const xhr = createXhrWithFormKey(url); const xhr = createXhrWithFormKey(url);

View File

@ -168,7 +168,7 @@
{% if c.author.verified %}<i class="fas fa-badge-check align-middle ml-1 {% if c.author.verified=='Glowiefied' %}glow{% endif %}" style="color:{% if c.author.verifiedcolor %}#{{c.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{c.author.verified}}"></i> {% if c.author.verified %}<i class="fas fa-badge-check align-middle ml-1 {% if c.author.verified=='Glowiefied' %}glow{% endif %}" style="color:{% if c.author.verifiedcolor %}#{{c.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{c.author.verified}}"></i>
{% endif %} {% endif %}
<a class="user-name text-decoration-none" href="{{c.author.url}}" data-pop-info='{{c.author.json_popover(v) | tojson}}'' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="click" data-content-id="popover" tabindex="0" style="color:#{{c.author.name_color}}; font-size:12px; font-weight:bold;"> <a class="user-name text-decoration-none" href="{{c.author.url}}" data-pop-info='{{c.author.json_popover(v) | tojson}}'' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="focus" data-content-id="popover" tabindex="0" style="color:#{{c.author.name_color}}; font-size:12px; font-weight:bold;">
<div class="profile-pic-30-wrapper"> <div class="profile-pic-30-wrapper">
<img loading="lazy" src="{{c.author.profile_url}}" class="profile-pic-30 mr-2"> <img loading="lazy" src="{{c.author.profile_url}}" class="profile-pic-30 mr-2">
{% if c.author.hat_active(v)[0] -%} {% if c.author.hat_active(v)[0] -%}

View File

@ -88,7 +88,7 @@
{% if p.author.verified %}<i class="fas fa-badge-check align-middle ml-1 {% if p.author.verified=='Glowiefied' %}glow{% endif %}" style="color:{% if p.author.verifiedcolor %}#{{p.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{p.author.verified}}"></i> {% if p.author.verified %}<i class="fas fa-badge-check align-middle ml-1 {% if p.author.verified=='Glowiefied' %}glow{% endif %}" style="color:{% if p.author.verifiedcolor %}#{{p.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{p.author.verified}}"></i>
{% endif %} {% endif %}
<a class="user-name text-decoration-none" href="{{p.author.url}}" data-pop-info='{{p.author.json_popover(v) | tojson}}' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="click" data-content-id="popover" tabindex="0" style="color: #{{p.author.name_color}}; font-weight: bold;"> <a class="user-name text-decoration-none" href="{{p.author.url}}" data-pop-info='{{p.author.json_popover(v) | tojson}}' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="focus" data-content-id="popover" tabindex="0" style="color: #{{p.author.name_color}}; font-weight: bold;">
<div class="profile-pic-30-wrapper" style="margin-top:9px"> <div class="profile-pic-30-wrapper" style="margin-top:9px">
<img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-30 mr-2"> <img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-30 mr-2">
{% if p.author.hat_active(v)[0] -%} {% if p.author.hat_active(v)[0] -%}