Popup with Selection

When text is selected with the mouse, this demo shows a popup with the selection and draws a red rectangle around the selection (the current PDF is not changed).

window.onload = function () { //DsPdfViewer.LicenseKey = "***key***"; // Note: this code uses jquery (see index.html), // and additional styles (see styles.css). var viewer = new DsPdfViewer('#viewer', { restoreViewStateOnLoad: false }); viewer.addDefaultPanels(); var pdf = "/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/wetlands.pdf"; viewer.open(pdf); const hidePopupForTextSelection = () => { // Hide popup: $(".jquery-popup").remove(); // Hide highlighted-text-rectangle: const textSelectionRect = document.querySelector(".highlighted-text-rectangle"); if (textSelectionRect) textSelectionRect.remove(); }; const showPopupForTextSelection = (selectedText, outerRect, lastPartRect) => { // Show popup: const [lp_x1, lp_y1, lp_x2, lp_y2] = lastPartRect; const $div = $("<div>").addClass("jquery-popup") .css({ left: `${lp_x2 + 4}px`, top: `${lp_y1 + 4}px`, width: '200px' }) .html("Your popup content goes here. Selected text: <b>" + selectedText + "</b>") .appendTo("body"); // Show highlighted-text-rectangle: const [x1, y1, x2, y2] = outerRect; const textSelectionRect = document.createElement('div'); textSelectionRect.className = "highlighted-text-rectangle"; textSelectionRect.style.cssText = `left: ${x1}px; top: ${y1}px; width: ${x2 - x1}px; height: ${y2 - y1}px;`; document.body.appendChild(textSelectionRect); } const onPointerDown = () => { hidePopupForTextSelection(); }; const onPointerUp = () => { hidePopupForTextSelection(); const selectedText = viewer.getSelectedText(); const selectedTextCoordinates = viewer.getSelectedTextCoordinates(); if (selectedText && selectedTextCoordinates) { // console.log(selectedText, selectedTextCoordinates); const { pageIndex, outerRect, quadPoints } = selectedTextCoordinates; const lastPartQuadPoints = quadPoints[quadPoints.length - 1]; const lastPartRect = [lastPartQuadPoints[0].x, lastPartQuadPoints[0].y, lastPartQuadPoints[3].x, lastPartQuadPoints[3].y]; showPopupForTextSelection(selectedText, viewer.convertPdfRectToWindowCoordinates(pageIndex, outerRect), viewer.convertPdfRectToWindowCoordinates(pageIndex, lastPartRect)); } }; viewer.scrollView.addEventListener("pointerdown", onPointerDown); viewer.scrollView.addEventListener("pointerup", () => setTimeout(onPointerUp)); viewer.scrollView.addEventListener("scroll", onPointerUp); window.addEventListener("resize", () => setTimeout(onPointerUp)); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Popup with Selection</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/wasmSupportApi.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script> <script src="./src/app.js"></script> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; } .jquery-popup { position: absolute; border: 1px solid gray; padding: 10px; background-color: #fefada; } .highlighted-text-rectangle { position: absolute; border: 2px solid red; box-sizing: border-box; } body { overflow: hidden; }