selector.min.js

/*
    Package: Dom-Selector
    Version: 2.0.0 [Minified]
    Author: Shivam Dewangan https://github.com/shivamdevs
    Repository: https://github.com/shivamdevs/dom-selector
    License: MIT License
*/

!function (context, name) { const style = document.createElement("style"); style.setAttribute("DomSelector", ""), style.setAttribute("type", "text/css"), style.innerHTML =`dom-selector,dom-selector *,dom-selector-auto{box-sizing:border-box;display:block;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}dom-selector-auto{position:fixed;inset:auto 0 20px auto;background:#fff;padding:5px 10px;border-radius:20px 0 0 20px;box-shadow:-2px 2px 4px 2px #0002;border:1px solid #0004;border-right:none;z-index:999999999999999998;transition:all .2s ease;cursor:pointer;color:#000}dom-selector-auto:hover{color:#ff8c00}dom-selector-auto.auto{translate:calc(100% + 10px) 0}dom-selector{z-index:999999999999999999;position:fixed;top:0;left:0;width:40px;height:40px;background:#1e90ff77;border-style:solid;border-color:#ff8c0099;--bt:1px;--br:1px;--bb:1px;--bl:1px;--mt:0px;--mr:0px;--mb:0px;--ml:0px;--pt:0px;--pr:0px;--pb:0px;--pl:0px}dom-selector:not(.surfing){display:none}dom-selector{border-width:var(--bt) var(--br) var(--bb) var(--bl)}dom-selector::before{box-sizing:content-box;content:" ";position:absolute;top:calc(0px - var(--mt) - var(--bt));right:calc(0px - var(--mr) - var(--br));bottom:calc(0px - var(--mb) - var(--bb));left:calc(0px - var(--ml) - var(--bl));border:0 solid #ff8c0055;border-width:var(--mt) var(--mr) var(--mb) var(--ml)}dom-selector::after{box-sizing:content-box;content:" ";inset:0;position:absolute;border:0 solid #20c02077;border-width:var(--pt) var(--pr) var(--pb) var(--pl)}dom-selector-data{z-index:1;display:flex;align-items:baseline;flex-wrap:nowrap;position:absolute;inset:0 auto auto 0;margin:6px;background:#fff;overflow:hidden;box-shadow:2px 2px 4px 2px #0002,0 0 0 1px #0001;border-radius:6px;max-width:340px;padding:6px 6px 6px 18px}dom-selector-closer{display:inline-flex;justify-content:center;align-items:stretch;float:right;width:18px;height:18px;font-size:16px;line-height:14px;font-weight:700;color:red;box-shadow:0 0 0 1px red;border-radius:10px;user-select:none;cursor:pointer}dom-selector:not(.selected){user-select:none}dom-selector:not(.selected) dom-selector-closer{display:none}dom-selector-info{color:#727888;font-size:14px;font-weight:500;padding-right:12px;flex:1;max-width:300px}dom-selector-info span{display:inline-block}dom-selector-info span[node]{color:purple}dom-selector-info span[class]{color:#00f}dom-selector-info span[id]{color:#ff8c00}dom-selector-info span[display]{color:brown;padding-left:10px}dom-selector-info>div{display:block;margin:5px auto;font-size:12px}dom-selector-info div[dimension]:not(:last-child){border-bottom:1px solid #0002;padding-bottom:5px}dom-selector-info span[padding]{color:green;font-size:12px}dom-selector-info span[margin]{color:orange;font-size:12px}dom-selector-info div[border]{color:#1e90ff}dom-selector-info div[styling]{font-weight:700;display:flex;align-items:center}dom-selector-info div[styling]>span{min-width:14px;min-height:14px;border:1px solid #0005}dom-selector-data.setbelow{top:100%}dom-selector-data.fromright{right:0;left:auto}dom-selector-data.outside{translate:0 calc(-100% - 15px)}dom-selector-data.setbelow{translate:5px}dom-selector-data.scrollable{position:fixed;top:0;left:inherit;right:inherit}`,document.head.appendChild(style);const wrap=document.createElement("dom-selector"),data=document.createElement("dom-selector-data"),closer=document.createElement("dom-selector-closer"),info=document.createElement("dom-selector-info");wrap.classList.add("inactive"),closer.innerHTML="×",closer.addEventListener("click",reset),data.appendChild(info),data.appendChild(closer),wrap.appendChild(data),document.body.appendChild(wrap),context.addEventListener("mouseover",(function(e){wrap.classList.contains("inactive")||wrap.classList.contains("selected")||wrap.classList.add("surfing")})),context.addEventListener("mouseout",(function(e){wrap.classList.contains("inactive")||wrap.classList.contains("selected")||wrap.classList.remove("surfing")})),context.addEventListener("mousemove",mapE),context.addEventListener("scroll",mapE);const history={x:0,y:0};function mapE(e){if(wrap.classList.contains("inactive")||wrap.classList.contains("selected"))return;wrap.classList.remove("surfing"),info.innerHTML="",data.removeAttribute("class"),e.type&&"scroll"===e.type?(e.clientX=history.x,e.clientY=history.y):(history.x=e.clientX,history.y=e.clientY);const element=document.elementFromPoint(e.clientX,e.clientY);if(!element)return;const rect=element.getBoundingClientRect(),style=context.getComputedStyle(element);setStyle(element),info.innerHTML=`<span node>${element.nodeName.toLowerCase()}</span>`,(element.classList.value||element.classList.length)&&(info.innerHTML+=element.classList.value.replace(/  +/g," ").split(" ").reduce((acc,cls)=>cls&&acc+"<span class>."+cls+"</span>","")),(element.id||element.getAttribute("id"))&&(info.innerHTML+=`<span id>#${element.id||element.getAttribute("id")}</span>`),info.innerHTML+=`<div dimension>${parse(rect.width)}×${parse(rect.height)}${"block"!==style.display?`<span display>${style.display}</span>`:""}</div>`,info.innerHTML+=`<div styling>Bg:&nbsp;<span style="background: ${style.backgroundColor}" title="${style.backgroundColor}"></span>&nbsp;&nbsp;Color:&nbsp;<span style="background: ${style.color}" title="${style.color}"></span></div>`,style.padding&&"0px"!==style.padding&&(info.innerHTML+=`<span padding>${style.padding}</span>`),style.margin&&"0px"!==style.margin&&(info.innerHTML+=`${style.padding&&"0px"!==style.padding?"&nbsp;&nbsp;":""}<span margin>${style.margin}</span>`),style.border&&"0px"!==style.borderWidth&&"none"!==style.borderStyle&&(info.innerHTML+=`<div border>${style.border}</div>`),wrap.classList.add("surfing"),setPosition()}function setStyle(node){const rect=node.getBoundingClientRect(),style=context.getComputedStyle(node);wrap.style.top=rect.top+"px",wrap.style.left=rect.left+"px",wrap.style.width=rect.width+"px",wrap.style.height=rect.height+"px",wrap.style.setProperty("--bt",parseInt(style.borderTopWidth,10)>=0?style.borderTopWidth:"0px"),wrap.style.setProperty("--br",parseInt(style.borderRightWidth,10)>=0?style.borderRightWidth:"0px"),wrap.style.setProperty("--bb",parseInt(style.borderBottomWidth,10)>=0?style.borderBottomWidth:"0px"),wrap.style.setProperty("--bl",parseInt(style.borderLeftWidth,10)>=0?style.borderLeftWidth:"0px"),wrap.style.setProperty("--mt",parseInt(style.marginTop,10)>=0?style.marginTop:"0px"),wrap.style.setProperty("--mr",parseInt(style.marginRight,10)>=0?style.marginRight:"0px"),wrap.style.setProperty("--mb",parseInt(style.marginBottom,10)>=0?style.marginBottom:"0px"),wrap.style.setProperty("--ml",parseInt(style.marginLeft,10)>=0?style.marginLeft:"0px"),wrap.style.setProperty("--pt",parseInt(style.paddingTop,10)>=0?style.paddingTop:"0px"),wrap.style.setProperty("--pr",parseInt(style.paddingRight,10)>=0?style.paddingRight:"0px"),wrap.style.setProperty("--pb",parseInt(style.paddingBottom,10)>=0?style.paddingBottom:"0px"),wrap.style.setProperty("--pl",parseInt(style.paddingLeft,10)>=0?style.paddingLeft:"0px")}function setPosition(){const rect=()=>data.getBoundingClientRect(),sect=()=>wrap.getBoundingClientRect();rect().height+20>sect().height&&data.classList.add("outside"),rect().left+rect().width+15>context.innerWidth&&data.classList.add("fromright"),rect().top-6<0&&data.classList.add("setbelow"),rect().top+rect().height+15>context.innerHeight&&data.classList.add("scrollable")}function parse(num){const countDecimals=function(n){return Math.floor(n.valueOf())===n.valueOf()?0:n.toString().split(".")[1].length||0};return countDecimals(num=parseFloat(num))>2&&(num=parseFloat(num.toFixed(2)))==parseFloat(num.toFixed(1))&&(num=parseFloat(num.toFixed(1))),num}function reset(){wrap.removeAttribute("class"),wrap.classList.add("inactive"),data.removeAttribute("class"),info.innerHTML="",wrap.removeAttribute("style")}context[name]=function(showPreview=!1){return new Promise((resolve,reject)=>{wrap.classList.contains("inactive")||wrap.classList.contains("selected")||reject("Error: Another instance of 'DomSelector' is already running. Finish it before starting another one."),wrap.classList.contains("selected")&&reset(),wrap.classList.remove("inactive"),context.addEventListener("mousedown",(function(e){wrap.classList.contains("inactive")&&reject("Error: Another instance of 'DomSelector' is already running. Finish it before starting another one."),showPreview&&wrap.classList.add("selected"),wrap.classList.remove("surfing");const selected=document.elementFromPoint(e.clientX,e.clientY);showPreview?wrap.classList.add("surfing"):reset(),selected?resolve(selected):reject("Error: Failed to find the Selected element. Try to fetch again.")}),{once:!0})})};let autoSelect=!1;context[name].autoSelect=function(showPreview=!1){if(autoSelect)throw new Error("Error: AutoSelect is already enabled.");autoSelect=!0;const auto=document.createElement("dom-selector-auto");auto.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" fill="currentColor" height="20"><path xmlns="http://www.w3.org/2000/svg" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM288 176c0-44.2-35.8-80-80-80s-80 35.8-80 80c0 48.8 46.5 111.6 68.6 138.6c6 7.3 16.8 7.3 22.7 0c22.1-27 68.6-89.8 68.6-138.6zm-48 0c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z"></path></svg>',document.body.appendChild(auto),auto.addEventListener("click",(function(e){this.classList.add("auto"),context[name](showPreview).then(el=>{console.log(el)}).finally(()=>{auto.classList.remove("auto")})}))}}(window,"DomSelector");