CSS SECTORS ON TOUCH

//------------------------OLD-SELECTORS-ON-TOUCH-------------------------
let stop= false;
let input= document.querySelector("input");

document.body.ontouchstart=()=>{
let target= event.target;
let sel=[];

while(!stop){
if(target.tagName.toLowerCase()=="body"){
sel.unshift("body");
break;
}

if(target.parentNode.id){
sel.unshift("#"+target.parentNode.id,target.tagName.toLowerCase());
break;
}
else if(target.parentNode.className){
sel.unshift("."+target.parentNode.className,target.tagName.toLowerCase());
break;
}
else{
sel.unshift(target.parentNode.tagName.toLowerCase(),target.tagName.toLowerCase());
target= target.parentNode;
}
}

input.value= sel.join(">");
};

//-----------------
let
a= document.createElement("div"),
b= document.createElement("style"),
c=`outline: 2px solid rgb(255,192,203);
background-image:none!important;
background-color:rgb(255,192,203,0.5)!important;`;

a.style.cssText=`
pointer-events:none;
font: bold 15px "Courier New";
position:fixed; left:2ch; top:0;
text-align:center;
background: yellow;
color:black; padding:2px`;

document.body.append(a,b);

document.body.ontouchstart=()=>{
let target= event.target,
id= target.id,
klass= target.className,
tag= target.tagName.toLowerCase(),
sel= [];

if(id!=(null||"")){
a.innerHTML= "#"+id;
}
else if(klass!=(null||"")){
a.innerHTML= "."+ klass.split(" ").join(".");
}
else{
while(target.tagName.toLowerCase()!="body"){
      if(target.parentNode.id){
      sel.unshift("#"+target.parentNode.id,target.tagName.toLowerCase());
      break;
      }
      else if(target.parentNode.className){
      sel.unshift("."+target.parentNode.className,target.tagName.toLowerCase());
      break;
      }
      else{
      sel.unshift(target.parentNode.tagName.toLowerCase(),target.tagName.toLowerCase());
      target= target.parentNode;
      }
}

a.innerHTML= sel.join(">");
}


target.style.cssText+= c;
};

document.body.ontouchend=()=>{
a.innerHTML= "NO SELECTION";
target.style.cssText-= c;
};

//------------------------NEW-SELECTORS-ON-TOUCH-------------------------
let
a= document.createElement("div"),
b= document.createElement("style");
document.body.append(a,b);

a.style.cssText=`
font: bold 15px "Courier New";
position:fixed; left:2ch; top:0;
text-align:center;
background: yellow;
color:black; padding:2px`;

document.body.ontouchstart=()=>{
let target= event.target,
id= target.id,
klass= target.className,
tag= target.tagName.toLowerCase();

if(id!=(null||"")){
a.innerHTML= "#"+id;
}
else if(klass!=(null||"")){
a.innerHTML= "."+ klass.split(" ").join(".");
}
else{
a.innerHTML= tag;
}

target.classList.add("kaydee");
b.innerHTML=`.kaydee{
outline: 2px solid rgb(255,192,203);
background-image:none!important;
background-color:rgb(255,192,203,0.5)!important;}`;
};


document.body.ontouchend=()=>{
event.target.classList.remove("kaydee");
b.innerHTML= "";
};

//--------------------------OLD-VIEW SOURCE ON TOUCH-----------------------------
let a= document.createElement("textarea");
a.style.cssText= `width:30em;
height:15em; color:yellow;
font: bold 10px "Courier New";
position:fixed;top:1px; left:1px;
background: rgb(0,0,0,0.6);`;

document.body.append(a);

let regex= /<style>\.qc-cmp-showing.+?<\/textarea>/;

document.body.ontouchstart= (e)=>{
if(e.target!=a){
a.value= e.target.outerHTML.replace(regex,"");
}};

//--------------------------NEW-VIEW SOURCE ON TOUCH-----------------------------
let a= document.createElement("textarea"),
b= document.createElement("style");
a.classList.add("qcksrcvwr");

document.body.append(a,b);

b.innerHTML= `.qcksrcvwr{
width:30em; height:15em;
font: bold 10px "Courier New";
position:fixed; top:1px; left:1px;
background: rgb(0,0,0,0.7);color: white;
}
.nowtouching{
background:rgb(255,192,203,0.5)!important;
transition: none!important;
}`;

let regex= /\n?<style>\.qc-cmp-showing.+<\/style>/;

document.body.ontouchstart= (e)=>{
if(e.target!=a){
event.target.classList.add("nowtouching");
a.value= e.target.outerHTML
.split(regex).join("")
.split(` nowtouching`).join("")
.split(` class="nowtouching"`).join("")
.split(` class=""`).join("");
}
};

document.body.ontouchend=()=>{
event.target.classList.remove("nowtouching");
};