<!-- 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}}