mirror of
https://codeberg.org/VnPower/PixivFE
synced 2024-12-06 19:16:23 +01:00
Make the illust preview work again
This commit is contained in:
VnPower
@@ -7,10 +7,11 @@ function OpenPreviewer(url) {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 3rem;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 3rem;
|
||||
overflow: scroll;
|
||||
z-index: 999;
|
||||
`;
|
||||
|
||||
const imageLink = url.replace(/c\/\d+x\d+.*?\//, "").replace(/square1200/, "master1200");
|
||||
@@ -38,23 +39,24 @@ function AddOverlay() {
|
||||
let className, html;
|
||||
|
||||
if (type === "cover") {
|
||||
className = "overlay-cover";
|
||||
className = "overlay-cover position-absolute w-100 h-100 z-5 top-0 start-0";
|
||||
html = "";
|
||||
} else if (type === "button") {
|
||||
className = "overlay-button";
|
||||
className = "overlay-button position-absolute p-1 z-5 bottom-0 end-0 rounded bg-neutral-950";
|
||||
html = "↗";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.artwork-small .artwork-image img').forEach(illust => {
|
||||
document.querySelectorAll('.ratio-1x1 .thumbnail-wrapper img').forEach(illust => {
|
||||
const url = illust.getAttribute("src");
|
||||
const button = document.createElement('div');
|
||||
|
||||
button.setAttribute("class", className);
|
||||
button.innerHTML = html;
|
||||
|
||||
illust.parentElement.parentElement.appendChild(button);
|
||||
// TODO: Need a better way to do this
|
||||
illust.parentElement.parentElement.parentElement.parentElement.appendChild(button);
|
||||
|
||||
button.onclick = (e) => {
|
||||
OpenPreviewer(url);
|
||||
|
||||
@@ -5,49 +5,51 @@
|
||||
{{- AiType := isset(.AiType) ? .AiType : 0}}
|
||||
<div class="position-relative h-100 thumbnail-hover-dark">
|
||||
<!-- Placing the anchor element out here so that the div that contains the tags acts as a hyperlink -->
|
||||
<a target="{{ target }}" href="/artworks/{{ .ID }}" class="d-block h-100">
|
||||
<div class="position-absolute top-0 start-0 p-2 d-flex justify-content-between w-100">
|
||||
<div class="d-flex flex-column align-items-start z-3">
|
||||
<!-- When an artwork is listed on the ranking page -->
|
||||
{{- if isset(.Rank) }}
|
||||
<span class="badge bg-black fs-6 rounded-pill bg-opacity-75 mb-1">{{ .Rank }}</span>
|
||||
{{- end }}
|
||||
<!-- When an artwork is tagged as R-18 or R-18G -->
|
||||
{{- if .XRestrict != 0 }}
|
||||
<span class="badge bg-danger mb-1">{{ if .XRestrict == 1 }}R-18{{ else }}R-18G{{ end }}</span>
|
||||
{{- end }}
|
||||
<!-- When an artwork is tagged as AI-generated -->
|
||||
{{- if AiType == 2 }}
|
||||
<span class="badge bg-warning small text-dark mb-1">AI</span>
|
||||
{{- end }}
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end z-3">
|
||||
<!-- When an artwork has multiple images -->
|
||||
{{- if .Pages > 1 }}
|
||||
<span class="badge bg-secondary"><i class="bi bi-image"></i> {{ .Pages }}</span>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ratio ratio-1x1">
|
||||
<div class="thumbnail-wrapper rounded overflow-hidden">
|
||||
{{- if (.XRestrict > 0 && hideR18 != "" && hideR18G != "") || (.XRestrict == 2 && hideR18G != "") }}
|
||||
<!-- When the user has enabled hideR18 or hideR18G, display a plain thumbnail instead -->
|
||||
<img src="/img/nsfw.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
|
||||
<!-- When the user has enabled hideAi, display a plain thumbnail instead -->
|
||||
{{- else if AiType == 2 && hideAi }}
|
||||
<img src="/img/ai.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
|
||||
{{- else }}
|
||||
<img src="{{ .Thumbnail }}" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
|
||||
<div> <!-- Empty div for the illust preview (it needs to wrap the anchor) -->
|
||||
<a target="{{ target }}" href="/artworks/{{ .ID }}" class="d-block h-100">
|
||||
<div class="position-absolute top-0 start-0 p-2 d-flex justify-content-between w-100">
|
||||
<div class="d-flex flex-column align-items-start z-3">
|
||||
<!-- When an artwork is listed on the ranking page -->
|
||||
{{- if isset(.Rank) }}
|
||||
<span class="badge bg-black fs-6 rounded-pill bg-opacity-75 mb-1">{{ .Rank }}</span>
|
||||
{{- end }}
|
||||
<!-- When an artwork is tagged as R-18 or R-18G -->
|
||||
{{- if .XRestrict != 0 }}
|
||||
<span class="badge bg-danger mb-1">{{ if .XRestrict == 1 }}R-18{{ else }}R-18G{{ end }}</span>
|
||||
{{- end }}
|
||||
<!-- When an artwork is tagged as AI-generated -->
|
||||
{{- if AiType == 2 }}
|
||||
<span class="badge bg-warning small text-dark mb-1">AI</span>
|
||||
{{- end }}
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end z-3">
|
||||
<!-- When an artwork has multiple images -->
|
||||
{{- if .Pages > 1 }}
|
||||
<span class="badge bg-secondary"><i class="bi bi-image"></i> {{ .Pages }}</span>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- When an artwork is a ugoira -->
|
||||
<!-- Creates a centered, circular overlay (60x60px) with semi-transparent black background.
|
||||
The play icon is centered within this overlay and appears on top of the thumbnail. -->
|
||||
{{- if .IllustType == 2 }}
|
||||
<div class="position-absolute top-50 start-50 translate-middle d-flex justify-content-center align-items-center bg-dark bg-opacity-75 rounded-circle w-25 h-25 p-4">
|
||||
<i class="bi bi-play-fill text-white fs-2"></i>
|
||||
</div>
|
||||
{{- end }}
|
||||
</a>
|
||||
<div class="ratio ratio-1x1">
|
||||
<div class="thumbnail-wrapper rounded overflow-hidden">
|
||||
{{- if (.XRestrict > 0 && hideR18 != "" && hideR18G != "") || (.XRestrict == 2 && hideR18G != "") }}
|
||||
<!-- When the user has enabled hideR18 or hideR18G, display a plain thumbnail instead -->
|
||||
<img src="/img/nsfw.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
|
||||
<!-- When the user has enabled hideAi, display a plain thumbnail instead -->
|
||||
{{- else if AiType == 2 && hideAi }}
|
||||
<img src="/img/ai.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
|
||||
{{- else }}
|
||||
<img src="{{ .Thumbnail }}" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- When an artwork is a ugoira -->
|
||||
<!-- Creates a centered, circular overlay (60x60px) with semi-transparent black background.
|
||||
The play icon is centered within this overlay and appears on top of the thumbnail. -->
|
||||
{{- if .IllustType == 2 }}
|
||||
<div class="position-absolute top-50 start-50 translate-middle d-flex justify-content-center align-items-center bg-dark bg-opacity-75 rounded-circle w-25 h-25 p-4">
|
||||
<i class="bi bi-play-fill text-white fs-2"></i>
|
||||
</div>
|
||||
{{- end }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
{{- range .Data.Pixivision }}
|
||||
{* TODO: make the entire pixivision card clickable while preserving the text underline effect *}
|
||||
{* NOTE: intentionally choosing indivisible col widths to create a visible affordance *}
|
||||
<div class="col-11 col-md-9 col-lg-5">
|
||||
<div class="col-11 col-md-9 col-lg-5 position-relative">
|
||||
<div class="custom-card bg-charcoal-surface1 thumbnail-hover-dark">
|
||||
<a href="/pixivision/a/{{.ID}}">
|
||||
<div class="thumbnail-wrapper rounded-top-5 overflow-hidden">
|
||||
|
||||
@@ -177,21 +177,21 @@
|
||||
</div>
|
||||
<form id="artwork-preview-form" hx-post="/settings/artworkPreview" hx-target="#artwork-preview-response" hx-swap="outerHTML">
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="radio" name="app" id="app-c" value="cover" disabled />
|
||||
<input class="form-check-input" type="radio" name="app" id="app-c" value="cover" />
|
||||
<label class="form-check-label fw-bold" for="app-c"> Cover </label>
|
||||
<div id="app-c-help" class="form-text">Open the previewer when you click into the thumbnails. This allows for quick previews without leaving the current page.</div>
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="radio" name="app" id="app-b" value="button" disabled />
|
||||
<input class="form-check-input" type="radio" name="app" id="app-b" value="button" />
|
||||
<label class="form-check-label fw-bold" for="app-b"> Button </label>
|
||||
<div id="app-b-help" class="form-text">Add a button at the bottom-right of the thumbnails and open the previewer when you click into it. This provides more control over when previews are shown.</div>
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="radio" name="app" id="app-d" value="disable" checked disabled />
|
||||
<input class="form-check-input" type="radio" name="app" id="app-d" value="disable" checked />
|
||||
<label class="form-check-label fw-bold" for="app-d"> Disable </label>
|
||||
<div id="app-d-help" class="form-text">No previewing. Clicking on thumbnails will directly open the full artwork page.</div>
|
||||
</div>
|
||||
<button type="submit" class="custom-btn-secondary" disabled>Save</button>
|
||||
<button type="submit" class="custom-btn-secondary">Save</button>
|
||||
</form>
|
||||
<div id="artwork-preview-response"></div>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user