Skip to content

Commit 17c9992

Browse files
mftsmfts
authored
Merge pull request #1612 from AshishViradiya153/264/feedbackQA
Document question available in vertical documents
2 parents 25a320f + 78f2e39 commit 17c9992

File tree

1 file changed

+171
-156
lines changed

1 file changed

+171
-156
lines changed

‎components/view/viewer/pages-vertical-viewer.tsx

Lines changed: 171 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -353,13 +353,6 @@ export default function PagesVerticalViewer({
353353
const containerHeight = container.clientHeight;
354354
const containerRect = container.getBoundingClientRect();
355355

356-
// Do not track the question page
357-
if (pageNumber > numPages) {
358-
setPageNumber(pageNumber);
359-
startTimeRef.current = Date.now();
360-
return;
361-
}
362-
363356
// Always preload surrounding pages during scroll
364357
const startPage = Math.max(0, pageNumber - 2 - 1);
365358
const endPage = Math.min(numPages - 1, pageNumber + 2 - 1);
@@ -391,20 +384,36 @@ export default function PagesVerticalViewer({
391384
}
392385
});
393386

394-
// Only update page number and track view if the most visible page has changed
387+
const feedbackElement = document.getElementById("feedback-question");
388+
if (feedbackElement) {
389+
const feedbackRect = feedbackElement.getBoundingClientRect();
390+
const isFeedbackVisible =
391+
feedbackRect.top < containerRect.bottom &&
392+
feedbackRect.bottom > containerRect.top;
393+
394+
if (isFeedbackVisible) {
395+
setPageNumber(numPagesWithFeedback);
396+
pageNumberRef.current = numPagesWithFeedback;
397+
startTimeRef.current = Date.now();
398+
return;
399+
}
400+
}
401+
395402
if (maxVisiblePage !== pageNumber) {
396-
const duration = Date.now() - startTimeRef.current;
397-
trackPageView({
398-
linkId,
399-
documentId,
400-
viewId,
401-
duration,
402-
pageNumber: pageNumber,
403-
versionNumber,
404-
dataroomId,
405-
setViewedPages,
406-
isPreview,
407-
});
403+
if (pageNumber <= numPages) {
404+
const duration = Date.now() - startTimeRef.current;
405+
trackPageView({
406+
linkId,
407+
documentId,
408+
viewId,
409+
duration,
410+
pageNumber: pageNumber,
411+
versionNumber,
412+
dataroomId,
413+
setViewedPages,
414+
isPreview,
415+
});
416+
}
408417

409418
setPageNumber(maxVisiblePage);
410419
pageNumberRef.current = maxVisiblePage;
@@ -470,6 +479,16 @@ export default function PagesVerticalViewer({
470479
const goToNextPage = () => {
471480
if (pageNumber >= numPagesWithAccountCreation) return;
472481

482+
if (pageNumber === numPages && enableQuestion && feedback) {
483+
const feedbackElement = document.getElementById("feedback-question");
484+
if (feedbackElement) {
485+
feedbackElement.scrollIntoView({ behavior: "smooth", block: "start" });
486+
setPageNumber(numPagesWithFeedback);
487+
startTimeRef.current = Date.now();
488+
}
489+
return;
490+
}
491+
473492
if (pageNumber > numPages) {
474493
const targetImg = imageRefs.current[pageNumber];
475494
if (targetImg) {
@@ -711,157 +730,153 @@ export default function PagesVerticalViewer({
711730
className="flex flex-col items-center gap-2"
712731
onContextMenu={(e) => e.preventDefault()}
713732
>
714-
{pageNumber <= numPagesWithAccountCreation &&
715-
pages &&
716-
loadedImages[pageNumber - 1]
717-
? pages.map((page, index) => (
718-
<div
719-
key={index}
720-
className="relative w-full px-4 md:px-8"
721-
style={{
722-
width: containerWidth
723-
? `${calculateOptimalWidth(containerWidth, page.metadata, isMobile, isTablet)}px`
724-
: undefined,
725-
}}
726-
>
727-
<div className="viewer-container relative">
728-
<img
729-
className="h-auto w-full object-contain"
730-
ref={(ref) => {
731-
imageRefs.current[index] = ref;
732-
if (ref) {
733-
ref.onload = () =>
734-
setImageDimensions((prev) => ({
735-
...prev,
736-
[index]: {
737-
width: ref.clientWidth,
738-
height: ref.clientHeight,
739-
},
740-
}));
741-
}
742-
}}
743-
useMap={`#page-map-${index + 1}`}
744-
src={
745-
loadedImages[index]
746-
? page.file
747-
: "https://www.papermark.com/_static/blank.gif"
733+
{pages.map((page, index) =>
734+
loadedImages[index] ? (
735+
<div
736+
key={index}
737+
className="relative w-full px-4 md:px-8"
738+
style={{
739+
width: containerWidth
740+
? `${calculateOptimalWidth(containerWidth, page.metadata, isMobile, isTablet)}px`
741+
: undefined,
742+
}}
743+
>
744+
<div className="viewer-container relative">
745+
<img
746+
className="h-auto w-full object-contain"
747+
ref={(ref) => {
748+
imageRefs.current[index] = ref;
749+
if (ref) {
750+
ref.onload = () =>
751+
setImageDimensions((prev) => ({
752+
...prev,
753+
[index]: {
754+
width: ref.clientWidth,
755+
height: ref.clientHeight,
756+
},
757+
}));
748758
}
749-
alt={`Page ${index + 1}`}
750-
/>
751-
752-
{watermarkConfig && imageDimensions[index] ? (
753-
<div className="absolute left-0 top-0">
754-
<SVGWatermark
755-
config={watermarkConfig}
756-
viewerData={{
757-
email: viewerEmail,
758-
date: new Date().toLocaleDateString(),
759-
time: new Date().toLocaleTimeString(),
760-
link: linkName,
761-
ipAddress: ipAddress,
762-
}}
763-
documentDimensions={imageDimensions[index]}
764-
pageIndex={index}
765-
/>
766-
</div>
767-
) : null}
768-
</div>
769-
770-
{page.pageLinks ? (
771-
<map name={`page-map-${index + 1}`}>
772-
{page.pageLinks
773-
.filter((link) => !link.href.includes(".gif"))
774-
.map((link, linkIndex) => (
775-
<area
776-
key={linkIndex}
777-
shape="rect"
778-
coords={scaleCoordinates(
779-
link.coords,
780-
getScaleFactor({
781-
naturalHeight: page.metadata.height,
782-
scaleFactor: page.metadata.scaleFactor,
783-
}),
784-
)}
785-
href={link.href}
786-
onClick={(e) =>
787-
handleLinkClick(link.href, e)
788-
}
789-
target={
790-
link.href.startsWith("#")
791-
? "_self"
792-
: "_blank"
793-
}
794-
rel={
795-
link.href.startsWith("#")
796-
? undefined
797-
: "noopener noreferrer"
798-
}
799-
/>
800-
))}
801-
</map>
759+
}}
760+
useMap={`#page-map-${index + 1}`}
761+
src={
762+
loadedImages[index]
763+
? page.file
764+
: "https://www.papermark.com/_static/blank.gif"
765+
}
766+
alt={`Page ${index + 1}`}
767+
/>
768+
769+
{watermarkConfig && imageDimensions[index] ? (
770+
<div className="absolute left-0 top-0">
771+
<SVGWatermark
772+
config={watermarkConfig}
773+
viewerData={{
774+
email: viewerEmail,
775+
date: new Date().toLocaleDateString(),
776+
time: new Date().toLocaleTimeString(),
777+
link: linkName,
778+
ipAddress: ipAddress,
779+
}}
780+
documentDimensions={imageDimensions[index]}
781+
pageIndex={index}
782+
/>
783+
</div>
802784
) : null}
785+
</div>
803786

804-
{page.pageLinks
805-
? page.pageLinks
806-
.filter((link) => link.href.includes(".gif"))
807-
.map((link, linkIndex) => {
808-
const [x1, y1, x2, y2] = scaleCoordinates(
787+
{page.pageLinks ? (
788+
<map name={`page-map-${index + 1}`}>
789+
{page.pageLinks
790+
.filter((link) => !link.href.includes(".gif"))
791+
.map((link, linkIndex) => (
792+
<area
793+
key={linkIndex}
794+
shape="rect"
795+
coords={scaleCoordinates(
809796
link.coords,
810797
getScaleFactor({
811798
naturalHeight: page.metadata.height,
812799
scaleFactor: page.metadata.scaleFactor,
813800
}),
814-
)
815-
.split(",")
816-
.map(Number);
817-
818-
const overlayWidth = x2 - x1;
819-
const overlayHeight = y2 - y1;
820-
821-
return (
822-
<img
823-
key={`overlay-${index}-${linkIndex}`}
824-
src={link.href}
825-
alt={`Overlay ${index + 1}`}
826-
style={{
827-
position: "absolute",
828-
top: y1,
829-
left: x1,
830-
width: `${overlayWidth}px`,
831-
height: `${overlayHeight}px`,
832-
pointerEvents: "none",
833-
}}
834-
/>
835-
);
836-
})
837-
: null}
838-
</div>
839-
))
840-
: null}
801+
)}
802+
href={link.href}
803+
onClick={(e) => handleLinkClick(link.href, e)}
804+
target={
805+
link.href.startsWith("#")
806+
? "_self"
807+
: "_blank"
808+
}
809+
rel={
810+
link.href.startsWith("#")
811+
? undefined
812+
: "noopener noreferrer"
813+
}
814+
/>
815+
))}
816+
</map>
817+
) : null}
818+
819+
{page.pageLinks
820+
? page.pageLinks
821+
.filter((link) => link.href.includes(".gif"))
822+
.map((link, linkIndex) => {
823+
const [x1, y1, x2, y2] = scaleCoordinates(
824+
link.coords,
825+
getScaleFactor({
826+
naturalHeight: page.metadata.height,
827+
scaleFactor: page.metadata.scaleFactor,
828+
}),
829+
)
830+
.split(",")
831+
.map(Number);
832+
833+
const overlayWidth = x2 - x1;
834+
const overlayHeight = y2 - y1;
835+
836+
return (
837+
<img
838+
key={`overlay-${index}-${linkIndex}`}
839+
src={link.href}
840+
alt={`Overlay ${index + 1}`}
841+
style={{
842+
position: "absolute",
843+
top: y1,
844+
left: x1,
845+
width: `${overlayWidth}px`,
846+
height: `${overlayHeight}px`,
847+
pointerEvents: "none",
848+
}}
849+
/>
850+
);
851+
})
852+
: null}
853+
</div>
854+
) : null,
855+
)}
841856

842857
{enableQuestion &&
843-
feedback &&
844-
pageNumber === numPagesWithFeedback ? (
845-
<div
846-
className={cn("relative block h-dvh w-full")}
847-
style={{ height: "calc(100dvh - 64px)" }}
848-
>
849-
<Question
850-
accentColor={brand?.accentColor}
851-
feedback={feedback}
852-
viewId={viewId}
853-
submittedFeedback={submittedFeedback}
854-
setSubmittedFeedback={setSubmittedFeedback}
855-
isPreview={isPreview}
856-
/>
857-
</div>
858-
) : null}
858+
feedback &&
859+
pageNumber >= numPagesWithFeedback - 1 && (
860+
<div
861+
id="feedback-question"
862+
className={cn("relative block h-dvh w-full")}
863+
style={{ height: "calc(100dvh - 64px)" }}
864+
>
865+
<Question
866+
accentColor={brand?.accentColor}
867+
feedback={feedback}
868+
viewId={viewId}
869+
submittedFeedback={submittedFeedback}
870+
setSubmittedFeedback={setSubmittedFeedback}
871+
isPreview={isPreview}
872+
/>
873+
</div>
874+
)}
859875
</div>
860876
</div>
861877
</div>
862878
</div>
863879
</div>
864-
865880
{/* Up arrow - hide on first page */}
866881
<div
867882
className={cn(

0 commit comments

Comments
 (0)