Moving Page Number tool in header

Hi,
Greetings!

Is it possible to move page number tool from bottom to main header tool
in which when we type page number and press enter we navigate to that page?

If not then please suggest any method to do it.

Regards
Abhishek Maurya

Hi,

Just to clarify that by “Page Number tool” you mean the overlay that appears in the bottom left of the screen? Unfortunately there’s no direct API that you can use to do it in one step. However, what you want is still achievable.

Since you will have a page number overlay in the header. It makes sense for you to disable the built-in overlay by using instance.disableElements.

To add an overlay in the header, you would want to use instance.setHeaderItems. The type of item you want to insert is CustomElement. You can find an example of how you can create a CustomElement item in this guide https://pdfjs.express/documentation/ui-customization/customizing-header.

Thanks,
Zhijie

I have created a custom element
for page number and using prepopulate the value with current page number
and total page number. But how can i change the page number value
when i change page using scroll down or going to next page. Is there any event
we get when page changes so that i can update my value in custom element?

If i am having the wrong approach please correct me? Below is the code for reference.

header.push({

  type: 'customElement',

  title:'Page',

  render: function() {

    var slider = document.createElement('input');

    slider.type = 'text';

    slider.value = currentPage;

    slider.tabindex="-1";

    slider.style="width: 11.5px; border:none; font-size: medium; margin-top: -1px;";

    slider.oninput = function() {

      console.log('---oninput---');

    };

    slider.addEventListener("keyup", function(event) {

      console.log('---keyup---');

    });

    var pageNum = document.createElement('input');

    pageNum.type = 'text';

    pageNum.value = " /  " + TotalPageNumber;

    pageNum.tabindex="-1";

    pageNum.style="width: 30px; border:none; font-size: medium; margin-top: -1px;";

    pageNum.oninput = function() {

      console.log('---oninput---');

    };

    pageNum.addEventListener("keyup", function(event) {

      console.log('---keyup---');

    });

    var form = document.createElement('div');

    form.style="display: flex; border-radius: 10px;padding: 10px;cursor: pointer;";

    form.appendChild(slider);

    form.appendChild(pageNum);

    return form;

    // return slider;

  }

});

Regards
Abhishek Maurya

hello ,
@zzhang @Logan
Could you please help me with above one.

Regards

Hello,

I have successfully implemented it also taking help
of pageNumberUpdated event.
Thanks anyway

Below is the code for reference if someone wants to do same:

const { docViewer, annotManager, Annotations } = instance;
var slider = null;
instance.docViewer.on(‘documentLoaded’, () => {

currentPage = docViewer.getCurrentPage();

TotalPageNumber = docViewer.getPageCount();

instance.setHeaderItems(function(header) {

  var items = header.getItems();

  console.log(items);

  items.push({

    type: 'customElement',

    title:'Page',

    render: function() {

      slider = document.createElement('input');

      slider.type = 'text';

      slider.value = currentPage;

      slider.tabindex="-1";

      slider.style="width: 11.5px; border:none; font-size: medium; margin-top: -1px;";

      slider.oninput = function() {

        console.log('---oninput---');

      };

      slider.addEventListener("focusout", function(event) {

        console.log('---onfocusout---');

        if (slider.value == '' || (slider.value > TotalPageNumber) || (slider.value != docViewer.getCurrentPage())){

          slider.value = docViewer.getCurrentPage();

        }

      });

      slider.addEventListener("keyup", function(event) {

        console.log('---keyup---', slider.value,event.key);

        if (event.key == 'Enter'){

          if(slider.value!= '' && (slider.value <= TotalPageNumber)){

            docViewer.setCurrentPage(slider.value);

          }

          else{

            slider.value = docViewer.getCurrentPage();

          }

        }

      });

      var pageNum = document.createElement('input');

      pageNum.type = 'text';

      pageNum.value = " /  " + TotalPageNumber;

      pageNum.tabindex="-1";

      pageNum.style="width: 30px; border:none; font-size: medium; margin-top: -1px;background-color: white;";

      pageNum.disabled = true;



      var form = document.createElement('div');

      form.style="display: flex; border-radius: 10px;padding: 10px;cursor: pointer;";

      form.appendChild(slider);

      form.appendChild(pageNum);

      return form;



      // return slider;

    }

  });

  header.update(items);

});

});

// Page number updated event

docViewer.on(‘pageNumberUpdated’, (pageNumber) => {

console.log('----inside page updated---');

console.log(pageNumber);

slider.value = pageNumber;

});

Regards

Thanks for sharing the code. I will close this topic now.

Regards,
Zhijie