mouse/touch/ input debug partial

[wolfspyre]

while trying to sort out some obnoxious behavior with mobile devices responding to touch, I found myself needing something that emitted the type of pointer interaction the browser was receiving and in what element that occurred.

I kluged this together came up with some javascript to spit out the type of input the browser received, to what html element, and that element's classes.

its dead simple to enable. Simply drop the following into layouts/partials/extend-footer.html:

<div class="z-50 isolate absolute left-[20px] top-[100px] text-xs text-center ring-2 border-1 border-black drop-shadow-xl w-[45rem] h-[10rem] rounded-xl backdrop-blur-sm overflow-visible" id="logger" >
<span class="p-1 m-1">Strive to be the person your dog(s) believe you are.</span>
</div>
<script>
  !function(o){console.old=console.log,console.log=function(){var n,e,t="";for(e=0;e<arguments.length;e++)t+='<span class="text-xs log-'+typeof(n=arguments[e])+'">',"object"==typeof n&&"object"==typeof JSON&&"function"==typeof JSON.stringify?t+=JSON.stringify(n):t+=n,t+="</span>&nbsp;";o.innerHTML=t+"<br>",console.old.apply(void 0,arguments)}}
  (document.getElementById("logger"));
(function () {
  var span, eventTypes = [
    'click', 'mousedown', 'mouseup', 'mouseover', 'mousemove', 'mouseout', 'touchstart', 'touchend', 'touchmove', 'touchcancel', 'touchleave'
  ];
  // Log a single gesture to the console and show it at the top of the page.
  function logEvent (event) {
	   console.log("inputDetection", { 
		   tgt: event.target.id, 
			 tgtO: event.target.valueOf(), 
			 ev: event.type, classes: event.target.classList } );
  }
  // Attach event listeners for all gestures.
  for (var i = 0; i < eventTypes.length; i++) {
    document.addEventListener(eventTypes[i], logEvent);
  }
})();
</script>

when you no longer need to debug, just remove the file, or rename it....

❤️🐺W