diff options
| -rw-r--r-- | config/tsconfig.json | 3 | ||||
| -rw-r--r-- | config/webpack.config.js | 6 | ||||
| -rw-r--r-- | config/webpack/loader/to-string-loader.js | 41 | ||||
| -rw-r--r-- | src/html.d.ts | 3 | ||||
| -rw-r--r-- | src/scripts/functionality/view-khatian/download-information-pdf-page-content.html | 273 | ||||
| -rw-r--r-- | src/scripts/functionality/view-khatian/download-information-pdf-page-content.ts | 219 | ||||
| -rw-r--r-- | src/scripts/functionality/view-khatian/index.ts | 15 | ||||
| -rw-r--r-- | src/shared/download-pdf.ts | 17 | ||||
| -rw-r--r-- | src/shared/generate-web-page.ts | 9 |
9 files changed, 343 insertions, 243 deletions
diff --git a/config/tsconfig.json b/config/tsconfig.json index 120bfcb..ec61595 100644 --- a/config/tsconfig.json +++ b/config/tsconfig.json @@ -1,4 +1,7 @@ { + "files": [ + "../src/html.d.ts" + ], "compilerOptions": { "outDir": "dist", "sourceMap": true, diff --git a/config/webpack.config.js b/config/webpack.config.js index 31bbb8d..2ae6544 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -84,7 +84,7 @@ const commonOptions = { mode: "production", target: "web", resolve: { - extensions: [".ts", ".js"], + extensions: [".ts", ".js", ".html"], alias: { "@": global.SOURCE_DIR } @@ -97,6 +97,10 @@ const commonOptions = { options: { configFile: "config/tsconfig.json" } + }, + { + test: /\.html$/, + loader: path.resolve(CONFIG_DIR, "webpack/loader/to-string-loader.js") } ] }, diff --git a/config/webpack/loader/to-string-loader.js b/config/webpack/loader/to-string-loader.js new file mode 100644 index 0000000..cf26b28 --- /dev/null +++ b/config/webpack/loader/to-string-loader.js @@ -0,0 +1,41 @@ +module.exports = function(source) { + source = source + .replaceAll("\\", "\\\\") + .replaceAll("`","\\`") + .replaceAll("${", "\\${"); + + const replacements = {}; + let i = 0; + while (true) { + i = source.indexOf("$", i) + 1; + + if (i <= 0) { + break; + } + + const end = source.indexOf("$", i); + + if (end < 0) { + break; + } + + const replacementVariable = source.substring(i, end); + replacements[replacementVariable] = 1; + source = source.substring(0, i - 1) + `\${${replacementVariable}}` + source.substring(end + 1); + i = end + 1; + } + + source = `\`${source}\``; + + const replacementList = []; + + for (const replacement in replacements) { + replacementList.push(replacement); + } + + const replacementArguments = replacementList.length > 0 + ? `{ ${replacementList.join(", ")} }` + : ""; + + return `export default (${replacementArguments}) => ${source};`; +}; diff --git a/src/html.d.ts b/src/html.d.ts new file mode 100644 index 0000000..b913216 --- /dev/null +++ b/src/html.d.ts @@ -0,0 +1,3 @@ +declare module "*.html" { + export default (replacements: any) => string; +} diff --git a/src/scripts/functionality/view-khatian/download-information-pdf-page-content.html b/src/scripts/functionality/view-khatian/download-information-pdf-page-content.html new file mode 100644 index 0000000..e91c15e --- /dev/null +++ b/src/scripts/functionality/view-khatian/download-information-pdf-page-content.html @@ -0,0 +1,273 @@ +<div id="content"> + <style> + * { + box-sizing: border-box !important; + text-decoration: none; + margin: 0; + padding: 0; + font-size: 16px !important; + } + + #content { + width: 100%; + margin: 0; + padding: 0; + } + + .banner { + width: 100%; + } + + .details { + padding: 1rem; + } + + #locater-information { + width: 100%; + margin-bottom: 1rem; + } + + #locater-information, + .details#plot-information > div:nth-child(1) > div:nth-child(5) > table { + border-collapse: collapse; + } + + .details#khatian-information > table, + .details#plot-information > div:nth-child(1) { + width: 100% !important; + border-spacing: 0; + } + + .details#plot-information > div:nth-child(1) > div:nth-child(1) { + text-align: center !important; + } + + .details#plot-information > div:nth-child(1) > div:nth-child(1) { + margin: 0 !important; + } + + .details#plot-information > div > div > table tr, + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div > table > tbody > tr, + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(5) > table > tbody > tr:last-child, + #locater-information > tbody > tr { + border-bottom: 1px solid black; + } + + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div > table > tbody > tr > th:nth-child(1), + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div > table > tbody > tr > td:nth-child(1), + .details#khatian-information #headertitle > tr > th:nth-child(1), + #locater-information > tbody > tr > td:nth-child(1), + .details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > td:nth-child(1), + #headertitle > tr > th:nth-child(1), + #plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody > tr > td:nth-child(1) { + border-left: 1px solid black !important; + } + + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr:nth-child(1), + #headertitle > tr, + .details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr.table-text.knwurprpty_tbl_head_txt.ng-scope, + #headertitle, + #locater-information tr:nth-child(1) { + border-top: 1px solid black !important; + border-color: black !important; + } + + .details td { + white-space: normal; + } + + .details#plot-information #headertitle > tr > th, + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div > table > tbody > tr > th, + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div > table > tbody > tr > td, + .details#khatian-information #headertitle > tr > th, + #locater-information > tbody > tr > td, + .details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > td, + .details#plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody > tr > td, + .details#plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody { + border-right: 1px solid black !important; + } + + .details#plot-information > div:nth-child(1) > div:nth-child(3) > table { + border: none !important; + } + + .details#plot-information > div:nth-child(1) > div { + position: initial !important; + left: 0 !important; + width: 100% !important; + border-left: none !important; + border-right: none !important; + } + + .details#plot-information > div:nth-child(2), + .details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > td:nth-child(4), + .details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > th:nth-child(4), + .details#khatian-information > table > tbody > tr > td:nth-child(1) > p:nth-child(3), + .details#khatian-information > table > tbody > tr > td:nth-child(2) { + display: none !important; + } + + .details#plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody > tr { + background-color: transparent !important; + } + + .details#khatian-information > table > tbody > tr > td:nth-child(1), + .details#plot-information > div:nth-child(1) > div:nth-child(3) > table { + width: 100% !important; + } + + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(1), + .details#khatian-information > table > tbody > tr > td:nth-child(1) > p:nth-child(4) { + text-align: center; + } + + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) { + width: 100% !important; + position: initial !important; + left: 0 !important; + } + + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table, + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(5) > table { + width: 100% !important; + border: none !important; + } + + .details table tbody tr tr, + .details table tbody tr th, + .details table tbody tr td { + background-color: transparent; + } + + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) td, + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) th { + text-align: left; + } + + .details#khatian-information > table > tbody > tr > td > div > table > tbody > tr > th, + .details#khatian-information > table > tbody > tr > td > div > table > tbody > tr > td, + .details#plot-information td { + padding: 0 0.2rem 0 0.2rem; + } + + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr:nth-child(1) > th { + font-weight: 500; + } + + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr > th:nth-child(1), + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr > td:nth-child(1), + #locater-information > tbody > tr > td:nth-child(1) { + font-weight: bold; + } + + .details#khatian-information > table > tbody > tr > td:nth-child(1) > p:nth-child(4) { + margin-top: 1rem !important; + } + + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(5), + .details#plot-information > div:nth-child(1) > div:nth-child(5) { + position: initial !important; + left: 0 !important; + top: 0 !important; + margin: 0 !important; + width: 100% !important; + } + + .details#plot-information > div:nth-child(1), + .details#khatian-information > table, + .details#khatian-information > table > tbody > tr > td:nth-child(1) { + border: none !important; + } + + .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr:nth-child(1) > th, + #locater-information > tbody > tr > td { + width: 50%; + } + + @page { + size: A4; + margin: 0 0 5rem 0; + } + + footer { + heigth: 5rem; + width: 100%; + } + + footer > img { + width: 210mm; + height: 5rem !important; + background: transparent; + position: fixed; + bottom: 0; + } + + @page { + size: A4; + } + + body { + width: 210mm !important; + height: 297mm !important; + margin: 0 !important; + padding: 0 !important; + } + </style> + <img class="banner" src="https://banglarbhumi.gov.in/BanglarBhumi/images/bl.png"> + <div class="details" id="$isPlotInformation$">$details$</div> + <footer> + <img class="footer" src="$sanghaFacilitationCentreBannerUrl$"> + </footer> + <script> + let tableBodyElement; + const createTableEntry = (label, value) => { + const tableRowElement = document.createElement("tr"); + const tableLabelColumnElement = document.createElement("td"); + tableLabelColumnElement.innerHTML = label; + const tableValueColumnElement = document.createElement("td"); + tableValueColumnElement.innerHTML = value; + tableRowElement.appendChild(tableLabelColumnElement); + tableRowElement.appendChild(tableValueColumnElement); + tableBodyElement.appendChild(tableRowElement); + }; + + if ($isPlotInformation$) { + const tableElement = document.createElement("table"); + tableElement.setAttribute("id", "locater-information"); + tableBodyElement = document.createElement("tbody"); + tableElement.appendChild(tableBodyElement); + const detailsElement = document.querySelector("#plot-information > div:nth-child(1)"); + detailsElement.insertBefore(tableElement, detailsElement.querySelector("div:nth-child(2)")); + } else { + tableBodyElement = document.querySelector(".details > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody"); + } + + createTableEntry("\u{99C}\u{9C7}\u{9B2}\u{9BE} (District):", "$district$"); + createTableEntry("\u{9AC}\u{9CD}\u{9B2}\u{995} (Block):", "$block$"); + createTableEntry("\u{9AE}\u{9CC}\u{99C}\u{9BE} (Mouza):", "$mouza$"); + + Promise.all( + Array.from(document.images) + .filter(img => !img.complete).map(img => new Promise(resolve => { + img.onload = img.onerror = resolve; + })) + ).then(() => { + const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); + const headerRowHeight = document.getElementById("headertitle").offsetHeight; + const footerHeight = document.querySelector("footer > img").offsetHeight; + const pageHeight = document.body.offsetHeight - (footerHeight + rem); + let offset = -document.querySelector("div > img").getBoundingClientRect().top; + + for (const tableRowElement of Array.from(document.querySelectorAll($isPlotInformation$ ? "#plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody > tr" : "#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(5) > table > tbody > tr"))) { + const tableRowElementDOMRect = tableRowElement.getBoundingClientRect(); + if (tableRowElementDOMRect.y + offset + tableRowElementDOMRect.height >= pageHeight) { + tableRowElement.style.pageBreakBefore = "always"; + offset -= pageHeight - (headerRowHeight + rem); + } + } + + window.addEventListener("afterprint", window.close); + window.print(); + }); + </script> +</div> diff --git a/src/scripts/functionality/view-khatian/download-information-pdf-page-content.ts b/src/scripts/functionality/view-khatian/download-information-pdf-page-content.ts deleted file mode 100644 index 9ff18ec..0000000 --- a/src/scripts/functionality/view-khatian/download-information-pdf-page-content.ts +++ /dev/null @@ -1,219 +0,0 @@ -const sanghaFacilitationCentreBannerUrl = chrome.runtime.getURL("/assets/sangha-facilitation-centre-banner.jpg"); - -export default (isPlotInformation: boolean, details: string, { district, block, mouza }: { district: string, block: string, mouza: string }) => ` -<style> - * { - box-sizing: border-box !important; - text-decoration: none; - margin: 0; - padding: 0; - } - - body { - width: 100%; - margin: 0 !important; - padding: 0 !important; - } - - #content { - width: 100%; - margin: 0; - padding: 0; - } - - .banner { - width: 100%; - } - - .details { - padding: 1rem; - } - - #locater-information { - width: 100%; - margin-bottom: 1rem; - } - - #locater-information, - .details#plot-information > div:nth-child(1) > div:nth-child(5) > table { - border-collapse: collapse; - } - - .details#khatian-information > table, - .details#plot-information > div:nth-child(1) { - width: 100% !important; - border-spacing: 0; - border: 1px solid black; - } - - .details#plot-information > div:nth-child(1) > div:nth-child(1) { - text-align: center !important; - } - - .details#plot-information > div:nth-child(1) > div:nth-child(1) { - margin: 0 !important; - } - - .details#plot-information > div > div > table tr { - border-bottom: 1px solid black; - } - - .details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > th:last-child, - .details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > td:last-child, - .details#plot-information > div:nth-child(1) > div:nth-child(3) > table, - .details#plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody > tr > td:last-child, - .details#plot-information #headertitle > tr > th:last-child, - .details#plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody > tr:last-child { - border: none !important; - } - - .details#plot-information > div:nth-child(1) > div { - position: initial !important; - left: 0 !important; - width: 100% !important; - border-left: 0 !important; - border-right: 0 !important; - } - - .details#plot-information > div:nth-child(2), - .details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > td:nth-child(4), - .details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > th:nth-child(4), - .details#khatian-information > table > tbody > tr > td:nth-child(1) > p:nth-child(3), - .details#khatian-information > table > tbody > tr > td:nth-child(2) { - display: none !important; - } - - .details#plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody > tr { - background-color: transparent !important; - } - - .details#khatian-information > table > tbody > tr > td:nth-child(1), - .details#plot-information > div:nth-child(1) > div:nth-child(3) > table { - width: 100% !important; - } - - .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(1), - .details#khatian-information > table > tbody > tr > td:nth-child(1) > p:nth-child(4) { - text-align: center; - } - - .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) { - width: 100% !important; - position: initial !important; - left: 0 !important; - } - - .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table, - .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(5) > table { - width: 100% !important; - border: none !important; - } - - .details table tbody tr tr, - .details table tbody tr th, - .details table tbody tr td { - border: none !important; - background-color: transparent; - } - - .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) td, - .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) th { - text-align: left; - } - - .details#khatian-information > table > tbody > tr > td > div > table > tbody > tr > th, - .details#khatian-information > table > tbody > tr > td > div > table > tbody > tr > td, - .details#plot-information td { - padding: 0 0.2rem 0 0.2rem; - } - - .details table tbody tr tr, - #locater-information tr { - border-bottom: 1px solid black !important; - } - - .details table tbody tr tr:last-child { - border: none; - } - .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr:nth-child(1) > th { - font-weight: 500; - } - - .details table tbody tr th, - .details table tbody tr td, - .details#plot-information #headertitle > tr > th { - border-right: 1px solid black !important; - } - - .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr:nth-child(1), - #headertitle > tr, - .details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr.table-text.knwurprpty_tbl_head_txt.ng-scope, - #headertitle, - #locater-information tr:nth-child(1) { - border-top: 1px solid black !important; - border-color: black !important; - } - - .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(5) > table > tbody > tr:last-child, - .details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > td:nth-child(3), - .details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > th:nth-child(3), - .details#khatian-information > table tbody tr tr th:last-child, .details table tbody tr tr td:last-child, - #locater-information tr > td:last-child { - border-right: none !important; - } - - .details#khatian-information > table > tbody > tr > td:nth-child(1) > p:nth-child(4) { - margin-top: 1rem !important; - } - - .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(5), - .details#plot-information > div:nth-child(1) > div:nth-child(5) { - position: initial !important; - left: 0 !important; - top: 0 !important; - margin: 0 !important; - width: 100% !important; - } - - .details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr:nth-child(1) > th { - width: 50%; - } - - .footer { - width: 100%; - margin-top: 1rem; - } -</style> -<img class="banner" src="https://banglarbhumi.gov.in/BanglarBhumi/images/bl.png"> -<div class="details" id=${isPlotInformation ? "plot-information" : "khatian-information"}>${details}</div> -<img class="footer" src="${sanghaFacilitationCentreBannerUrl}"> -<script> - let tableBodyElement; - const createTableEntry = (label, value) => { - const tableRowElement = document.createElement("tr"); - const tableLabelColumnElement = document.createElement("td"); - tableLabelColumnElement.innerHTML = label; - const tableValueColumnElement = document.createElement("td"); - tableValueColumnElement.innerHTML = value; - tableRowElement.appendChild(tableLabelColumnElement); - tableRowElement.appendChild(tableValueColumnElement); - tableBodyElement.appendChild(tableRowElement); - }; - ${isPlotInformation - ? ` - const tableElement = document.createElement("table"); - tableElement.setAttribute("id", "locater-information"); - tableBodyElement = document.createElement("tbody"); - tableElement.appendChild(tableBodyElement); - const detailsElement = document.querySelector("#plot-information > div:nth-child(1)"); - detailsElement.insertBefore(tableElement, detailsElement.querySelector("div:nth-child(2)")); - ` - : ` - tableBodyElement = document.querySelector(".details > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody"); - ` - } - createTableEntry("\u{99C}\u{9C7}\u{9B2}\u{9BE} (District):", "${district}"); - createTableEntry("\u{9AC}\u{9CD}\u{9B2}\u{995} (Block):", "${block}"); - createTableEntry("\u{9AE}\u{9CC}\u{99C}\u{9BE} (Mouza):", "${mouza}"); -</script> -`; diff --git a/src/scripts/functionality/view-khatian/index.ts b/src/scripts/functionality/view-khatian/index.ts index e29e8a4..38e500b 100644 --- a/src/scripts/functionality/view-khatian/index.ts +++ b/src/scripts/functionality/view-khatian/index.ts @@ -1,8 +1,10 @@ -import { downloadPDF } from "@/shared/download-pdf"; -import getDownloadInformationPDFPageContent from "@/scripts/functionality/view-khatian/download-information-pdf-page-content"; +import { generateWebPage } from "@/shared/generate-web-page"; +import getDownloadInformationPDFPageContent from "@/scripts/functionality/view-khatian/download-information-pdf-page-content.html"; declare function load(): void; +const sanghaFacilitationCentreBannerUrl = chrome.runtime.getURL("/assets/sangha-facilitation-centre-banner.jpg"); + document.addEventListener("DOMContentLoaded", () => { const proxiedPost = $.post; @@ -26,13 +28,14 @@ document.addEventListener("DOMContentLoaded", () => { let isPlotInformation: boolean | null = null; const downloadInformationPDF = () => { - let contentElement = document.getElementById(isPlotInformation ? "plotdetails" : "khdetails"); - const documentStringContent = getDownloadInformationPDFPageContent(!!isPlotInformation, contentElement!.innerHTML, { + generateWebPage(getDownloadInformationPDFPageContent({ + sanghaFacilitationCentreBannerUrl, + isPlotInformation: !!isPlotInformation, + details: document.getElementById(isPlotInformation ? "plotdetails" : "khdetails")!.innerHTML, district: getValueOfSelectElement("#lstDistrictCode1"), block: getValueOfSelectElement("#lstBlockCode1"), mouza: getValueOfSelectElement("#lstMouzaList") - }); - downloadPDF(`<div id="content">${documentStringContent}</div>`); + })); }; $.post = function() { diff --git a/src/shared/download-pdf.ts b/src/shared/download-pdf.ts deleted file mode 100644 index bd8f815..0000000 --- a/src/shared/download-pdf.ts +++ /dev/null @@ -1,17 +0,0 @@ -export const downloadPDF = (content: string) => { - const tab = window.open("about:blank", "_blank"); - - if (tab) { - tab.document.write(content); - tab.document.close(); - tab.focus(); - Promise.all(Array.from(tab.document.images) - .filter(img => !img.complete) - .map(img => new Promise(resolve => { - img.onload = img.onerror = resolve; - }))).then(() => { - tab.print(); - tab.close(); - }); - } -}; diff --git a/src/shared/generate-web-page.ts b/src/shared/generate-web-page.ts new file mode 100644 index 0000000..d7de655 --- /dev/null +++ b/src/shared/generate-web-page.ts @@ -0,0 +1,9 @@ +export const generateWebPage = (content: string) => { + const tab = window.open("about:blank", "_blank"); + + if (tab) { + tab.document.write(content); + tab.document.close(); + tab.focus(); + } +}; |