Displays a crosshair reticle (along with its corresponding coordinate pair) on screen. Useful for verifying object positioning, cursor position, locating X/Y coordinates of an object for callouts, etc.
Reticle currently has three modes:
A red reticle will be placed such that it's center lies precisely at the on-screen coordiantes specified. That is to say, it will entirely ignore your current scroll position. This is due to the reticle being absolutely-positioned. A fixed position reticle will respect the true coordinates, but will bollocks onClick mode. Thus, if you're so inclined to extend this out, keep that in mind.
To enable the reticle at the specified coordinates, simply call its place(x,y) method, where x and y are equal to the desired on-screen coordinates.
xCoordinate = 123;
yCoordinate = 456;
reticle.place(xCoordinate, yCoordinate);
A green reticle will be placed such that it's center lies precisely at the on-screen coordiantes where the user last clicked. It will not inhibit functionality of whatever was clicked (i.e. links will still link, buttons will still button, snozzberries... well, you get it). It will also update with every click, so you may want to jot down whatever you're after before clicking again. Extending it out such that the values were push()'d into an array with each click would be a matter of about 3 lines of code, if it's important to you.
reticle.enableOnClick(); // That's it. Seriously.
A red reticle will appear at the top-left of the object specified.
Objects may be specified either:
A. With a QuerySelector string (in which the first matching object will be presupposed to be the target):
reticle.target('#MyObjectsID.AssumingItHasThisClass');
B. With an HTMLElement object itself:
let myObj = document.getElementbyId('MyObjectsID');
reticle.target(myObj);
(Really, considering I just slapped the whole damn thing into a JSON object, they're ALL public, but if I WERE to go the extra couple steps, these would the ones I intended for humans to work with):
Places the center of the reticle at the specified coordinates
| Parameter | Type | Purpose | Required | Default Value |
|---|---|---|---|---|
| x | Integer | X-Coordinate (on-screen; agnostic of scroll position) to place reticle at | Yes | 0 |
| y | Integer | Y-Coordinate (on-screen; agnostic of scroll position) to place reticle at | Yes | 0 |
reticle.place(123,456); // Places center of reticle at coordinates X: 123, Y: 456)
Places the center of the reticle at the top-left-most position of the first object that matches the provided QuerySelector (or HTMLElement, if passed instead).
| Parameter | Type | Purpose | Required | Default Value |
|---|---|---|---|---|
| objQS | String | The QuerySelector that matches the target object, OR | Yes | - |
| Object | An HTMLElement object (functionally just bypasses the targeting method to directly focus on the object |
reticle.target('a.nav-link'); // Places reticle at top-left of first located anchor with class of 'nav-link'
// -OR-
let footerObj = document.getElemenstByTagName("footer")[0]; // Targets the first <footer> tag on the page
reticle.target(footerObj); // Places reticle at top-left of targeted <footer>
Switches reticle to and from window onClick mode (enableOnClick and disableOnClick, respectively): reticle will switch to green, and reticle's center will appear at any location clicked by the user. Note that it will NOT inhibit functionality of the clicked point, it will simply drop the reticle there. This is worth noting, as, should the object clicked be a link, the browser will still follow the href, and thus the reticle will be visible for but a fraction of a second.
None
reticle.enableOnClick(); // Green reticle will be centered on every location clicked by the user
reticle.disableOnClick(); // Removes enableOnClick's functionality, reticle color returns to red, and is hidden until next used.
Changes the color of the reticle and its accompanying text, by altering its CSS --reticle-color property. Color formats accepted are:
- Hex (#FF0000)
- Short Hex (#F00)
- RGB (rgb(0, 255, 255)
- RGBA (rgba(0, 255, 255, 0.5)
- Color Name ('red')
| Parameter | Type | Purpose | Required | Default Value |
|---|---|---|---|---|
| clr | String | The color you wish to change the reticle and text to, in one of the formats listed above | Yes | 'red' |
reticle.color('red'); // Changes reticle and text color to red (#F00/#FF0000)
reticle.color('rgba(0, 255, 0, 0.5)'); changes reticle color to 50%-opaque green (#0F0/#00FF00)
reticle.color('#0000FF'); // Changes reticle and text color to blue (#00F)
Simply toggles the reticle's css display property, rendering it visible (show()) or hidden (hide()), respectively.
None
reticle.show(); // Reticle becomes visible at last location and color (default: 0,0 and red)
reticle.hide(); // Reticle becomes hidden (though is not destroyed; e.g. can still be manipulated)