More customization possibilities

eea · Mar 21, 2022 · 473a6a6 · 473a6a6
1 parent f75bd29
commit 473a6a6
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 34 deletions.
diff --git a/src/components/manage/PDFViewer/BlockEdit.jsx b/src/components/manage/PDFViewer/BlockEdit.jsx
@@ -128,18 +128,6 @@ function Edit(props) {
 
       <SidebarPortal selected={selected}>
         <Segment.Group raised>
-          <BlockDataForm
-            title="Quote"
-            schema={schema}
-            onChangeField={(id, value) => {
-              onChangeBlock(block, {
-                ...data,
-                [id]: value,
-              });
-            }}
-            formData={data}
-          />
-
           {data.url ? (
             <>
               <Segment className="sidebar-metadata-container" secondary>
@@ -190,6 +178,18 @@ function Edit(props) {
               <img src={pdfSVG} alt="" />
             </Segment>
           )}
+
+          <BlockDataForm
+            title={schema.title}
+            schema={schema}
+            onChangeField={(id, value) => {
+              onChangeBlock(block, {
+                ...data,
+                [id]: value,
+              });
+            }}
+            formData={data}
+          />
         </Segment.Group>
       </SidebarPortal>
     </div>

diff --git a/src/components/manage/PDFViewer/BlockView.jsx b/src/components/manage/PDFViewer/BlockView.jsx
@@ -27,19 +27,19 @@ const PDFBlockView = ({ data }) => {
   return (
     <div className="pdf-viewer-block">
       {dataUrl && (
-        <div className="pdf-wrapper">
-          <LoadablePDFViewer
-            document={{
-              url: dataUrl,
-            }}
-            css="pdf-viewer"
-            navigation={CustomNavigation}
-            showToolbar={!data.hideToolbar}
-            initial_page={data.initial_page}
-            initial_scale={data.initial_scale}
-            initial_scale_ratio={data.initial_scale_ratio}
-          />
-        </div>
+        <LoadablePDFViewer
+          document={{
+            url: dataUrl,
+          }}
+          css="pdf-viewer"
+          navigation={CustomNavigation}
+          showToolbar={!data.hideToolbar}
+          showNavbar={!data.hideNavbar}
+          page={parseInt(data.initialPage || 1)}
+          initial_scale={data.initial_scale}
+          initial_scale_ratio={data.initial_scale_ratio}
+          enableScroll={!data.disableScroll}
+        />
       )}
     </div>
   );

diff --git a/src/components/manage/PDFViewer/PDFViewer.jsx b/src/components/manage/PDFViewer/PDFViewer.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import config from '@plone/volto/registry';
 import PDF from '@mikecousins/react-pdf';
+import cx from 'classnames';
 
 import { Icon } from '@plone/volto/components';
 import zoomInSVG from '@plone/volto/icons/add.svg';
@@ -74,11 +75,12 @@ function PDFViewer({
   initialScale = 1.0,
   initial_scale_ratio = 100,
   loader,
-  hideNavbar,
   navigation: NavigationElement,
   css,
   document: source,
+  showNavbar = true,
   showToolbar = true,
+  enableScroll = true,
 }) {
   const [scale, setScale] = React.useState(initialScale);
   const [scale_ratio, setScale_ratio] = React.useState(initial_scale_ratio);
@@ -112,6 +114,8 @@ function PDFViewer({
   };
 
   React.useLayoutEffect(() => {
+    if (!enableScroll) return;
+
     function handleWheel(event) {
       if (event.deltaY < 0) {
         setCurrentPage(Math.max(currentPage - 1, 1));
@@ -123,20 +127,26 @@ function PDFViewer({
     }
 
     const pdfWrapper = document.querySelector('.pdf-wrapper');
+
     if (pdfWrapper) {
       pdfWrapper.addEventListener('wheel', handleWheel);
     }
+
     return () => {
       const pdfWrapper = document.querySelector('.pdf-wrapper');
       if (pdfWrapper) {
-        pdfWrapper.addEventListener('wheel', handleWheel);
+        pdfWrapper.removeEventListener('wheel', handleWheel);
       }
     };
-  }, [currentPage, totalPages]);
+  }, [currentPage, totalPages, enableScroll]);
 
   return (
     <div
-      className={!loading && css ? css : 'mgrpdf__wrapper'}
+      className={
+        !loading && css
+          ? cx(css, 'pdf-wrapper')
+          : cx('mgrpdf__wrapper', 'pdf-wrapper')
+      }
       style={mgrpdfStyles.wrapper}
     >
       {showToolbar && (
@@ -153,7 +163,7 @@ function PDFViewer({
         binaryContent={source.binary}
         documentInitParameters={source.connection}
         loading={loader || loading}
-        page={page}
+        page={currentPage}
         scale={scale}
         onPageRenderSuccess={() => {
           setLoading(false);
@@ -164,9 +174,9 @@ function PDFViewer({
           setLoaded(false);
         }}
         workerSrc={config.settings.pdfWorkerSrc}
-        onDocumentLoadSuccess={(pages) => {
+        onDocumentLoadSuccess={(pdfDoc) => {
           setLoaded(true);
-          setTotalPages(pages);
+          setTotalPages(pdfDoc.numPages);
         }}
       >
         {({ pdfDocument, pdfPage, canvas }) => {
@@ -175,7 +185,7 @@ function PDFViewer({
         }}
       </PDF>
 
-      {!hideNavbar && totalPages > 0 ? (
+      {showNavbar && totalPages > 0 ? (
         <NavigationElement
           page={currentPage}
           pages={totalPages}

diff --git a/src/components/manage/PDFViewer/schema.js b/src/components/manage/PDFViewer/schema.js
@@ -5,8 +5,27 @@ const PDFBlockSchema = () => ({
       type: 'boolean',
       title: 'Hide toolbar',
     },
+    hideNavbar: {
+      type: 'boolean',
+      title: 'Hide navbar',
+    },
+    disableScroll: {
+      type: 'boolean',
+      title: 'Disable page scroll',
+    },
+    initialPage: {
+      type: 'number',
+      title: 'Initial page',
+      default: 1,
+    },
   },
-  fieldsets: [{ id: 'default', title: 'Default', fields: ['hideToolbar'] }],
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['hideToolbar', 'hideNavbar', 'disableScroll', 'initialPage'],
+    },
+  ],
   required: [],
 });