JPEG Doc Editor

by AntonLapshin

HTML

<div id="doc_editor">

</div>

SCSS

.doc {
  .page {
    position: relative;
    
    img {
      width: 450px;
    }
    
    .field {
      position: absolute;
    }
  }
}

JavaScript

const fieldControls = {
	input: (value, field) => `<input type="text" value="${value}" style="width: ${field.width}px" />`
}

const renderField = (field, data) => {
	const control = fieldControls[field.type];
	return `
  <div class="field" style="left: ${field.coords[0]}px; top: ${field.coords[1]}px">
		${control(data[field.name] || "", field)}
  </div>
	`;
};

const renderPage = (page, data) => `
  <div class="page">
  	<img src="${page.img}" />
    ${
    	page.fields ? page.fields.map(f => renderField(f, data)).join("") : ""
    }
  </div>
`;

const renderDoc = (doc, data) => `
	<div class="doc">
  	<h2>${doc.name}</h2>
    ${
    	doc.pages.map(page => renderPage(page, data)).join("")
    }
  </div>
`;

const doc1 = {
	name: "Doc 1",
  pages: [
  	{
    	img: "https://image.ibb.co/cPegNm/0001.jpg",
      fields: [
        {
          name: "Namn",
          coords: [50, 300],
          width: 600,
          type: "input"
        },
        {
          name: "Personnummer",
          coords: [50, 350],
          width: 200,
          type: "input"
        }       
      ]
    },
    {
    	img: "https://image.ibb.co/fbRHv6/0002.jpg"
    }
  ]
}

const data = {
	Namn: "Rob Stark"
};

const DocEditor = {
	open: (doc, data) => {
  	const html = renderDoc(doc, data);
    document.getElementById("doc_editor").innerHTML = html;
  }
};

DocEditor.open(doc1, data);