refactor: organised the scripts into a more well defined structure

now all scripts that are common to all pages lie in src/scripts/common
each page gets its own folder in src/pages and different parts of the
page's configuration are separated in separated folders which are all
finally imported in src/pages/*/index.ts

1 files changed, 87 insertions, 0 deletions

diff --git a/src/scripts/pages/sheet-map/download-map-pdf-page-content.html b/src/scripts/pages/sheet-map/download-map-pdf-page-content.html
new file mode 100644
index 0000000..da765ec
--- /dev/null
+++ b/src/scripts/pages/sheet-map/download-map-pdf-page-content.html
@@ -0,0 +1,87 @@
+<style>
+	body {
+		margin: 0;
+		padding: 0;
+	}
+	svg {
+		display: block;
+		max-width: 100%;
+		max-height: 100%;
+	}
+	text {
+		font-family: "BNB-TTBidisha", sans-serif;
+		font-weight: bold;
+		font-size: 2;
+		fill: blue;
+		text-anchor: middle;
+	}
+	path {
+		fill-rule: evenodd;
+		fill: #ffcc66;
+		fill-opacity: 0.8;
+		stroke: #cc6633;
+		stroke-opacity: 0.8;
+		stroke-width: 0.2;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+	.details {
+		font-size: 1.3rem;
+		display: flex;
+		width: 100%;
+		padding: 0 1rem 1rem 1rem;
+		border-bottom: 2px solid black;
+		justify-content: space-around;
+		margin-bottom: 0.2rem;
+	}
+</style>
+<div class="details">
+	<div>
+		DISTRICT: $district$
+	</div>
+	<div>
+		BLOCK: $block$
+	</div>
+	<div>
+		MOUZA: $mouza$
+	</div>
+</div>
+<svg>
+	$mapContent$
+</svg>
+<script>
+	let minx = Infinity;
+	let miny = Infinity;
+	let maxx = 0;
+	let maxy = 0;
+	const paths = document.querySelectorAll("path");
+
+	for (const p of paths) {
+		const b = p.getBBox();
+		minx = b.x < minx ? b.x : minx;
+		miny = b.y < miny ? b.y : miny;
+		maxx = maxx < b.x + b.width ? b.x + b.width : maxx;
+		maxy = maxy < b.y + b.height ? b.y + b.height : maxy;
+	}
+
+	for (const p of paths) {
+		const m = "M " + p.getAttribute("d").substr(2).split(",").map(cood => {
+			cood = cood.trim().split(" ");
+			return cood[0] + " " + (miny + maxy - parseFloat(cood[1])).toString();
+		}).join(", ");
+		p.setAttribute("d", m);
+	}
+
+	for (const t of document.querySelectorAll("text")) {
+		t.setAttribute("y", (miny + maxy - parseFloat(t.getAttribute("y"))).toString());
+	}
+
+	document.querySelector("svg")
+		.setAttribute(
+			"viewBox",
+			[minx, miny, maxx - minx, maxy - miny]
+				.map(e => e.toString()).join(" ")
+		);
+	window.addEventListener("afterprint", window.close);
+	window.print();
+</script>