Ascii-diagram-poc

Merge togheter multiple divs into one

by Niklas Ottosson

HTML

<button id="copy">
Copy
</button>
<div id="main" class="main">
  <div id="pattern1" class="pattern1">
    <pre id="p1">
   ------------
  |            |
  |     A      |
  |            |
   ------------
     </pre>
  </div>
  <div id="pattern2" class="pattern2">
    <pre id="p2">
      ---
     | B |
      ---
    </pre>
  </div>
</div>
<div id="result" class="result">
  <pre id="result-container">
  
  </pre>
</div>

CSS

.main {
  position: relative;
}

.pattern1 {
  position: absolute;
  top: 5px;
  left: 0px;
}

.pattern2 {
  position: absolute;
  top: 80px;
  left: 150px;
}

.result {
  position: absolute;
  background-color: lightblue;
  height: 200px;
  width: 400px;
  top: 170px;
  left: 10px;
}

JavaScript

function copyFunction() {
	// Result container
  const resultContainer = document.getElementById('result-container');
  
  // Get texts
  const copyText1 = document.getElementById("p1").textContent;
  const copyText2 = document.getElementById("p2").textContent;
  
  // Get positions
  const rect1 = document.getElementById("p1").getBoundingClientRect();
  const rect2 = document.getElementById("p2").getBoundingClientRect();
  const mainrect = document.getElementById("main").getBoundingClientRect();
    
  // Get positions relative to 'main'
  resultContainer.textContent = copyText2;
  
  /*alert(copyText);*/
  /*
  const textArea = document.createElement('textarea');
  textArea.textContent = copyText;
  document.body.append(textArea);
  textArea.select();
  document.execCommand("copy");
  */
}

function render(relativeRect, text) {
	// Måste man kanske rendera "rad-för-rad" "uppifrån-och-ner" för att det skall bli rätt?
  // Eller i en TEXTAREA med Insert satt kanske?
}


function calculateOffset(childPos, parentPos){
	var relative = {};

	relative.top = childPos.top - parentPos.top;
	relative.right = childPos.right - parentPos.right;
	relative.bottom = childPos.bottom - parentPos.bottom;
	relative.left = childPos.left - parentPos.left;
  
  return relative;
}

document.getElementById('copy').addEventListener('click', copyFunction);

// If you need to place cursor
//https://stackoverflow.com/questions/34968174/set-text-cursor-position-in-a-textarea