{"id":85,"date":"2026-08-12T20:07:56","date_gmt":"2026-08-12T20:07:56","guid":{"rendered":"https:\/\/kmplive.in\/?page_id=85"},"modified":"2026-08-12T20:07:57","modified_gmt":"2026-08-12T20:07:57","slug":"epaper","status":"publish","type":"page","link":"https:\/\/kmplive.in\/?page_id=85","title":{"rendered":"Epaper"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\n        <div\n            id=\"nd-epaper-app\"\n            data-editions='{&quot;2026-08-12&quot;:{&quot;title&quot;:&quot;Epaper 13-08-2026&quot;,&quot;pdf&quot;:&quot;https:\\\/\\\/kmplive.in\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/prannam-1.pdf&quot;,&quot;date&quot;:&quot;2026-08-12&quot;},&quot;2026-08-11&quot;:{&quot;title&quot;:&quot;Epaper&quot;,&quot;pdf&quot;:&quot;https:\\\/\\\/kmplive.in\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/prannam.pdf&quot;,&quot;date&quot;:&quot;2026-08-11&quot;}}'\n        >\n\n\n            <!-- =================================================\n                 TOP BAR\n            ================================================= -->\n\n            <div class=\"nd-topbar\">\n\n                <button\n                    type=\"button\"\n                    id=\"nd-calendar-button\"\n                    class=\"nd-top-button\"\n                    aria-label=\"Calendar\"\n                    title=\"E-Paper Calendar\"\n                >\n                    \ud83d\udcc5\n                <\/button>\n\n\n                <div class=\"nd-logo-text\">\n                    E-PAPER\n                <\/div>\n\n\n                <button\n                    type=\"button\"\n                    id=\"nd-fullscreen\"\n                    class=\"nd-top-button\"\n                    aria-label=\"Fullscreen\"\n                    title=\"Fullscreen\"\n                >\n                    \u26f6\n                <\/button>\n\n            <\/div>\n\n\n            <!-- =================================================\n                 CALENDAR\n            ================================================= -->\n\n            <div\n                id=\"nd-calendar\"\n                class=\"nd-calendar\"\n            >\n\n                <div class=\"nd-calendar-header\">\n\n                    <button\n                        type=\"button\"\n                        id=\"nd-calendar-prev\"\n                    >\n                        \u2039\n                    <\/button>\n\n\n                    <strong\n                        id=\"nd-calendar-title\"\n                    ><\/strong>\n\n\n                    <button\n                        type=\"button\"\n                        id=\"nd-calendar-next\"\n                    >\n                        \u203a\n                    <\/button>\n\n                <\/div>\n\n\n                <div class=\"nd-weekdays\">\n\n                    <span>Sun<\/span>\n                    <span>Mon<\/span>\n                    <span>Tue<\/span>\n                    <span>Wed<\/span>\n                    <span>Thu<\/span>\n                    <span>Fri<\/span>\n                    <span>Sat<\/span>\n\n                <\/div>\n\n\n                <div\n                    id=\"nd-calendar-days\"\n                    class=\"nd-calendar-days\"\n                ><\/div>\n\n            <\/div>\n\n\n            <!-- =================================================\n                 EDITION TITLE\n            ================================================= -->\n\n            <div\n                id=\"nd-edition-title\"\n                class=\"nd-edition-title\"\n            >\n                Select E-Paper\n            <\/div>\n\n\n            <!-- =================================================\n                 CONTROLS\n            ================================================= -->\n\n            <div class=\"nd-controls\">\n\n                <button\n                    type=\"button\"\n                    id=\"nd-prev\"\n                >\n                    \u25c0\n                <\/button>\n\n\n                <span class=\"nd-page-count\">\n\n                    Page\n\n                    <b id=\"nd-current-page\">\n                        1\n                    <\/b>\n\n                    \/\n\n                    <b id=\"nd-total-pages\">\n                        0\n                    <\/b>\n\n                <\/span>\n\n\n                <button\n                    type=\"button\"\n                    id=\"nd-next\"\n                >\n                    \u25b6\n                <\/button>\n\n\n                <button\n                    type=\"button\"\n                    id=\"nd-zoom-out\"\n                >\n                    \u2212\n                <\/button>\n\n\n                <button\n                    type=\"button\"\n                    id=\"nd-zoom-reset\"\n                >\n                    100%\n                <\/button>\n\n\n                <button\n                    type=\"button\"\n                    id=\"nd-zoom-in\"\n                >\n                    +\n                <\/button>\n\n\n                <button\n                    type=\"button\"\n                    id=\"nd-crop\"\n                >\n                    \u2702\n                <\/button>\n\n            <\/div>\n\n\n            <!-- =================================================\n                 PDF VIEWER\n            ================================================= -->\n\n            <div\n                id=\"nd-viewer\"\n            >\n\n                <div\n                    id=\"nd-loading\"\n                >\n                    Loading E-Paper...\n                <\/div>\n\n\n                <canvas\n                    id=\"nd-pdf-canvas\"\n                ><\/canvas>\n\n            <\/div>\n\n\n            <!-- =================================================\n                 PAGE SLIDER\n            ================================================= -->\n\n            <input\n                type=\"range\"\n                id=\"nd-page-slider\"\n                min=\"1\"\n                max=\"1\"\n                value=\"1\"\n            >\n\n\n            <!-- =================================================\n                 CROP PANEL\n            ================================================= -->\n\n            <div\n                id=\"nd-crop-panel\"\n            >\n\n                <div class=\"nd-crop-header\">\n\n                    <strong>\n                        News Clipping\n                    <\/strong>\n\n\n                    <button\n                        type=\"button\"\n                        id=\"nd-close-crop\"\n                    >\n                        \u2715\n                    <\/button>\n\n                <\/div>\n\n\n                <div\n                    id=\"nd-crop-area\"\n                >\n\n                    <canvas\n                        id=\"nd-crop-canvas\"\n                    ><\/canvas>\n\n\n                    <div\n                        id=\"nd-crop-selection\"\n                    ><\/div>\n\n                <\/div>\n\n\n                <div class=\"nd-crop-actions\">\n\n                    <button\n                        type=\"button\"\n                        id=\"nd-download-crop\"\n                    >\n                        Download Clipping\n                    <\/button>\n\n                <\/div>\n\n            <\/div>\n\n\n        <\/div>\n\n\n        <!-- =====================================================\n             JAVASCRIPT\n        ===================================================== -->\n\n        <script type=\"module\">\n\n        import * as pdfjsLib from\n        'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/4.4.168\/pdf.min.mjs';\n\n\n        pdfjsLib.GlobalWorkerOptions.workerSrc =\n        'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/4.4.168\/pdf.worker.min.mjs';\n\n\n        \/* =====================================================\n           VARIABLES\n        ===================================================== *\/\n\n        const app =\n            document.getElementById(\n                'nd-epaper-app'\n            );\n\n\n        const editions =\n            JSON.parse(\n                app.dataset.editions\n            );\n\n\n        let pdfDocument = null;\n\n        let currentPage = 1;\n\n        let zoomPercent = 100;\n\n        let rendering = false;\n\n        let pendingPage = null;\n\n\n        const pdfCanvas =\n            document.getElementById(\n                'nd-pdf-canvas'\n            );\n\n\n        const pdfContext =\n            pdfCanvas.getContext(\n                '2d'\n            );\n\n\n        \/* =====================================================\n           AUDIO\n        ===================================================== *\/\n\n        let audioContext = null;\n\n\n        function pageSound(){\n\n            try {\n\n                if (!audioContext) {\n\n                    audioContext =\n                        new (\n                            window.AudioContext ||\n                            window.webkitAudioContext\n                        )();\n\n                }\n\n\n                if (\n                    audioContext.state ===\n                    'suspended'\n                ) {\n\n                    audioContext.resume();\n\n                }\n\n\n                const oscillator =\n                    audioContext\n                    .createOscillator();\n\n\n                const gain =\n                    audioContext\n                    .createGain();\n\n\n                oscillator.type =\n                    'triangle';\n\n\n                oscillator.frequency.setValueAtTime(\n                    230,\n                    audioContext.currentTime\n                );\n\n\n                oscillator.frequency.exponentialRampToValueAtTime(\n                    90,\n                    audioContext.currentTime + 0.10\n                );\n\n\n                gain.gain.setValueAtTime(\n                    0.055,\n                    audioContext.currentTime\n                );\n\n\n                gain.gain.exponentialRampToValueAtTime(\n                    0.001,\n                    audioContext.currentTime + 0.10\n                );\n\n\n                oscillator.connect(gain);\n\n                gain.connect(\n                    audioContext.destination\n                );\n\n\n                oscillator.start();\n\n                oscillator.stop(\n                    audioContext.currentTime + 0.10\n                );\n\n            } catch (e) {}\n\n        }\n\n\n        \/* =====================================================\n           RENDER PAGE - HD\n        ===================================================== *\/\n\n        async function renderPage(pageNumber) {\n\n            if (!pdfDocument) {\n                return;\n            }\n\n\n            if (rendering) {\n\n                pendingPage =\n                    pageNumber;\n\n                return;\n\n            }\n\n\n            rendering = true;\n\n\n            try {\n\n                const pdfPage =\n                    await pdfDocument.getPage(\n                        pageNumber\n                    );\n\n\n                const viewer =\n                    document.getElementById(\n                        'nd-viewer'\n                    );\n\n\n                const baseViewport =\n                    pdfPage.getViewport({\n                        scale: 1\n                    });\n\n\n                \/*\n                 * Fit page to screen.\n                 *\/\n\n                const availableWidth =\n                    Math.max(\n                        viewer.clientWidth - 20,\n                        280\n                    );\n\n\n                const fitScale =\n                    availableWidth \/\n                    baseViewport.width;\n\n\n                \/*\n                 * Real zoom:\n                 *\n                 * 100% = fit to screen\n                 * 200% = 2x\n                 * 300% = 3x\n                 *\/\n\n                const zoomMultiplier =\n                    zoomPercent \/ 100;\n\n\n                \/*\n                 * High DPI rendering.\n                 *\/\n\n                const devicePixelRatio =\n                    Math.min(\n                        window.devicePixelRatio || 1,\n                        3\n                    );\n\n\n                const renderScale =\n                    fitScale *\n                    zoomMultiplier *\n                    devicePixelRatio;\n\n\n                const viewport =\n                    pdfPage.getViewport({\n                        scale: renderScale\n                    });\n\n\n                \/*\n                 * Real canvas resolution.\n                 *\/\n\n                pdfCanvas.width =\n                    Math.ceil(\n                        viewport.width\n                    );\n\n\n                pdfCanvas.height =\n                    Math.ceil(\n                        viewport.height\n                    );\n\n\n                \/*\n                 * CSS display size.\n                 *\/\n\n                pdfCanvas.style.width =\n                    (\n                        viewport.width \/\n                        devicePixelRatio\n                    ) + 'px';\n\n\n                pdfCanvas.style.height =\n                    (\n                        viewport.height \/\n                        devicePixelRatio\n                    ) + 'px';\n\n\n                pdfContext.imageSmoothingEnabled =\n                    true;\n\n\n                pdfContext.imageSmoothingQuality =\n                    'high';\n\n\n                await pdfPage.render({\n\n                    canvasContext:\n                        pdfContext,\n\n                    viewport:\n                        viewport,\n\n                    intent:\n                        'display'\n\n                }).promise;\n\n\n                document.getElementById(\n                    'nd-current-page'\n                ).innerText =\n                    pageNumber;\n\n\n                document.getElementById(\n                    'nd-page-slider'\n                ).value =\n                    pageNumber;\n\n\n                document.getElementById(\n                    'nd-zoom-reset'\n                ).innerText =\n                    zoomPercent + '%';\n\n\n                document.getElementById(\n                    'nd-loading'\n                ).style.display =\n                    'none';\n\n\n            } catch (error) {\n\n                console.error(error);\n\n            }\n\n\n            rendering = false;\n\n\n            if (pendingPage !== null) {\n\n                const next =\n                    pendingPage;\n\n                pendingPage = null;\n\n                renderPage(next);\n\n            }\n\n        }\n\n\n        \/* =====================================================\n           LOAD PDF\n        ===================================================== *\/\n\n        async function loadEdition(date) {\n\n            if (!editions[date]) {\n\n                alert(\n                    'E-Paper is not available for this date.'\n                );\n\n                return;\n\n            }\n\n\n            document.getElementById(\n                'nd-loading'\n            ).style.display =\n                'block';\n\n\n            document.getElementById(\n                'nd-loading'\n            ).innerText =\n                'Loading E-Paper...';\n\n\n            try {\n\n                pdfDocument =\n                    await pdfjsLib.getDocument({\n\n                        url:\n                            editions[date].pdf,\n\n                        disableFontFace:\n                            false,\n\n                        useSystemFonts:\n                            true,\n\n                        isEvalSupported:\n                            true\n\n                    }).promise;\n\n\n                currentPage = 1;\n\n                zoomPercent = 100;\n\n\n                document.getElementById(\n                    'nd-total-pages'\n                ).innerText =\n                    pdfDocument.numPages;\n\n\n                document.getElementById(\n                    'nd-page-slider'\n                ).max =\n                    pdfDocument.numPages;\n\n\n                document.getElementById(\n                    'nd-edition-title'\n                ).innerText =\n                    editions[date].title +\n                    ' \u2022 ' +\n                    date;\n\n\n                renderPage(1);\n\n\n            } catch (error) {\n\n                console.error(error);\n\n\n                document.getElementById(\n                    'nd-loading'\n                ).innerText =\n                    'PDF load hela nahi. PDF URL check kara.';\n\n            }\n\n        }\n\n\n        \/* =====================================================\n           CALENDAR\n        ===================================================== *\/\n\n        let calendarDate =\n            new Date();\n\n\n        function renderCalendar() {\n\n            const year =\n                calendarDate.getFullYear();\n\n\n            const month =\n                calendarDate.getMonth();\n\n\n            const monthNames = [\n\n                'January',\n                'February',\n                'March',\n                'April',\n                'May',\n                'June',\n                'July',\n                'August',\n                'September',\n                'October',\n                'November',\n                'December'\n\n            ];\n\n\n            document.getElementById(\n                'nd-calendar-title'\n            ).innerText =\n                monthNames[month] +\n                ' ' +\n                year;\n\n\n            const firstDay =\n                new Date(\n                    year,\n                    month,\n                    1\n                ).getDay();\n\n\n            const totalDays =\n                new Date(\n                    year,\n                    month + 1,\n                    0\n                ).getDate();\n\n\n            const container =\n                document.getElementById(\n                    'nd-calendar-days'\n                );\n\n\n            container.innerHTML =\n                '';\n\n\n            for (\n                let i = 0;\n                i < firstDay;\n                i++\n            ) {\n\n                const empty =\n                    document.createElement(\n                        'span'\n                    );\n\n                container.appendChild(\n                    empty\n                );\n\n            }\n\n\n            for (\n                let day = 1;\n                day <= totalDays;\n                day++\n            ) {\n\n                const dateString =\n                    year +\n                    '-' +\n                    String(month + 1)\n                        .padStart(2, '0') +\n                    '-' +\n                    String(day)\n                        .padStart(2, '0');\n\n\n                const button =\n                    document.createElement(\n                        'button'\n                    );\n\n\n                button.type =\n                    'button';\n\n\n                button.innerText =\n                    day;\n\n\n                if (\n                    editions[dateString]\n                ) {\n\n                    button.className =\n                        'available';\n\n\n                    button.title =\n                        'E-Paper Available';\n\n\n                    button.onclick =\n                        function () {\n\n                            loadEdition(\n                                dateString\n                            );\n\n\n                            document.getElementById(\n                                'nd-calendar'\n                            ).classList.remove(\n                                'open'\n                            );\n\n                        };\n\n                } else {\n\n                    button.className =\n                        'unavailable';\n\n                }\n\n\n                container.appendChild(\n                    button\n                );\n\n            }\n\n        }\n\n\n        document.getElementById(\n            'nd-calendar-button'\n        ).onclick =\n        function () {\n\n            document.getElementById(\n                'nd-calendar'\n            ).classList.toggle(\n                'open'\n            );\n\n        };\n\n\n        document.getElementById(\n            'nd-calendar-prev'\n        ).onclick =\n        function () {\n\n            calendarDate.setMonth(\n                calendarDate.getMonth() - 1\n            );\n\n            renderCalendar();\n\n        };\n\n\n        document.getElementById(\n            'nd-calendar-next'\n        ).onclick =\n        function () {\n\n            calendarDate.setMonth(\n                calendarDate.getMonth() + 1\n            );\n\n            renderCalendar();\n\n        };\n\n\n        \/* =====================================================\n           NEXT PAGE\n        ===================================================== *\/\n\n        document.getElementById(\n            'nd-next'\n        ).onclick =\n        function () {\n\n            if (\n                pdfDocument &&\n                currentPage <\n                pdfDocument.numPages\n            ) {\n\n                currentPage++;\n\n                pageSound();\n\n                renderPage(\n                    currentPage\n                );\n\n            }\n\n        };\n\n\n        \/* =====================================================\n           PREVIOUS PAGE\n        ===================================================== *\/\n\n        document.getElementById(\n            'nd-prev'\n        ).onclick =\n        function () {\n\n            if (\n                pdfDocument &&\n                currentPage > 1\n            ) {\n\n                currentPage--;\n\n                pageSound();\n\n                renderPage(\n                    currentPage\n                );\n\n            }\n\n        };\n\n\n        \/* =====================================================\n           PAGE SLIDER\n        ===================================================== *\/\n\n        document.getElementById(\n            'nd-page-slider'\n        ).oninput =\n        function () {\n\n            currentPage =\n                parseInt(\n                    this.value\n                );\n\n\n            pageSound();\n\n\n            renderPage(\n                currentPage\n            );\n\n        };\n\n\n        \/* =====================================================\n           ZOOM IN\n        ===================================================== *\/\n\n        document.getElementById(\n            'nd-zoom-in'\n        ).onclick =\n        function () {\n\n            zoomPercent =\n                Math.min(\n                    zoomPercent + 25,\n                    400\n                );\n\n\n            renderPage(\n                currentPage\n            );\n\n        };\n\n\n        \/* =====================================================\n           ZOOM OUT\n        ===================================================== *\/\n\n        document.getElementById(\n            'nd-zoom-out'\n        ).onclick =\n        function () {\n\n            zoomPercent =\n                Math.max(\n                    zoomPercent - 25,\n                    50\n                );\n\n\n            renderPage(\n                currentPage\n            );\n\n        };\n\n\n        \/* =====================================================\n           RESET ZOOM\n        ===================================================== *\/\n\n        document.getElementById(\n            'nd-zoom-reset'\n        ).onclick =\n        function () {\n\n            zoomPercent = 100;\n\n            renderPage(\n                currentPage\n            );\n\n        };\n\n\n        \/* =====================================================\n           FULLSCREEN\n        ===================================================== *\/\n\n        document.getElementById(\n            'nd-fullscreen'\n        ).onclick =\n        function () {\n\n            if (\n                !document.fullscreenElement\n            ) {\n\n                app.requestFullscreen();\n\n            } else {\n\n                document.exitFullscreen();\n\n            }\n\n        };\n\n\n        \/* =====================================================\n           MOBILE SWIPE\n        ===================================================== *\/\n\n        let touchStartX = 0;\n\n        let touchStartY = 0;\n\n\n        pdfCanvas.addEventListener(\n            'touchstart',\n            function (e) {\n\n                touchStartX =\n                    e.changedTouches[0]\n                        .screenX;\n\n                touchStartY =\n                    e.changedTouches[0]\n                        .screenY;\n\n            },\n            {\n                passive: true\n            }\n        );\n\n\n        pdfCanvas.addEventListener(\n            'touchend',\n            function (e) {\n\n                const endX =\n                    e.changedTouches[0]\n                        .screenX;\n\n                const endY =\n                    e.changedTouches[0]\n                        .screenY;\n\n\n                const diffX =\n                    endX -\n                    touchStartX;\n\n\n                const diffY =\n                    endY -\n                    touchStartY;\n\n\n                \/*\n                 * Only horizontal swipe.\n                 *\/\n\n                if (\n                    Math.abs(diffX) >\n                    60 &&\n                    Math.abs(diffX) >\n                    Math.abs(diffY)\n                ) {\n\n                    if (diffX < 0) {\n\n                        document.getElementById(\n                            'nd-next'\n                        ).click();\n\n                    } else {\n\n                        document.getElementById(\n                            'nd-prev'\n                        ).click();\n\n                    }\n\n                }\n\n            },\n            {\n                passive: true\n            }\n        );\n\n\n        \/* =====================================================\n           CROP VARIABLES\n        ===================================================== *\/\n\n        let cropStartX = 0;\n\n        let cropStartY = 0;\n\n        let cropEndX = 0;\n\n        let cropEndY = 0;\n\n        let cropping = false;\n\n\n        const cropPanel =\n            document.getElementById(\n                'nd-crop-panel'\n            );\n\n\n        const cropCanvas =\n            document.getElementById(\n                'nd-crop-canvas'\n            );\n\n\n        const cropSelection =\n            document.getElementById(\n                'nd-crop-selection'\n            );\n\n\n        \/* =====================================================\n           OPEN CROP\n        ===================================================== *\/\n\n        document.getElementById(\n            'nd-crop'\n        ).onclick =\n        function () {\n\n            if (\n                !pdfCanvas.width ||\n                !pdfCanvas.height\n            ) {\n\n                alert(\n                    'First open an E-Paper page.'\n                );\n\n                return;\n\n            }\n\n\n            const cropContext =\n                cropCanvas.getContext(\n                    '2d'\n                );\n\n\n            \/*\n             * Copy actual HD canvas.\n             *\/\n\n            cropCanvas.width =\n                pdfCanvas.width;\n\n\n            cropCanvas.height =\n                pdfCanvas.height;\n\n\n            cropContext.clearRect(\n                0,\n                0,\n                cropCanvas.width,\n                cropCanvas.height\n            );\n\n\n            cropContext.drawImage(\n                pdfCanvas,\n                0,\n                0\n            );\n\n\n            cropPanel.style.display =\n                'block';\n\n\n            cropSelection.style.width =\n                '0px';\n\n\n            cropSelection.style.height =\n                '0px';\n\n        };\n\n\n        \/* =====================================================\n           CROP POINTER POSITION\n        ===================================================== *\/\n\n        function getCropPoint(event) {\n\n            const rect =\n                cropCanvas.getBoundingClientRect();\n\n\n            const scaleX =\n                cropCanvas.width \/\n                rect.width;\n\n\n            const scaleY =\n                cropCanvas.height \/\n                rect.height;\n\n\n            let x =\n                (\n                    event.clientX -\n                    rect.left\n                ) *\n                scaleX;\n\n\n            let y =\n                (\n                    event.clientY -\n                    rect.top\n                ) *\n                scaleY;\n\n\n            x =\n                Math.max(\n                    0,\n                    Math.min(\n                        x,\n                        cropCanvas.width\n                    )\n                );\n\n\n            y =\n                Math.max(\n                    0,\n                    Math.min(\n                        y,\n                        cropCanvas.height\n                    )\n                );\n\n\n            return {\n                x: x,\n                y: y\n            };\n\n        }\n\n\n        \/* =====================================================\n           UPDATE CROP BOX\n        ===================================================== *\/\n\n        function updateCropBox() {\n\n            const rect =\n                cropCanvas.getBoundingClientRect();\n\n\n            const displayScaleX =\n                rect.width \/\n                cropCanvas.width;\n\n\n            const displayScaleY =\n                rect.height \/\n                cropCanvas.height;\n\n\n            const x =\n                Math.min(\n                    cropStartX,\n                    cropEndX\n                );\n\n\n            const y =\n                Math.min(\n                    cropStartY,\n                    cropEndY\n                );\n\n\n            const width =\n                Math.abs(\n                    cropEndX -\n                    cropStartX\n                );\n\n\n            const height =\n                Math.abs(\n                    cropEndY -\n                    cropStartY\n                );\n\n\n            cropSelection.style.left =\n                (\n                    x *\n                    displayScaleX\n                ) + 'px';\n\n\n            cropSelection.style.top =\n                (\n                    y *\n                    displayScaleY\n                ) + 'px';\n\n\n            cropSelection.style.width =\n                (\n                    width *\n                    displayScaleX\n                ) + 'px';\n\n\n            cropSelection.style.height =\n                (\n                    height *\n                    displayScaleY\n                ) + 'px';\n\n        }\n\n\n        \/* =====================================================\n           CROP START\n        ===================================================== *\/\n\n        cropCanvas.addEventListener(\n            'pointerdown',\n            function (event) {\n\n                event.preventDefault();\n\n\n                cropping = true;\n\n\n                cropCanvas.setPointerCapture(\n                    event.pointerId\n                );\n\n\n                const point =\n                    getCropPoint(\n                        event\n                    );\n\n\n                cropStartX =\n                    point.x;\n\n                cropStartY =\n                    point.y;\n\n                cropEndX =\n                    point.x;\n\n                cropEndY =\n                    point.y;\n\n\n                updateCropBox();\n\n            }\n        );\n\n\n        \/* =====================================================\n           CROP MOVE\n        ===================================================== *\/\n\n        cropCanvas.addEventListener(\n            'pointermove',\n            function (event) {\n\n                if (!cropping) {\n                    return;\n                }\n\n\n                event.preventDefault();\n\n\n                const point =\n                    getCropPoint(\n                        event\n                    );\n\n\n                cropEndX =\n                    point.x;\n\n                cropEndY =\n                    point.y;\n\n\n                updateCropBox();\n\n            }\n        );\n\n\n        \/* =====================================================\n           CROP END\n        ===================================================== *\/\n\n        cropCanvas.addEventListener(\n            'pointerup',\n            function (event) {\n\n                cropping = false;\n\n\n                try {\n\n                    cropCanvas.releasePointerCapture(\n                        event.pointerId\n                    );\n\n                } catch (e) {}\n\n            }\n        );\n\n\n        \/* =====================================================\n           DOWNLOAD CROP\n        ===================================================== *\/\n\n        document.getElementById(\n            'nd-download-crop'\n        ).onclick =\n        function () {\n\n            const x =\n                Math.min(\n                    cropStartX,\n                    cropEndX\n                );\n\n\n            const y =\n                Math.min(\n                    cropStartY,\n                    cropEndY\n                );\n\n\n            const width =\n                Math.abs(\n                    cropEndX -\n                    cropStartX\n                );\n\n\n            const height =\n                Math.abs(\n                    cropEndY -\n                    cropStartY\n                );\n\n\n            if (\n                width < 20 ||\n                height < 20\n            ) {\n\n                alert(\n                    'Drag over the news area first.'\n                );\n\n                return;\n\n            }\n\n\n            \/*\n             * Create clipping using\n             * REAL canvas coordinates.\n             *\/\n\n            const output =\n                document.createElement(\n                    'canvas'\n                );\n\n\n            output.width =\n                Math.round(\n                    width\n                );\n\n\n            output.height =\n                Math.round(\n                    height\n                );\n\n\n            const outputContext =\n                output.getContext(\n                    '2d'\n                );\n\n\n            outputContext.imageSmoothingEnabled =\n                true;\n\n\n            outputContext.imageSmoothingQuality =\n                'high';\n\n\n            outputContext.drawImage(\n\n                cropCanvas,\n\n                Math.round(x),\n                Math.round(y),\n                Math.round(width),\n                Math.round(height),\n\n                0,\n                0,\n                Math.round(width),\n                Math.round(height)\n\n            );\n\n\n            \/* =================================================\n               WATERMARK\n            ================================================= *\/\n\n            outputContext.save();\n\n\n            const watermarkSize =\n                Math.max(\n                    18,\n                    Math.min(\n                        output.width \/ 16,\n                        52\n                    )\n                );\n\n\n            outputContext.font =\n                'bold ' +\n                watermarkSize +\n                'px Arial';\n\n\n            outputContext.textAlign =\n                'center';\n\n\n            outputContext.textBaseline =\n                'middle';\n\n\n            outputContext.fillStyle =\n                'rgba(0,0,0,0.18)';\n\n\n            outputContext.translate(\n                output.width \/ 2,\n                output.height \/ 2\n            );\n\n\n            outputContext.rotate(\n                -Math.PI \/ 6\n            );\n\n\n            const spacing =\n                watermarkSize * 4;\n\n\n            for (\n                let yPos =\n                    -output.height * 2;\n\n                yPos <\n                    output.height * 2;\n\n                yPos += spacing\n            ) {\n\n                for (\n                    let xPos =\n                        -output.width * 2;\n\n                    xPos <\n                        output.width * 2;\n\n                    xPos += spacing\n                ) {\n\n                    outputContext.fillText(\n                        'NABADIGANTA',\n                        xPos,\n                        yPos\n                    );\n\n                }\n\n            }\n\n\n            outputContext.restore();\n\n\n            \/* =================================================\n               DOWNLOAD\n            ================================================= *\/\n\n            output.toBlob(\n                function (blob) {\n\n                    const url =\n                        URL.createObjectURL(\n                            blob\n                        );\n\n\n                    const link =\n                        document.createElement(\n                            'a'\n                        );\n\n\n                    link.href =\n                        url;\n\n\n                    link.download =\n                        'Nabadiganta-News-Clipping.png';\n\n\n                    document.body.appendChild(\n                        link\n                    );\n\n\n                    link.click();\n\n\n                    link.remove();\n\n\n                    setTimeout(\n                        function () {\n\n                            URL.revokeObjectURL(\n                                url\n                            );\n\n                        },\n                        1000\n                    );\n\n                },\n                'image\/png',\n                1\n            );\n\n        };\n\n\n        \/* =====================================================\n           CLOSE CROP\n        ===================================================== *\/\n\n        document.getElementById(\n            'nd-close-crop'\n        ).onclick =\n        function () {\n\n            cropPanel.style.display =\n                'none';\n\n\n            cropSelection.style.width =\n                '0px';\n\n\n            cropSelection.style.height =\n                '0px';\n\n        };\n\n\n        \/* =====================================================\n           WINDOW RESIZE\n        ===================================================== *\/\n\n        let resizeTimer = null;\n\n\n        window.addEventListener(\n            'resize',\n            function () {\n\n                clearTimeout(\n                    resizeTimer\n                );\n\n\n                resizeTimer =\n                    setTimeout(\n                        function () {\n\n                            if (pdfDocument) {\n\n                                renderPage(\n                                    currentPage\n                                );\n\n                            }\n\n                        },\n                        250\n                    );\n\n            }\n        );\n\n\n        \/* =====================================================\n           INITIAL CALENDAR\n        ===================================================== *\/\n\n        renderCalendar();\n\n\n        const dates =\n            Object.keys(\n                editions\n            )\n            .sort()\n            .reverse();\n\n\n        if (dates.length) {\n\n            const latestDate =\n                dates[0];\n\n\n            calendarDate =\n                new Date(\n                    latestDate +\n                    'T00:00:00'\n                );\n\n\n            renderCalendar();\n\n\n            loadEdition(\n                latestDate\n            );\n\n        } else {\n\n            document.getElementById(\n                'nd-loading'\n            ).innerText =\n                'No E-Paper available.';\n\n        }\n\n        <\/script>\n\n\n        <!-- =====================================================\n             CSS\n        ===================================================== -->\n\n        <style>\n\n        \/* =====================================================\n           MAIN\n        ===================================================== *\/\n\n        #nd-epaper-app {\n\n            position: relative;\n\n            width: 100%;\n\n            max-width: 1200px;\n\n            margin: 20px auto;\n\n            background: #111;\n\n            color: #fff;\n\n            overflow: hidden;\n\n            border-radius: 10px;\n\n            font-family:\n                Arial,\n                Helvetica,\n                sans-serif;\n\n            box-sizing: border-box;\n\n        }\n\n\n        \/* =====================================================\n           TOP BAR\n        ===================================================== *\/\n\n        .nd-topbar {\n\n            height: 52px;\n\n            display: flex;\n\n            align-items: center;\n\n            justify-content:\n                space-between;\n\n            padding:\n                0 12px;\n\n            background:\n                #151515;\n\n            box-sizing: border-box;\n\n        }\n\n\n        .nd-logo-text {\n\n            font-size: 16px;\n\n            font-weight: 700;\n\n            letter-spacing: 1px;\n\n        }\n\n\n        .nd-top-button {\n\n            width: 38px;\n\n            height: 36px;\n\n            border: 0;\n\n            border-radius: 6px;\n\n            background: #fff;\n\n            color: #111;\n\n            font-size: 18px;\n\n            cursor: pointer;\n\n        }\n\n\n        \/* =====================================================\n           CALENDAR\n        ===================================================== *\/\n\n        .nd-calendar {\n\n            display: none;\n\n            position: absolute;\n\n            z-index: 999;\n\n            top: 57px;\n\n            left: 8px;\n\n            width: 310px;\n\n            max-width:\n                calc(100% - 16px);\n\n            background: #fff;\n\n            color: #111;\n\n            border-radius: 10px;\n\n            padding: 12px;\n\n            box-shadow:\n                0 10px 30px\n                rgba(0,0,0,.5);\n\n            box-sizing: border-box;\n\n        }\n\n\n        .nd-calendar.open {\n\n            display: block;\n\n        }\n\n\n        .nd-calendar-header {\n\n            display: flex;\n\n            justify-content:\n                space-between;\n\n            align-items: center;\n\n            margin-bottom: 10px;\n\n        }\n\n\n        .nd-calendar-header button {\n\n            width: 35px;\n\n            height: 32px;\n\n            border: 0;\n\n            border-radius: 5px;\n\n            background: #111;\n\n            color: #fff;\n\n            font-size: 22px;\n\n            cursor: pointer;\n\n        }\n\n\n        .nd-weekdays,\n        .nd-calendar-days {\n\n            display: grid;\n\n            grid-template-columns:\n                repeat(7, 1fr);\n\n            gap: 4px;\n\n        }\n\n\n        .nd-weekdays span {\n\n            text-align: center;\n\n            font-size: 11px;\n\n            font-weight: 700;\n\n        }\n\n\n        .nd-calendar-days {\n\n            margin-top: 6px;\n\n        }\n\n\n        .nd-calendar-days button {\n\n            min-height: 35px;\n\n            border: 0;\n\n            border-radius: 5px;\n\n            cursor: pointer;\n\n            font-size: 13px;\n\n        }\n\n\n        .nd-calendar-days button.available {\n\n            background: #111;\n\n            color: #fff;\n\n            font-weight: 700;\n\n        }\n\n\n        .nd-calendar-days button.available::after {\n\n            content: \" \u2022\";\n\n            color: #00c853;\n\n        }\n\n\n        .nd-calendar-days button.unavailable {\n\n            background: #eee;\n\n            color: #999;\n\n            cursor: default;\n\n        }\n\n\n        \/* =====================================================\n           TITLE\n        ===================================================== *\/\n\n        .nd-edition-title {\n\n            text-align: center;\n\n            padding: 10px;\n\n            background: #222;\n\n            font-size: 14px;\n\n            line-height: 1.4;\n\n        }\n\n\n        \/* =====================================================\n           CONTROLS\n        ===================================================== *\/\n\n        .nd-controls {\n\n            display: flex;\n\n            align-items: center;\n\n            justify-content: center;\n\n            flex-wrap: wrap;\n\n            gap: 6px;\n\n            padding: 8px;\n\n            background: #181818;\n\n            box-sizing: border-box;\n\n        }\n\n\n        .nd-controls button {\n\n            border: 0;\n\n            border-radius: 5px;\n\n            background: #fff;\n\n            color: #111;\n\n            padding:\n                7px 11px;\n\n            font-weight: 700;\n\n            cursor: pointer;\n\n        }\n\n\n        .nd-page-count {\n\n            min-width: 70px;\n\n            text-align: center;\n\n            font-size: 13px;\n\n        }\n\n\n        \/* =====================================================\n           PDF VIEWER\n        ===================================================== *\/\n\n        #nd-viewer {\n\n            position: relative;\n\n            width: 100%;\n\n            min-height: 500px;\n\n            background:\n                #3b3b3b;\n\n            overflow: auto;\n\n            display: flex;\n\n            justify-content: center;\n\n            align-items: flex-start;\n\n            padding: 10px;\n\n            box-sizing: border-box;\n\n            -webkit-overflow-scrolling:\n                touch;\n\n        }\n\n\n        #nd-pdf-canvas {\n\n            display: block;\n\n            flex: 0 0 auto;\n\n            background: #fff;\n\n            box-shadow:\n                0 2px 18px\n                rgba(0,0,0,.5);\n\n        }\n\n\n        #nd-loading {\n\n            position: absolute;\n\n            z-index: 10;\n\n            top: 50%;\n\n            left: 50%;\n\n            transform:\n                translate(-50%, -50%);\n\n            padding:\n                14px 20px;\n\n            border-radius: 8px;\n\n            background:\n                rgba(0,0,0,.75);\n\n            text-align: center;\n\n            white-space: nowrap;\n\n        }\n\n\n        \/* =====================================================\n           SLIDER\n        ===================================================== *\/\n\n        #nd-page-slider {\n\n            display: block;\n\n            width: 92%;\n\n            margin:\n                10px auto 15px;\n\n            cursor: pointer;\n\n        }\n\n\n        \/* =====================================================\n           CROP PANEL\n        ===================================================== *\/\n\n        #nd-crop-panel {\n\n            display: none;\n\n            position: fixed;\n\n            inset: 0;\n\n            z-index: 999999;\n\n            background: #111;\n\n            overflow: auto;\n\n            padding: 10px;\n\n            box-sizing: border-box;\n\n            text-align: center;\n\n        }\n\n\n        .nd-crop-header {\n\n            height: 45px;\n\n            display: flex;\n\n            align-items: center;\n\n            justify-content:\n                space-between;\n\n            max-width: 1200px;\n\n            margin: auto;\n\n        }\n\n\n        .nd-crop-header button {\n\n            border: 0;\n\n            background: #fff;\n\n            color: #111;\n\n            border-radius: 5px;\n\n            padding: 7px 12px;\n\n            cursor: pointer;\n\n        }\n\n\n        #nd-crop-area {\n\n            position: relative;\n\n            display: inline-block;\n\n            max-width: 100%;\n\n            margin: auto;\n\n            touch-action: none;\n\n            user-select: none;\n\n            -webkit-user-select: none;\n\n        }\n\n\n        #nd-crop-canvas {\n\n            display: block;\n\n            max-width: 100%;\n\n            width: auto;\n\n            height: auto;\n\n            background: #fff;\n\n            touch-action: none;\n\n            user-select: none;\n\n            -webkit-user-select: none;\n\n        }\n\n\n        #nd-crop-selection {\n\n            position: absolute;\n\n            left: 0;\n\n            top: 0;\n\n            width: 0;\n\n            height: 0;\n\n            border:\n                2px dashed #fff;\n\n            background:\n                rgba(255,255,255,.12);\n\n            box-shadow:\n                0 0 0 99999px\n                rgba(0,0,0,.30);\n\n            pointer-events: none;\n\n            box-sizing: border-box;\n\n        }\n\n\n        .nd-crop-actions {\n\n            padding: 15px;\n\n        }\n\n\n        .nd-crop-actions button {\n\n            border: 0;\n\n            border-radius: 6px;\n\n            background: #fff;\n\n            color: #111;\n\n            padding:\n                10px 18px;\n\n            font-weight: 700;\n\n            cursor: pointer;\n\n        }\n\n\n        \/* =====================================================\n           MOBILE\n        ===================================================== *\/\n\n        @media (max-width: 600px) {\n\n            #nd-epaper-app {\n\n                margin: 0;\n\n                border-radius: 0;\n\n            }\n\n\n            #nd-viewer {\n\n                min-height: 420px;\n\n                padding: 5px;\n\n            }\n\n\n            .nd-controls {\n\n                gap: 4px;\n\n                padding: 7px 4px;\n\n            }\n\n\n            .nd-controls button {\n\n                padding:\n                    7px 8px;\n\n                font-size: 12px;\n\n            }\n\n\n            .nd-page-count {\n\n                min-width: 55px;\n\n                font-size: 12px;\n\n            }\n\n\n            .nd-edition-title {\n\n                font-size: 12px;\n\n            }\n\n\n            .nd-calendar {\n\n                width: 290px;\n\n            }\n\n        }\n\n\n        \/* =====================================================\n           FULLSCREEN\n        ===================================================== *\/\n\n        #nd-epaper-app:fullscreen {\n\n            width: 100vw;\n\n            height: 100vh;\n\n            max-width: none;\n\n            margin: 0;\n\n            border-radius: 0;\n\n            overflow: auto;\n\n        }\n\n        <\/style>\n\n\n        <\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-85","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kmplive.in\/index.php?rest_route=\/wp\/v2\/pages\/85","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kmplive.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kmplive.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kmplive.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kmplive.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=85"}],"version-history":[{"count":1,"href":"https:\/\/kmplive.in\/index.php?rest_route=\/wp\/v2\/pages\/85\/revisions"}],"predecessor-version":[{"id":86,"href":"https:\/\/kmplive.in\/index.php?rest_route=\/wp\/v2\/pages\/85\/revisions\/86"}],"wp:attachment":[{"href":"https:\/\/kmplive.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=85"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}