Product: PDFTron WebViewer
Product Version: 8.10.0-20221128
Please give a brief summary of your issue:
Unable to hide/remove divider from Flyout Menu
I was able to hide the main sections of Page Insertion and Page Manipulation (as part of our requirement) from the below screenshot:
I disabled using the data-elements and this worked fine.
instance.UI.disableElements([“pageInsertionHeader”, “insertPageAbove”, “insertPageBelow”, “pageManipulationHeader”, “replacePage”, “extractPage”, “deletePage”]);
But unable to remove the dividers from them
Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
Please provide a link to a minimal sample where the issue is reproducible:
I tried hiding them from CSS styling by traversing using inspect element from browser:
.FlyoutMenu .divider:last-child {
display: none !important;
}
.FlyoutMenu div.divider:nth-last-child(2) {
display: none !important;
visibility: hidden !important;
}
The same i tried on the browser it reflects changes on browser:
I also see that it renders from FlyoutMenu.scss file
But nothing worked. Any help is appreciated.
Regards,
Sunethra
Hi Sunethra,
Thank you for contacting WebViewer support.
There are some APIs to help you manipulate the Page Manipulation Overlay component.
You can use the getItems API to get all the elements of the Flyout Menu. With this, you can delete all the elements you don’t want in the UI. And then, you should update the Page Manipulation Overlay using the update API.
Below is a code snippet continuing what you have done and removing one of the dividers. You can continue using the disableElements API or use only the ones cited above.
...
instance.UI.disableElements(['pageInsertionHeader', 'insertPageAbove',
'insertPageBelow', 'pageManipulationHeader',
'replacePage', 'extractPage', 'deletePage', 'insertPage']);
let flyoutItems = instance.UI.pageManipulationOverlay.getItems();
flyoutItems.splice(3, 1);
instance.UI.pageManipulationOverlay.update(flyoutItems);
Please let us know if this works for you.
Best Regards,
Dandara Navarro
Web Software Developer
PDFTron Systems, Inc.
Hi,
The Object - pageManipulationOverlay is throwing error and gets corrected in code to pageManipulationsOverlay
On debugging:
instance.UI - I am getting complete set which includes pageManipulationOverlay
But when consoling - we get pageManipulationOverlay, which is not letting me code or render as UI.pageManipulationOverlay → throws error as not found/defined, correct the spelling.
But when i even console
console.log(instance.UI.pageManipulationsOverlay);
comes undefined
instance.UI.pageManipulationOverlay.getItems(); - Says unable to getItems and failed to recognize
In type.d.ts
Regards,
Sunethra
Hi Sunethra,
I think on your console.log there is a typo, the word manipulation is in the plural but it should be singular.
Are you calling the getItems in the same scope that you called disableElements? You can send us the component file you’re calling these APIs or maybe debug and double check if in the place you’re calling getItems the instance is already defined.
Please give us a feedback after the analysis so we could help you better.
Best,
Dandara Navarro
Hi Dandara,
Yes, they are in same scope.
Sorry, there were issue in my local and i was away for a day, hence the delay in responding.
Screenshot here, about the Auto populated error I am getting.
After Quick Auto Fix from VS Code, it renders correctly:
So Obviously, since its not detecting the ‘pageManipulationOverlay’ in type.d.ts but is getting autocorrected to pageManipulationsOverlay (pageManipulationOverlay with an ‘s’)
its throwing error in the console
Screenshot of type.d.ts (lib file):
Kindly suggest. We cannot change anything that renders and is defined in type.d.ts which is the library file.
Regards,
Sunethra
Hi Sunethra,
Thank you for the provided screenshots. The correct way is the pageManipulationOverlay (without the s). I made the fix in the documentation and it is under review now. I’ll let you know as soon as it gets merged into version 8.10.
Best,
Dandara Navarro
Hi Dandara ,
Thank you for your quick response.
That means, there will a patch released ? Any ETA for the same?
Regards,
Sunethra
Hi Sunethra,
That’s correct. The expected day for the new release is December 16th. If you want to continue with the 8.10 version, we will probably have this fix on our nightly build this week as well.
Best,
Dandara Navarro
