mobile-fast-interest-audit.user.js

// ==UserScript==
// @name         Mobile Fast Interest Audit
// @namespace    salembeats
// @version      1.51
// @description  .
// @author       Cuyler Stuwe (salembeats)
// @include      https://s3.amazonaws.com/mturk_bulk/hits/*
// @include      https://www.mturkcontent.com/dynamic/*
// @grant        none
// ==/UserScript==

function isInIframe() {
    return window !== window.top;
}

function getGid() {
    const referrer = document.referrer;
    if(!referrer.includes("projects/")) {return undefined;}
    return referrer.match(/projects\/([^/]*)/)[1];
}

function isThisGidOneOf(gids) {
    
    const hitGid = getGid();
    
    for(const gid of gids) {
        if(gid === hitGid) {return true;}
    }

    return false;
}

function getMobileLayoutMarkup(interestText, descriptionText, imageUrl) {
    return (`
        <span id="topAnchor">&nbsp;</span>
        <div    style="
                    position: fixed;
                    z-index: 9001;
                    left: 0;
                    top: 0;
                    height: 100vh;
                    width: 100vw;
                    display: grid;
                    grid-template-rows: 8fr 2fr;
                    grid-template-columns: 1fr 1fr;
                    grid-template-areas: 'm m'
                                         'y n';
                "

                id="mobileLayout"
        >
            <div style="
                background: white;
                grid-area: m;
                display: flex;
                flex-direction: column;
            ">
                <div style="display: block; height: 80%; text-align: center;">
                    <img src="${imageUrl}" style="display: inline-block; max-width: 100%; max-height: 75vh;">
                </div>
                <div style="position: relative; top: -30px; padding: 0 8px; display: flex; justify-content: center; align-items: center; font-size: 1.5rem;">${descriptionText}</div>
                <div style="display: flex; justify-content: center; align-items: center; font-size: 3.2rem; color: blue;">${interestText}?</div>
            </div>
            <div id="yesButton" style="background: green; grid-area: y; display: flex; justify-content: center; align-items: center; color: white; font-size: 2.0rem;">
                <span style="pointer-events: none; user-select: none;">Yes</span>
            </div>
            <div id="noButton" style="background: red; grid-area: n; display: flex; justify-content: center; align-items: center; color: white; font-size: 2.0rempx;">
                <span style="pointer-events: none; user-select: none;">No</span>
            </div>
        </div>
    `);
}

function insertMobileLayoutMarkup(interestText, descriptionText, imageUrl) {
    document.body.insertAdjacentHTML("beforeend",
        getMobileLayoutMarkup(
            interestText,
            descriptionText,
            imageUrl
        )
    );
}

function extractInterestTextFromPage() {
    const interestParagraph = document.querySelector("p[style='font-size:1.4em; font-weight:bold;']");
    return (
        interestParagraph.textContent
            .replace("Interest", "")
            .replace("Intérêt","")
            .replace("インタレスト名","")
            .replace("Interesse","")
            .replace("兴趣","")
            .replace("Interés", "")
            .replace(/:\s/, "")
            .toUpperCase()
    );
}

function extractDescriptionTextFromPage() {
    const descriptionDiv = document.querySelector("div[style='font-style: italic; font-weight: bold; max-width: 300px; padding-bottom:15px;']");
    return (
        descriptionDiv.innerText.trim()
    );
}

function extractImageUrlFromPage() {
    const productImage = document.querySelector("img[border='0']");
    return (
        productImage.getAttribute("src")
    );
}

function clickRadio(index) {
    document.querySelectorAll("[type='radio']")[index].click();
}

function hideMobileLayout() {
    document.getElementById("mobileLayout").style.display = "none";
}

function submit() {
    document.querySelector("[type='submit']").click();
}

function submitYes() {
    clickRadio(0);
    hideMobileLayout();
    submit();
}

function submitNo() {
    clickRadio(1);
    hideMobileLayout();
    submit();
}

function attachYesNoClickListeners() {
    document.getElementById("yesButton").addEventListener("click", submitYes);
    document.getElementById("noButton").addEventListener("click", submitNo);
}

// function attachYesNoKeyListeners(yesKeyString, noKeyString) {
//     document.body.addEventListener("keydown", e => {
//         if(e.key === yesKeyString) {
//             submitYes();
//         }

//         if(e.key === noKeyString) {
//             submitNo();
//         }
//     });
// }

function focusFrame() {
    const firstRadio = document.querySelector("[type='radio']");
    firstRadio.focus();
    firstRadio.blur();
}

function scrollTopIntoView() {
    const topAnchor = document.getElementById("topAnchor");
    topAnchor.scrollIntoView(true);
}

function main() {

    if(!isInIframe()) {return;}

    if(!isThisGidOneOf([
        "3KAZLCS3F9ALRMAYYRWSFLQVGVFAPS",
        "3QG9DTEQJM5BBV7ZADAN7FYQESJAWR",
        "3VXAY8PXA64321NMLRVIK2X07XVBUU",
        "3RC2K8SGE3RRAMPS6IYJ5KN2GL1GXS",
        "37NNZ8MO8T49HBSPE9D3B96X851EQM",
        "3QG9DTEQJM5BBV7ZADAN7FYRGSJAWV",
        "3IXQCB6XJ9IYPWM3RWXP1TFCI24IT2",
        "3I21NMEA63SXE1Y4WEAERCIBG6DHSL"

    ])) {
        return;
    }

    insertMobileLayoutMarkup(
        extractInterestTextFromPage(),
        extractDescriptionTextFromPage(),
        extractImageUrlFromPage()
    );

    focusFrame();

    scrollTopIntoView();

    attachYesNoClickListeners();

    // attachYesNoKeyListeners("z", "x");
    // attachYesNoKeyListeners("1", "2");
    // attachYesNoKeyListeners("Numpad1", "Numpad2");
}

main();