☰

mTurk HIT Fullscreen Crosshair CSS (as Userscript)

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

נכון ליום 19-02-2018. ראה הגרסה האחרונה.

// ==UserScript==
// @name         mTurk HIT Fullscreen Crosshair CSS (as Userscript)
// @namespace    salembeats
// @version      1
// @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==

if(window === window.top) {return;}


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

const CROSSHAIR_THICKNESS_PX = 1;
const CROSSHAIR_STYLE = CROSSHAIR_STYLES.DOTTED;

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

document.head.insertAdjacentHTML("beforeend", `
<style>
#crosshair-h {
  width: 100%;
}

#crosshair-v {
  height: 100%;
}

.hair {
  position: fixed;
  top:0; left:0;
  margin-top: -3px;
  margin-left: -2px;
  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');

  $(this).on('mousemove touchmove', function(e) {
    var x = e.pageX - 1;
    var y = e.pageY - 1;
    cH.css('top', e.pageY);
    cV.css('left', e.pageX);
  });

});