website/web/templates/partials/mark_explicit.html

204 lines
8.3 KiB
HTML
Raw Normal View History

<!--
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">
<div class="card has-background-info">
<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">
<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)">
It's a close-up dick pic (whether flaccid or erect)
</label>
</div>
<div>
<label class="checkbox">
<input type="radio"
name="reason"
value="It's a hole pic (ass/vagina/spread eagle/etc.)">
It's a hole pic (ass/vagina/spread eagle/etc.)
</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)">
It's sexually suggestive (e.g. they're grabbing their junk or the photo is focused on their junk)
</label>
</div>
<div>
<label class="checkbox">
<input type="radio"
name="reason"
value="It's sexually explicit (e.g. masturbation, sexual activity, porn)">
It's sexually explicit (e.g. masturbation, sexual activity, porn)
</label>
</div>
<div class="columns is-mobile is-gapless">
<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}}