images in tooltips

static/js/popover.ts

@@ -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})
 

static/scss/_misc.scss

@@ -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;
+}

utils/views.py

@@ -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
         }