☰

mTurk HIT Fullscreen Crosshair CSS (as Userscript)

Userscript adapatation of code found at https://codepen.io/michaelsboost/pen/fnizu

2018/02/19のページです。最新版はこちら。

このスクリプトの質問や評価の投稿はこちら、通報はこちらへお寄せください。 
// ==UserScript==
// @name         mTurk HIT Fullscreen Crosshair CSS (as Userscript)
// @namespace    salembeats
// @version      1.2
// @description  Userscript adapatation of code found at https://codepen.io/michaelsboost/pen/fnizu
// @author       Cuyler Stuwe (salembeats) using code adapted from Michael Schwartz
// @include      *
// @grant        none
// @require      http://code.jquery.com/jquery-3.3.1.slim.min.js
// ==/UserScript==

// *****************************************************************************

function isNotMturkFrame() {
	return !(
		window !== window.top &&
		document.referrer.includes("worker.mturk.com/projects/")
	);
}

if(isNotMturkFrame()) {return;}

// *****************************************************************************

const CROSSHAIR_STYLES = {
	DOTTED: "dotted",
	DASHED: "dashed",
	SOLID: "solid"
};

const CROSSHAIR_COLORS = {
	BLACK: "black",
	RED: "red"
};

// *****************************************************************************
// SET UP YOUR CROSSHAIR STYLE HERE.
// *****************************************************************************

const CROSSHAIR_THICKNESS_PX              = 1;
const CROSSHAIR_STYLE                     = CROSSHAIR_STYLES.DOTTED;
const CROSSHAIR_COLOR                     = CROSSHAIR_COLORS.BLACK;
SHOULD_MODIFY_POINTER_TO_CROSSHAIR_CURSOR = true;

// *****************************************************************************

document.body.insertAdjacentHTML("beforeend", `
<div id="crosshair-h" class="hair"></div>
<div id="crosshair-v" class="hair"></div>
`);

document.head.insertAdjacentHTML("beforeend", `
<style>

* {
${SHOULD_MODIFY_POINTER_TO_CROSSHAIR_CURSOR ? "cursor: crosshair !important;" : ""}
}

#crosshair-h {
width: 100%;
}

#crosshair-v {
height: 100%;
}

.hair {
position: fixed;
top:0; left:0;
margin-top: 0px; /* The offset here by the original author made zero sense. */
margin-left: 0px; /* The offset here by the original author made zero sense. */
background: transparent;
border-top: ${CROSSHAIR_THICKNESS_PX}px ${CROSSHAIR_STYLE} #000;
border-left: ${CROSSHAIR_THICKNESS_PX}px ${CROSSHAIR_STYLE} #000;
pointer-events: none;
z-index: ${Number.MAX_SAFE_INTEGER};
}
</style>
`);

$(document).ready(function() {

	var cH = $('#crosshair-h'),
		cV = $('#crosshair-v');

	window.addEventListener("mousemove", e => {
	});

	$(this).on('mousemove touchmove', function(e) {

		// Original author was using pageX and pageY, but we really need clientX and clientY.
		cH.css('top', e.clientY);
		cV.css('left', e.clientX);
	});

});