ashishk1996/doubleclickinput.html

## doubleclickinput.html
<!DOCTYPE>
<html>
<head>
<title>Text on mouse pointer</title>
<style type="text/css">


body{
    position: relative;
}

</style>

</head>

<body  id="clickPosition">
<div id="user_input_form" style="display: none; position: absolute;">
  <form onsubmit="event.preventDefault(); onSubmit();">
    <input id="user_input">
  </form>
</div>
 <script language="JavaScript" type="text/JavaScript">
document.getElementById("clickPosition").style.backgroundImage = "url('http://hdwpro.com/wp-content/uploads/2017/04/Cool-Background.jpg')";
 function getTextNode(text){
   return document.createTextNode(text);
 }

 function getDiv(pageX, pageY, position, textNode, id){
   let div = document.createElement('DIV');
   div.style.position = position;
   div.appendChild(textNode);
   div.style.left = pageX;
   div.style.top = pageY;
   div.style.color="#FF9800"
   div.id = id;
   div.onclick = () => {onTextNodeClick(id)}
   return div;
 }

    function add_new_node_to_DOM(user_input, pageX, pageY){
      let new_node_data, prev_nodes;

      let local_val = localStorage.getItem('dynamicTextNodes');

      prev_nodes = JSON.parse(local_val) || [];

      let index = prev_nodes.length;
      let text=user_input;
      let textNode = getTextNode(text);
      let position = 'absolute';
      let id = "textNode" + index;
      let div = getDiv(pageX, pageY, position, textNode, id);
      document.body.appendChild(div);
      return div;
    }
    function insertLocalStorage(div){
      let local_val= localStorage.getItem('dynamicTextNodes');
      let prev_nodes = JSON.parse(local_val) || [];
      new_node_data ={
        text : div.innerHTML,
        pageX:  div.style.left,
        pageY:  div.style.top,
        position : div.style.position,
        id : div.id
      }
      prev_nodes.push(new_node_data);
      localStorage.setItem('dynamicTextNodes', JSON.stringify(prev_nodes));
    }
    function onSubmit(){
      let user_input = document.getElementById("user_input").value;

      document.getElementById("user_input").value = "";
      document.getElementById("user_input_form").style.display = "none";

      let new_node = document.getElementsByClassName("selected_node").length > 0 ? false : true;
      if(new_node){
          let pageX = document.getElementById("user_input_form").style.left;
          let pageY = document.getElementById("user_input_form").style.top;
          let div = add_new_node_to_DOM(user_input, pageX, pageY);
          insertLocalStorage(div)
      }else{
        let target_div_id = document.getElementsByClassName("selected_node")[0].id;
        document.getElementById(target_div_id).innerHTML = user_input;
        document.getElementById(target_div_id).style.display = "block";
        updateLocalStorage(target_div_id, user_input);
      }
    }

    function updateLocalStorage(id, value){
      let local_val = localStorage.getItem('dynamicTextNodes');
      let prev_nodes = JSON.parse(local_val) || [];
      for(let i=0;i<prev_nodes.length;i++){
        if(prev_nodes[i]['id'] == id){
          prev_nodes[i]['text'] = value;
          break;
        }
      }
      localStorage.setItem('dynamicTextNodes', JSON.stringify(prev_nodes));
    }

   function onTextNodeClick(textNodeId, e) {
     let prev_selected_nodes = document.getElementsByClassName("selected_node");
     if(prev_selected_nodes.length > 0){
        document.getElementsByClassName("selected_node")[0].style.display = "block";
        document.getElementsByClassName("selected_node")[0].classList.remove("selected_node");
      }
     console.log("Utha le re baba " + textNodeId);
     let pageX, pageY, user_input_text;
     if(textNodeId){
         document.getElementById(textNodeId).style.display = "none" ;
         document.getElementById(textNodeId).classList.add("selected_node");
         pageX = document.getElementById(textNodeId).style.left ;
         pageY = document.getElementById(textNodeId).style.top ;
         user_input_text = document.getElementById(textNodeId).innerHTML ;

    } else {
        pageX = e.pageX
        pageY = e.pageY
        user_input_text = ""
    }
    document.getElementById("user_input").value = user_input_text;
    document.getElementById("user_input_form").style.left = pageX;
    document.getElementById("user_input_form").style.top = pageY;
    document.getElementById("user_input_form").style.display = "block";
   }


   function loadPrevNodes(){
     let new_node_data, prev_nodes;

     let local_val= localStorage.getItem('dynamicTextNodes');

     prev_nodes = JSON.parse(local_val) || [];
     if(prev_nodes.length > 0){
       let prev_nodes_len = prev_nodes.length;
       let last_element = document.getElementById(prev_nodes[prev_nodes_len-1]['id'])
       if(!last_element){
         for(let i=0;i<prev_nodes_len;i++){
           let curr_node = prev_nodes[i];
           let text=curr_node['text']
           let textNode = getTextNode(text);
           let pageX = curr_node['pageX']
           let pageY = curr_node['pageY']
           let div = getDiv(pageX, pageY, curr_node['position'], textNode, curr_node['id']);
           // console.log("id " + curr_node['id'] + "pagex "  +curr_node['pageX'])
           document.body.appendChild(div);
         }
       }
     }
   }
   loadPrevNodes();
   document.getElementById("clickPosition").addEventListener("dblclick", function(e) {
     if(e.target.id == "clickPosition"){
       onTextNodeClick(null, e);
     }
   });

   // reference https://www.quirksmode.org/
</script>

