{"id":2797,"date":"2026-04-21T17:01:13","date_gmt":"2026-04-21T17:01:13","guid":{"rendered":"https:\/\/dailydigitalera.com\/?page_id=2797"},"modified":"2026-04-21T17:02:20","modified_gmt":"2026-04-21T17:02:20","slug":"singleepaper","status":"publish","type":"page","link":"https:\/\/dailydigitalera.com\/index.php\/singleepaper\/","title":{"rendered":"singleepaper"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2797\" class=\"elementor elementor-2797\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-40f27c0 e-con-full e-flex e-con e-parent\" data-id=\"40f27c0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b0a8dae elementor-widget elementor-widget-shortcode\" data-id=\"b0a8dae\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div class=\"news-wrapper\" id=\"mainWrapper\">\n        <div class=\"filters\" id=\"topBar\">\n            <button onclick=\"loadCity('islamabad')\">Islamabad<\/button>\n            <button onclick=\"loadCity('muzaffarabad')\">Muzaffarabad<\/button>\n            <button onclick=\"loadCity('gilgit')\">Gilgit<\/button>\n            <button onclick=\"loadCity('quetta')\">Quetta<\/button>\n        <\/div>\n\n        <div class=\"content\">\n            <div class=\"main-view\">\n                <canvas id=\"mainCanvas\"><\/canvas>\n            <\/div>\n            <div class=\"sidebar\" id=\"thumbnails\"><\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"pdfModal\">\n        <span class=\"closeBtn\" onclick=\"closeModal()\">\u2716<\/span>\n        <canvas id=\"modalCanvas\"><\/canvas>\n    <\/div>\n\n    <style>\n    .wp-block-post-title{display:none;}\n    .news-wrapper{max-width:1200px;margin:auto;}\n    .filters{text-align:center;padding:15px;}\n    .filters button{padding:10px 15px;margin:5px;background:#000;color:#fff;border:none;cursor:pointer;font-size:25px;border-radius:9px;}\n    .content{display:flex;gap:20px;}\n    .main-view{flex:3;background:#eee;padding:10px;}\n    .main-view canvas{width:100%;cursor:pointer;}\n    .sidebar{flex:1;height:80vh;overflow-y:auto;background:#f9f9f9;padding:10px;}\n    .thumb{margin-bottom:15px;cursor:pointer;border:2px solid transparent;}\n    .thumb.active{border:2px solid red;}\n    .thumb canvas{width:100%;}\n    #pdfModal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:9999;justify-content:center;align-items:center;}\n    #pdfModal canvas{max-width:100%;max-height:100%;}\n    .closeBtn{position:absolute;top:20px;right:30px;font-size:30px;color:#fff;cursor:pointer;}\n    .hide-ui{display:none!important;}\n    @media(max-width:768px){.content{flex-direction:column;}}\n    <\/style>\n\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.16.105\/pdf.min.js\"><\/script>\n    <script>\n    pdfjsLib.GlobalWorkerOptions.workerSrc=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.16.105\/pdf.worker.min.js\";\n\n    const pdfFiles = {\"islamabad\":\"https:\\\/\\\/dailydigitalera.com\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/digital-era-1.pdf\",\"muzaffarabad\":\"https:\\\/\\\/dailydigitalera.com\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/digital-era.pdf\",\"gilgit\":\"https:\\\/\\\/dailydigitalera.com\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/1.pdf\",\"quetta\":\"https:\\\/\\\/dailydigitalera.com\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/1.pdf\"};\n    let pdfDoc=null,totalPages=0,currentUrl=pdfFiles.islamabad||Object.values(pdfFiles).find(v=>v);\n\n    function loadPDF(url){\n        if(!url){document.getElementById('thumbnails').innerHTML='No PDF Found';return;}\n        document.getElementById('thumbnails').innerHTML='Loading...';\n\n        pdfjsLib.getDocument(url).promise.then(function(pdf){\n            pdfDoc=pdf;\n            totalPages=pdf.numPages;\n            generateThumbnails();\n            renderPage(1);\n        });\n    }\n\n    function renderPage(num){\n        pdfDoc.getPage(num).then(function(page){\n            const canvas=document.getElementById('mainCanvas');\n            const ctx=canvas.getContext('2d');\n            const viewport=page.getViewport({scale:1.5});\n\n            canvas.height=viewport.height;\n            canvas.width=viewport.width;\n\n            page.render({canvasContext:ctx,viewport:viewport});\n            canvas.onclick=()=>openModal(num);\n\n            document.querySelectorAll('.thumb').forEach(t=>t.classList.remove('active'));\n            document.querySelector('[data-page=\"'+num+'\"]')?.classList.add('active');\n        });\n    }\n\n    function generateThumbnails(){\n        const container=document.getElementById('thumbnails');\n        container.innerHTML='';\n\n        for(let i=1;i<=totalPages;i++){\n            pdfDoc.getPage(i).then(function(page){\n                const canvas=document.createElement('canvas');\n                const ctx=canvas.getContext('2d');\n                const viewport=page.getViewport({scale:0.3});\n\n                canvas.height=viewport.height;\n                canvas.width=viewport.width;\n\n                page.render({canvasContext:ctx,viewport:viewport});\n\n                const div=document.createElement('div');\n                div.className='thumb';\n                div.setAttribute('data-page',i);\n                div.appendChild(canvas);\n                div.onclick=()=>renderPage(i);\n\n                container.appendChild(div);\n            });\n        }\n    }\n\n    function loadCity(city){ loadPDF(pdfFiles[city]); }\n\n    function openModal(num){\n        document.getElementById('pdfModal').style.display='flex';\n        document.getElementById('mainWrapper').classList.add('hide-ui');\n\n        const canvas=document.getElementById('modalCanvas');\n        const ctx=canvas.getContext('2d');\n\n        pdfDoc.getPage(num).then(function(page){\n            const viewport=page.getViewport({scale:3});\n            canvas.height=viewport.height;\n            canvas.width=viewport.width;\n            page.render({canvasContext:ctx,viewport:viewport});\n        });\n    }\n\n    function closeModal(){\n        document.getElementById('pdfModal').style.display='none';\n        document.getElementById('mainWrapper').classList.remove('hide-ui');\n    }\n\n    if(currentUrl){ loadPDF(currentUrl); }\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2797","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dailydigitalera.com\/index.php\/wp-json\/wp\/v2\/pages\/2797","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dailydigitalera.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dailydigitalera.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dailydigitalera.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dailydigitalera.com\/index.php\/wp-json\/wp\/v2\/comments?post=2797"}],"version-history":[{"count":0,"href":"https:\/\/dailydigitalera.com\/index.php\/wp-json\/wp\/v2\/pages\/2797\/revisions"}],"wp:attachment":[{"href":"https:\/\/dailydigitalera.com\/index.php\/wp-json\/wp\/v2\/media?parent=2797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}