2024-03-16 20:29:28 +00:00
<!--
A mechanism for users to flag a photo that should be marked as Explicit.
-->
{{define "mark-explicit-modal"}}
< div class = "modal" id = "markExplicitModal" >
< div class = "modal-background" > < / div >
< div class = "modal-content" >
< div class = "card" >
2024-12-03 06:56:46 +00:00
< div class = "card-header has-background-info" >
2024-03-16 20:29:28 +00:00
< p class = "card-header-title has-text-light" >
Mark a photo as Explicit
< / p >
< / div >
< div class = "card-content" >
< form name = "markExplicitForm" method = "POST" >
< div class = "columns is-mobile mb-0" >
< div class = "column is-one-quarter" >
< img >
< / div >
< div class = "column" >
2024-12-03 06:56:46 +00:00
< p class = "help mb-2" >
Please review < a href = "/tos/photos#explicit" target = "_blank" > what {{PrettyTitle}} considers to be an < span class = "has-text-danger" > 'Explicit'< / span > photo < i class = "fa fa-external-link" > < / i > < / a >
(and what we consider < em > NOT< / em > explicit) for an in-depth list of examples!
< / p >
2024-03-16 20:29:28 +00:00
< div class = "field" >
< label class = "label" > What makes this photo explicit?< / label >
< div >
< label class = "checkbox" >
< input type = "radio"
name="reason"
value="Contains an erection">
Contains an erection
< / label >
< / div >
< div >
< label class = "checkbox" >
< input type = "radio"
name="reason"
value="It's a close-up dick pic (whether flaccid or erect)">
2024-12-03 06:56:46 +00:00
It's a close-up dick pic < small > (whether flaccid or erect)< / small >
2024-03-16 20:29:28 +00:00
< / label >
< / div >
< div >
< label class = "checkbox" >
< input type = "radio"
name="reason"
value="It's a hole pic (ass/vagina/spread eagle/etc.)">
2024-12-03 06:56:46 +00:00
It's a hole pic < small > (ass/vagina/spread eagle/etc.)< / small >
2024-03-16 20:29:28 +00:00
< / label >
< / div >
< div >
< label class = "checkbox" >
< input type = "radio"
name="reason"
value="It's sexually suggestive (e.g. they're grabbing their junk or the photo is focused on their junk)">
2024-12-03 06:56:46 +00:00
It's sexually suggestive < small > (e.g. they're grabbing their junk or the photo is focused on their junk)< / small >
2024-03-16 20:29:28 +00:00
< / label >
< / div >
< div >
< label class = "checkbox" >
< input type = "radio"
name="reason"
value="It's sexually explicit (e.g. masturbation, sexual activity, porn)">
2024-12-03 06:56:46 +00:00
It's sexually explicit < small > (e.g. masturbation, sexual activity, porn)< / small >
2024-03-16 20:29:28 +00:00
< / label >
< / div >
2024-12-03 06:56:46 +00:00
< div class = "columns is-mobile is-gapless mt-1" >
2024-03-16 20:29:28 +00:00
< div class = "column is-narrow mr-2" >
< label class = "checkbox" >
< input type = "radio"
name="reason"
value="Other"
onclick="document.querySelector('#markExplicitFormOther').focus()">
Other:
< / label >
< / div >
< div class = "column" >
< input type = "text" class = "input is-size-7"
id="markExplicitFormOther"
name="other"
placeholder="Please elaborate">
< / div >
< / div >
< / div >
< / div >
< / div >
< p class = "help mb-1" >
Note: if the photo shows a mild lifestyle device (cock ring, genital piercings, chastity cage, etc.) but
is otherwise not a sexually charged photo (e.g. it is just a normal full-body nude pic),
it is not considered by {{PrettyTitle}} to be an explicit photo.
< / p >
< div class = "has-text-centered" >
< button type = "submit" class = "button is-success" >
Submit
< / button >
< button type = "reset" class = "button is-secondary" >
Cancel
< / button >
< / div >
< / form >
< / div >
< / div >
< / div >
< / div >
< script >
document.addEventListener("DOMContentLoaded", () => {
const $modal = document.querySelector("#markExplicitModal"),
$modalBG = $modal.querySelector(".modal-background"),
$img = $modal.getElementsByTagName("img")[0],
$form = $modal.getElementsByTagName("form")[0],
$submit = $form.querySelector("button[type=submit]"),
$reset = $form.querySelector("button[type=reset]");
// The active photo being inspected and the payload to post.
let $node = null; // last clicked link, to remove on successful post.
let payload = {
photoID: 0,
reason: "",
other: "",
};
// Modal toggle function.
function showHide(v) {
if (v) {
$modal.classList.add("is-active");
} else {
$modal.classList.remove("is-active");
$form.reset();
}
}
// Closing the modal.
$modalBG.addEventListener("click", () => {
showHide(false);
});
$reset.addEventListener("click", () => {
showHide(false);
});
// Submit the form.
$form.onsubmit = (e) => {
e.preventDefault();
e.stopPropagation();
payload.reason = $form.reason.value;
payload.other = $form.other.value;
fetch("/v1/photos/mark-explicit", {
method: "POST",
mode: "same-origin",
cache: "no-cache",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(payload),
})
.then((response) => response.json())
.then((data) => {
if (data.StatusCode !== 200) {
window.alert(data.data.error);
return;
}
showHide(false);
// Replace the flag link the user clicked on to get here.
if ($node !== null) {
$node.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
});
$node.innerHTML = `< i class = "fa fa-check mr-1" > < / i > You have flagged that this photo should be Explicit`;
}
setTimeout(() => {
window.alert("This photo has been flagged to be marked as Explicit. Thanks for your help!");
}, 200);
}).catch(resp => {
window.alert(resp);
});
};
// Find the "mark this as explicit" links around the page.
(document.querySelectorAll(".nonshy-mark-explicit") || []).forEach(node => {
let photoID = node.dataset.photoId,
photoURL = node.dataset.photoUrl;
node.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
$img.src = photoURL;
payload.photoID = parseInt(photoID);
$node = node;
showHide(true);
});
});
})
< / script >
{{end}}