</body>
</html>
	<!DOCTYPE>
	<html>
	<head>
	<title>Text on mouse pointer</title>
	<style type="text/css">


	body{
	position: relative;
	}

	</style>

	</head>

	<body id="clickPosition">
	<div id="user_input_form" style="display: none; position: absolute;">
	<form onsubmit="event.preventDefault(); onSubmit();">
	<input id="user_input">
	</form>
	</div>
	<script language="JavaScript" type="text/JavaScript">
	document.getElementById("clickPosition").style.backgroundImage = "url('http://hdwpro.com/wp-content/uploads/2017/04/Cool-Background.jpg')";
	function getTextNode(text){
	return document.createTextNode(text);
	}

	function getDiv(pageX, pageY, position, textNode, id){
	let div = document.createElement('DIV');
	div.style.position = position;
	div.appendChild(textNode);
	div.style.left = pageX;
	div.style.top = pageY;
	div.style.color="#FF9800"
	div.id = id;
	div.onclick = () => {onTextNodeClick(id)}
	return div;
	}

	function add_new_node_to_DOM(user_input, pageX, pageY){
	let new_node_data, prev_nodes;

	let local_val = localStorage.getItem('dynamicTextNodes');

	prev_nodes = JSON.parse(local_val) \|\| [];

	let index = prev_nodes.length;
	let text=user_input;
	let textNode = getTextNode(text);
	let position = 'absolute';
	let id = "textNode" + index;
	let div = getDiv(pageX, pageY, position, textNode, id);
	document.body.appendChild(div);
	return div;
	}
	function insertLocalStorage(div){
	let local_val= localStorage.getItem('dynamicTextNodes');
	let prev_nodes = JSON.parse(local_val) \|\| [];
	new_node_data ={
	text : div.innerHTML,
	pageX: div.style.left,
	pageY: div.style.top,
	position : div.style.position,
	id : div.id
	}
	prev_nodes.push(new_node_data);
	localStorage.setItem('dynamicTextNodes', JSON.stringify(prev_nodes));
	}
	function onSubmit(){
	let user_input = document.getElementById("user_input").value;

	document.getElementById("user_input").value = "";
	document.getElementById("user_input_form").style.display = "none";

	let new_node = document.getElementsByClassName("selected_node").length > 0 ? false : true;
	if(new_node){
	let pageX = document.getElementById("user_input_form").style.left;
	let pageY = document.getElementById("user_input_form").style.top;
	let div = add_new_node_to_DOM(user_input, pageX, pageY);
	insertLocalStorage(div)
	}else{
	let target_div_id = document.getElementsByClassName("selected_node")[0].id;
	document.getElementById(target_div_id).innerHTML = user_input;
	document.getElementById(target_div_id).style.display = "block";
	updateLocalStorage(target_div_id, user_input);
	}
	}

	function updateLocalStorage(id, value){
	let local_val = localStorage.getItem('dynamicTextNodes');
	let prev_nodes = JSON.parse(local_val) \|\| [];
	for(let i=0;i<prev_nodes.length;i++){
	if(prev_nodes[i]['id'] == id){
	prev_nodes[i]['text'] = value;
	break;
	}
	}
	localStorage.setItem('dynamicTextNodes', JSON.stringify(prev_nodes));
	}

	function onTextNodeClick(textNodeId, e) {
	let prev_selected_nodes = document.getElementsByClassName("selected_node");
	if(prev_selected_nodes.length > 0){
	document.getElementsByClassName("selected_node")[0].style.display = "block";
	document.getElementsByClassName("selected_node")[0].classList.remove("selected_node");
	}
	console.log("Utha le re baba " + textNodeId);
	let pageX, pageY, user_input_text;
	if(textNodeId){
	document.getElementById(textNodeId).style.display = "none" ;
	document.getElementById(textNodeId).classList.add("selected_node");
	pageX = document.getElementById(textNodeId).style.left ;
	pageY = document.getElementById(textNodeId).style.top ;
	user_input_text = document.getElementById(textNodeId).innerHTML ;

	} else {
	pageX = e.pageX
	pageY = e.pageY
	user_input_text = ""
	}
	document.getElementById("user_input").value = user_input_text;
	document.getElementById("user_input_form").style.left = pageX;
	document.getElementById("user_input_form").style.top = pageY;
	document.getElementById("user_input_form").style.display = "block";
	}



	function loadPrevNodes(){
	let new_node_data, prev_nodes;

	let local_val= localStorage.getItem('dynamicTextNodes');

	prev_nodes = JSON.parse(local_val) \|\| [];
	if(prev_nodes.length > 0){
	let prev_nodes_len = prev_nodes.length;
	let last_element = document.getElementById(prev_nodes[prev_nodes_len-1]['id'])
	if(!last_element){
	for(let i=0;i<prev_nodes_len;i++){
	let curr_node = prev_nodes[i];
	let text=curr_node['text']
	let textNode = getTextNode(text);
	let pageX = curr_node['pageX']
	let pageY = curr_node['pageY']
	let div = getDiv(pageX, pageY, curr_node['position'], textNode, curr_node['id']);
	// console.log("id " + curr_node['id'] + "pagex " +curr_node['pageX'])
	document.body.appendChild(div);
	}
	}
	}
	}
	loadPrevNodes();
	document.getElementById("clickPosition").addEventListener("dblclick", function(e) {
	if(e.target.id == "clickPosition"){
	onTextNodeClick(null, e);
	}
	});

	// reference https://www.quirksmode.org/
	</script>

	</body>
	</html>