Skip to main content
A
AlecSh
Participant
June 28, 2021
Answered

PDF Embed API: prevent skipping pages on swipe

  • June 28, 2021
  • 1 reply
  • 829 views

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?

This topic has been closed for replies.
Correct answer AlecSh

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>

 

1 reply

Joel Geraci
Community Expert
Joel GeraciCommunity Expert
Community Expert
June 30, 2021

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.

    A
    AlecShAuthor
    Participant
    June 30, 2021

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

    A
    AlecShAuthorCorrect answer
    Participant
    July 2, 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("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>

     

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices