refactor popovers
parent
9d244af7f5
commit
8133b219a4
|
|
@ -134,7 +134,10 @@ function register_new_elements(e) {
|
|||
|
||||
const popover_triggers = document.getElementsByClassName('user-name');
|
||||
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^="![]("]');
|
||||
|
|
|
|||
|
|
@ -8,71 +8,44 @@ function pinned_timestamp(id) {
|
|||
}
|
||||
}
|
||||
|
||||
/** @type {HTMLImageElement} */
|
||||
const popClickBadgeTemplateDOM = document.createElement("IMG");
|
||||
popClickBadgeTemplateDOM.classList.add("pop-badge");
|
||||
popClickBadgeTemplateDOM.loading = "lazy";
|
||||
popClickBadgeTemplateDOM.alt = "badge";
|
||||
|
||||
/**
|
||||
* @param {MouseEvent} e
|
||||
*/
|
||||
function popclick(e) {
|
||||
// We let through those methods
|
||||
if(e.ctrlKey || e.metaKey || e.shiftKey || e.altKey)
|
||||
return;
|
||||
e.preventDefault();
|
||||
document.addEventListener('shown.bs.popover', (e) => {
|
||||
let popover = document.getElementsByClassName("popover")
|
||||
popover = popover[popover.length-1]
|
||||
|
||||
if(e.currentTarget.dataset.popInfo === undefined)
|
||||
throw new SyntaxError("ill formed HTML! data-pop-info not present!!!");
|
||||
const author = JSON.parse(e.target.dataset.popInfo);
|
||||
|
||||
const author = JSON.parse(e.currentTarget.dataset.popInfo);
|
||||
if(!(author instanceof Object))
|
||||
throw new SyntaxError("data-pop-info was not valid!");
|
||||
if (popover.getElementsByClassName('pop-username')[0].innerHTML == author["username"])
|
||||
return
|
||||
|
||||
// This is terrible lol. in header.js:bs_trigger() we should add
|
||||
// to the ANCHOR element an event handler for "show.bs.tooltip" to build this
|
||||
// when the DOM is ready.
|
||||
// PROBLEM: IT DOES NOT WORK :MARSEYCRAZYTROLL: idk why it should work according to
|
||||
// boostrap docs!
|
||||
setTimeout(() => {
|
||||
let popover = document.getElementsByClassName("popover")
|
||||
popover = popover[popover.length-1]
|
||||
if (popover.getElementsByClassName('pop-badges')) {
|
||||
const badgesDOM = popover.getElementsByClassName('pop-badges')[0];
|
||||
badgesDOM.innerHTML = "";
|
||||
for (const badge of author["badges"]) {
|
||||
const badgeDOM = popClickBadgeTemplateDOM.cloneNode();
|
||||
badgeDOM.src = badge + "?b=6";
|
||||
|
||||
if (popover.getElementsByClassName('pop-badges')) {
|
||||
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);
|
||||
}
|
||||
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) {
|
||||
const xhr = createXhrWithFormKey(url);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
{% 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">
|
||||
<img loading="lazy" src="{{c.author.profile_url}}" class="profile-pic-30 mr-2">
|
||||
{% if c.author.hat_active(v)[0] -%}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
{% 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">
|
||||
<img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-30 mr-2">
|
||||
{% if p.author.hat_active(v)[0] -%}
|
||||
|
|
|
|||
Loading…
Reference in New Issue