1c013aa8d8
* If a Certified member deletes the final picture from their gallery page, their Certification Photo will be automatically rejected and they are instructed to begin the process again from the beginning. * Add nice Alert and Confirm modals around the website in place of the standard browser feature. Note: the inline confirm on submit buttons are still using the standard feature for now, as intercepting submit buttons named "intent" causes problems in getting the final form to submit.
212 lines
8.9 KiB
HTML
212 lines
8.9 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-header 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">
|
|
|
|
<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>
|
|
|
|
<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 <small>(whether flaccid or erect)</small>
|
|
</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 <small>(ass/vagina/spread eagle/etc.)</small>
|
|
</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 <small>(e.g. they're grabbing their junk or the photo is focused on their junk)</small>
|
|
</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 <small>(e.g. masturbation, sexual activity, porn)</small>
|
|
</label>
|
|
</div>
|
|
<div class="columns is-mobile is-gapless mt-1">
|
|
<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) {
|
|
modalAlert({message: 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(() => {
|
|
modalAlert({
|
|
message: "This photo has been flagged to be marked as Explicit. Thanks for your help!",
|
|
title: "Marked Explicit!",
|
|
});
|
|
}, 200);
|
|
}).catch(resp => {
|
|
modalAlert({message: 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}}
|