Skip to content

Commit

Permalink
Merge pull request #43 from chnm/feature/modal-forensics
Browse files Browse the repository at this point in the history 
This PR adds the forensic images modal to the manuscript page
  • Loading branch information
@hepplerj
hepplerj authored Aug 15, 2024
2 parents 08fe9a5 + 1dfcf1e commit f122a1c
Show file tree
Hide file tree
Showing 7 changed files with 171 additions and 78 deletions.
2 changes: 1 addition & 1 deletion config/settings.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
import environ
from dotenv import load_dotenv

load_dotenv()
load_dotenv(verbose=True, override=True)

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve(strict=True).parent.parent
Expand Down
13 changes: 2 additions & 11 deletions denig/models.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,6 @@ class Image(models.Model):
choices=IMAGE_TYPES,
default="recto",
)

thumbnail = ImageSpecField(
source="image",
processors=[ResizeToFill(400, 350)],
Expand All @@ -233,7 +232,8 @@ def __str__(self):
def image_preview(self):
if self.image:
return mark_safe(
'<img src="%s" style="width:100px; height:100px;" />' % self.image.url
'<img src="%s" style="width:100px; height:100px;" />'
% self.thumbnail.url
)
else:
return "No image attached"
Expand Down Expand Up @@ -349,15 +349,6 @@ def file_url(self):
if self.item_file and hasattr(self.item_file, "url"):
return self.item_file.url

# def admin_thumbnails(self):
# """Return a thumbnail for the document."""
# return Fragment.admin_thumbnails(
# images=[image["image"].size(height=200) for image in self.images],
# labels=[image["label"] for image in self.images],
# )

# admin_thumbnails.short_description = "Images"


class MusicScore(ImportExportMixin, models.Model):
title = models.CharField(max_length=255, blank=True)
Expand Down
45 changes: 24 additions & 21 deletions denig/views.py
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
from urllib.parse import parse_qs, urlencode, urlparse, urlunparse

from django.http import HttpRequest
from django.shortcuts import render
from django.shortcuts import get_object_or_404, render
from django.urls import reverse
from django.views import generic

Expand Down Expand Up @@ -43,13 +43,10 @@ def education(request: HttpRequest):


class DocumentListView(generic.ListView):
paginate_by = (
# to get the first page layout to work, we need to offset by an odd number
11
)
model = Document
context_object_name = "document_list"
template_name = "manuscript.html"
paginate_by = 13

def get_queryset(self):
# This method ensures the documents are ordered by 'document_id'
Expand All @@ -63,6 +60,7 @@ def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
page_obj = context.get("page_obj")
context["is_first_page"] = page_obj and page_obj.number == 1

return context


Expand Down Expand Up @@ -104,10 +102,7 @@ def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)

# Get the current document
try:
current_document = self.get_queryset().get(slug=self.kwargs["slug"])
except Document.DoesNotExist:
current_document = None
current_document = get_object_or_404(Document, slug=self.kwargs["slug"])

# Get previous and next pages
try:
Expand Down Expand Up @@ -159,21 +154,29 @@ def get_context_data(self, **kwargs):
if next_page.attached_images.all().exists():
next_image_url = next_page.attached_images.all()[0].image.url
cleaned_next_image_url = self.clean_url(next_image_url)
print(
f"Next image URL: {next_image_url}, Cleaned next image URL: {cleaned_next_image_url}"
)
else:
cleaned_next_image_url = None

context["previous_page"] = previous_page
context["next_page"] = next_page
context["next_page_id"] = next_page_id
context["current_page"] = current_page
context["page_number"] = page_number
context["cleaned_url"] = cleaned_url
context["next_image_url"] = cleaned_next_image_url
context["all_pages"] = Document.objects.all().order_by("document_id")
context["fragments"] = self.object.fragment_set.order_by("line_number")
# Provide the forensic images if available
if current_document.attached_images.filter(image_type="forensics").exists():
forensic_images = current_document.attached_images.filter(
image_type="forensics"
)
else:
forensic_images = None

context = {
"previous_page": previous_page,
"next_page": next_page,
"next_page_id": next_page_id,
"current_page": current_page,
"page_number": page_number,
"cleaned_url": cleaned_url,
"next_image_url": cleaned_next_image_url,
"all_pages": Document.objects.all().order_by("document_id"),
"fragments": self.object.fragment_set.order_by("line_number"),
"forensic_images": forensic_images,
}

