204 lines
8.3 KiB
HTML
204 lines
8.3 KiB
HTML
|
<!--
|
||
|
|
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}}
|