forked from rDrama/rDrama
better popovers
parent
95c25d73e6
commit
66d806c5f7
|
|
@ -8,71 +8,6 @@ function pinned_timestamp(id) {
|
|||
}
|
||||
}
|
||||
|
||||
const popClickBadgeTemplateDOM = document.createElement("IMG");
|
||||
popClickBadgeTemplateDOM.classList.add("pop-badge");
|
||||
popClickBadgeTemplateDOM.loading = "lazy";
|
||||
popClickBadgeTemplateDOM.alt = "badge";
|
||||
|
||||
document.addEventListener('shown.bs.popover', (e) => {
|
||||
const popfix = document.getElementById("popover-fix")
|
||||
if (popfix) document.body.removeChild(popfix);
|
||||
|
||||
const popover_old = document.getElementsByClassName("popover")[0];
|
||||
const popover = document.createElement("DIV");
|
||||
popover.innerHTML = popover_old.outerHTML;
|
||||
popover.id = "popover-fix";
|
||||
|
||||
const author = JSON.parse(e.target.dataset.popInfo);
|
||||
|
||||
if (popover.getElementsByClassName('pop-username')[0].innerHTML == author["username"])
|
||||
return
|
||||
|
||||
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=10";
|
||||
|
||||
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-marseybux')[0].innerHTML = author["marseybux"]
|
||||
popover.getElementsByClassName('pop-view_more')[0].href = author["url"]
|
||||
popover.getElementsByClassName('pop-created-date')[0].innerHTML = author["created_date"]
|
||||
popover.getElementsByClassName('pop-id')[0].innerHTML = author["id"]
|
||||
if (author["original_usernames"]) {
|
||||
popover.getElementsByClassName('pop-original-usernames')[0].innerHTML = author["original_usernames"]
|
||||
}
|
||||
|
||||
document.body.appendChild(popover);
|
||||
document.body.removeChild(popover_old);
|
||||
})
|
||||
|
||||
document.addEventListener("click", function(){
|
||||
const cellText = document.getSelection();
|
||||
if (cellText.type === 'Range') e.preventDefault();
|
||||
|
||||
active = document.activeElement.getAttributeNode("class");
|
||||
if (!(active && active.nodeValue == "user-name text-decoration-none")){
|
||||
const popfix = document.getElementById("popover-fix")
|
||||
if (popfix) document.body.removeChild(popfix);
|
||||
}
|
||||
});
|
||||
|
||||
function post(url) {
|
||||
const xhr = createXhrWithFormKey(url);
|
||||
xhr[0].send(xhr[1]);
|
||||
|
|
@ -130,3 +65,69 @@ function bet_vote(t, oid, kind) {
|
|||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//POPOVER
|
||||
|
||||
const popClickBadgeTemplateDOM = document.createElement("IMG");
|
||||
popClickBadgeTemplateDOM.classList.add("pop-badge");
|
||||
popClickBadgeTemplateDOM.loading = "lazy";
|
||||
popClickBadgeTemplateDOM.alt = "badge";
|
||||
|
||||
const popover = document.getElementById("popover");
|
||||
|
||||
let pop_instance
|
||||
let is_popover_visible = false
|
||||
|
||||
document.addEventListener("click", function() {
|
||||
|
||||
if (is_popover_visible && document.getSelection().type != 'Range') {
|
||||
pop_instance.hide()
|
||||
}
|
||||
|
||||
active = document.activeElement;
|
||||
|
||||
if (active.getAttribute("data-bs-toggle") == "popover") {
|
||||
const author = JSON.parse(active.dataset.popInfo);
|
||||
|
||||
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=10";
|
||||
|
||||
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-marseybux')[0].innerHTML = author["marseybux"]
|
||||
popover.getElementsByClassName('pop-view_more')[0].href = author["url"]
|
||||
popover.getElementsByClassName('pop-created-date')[0].innerHTML = author["created_date"]
|
||||
popover.getElementsByClassName('pop-id')[0].innerHTML = author["id"]
|
||||
if (author["original_usernames"]) {
|
||||
popover.getElementsByClassName('pop-original-usernames')[0].innerHTML = author["original_usernames"]
|
||||
}
|
||||
|
||||
pop_instance = bootstrap.Popover.getOrCreateInstance(active, {
|
||||
content: popover.innerHTML,
|
||||
html: true,
|
||||
});
|
||||
pop_instance.show()
|
||||
is_popover_visible = true
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -198,20 +198,6 @@ function bs_trigger(e) {
|
|||
return bootstrap.Tooltip.getOrCreateInstance(element);
|
||||
});
|
||||
|
||||
const popoverTriggerList = [].slice.call(e.querySelectorAll('[data-bs-toggle="popover"]'));
|
||||
popoverTriggerList.map(function(popoverTriggerEl) {
|
||||
const popoverId = popoverTriggerEl.getAttribute('data-content-id');
|
||||
let contentEl;
|
||||
try {contentEl = e.getElementById(popoverId);}
|
||||
catch(t) {contentEl = document.getElementById(popoverId);}
|
||||
if (contentEl) {
|
||||
return bootstrap.Popover.getOrCreateInstance(popoverTriggerEl, {
|
||||
content: contentEl.innerHTML,
|
||||
html: true,
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
if (typeof update_speed_emoji_modal == 'function') {
|
||||
let forms = e.querySelectorAll("textarea, .allow-emojis");
|
||||
forms.forEach(i => {
|
||||
|
|
|
|||
|
|
@ -169,7 +169,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="focus" 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="manual" 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" alt="@{{c.author.username}}'s profile picture" src="{{c.author.profile_url}}" class="profile-pic-30 mr-2">
|
||||
{% if c.author.hat_active(v)[0] -%}
|
||||
|
|
|
|||
|
|
@ -69,7 +69,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="focus" 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="manual" 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" alt="@{{p.author.username}}'s profile picture" src="{{p.author.profile_url}}" class="profile-pic-30 mr-2">
|
||||
{% if p.author.hat_active(v)[0] -%}
|
||||
|
|
|
|||
Loading…
Reference in New Issue