mirror of
https://github.com/Findus23/RPGnotes.git
synced 2024-09-19 15:43:45 +02:00
images in tooltips
This commit is contained in:
parent
3b7e70f5b3
commit
eb6d84502a
3 changed files with 40 additions and 13 deletions
|
@ -1,6 +1,7 @@
|
|||
// @ts-ignore
|
||||
import {default as Popover} from "bootstrap/js/src/popover";
|
||||
// import type {Popover as PopoverType} from "bootstrap";
|
||||
import type {Popover as PopoverType} from "bootstrap";
|
||||
|
||||
|
||||
const popoverTriggerList: NodeListOf<HTMLAnchorElement> = document.querySelectorAll('.content a')
|
||||
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => {
|
||||
|
@ -9,22 +10,35 @@ const popoverList = [...popoverTriggerList].map(popoverTriggerEl => {
|
|||
if (popoverTriggerEl.host !== window.location.host) {
|
||||
return
|
||||
}
|
||||
const popover = new Popover(popoverTriggerEl, {
|
||||
const popover: PopoverType = new Popover(popoverTriggerEl, {
|
||||
content: "test",
|
||||
title: "title",
|
||||
trigger: 'hover focus',
|
||||
placement: "bottom",
|
||||
sanitize: false,
|
||||
sanitizeFn: (a: string) => a
|
||||
sanitize: true,
|
||||
html: true,
|
||||
template: '<div class="popover" role="tooltip">' +
|
||||
'<div class="popover-arrow"></div>' +
|
||||
'<h3 class="popover-header"></h3>' +
|
||||
'<div class="popover-image"></div>' +
|
||||
'<div class="popover-body"></div>' +
|
||||
'</div>',
|
||||
});
|
||||
popoverTriggerEl.addEventListener('inserted.bs.popover', (e) => {
|
||||
console.log("shown")
|
||||
fetch(popoverTriggerEl.href + "?format=json").then(response => response.json())
|
||||
.then(data => {
|
||||
popover.setContent({
|
||||
'.popover-header': data["name"],
|
||||
'.popover-body': data["description"]
|
||||
})
|
||||
.then((data: PopoverResponse) => {
|
||||
const content :{ [el: string]: string } ={
|
||||
'.popover-header': data.name,
|
||||
'.popover-body': data.description
|
||||
}
|
||||
if (data.image) {
|
||||
const img = document.createElement("img")
|
||||
img.src = data.image
|
||||
img.style.width="100%"
|
||||
content[".popover-image"] = img.outerHTML;
|
||||
}
|
||||
popover.setContent(content)
|
||||
});
|
||||
}, {once: true})
|
||||
|
||||
|
|
|
@ -89,9 +89,10 @@ footer {
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
.navbar {
|
||||
border-top: solid var(--bs-navbar-active-color) 2px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-top: solid var(--bs-navbar-active-color) 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
|
@ -129,3 +130,8 @@ footer {
|
|||
.draft {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.popover-image img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
from django.http import JsonResponse
|
||||
from sorl.thumbnail import get_thumbnail
|
||||
|
||||
from characters.models import Character
|
||||
from locations.models import Location
|
||||
|
@ -25,6 +26,7 @@ class JSONResponseMixin:
|
|||
def get_data(self, context):
|
||||
object: Character = context["object"]
|
||||
description_list = []
|
||||
image = None
|
||||
if isinstance(object, Location):
|
||||
if object.parent:
|
||||
description_list.append(f"in {object.parent}")
|
||||
|
@ -42,8 +44,13 @@ class JSONResponseMixin:
|
|||
description_list.append("magic")
|
||||
if object.description_html:
|
||||
description_list.append(html_to_text(object.description_html))
|
||||
if hasattr(object, "smaller_image") and object.smaller_image:
|
||||
image = get_thumbnail(object.smaller_image, "200").url
|
||||
if hasattr(object, "image") and object.image:
|
||||
image = get_thumbnail(object.image, "200").url
|
||||
description = ", ".join([t for t in description_list if t])
|
||||
return {
|
||||
"name": object.name,
|
||||
"description": description
|
||||
"description": description,
|
||||
"image": image
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue