Bookmarklet: Circle things on the page

circle-things-on-page bookmarklet

javascript:(function()%7B(()%3D>%7Blet e%3Ddocument.createElement("div")%3Be.style.zIndex%3D1e3%2Ce.style.position%3D"absolute"%2Ce.style.top%3D0%2Ce.style.width%3D"100vw"%2Ce.style.height%3D%60%24%7Bdocument.body.scrollHeight%7Dpx%60%3Blet t%2Cl%3Ddocument.createElement("div")%3Bl.style.position%3D"absolute"%2Cl.style.display%3D"none"%2Cl.style.border%3D"5px dotted hotpink"%2Cl.style.borderRadius%3D"45%25"%2Cl.style.pointerEvents%3D"none"%3Blet s%3De%3D>%7Bl.style.display%3D"block"%2Cl.style.top%3D%60%24%7Bt.y<e.pageY%3Ft.y%3Ae.pageY%7Dpx%60%2Cl.style.left%3D%60%24%7Bt.x<e.pageX%3Ft.x%3Ae.pageX%7Dpx%60%2Cl.style.height%3D%60%24%7BMath.round(Math.abs(e.pageY-t.y))%7Dpx%60%2Cl.style.width%3D%60%24%7BMath.round(Math.abs(e.pageX-t.x))%7Dpx%60%7D%3Be.addEventListener("pointerdown"%2Cp%3D>%7Bt%3D%7Bx%3Ap.pageX%2Cy%3Ap.pageY%7D%2Cl.style.display%3D"block"%2Cl.style.height%3D0%2Cl.style.left%3D%60%24%7Bt.x%7Dpx%60%2Cl.style.top%3D%60%24%7Bt.y%7Dpx%60%2Cl.style.width%3D0%2Ce.addEventListener("pointermove"%2Cs)%7D)%2Ce.addEventListener("pointerup"%2Ct%3D>%7Be.removeEventListener("pointermove"%2Cs)%7D)%2Cdocument.body.appendChild(e)%2Ce.appendChild(l)%7D)()%7D)()

circle-things-on-page.js

(() => {
    const blanket = document.createElement('div');
    blanket.style.zIndex = 1000;
    blanket.style.position = 'absolute';
    blanket.style.top = 0;
    blanket.style.width = '100vw';
    blanket.style.height = `${ document.body.scrollHeight }px`;
    
    let startCoords;

    const outline = document.createElement('div');
    outline.style.position = 'absolute';
    outline.style.display = 'none';
    outline.style.border = '5px dotted hotpink';
    outline.style.borderRadius = '45%';
    outline.style.pointerEvents = 'none';

    const logEvent = ( evt ) => {
        const partialEvent = {};
        for ( const key in evt ) {
            if ( key.match( /(X|Y)$/ ) ) {
                partialEvent[ key ] = evt[ key ];
            }
        }
        console.log( partialEvent );
    }

    const updateOutline = ( evt ) => {
        outline.style.display = 'block';
        outline.style.top = `${ startCoords.y < evt.pageY ? startCoords.y : evt.pageY}px`;
        outline.style.left = `${ startCoords.x < evt.pageX ? startCoords.x : evt.pageX}px`;
        outline.style.height = `${Math.round( Math.abs( evt.pageY - startCoords.y ) )}px`;
        outline.style.width = `${Math.round( Math.abs( evt.pageX - startCoords.x ) )}px`;
    };

    blanket.addEventListener('pointerdown', ( evt ) => {
        startCoords = {
            x: evt.pageX,
            y: evt.pageY,
        };
        outline.style.display = 'block';
        outline.style.height = 0;
        outline.style.left = `${startCoords.x}px`;
        outline.style.top = `${startCoords.y}px`;
        outline.style.width = 0;

        blanket.addEventListener( 'pointermove', updateOutline );
    } );

    blanket.addEventListener( 'pointerup', ( evt ) => {
        blanket.removeEventListener( 'pointermove', updateOutline );
    } );

    document.body.appendChild(blanket);
    blanket.appendChild( outline );
})();

circle-things-on-page.min.js

(()=>{let e=document.createElement("div");e.style.zIndex=1e3,e.style.position="absolute",e.style.top=0,e.style.width="100vw",e.style.height=`${document.body.scrollHeight}px`;let t,l=document.createElement("div");l.style.position="absolute",l.style.display="none",l.style.border="5px dotted hotpink",l.style.borderRadius="45%",l.style.pointerEvents="none";let s=e=>{l.style.display="block",l.style.top=`${t.y<e.pageY?t.y:e.pageY}px`,l.style.left=`${t.x<e.pageX?t.x:e.pageX}px`,l.style.height=`${Math.round(Math.abs(e.pageY-t.y))}px`,l.style.width=`${Math.round(Math.abs(e.pageX-t.x))}px`};e.addEventListener("pointerdown",p=>{t={x:p.pageX,y:p.pageY},l.style.display="block",l.style.height=0,l.style.left=`${t.x}px`,l.style.top=`${t.y}px`,l.style.width=0,e.addEventListener("pointermove",s)}),e.addEventListener("pointerup",t=>{e.removeEventListener("pointermove",s)}),document.body.appendChild(e),e.appendChild(l)})();