PDF Embed API: prevent skipping pages on swipe

Community Beginner ,
Jun 27, 2021 Jun 27, 2021

Copy link to clipboard

Copied

Is there a way in PDF Embed API to programmatically prevent skipping pages on smartphones on fast swipe (flick) and also force users to spend few seconds on each page before navigating to the next page?

TOPICS
How to

Views

240

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Beginner , Jul 02, 2021 Jul 02, 2021

The following code seems to do the trick:

 

<html lang="en">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

</head>

<body >

<!--Using Adobe Embed PDF -- begin -->

<div id="adobe-dc-view" ></div> 

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

 

<script>

var currPage=1;

var adobeDCView=null;

var pagePromise=null;

document.addEventListener

...

Likes

Translate

Translate
Community Expert ,
Jun 30, 2021 Jun 30, 2021

Copy link to clipboard

Copied

You can't prevent the swipe from attempting to skip pages but you can detect when a page change has occured and change it to the page after the last page that they spent a given amount of time on. If that would be acceptable, I can whip up a CodePen for you as an example.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 30, 2021 Jun 30, 2021

Copy link to clipboard

Copied

Thanks Joel. A CodePen would be very helpful. Thanks!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 02, 2021 Jul 02, 2021

Copy link to clipboard

Copied

LATEST

The following code seems to do the trick:

 

<html lang="en">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

</head>

<body >

<!--Using Adobe Embed PDF -- begin -->

<div id="adobe-dc-view" ></div> 

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

 

<script>

var currPage=1;

var adobeDCView=null;

var pagePromise=null;

document.addEventListener("adobe_dc_view_sdk.ready", function(){ 

adobeDCView = new AdobeDC.View({clientId: "d0be3b95d4a540f33f2e381e06bb3eb", divId: "adobe-dc-view"});

pagePromise = adobeDCView.previewFile({

content:{location: {url: "./test.pdf"}},

metaData:{fileName: "Test.pdf"}

}, {embedMode: "SIZED_CONTAINER", showDownloadPDF: false, showPrintPDF: false, 

showFullScreen: false});

 

pagePromise.then(adobeViewer => {

   adobeViewer.getAPIs().then(apis => {

     apis.getPDFMetadata()

     .then(result => {

       totalPages = result.numPages;

       listenForReads(currPage);

     })

     .catch(error => console.log(error));

   });

});

 

});

function listenForReads() {

 

const eventOptions = {

   listenOn: [ AdobeDC.View.Enum.PDFAnalyticsEvents.PAGE_VIEW ],

   enablePDFAnalytics: true

}

 

   adobeDCView.registerCallback(

   AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,

   function(event) {

 

     let page = event.data.pageNumber;

 

if (Math.abs(page - currPage) <= 1) {

currPage=page; return;}

if (page < currPage) currPage--;

else currPage++;

 

adobeDCView = new AdobeDC.View({clientId: "d0be3b95d4a40f383f2e381e06bb3eb", divId: "adobe-dc-view"});

 

let resultPromise = adobeDCView.previewFile(

       {

content:{location: {url: "./test.pdf"}},

metaData:{fileName: "Test.pdf"}

   },

   {embedMode: "SIZED_CONTAINER", showDownloadPDF: false, showPrintPDF: false, 

showFullScreen: false}

);

 

  resultPromise.then(adobeViewer => {

 

        adobeViewer.getAPIs().then(apis => {

                apis.gotoLocation(currPage,0, 0)

                        .then(result => {

listenForReads();

})

                        .catch(error => console.log(error));

         });

           });

}, eventOptions);

 

  return currPage;

  }

</script>

 

<!--Using Adobe Embed PDF -- end -->

</body>

<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
</head>
<body >
<!--Using Adobe Embed PDF -- begin -->
<div id="adobe-dc-view" ></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

<script>
var currPage=1;
var adobeDCView=null;
var pagePromise=null;
document.addEventListener("adobe_dc_view_sdk.ready", function(){
adobeDCView = new AdobeDC.View({clientId: "d0be3b95d4a540f33f2e381e06bb3eb", divId: "adobe-dc-view"});
pagePromise = adobeDCView.previewFile({
content:{location: {url: "./test.pdf"}},
metaData:{fileName: "Test.pdf"}
}, {embedMode: "SIZED_CONTAINER", showDownloadPDF: false, showPrintPDF: false,
showFullScreen: false});

pagePromise.then(adobeViewer => {
adobeViewer.getAPIs().then(apis => {
apis.getPDFMetadata()
.then(result => {
listenForReads(currPage);
})
.catch(error => console.log(error));
});
});

});
function listenForReads() {

const eventOptions = {
listenOn: [ AdobeDC.View.Enum.PDFAnalyticsEvents.PAGE_VIEW ],
enablePDFAnalytics: true
}

adobeDCView.registerCallback(
AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
function(event) {

let page = event.data.pageNumber;

if (Math.abs(page - currPage) <= 1) {
currPage=page; return;}
if (page < currPage) currPage--;
else currPage++;

adobeDCView = new AdobeDC.View({clientId: "d0be3b95d4a40f383f2e381e06bb3eb", divId: "adobe-dc-view"});

let resultPromise = adobeDCView.previewFile(
{
content:{location: {url: "./test.pdf"}},
metaData:{fileName: "Test.pdf"}
},
{embedMode: "SIZED_CONTAINER", showDownloadPDF: false, showPrintPDF: false,
showFullScreen: false}
);

resultPromise.then(adobeViewer => {

adobeViewer.getAPIs().then(apis => {
apis.gotoLocation(currPage,0, 0)
.then(result => {
listenForReads();
})
.catch(error => console.log(error));
});
});
}, eventOptions);

return currPage;
}
</script>

<!--Using Adobe Embed PDF -- end -->
</body>

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources