Page edit divison

page-edit-divison.markdown

Page edit divison

A Pen by Opher Vishnia on CodePen.

License.

script.js

var linesPerPage = 3;

function addPage(){
  
  //dom
  
  var pageContainer = document.createElement("div");
  pageContainer.classList.add("pageContainer");
  
  var header = document.createElement("div");
  header.classList.add("header");
  header.innerHTML = "header";
  
  var page = document.createElement("textarea");
  page.classList.add("page");
  page.setAttribute("cols","60");
  page.setAttribute("rows",linesPerPage);
  
  var footer = document.createElement("div");
  footer.classList.add("footer");
  footer.innerHTML = "footer";
  
  pageContainer.appendChild(header);
  pageContainer.appendChild(page);
  pageContainer.appendChild(footer);
 
  document.body.appendChild(pageContainer);
  
  //events
  page.addEventListener("input", onPageInput)
  
  return {
    page: page,
    pageContainer: pageContainer
  }
}

function onPageInput(event){
  var page = event.target;
  var lines = page.value.split(/\r*\n/);
  
  if (lines.length > linesPerPage){
    var newPage = addPage();
    page.parentNode.parentNode.insertBefore(newPage.pageContainer, page.parentNode.nextSibling);

    
    //reset original textArea value
    page.value = "";
    
    //populate old textarea and new textarea
    page.value = lines.slice(0, linesPerPage).join("\n");
    newPage.page.value = lines.slice(linesPerPage, lines.length).join("\n");
    
    newPage.page.focus();
  }
}

addPage();

style.css

body{
  background: gray;
}

.pageContainer{
    width: 30rem;
    display: block;

    margin: 1rem;
}

.page{
  width: 100%;
  background: white;
}

.header, .footer{
  text-align: center;
}