return context

Expand Down
9 changes: 9 additions & 0 deletions templates/forensics_partial.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<div class="grid grid-cols-3 gap-4">
{% for image in forensic_images %}
<div class="forensic-image">
<a href="{{ image.url }}" target="_blank">
<img src="{{ image.thumbnail.url }}" alt="Forensic Image" class="thumbnail">
</a>
</div>
{% endfor %}
</div>
71 changes: 56 additions & 15 deletions templates/manuscript.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,32 +24,73 @@ <h1>The Manuscript.</h1>

{% if page_obj %} <!--document_list-->
<div class="grid grid-cols-2 md:grid-cols-2 sm:grid-cols-1 gap-2">
{% for document in page_obj %}
{% if is_first_page and forloop.first %}
<div></div> {# Empty element for the left side #}
{% if is_first_page %}
<div></div> {# Empty element for the left side #}
{% if page_obj|length > 0 %}
<div>
{% with document=page_obj.0 %}
{% if document.attached_images.all %}
{% for image in document.attached_images.all %}
<a href="{% url 'manuscript_page' document.slug %}">
<img src="{{ image.thumbnail.url }}" class="h-auto w-full" alt="Cover page {{document.page_range}}"
loading="lazy" />
</a>
<p class="prose-figcaption font-sans">
{{ document.page_range }} ({{document.docside}})
</p>
{% endfor %}
{% else %}
{# Handle case where no images are attached #}
<p>No images available</p>
{% endif %}
{% endwith %}
</div>
{% endif %}
<div>
{% if document.attached_images.all %}
{% for image in document.attached_images.all %}
<a href="{% url 'manuscript_page' document.id %}">
{% for document in page_obj|slice:"1:" %}
<div>
{% if document.attached_images.all %}
{% for image in document.attached_images.all %}
{% if image.image_type == "recto" or image.image_type == "verso" %}
<a href="{% url 'manuscript_page' document.slug %}">
<img src="{{ image.thumbnail.url }}" class="h-auto w-full"
alt="Manuscript page {{document.page_range}}" loading="lazy" />
</a>
<p class="prose-figcaption font-sans">
Page {{ document.page_range }} ({{document.docside}})
</p>
{% endif %}
{% endfor %}
{% else %}
{# Handle case where no images are attached #}
<p>No images available</p>
{% endif %}
</div>
{% endfor %}
{% else %}
{% for document in page_obj %}
<div>
{% if document.attached_images.all %}
{% for image in document.attached_images.all %}
{% if image.image_type == "recto" or image.image_type == "verso" %}
<a href="{% url 'manuscript_page' document.slug %}">
<img src="{{ image.thumbnail.url }}" class="h-auto w-full"
alt="Manuscript page {{document.page_range}}" load="lazy" />
alt="Manuscript page {{document.page_range}}" loading="lazy" />
</a>
<p class="prose-figcaption font-sans">
Page {{ document.page_range }} ({{document.docside}})
</p>
{% endif %}
{% endfor %}
{% else %}
{# Handle case where no images are attached #}
<p>No images available</p>
{% endif %}
</div>
{% endfor %}
{% endfor %}
{% else %}
{# Handle case where no images are attached #}
<p>No images available</p>
{% endif %}
</div>
{% endfor %}
{% endif %}
</div>
{% endif %}

</div>

<nav aria-label="Page navigation">
Expand Down
28 changes: 28 additions & 0 deletions templates/manuscript_musicscore.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,29 @@
<div class="relative max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-2">
<div class="mt-12 grid grid-cols-4 gap-2">
<div class="col-span-3">
<div id="loading-spinner" class="flex justify-center items-center h-full">
<svg class="h-32 w-32 animate-spin" viewBox="0 0 100 100">
<circle
fill="none"
stroke-width="10"
class="stroke-current opacity-40"
cx="50"
cy="50"
r="40"
/>
<circle
fill="none"
stroke-width="10"
class="stroke-current"
stroke-dasharray="250"
stroke-dashoffset="210"
cx="50"
cy="50"
r="40"
/>
</svg>
</div>

<div id="viewer1" class="openseadragon">
<script type="text/javascript">
// remove the Signature and Expiration from the URL
Expand All @@ -30,6 +53,11 @@
homeFillsViewer: false,
visibilityRatio: 1,
});
viewer.addHandler('open', function () {
document.getElementById('loading-spinner').style.display = 'none';
document.getElementById('openseadragon_viewer').classList.remove('hidden');
});

</script>
</div>

Expand Down
81 changes: 51 additions & 30 deletions templates/manuscript_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,9 @@
<div class="col-span-3">
<div id="loading-spinner" class="flex justify-center items-center h-full">
<svg class="h-32 w-32 animate-spin" viewBox="0 0 100 100">
<circle
fill="none"
stroke-width="10"
class="stroke-current opacity-40"
cx="50"
cy="50"
r="40"
/>
<circle
fill="none"
stroke-width="10"
class="stroke-current"
stroke-dasharray="250"
stroke-dashoffset="210"
cx="50"
cy="50"
r="40"
/>
<circle fill="none" stroke-width="10" class="stroke-current opacity-40" cx="50" cy="50" r="40" />
<circle fill="none" stroke-width="10" class="stroke-current" stroke-dasharray="250"
stroke-dashoffset="210" cx="50" cy="50" r="40" />
</svg>
</div>
<div id="openseadragon_viewer" class="openseadragon">
Expand Down Expand Up @@ -105,17 +90,56 @@
</span>
</a>
</div>
{% if manuscript_page.attached_images.all.1 %}
{# if page has forensic images, display them #}
{% if forensic_images %}
<hr class="mt-3 mb-3" />
<div class="mt-4">
<a class="underline hover:no-underline"
href="{% url 'forensic_page' manuscript_page.attached_images.all.1.id %}">
<img class="w-32 h-32 object-cover" src="{{ manuscript_page.attached_images.all.1.image.url }}"
alt="First Forensic Image">
<caption>View the forensic images for this page</caption>
</a>
<h3 class="mt-3 mb-3 text-3xl font-bold">Forensic Images</h3>
<div id="forensic-images" class="mt-4" x-data="{ open: false }">
{% with forensic_images|first as first_image %}
{% if first_image %}
<img @click="open = true" class="w-32 h-32 object-cover" src="{{ first_image.thumbnail.url }}" alt="Thumbnail for forensic image {{ current_page }}" class="thumbnail" loading="lazy">
{% endif %}
{% endwith %}

<div x-show="open" class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog"
aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-5xl sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
Forensic Images
</h3>
<div class="mt-2">
<div class="mt-2 grid grid-cols-3 gap-4">
{% for forensic_image in forensic_images %}
<img @click="open = true" class="w-32 h-32 object-cover" src="{{ forensic_image.image.url }}" alt="Thumbnail for forensic image {{ current_page }}" class="thumbnail" loading="lazy">
{% endfor %}

<p><a class="underline hover:no-underline" href="">Read the full forensics report</a>.</p>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" @click="open = false"
class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Close
</button>
</div>
</div>
</div>
</div>
</div>


{% endif %}

</div>
</div>
</div>
Expand Down Expand Up @@ -197,10 +221,7 @@ <h3 class="text-center font-semibold text-1xl pb-4 mb-4 uppercase">Document Deta

<hr class="mt-3 mb-3" />
<h2 class="text-center font-semibold text-1xl pb-4 mb-4 uppercase">Cite this page</h2>
<p><em>The Denig Manuscript</em>, Winterthur Museum, Garden & Library and the Roy Rosenzweig Center
for
History and New Media (2024--): p. {{ manuscript_page.page_range }}. <a href="{% url 'manuscript' %}"
class="text-winterthur-dk-blue hover:underline">https://denig.rrchnm.org/manuscript/{{manuscript_page.id}}</a>
<p><em>The Denig Manuscript</em>, Winterthur Museum, Garden & Library and the Roy Rosenzweig Center for History and New Media (2024--): p. {{ manuscript_page.page_range }}. <a href="{% url 'manuscript' %}" class="text-winterthur-dk-blue hover:underline">https://denig.rrchnm.org/manuscript/{{manuscript_page.id}}</a>
</p>
</div>
</div>
Expand Down

0 comments on commit f122a1c

Please sign in to comment.