website/web/templates/partials/mark_explicit.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) {
                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}}