Comments (11)
This would be very useful for our use as well for page operations. For moving and adding pages we pop up separate modals right now but it is a bit clunky and doesn't work when using WebViewer in full screen mode.
from webviewer-ui.
Yup, we also think that similar API should exist for modals and popups. It's in our roadmap, but not the highest priority at the moment. Hopefully we will get to it soon and create better dev experience for everyone :)
from webviewer-ui.
Something else I would like to add is that you might want to think about how you want to handle the onkey listeners for when a modal is open. In our product, we had a modal specifically linked to the selected annotation, and pressing delete would cause the annotation to be deleted and thus the modal to close. Because ondelete seemed to be handled in core code, I had to set up my own listener that would stop propagation if my modal was open. Perhaps you could turn off all listeners if a modal is open?
(This comment is related to issue #41)
This is an image of our temporary solution fore delete within onKeyDown.js
from webviewer-ui.
That's a great point. We'll consider it when we design the API.
from webviewer-ui.
During this time we've added a few APIs that can be used to customize modals and popups:
- instance.setCustomModal can be used to create a custom modal in the viewer. The modal can be toggled using
instance.openElements
andinstance.closeElements
. - Popup APIs that can be used for
instance.annotationPopup
,instance.contextMenuPopup
andinstance.textPopup
. - The settings overlay can also be customized using
instance.settingsMenuOverlay
Let us know if you have any other questions.
from webviewer-ui.
Thanks for the new APIs, the ones for custom modals are great to use.
I currently only find the possibility of altering the existing popups via the new Popup API, is anything similar to setCustomModals for popups possible (so a setCustomPopup
method that creates a new popup with a render function)? That in combination wwith an easy way of updating the position of the custom popup to be near the click when opened would make our live a lot easier.
We currently do something similar via code that renders a custom box, positions and sizes it accordingly and renders its content.
from webviewer-ui.
@ZhijieZhang @justinjung04 any news on this?
from webviewer-ui.
Is there any news on the Custom Popup API front?
from webviewer-ui.
Hi @sabieber,
We are currently working on a new and improved way to customize the UI without having to fork this repo, and can explore this requirement more in depth.
If I understand correctly you want:
- An API to add a fully custom popup (not one of the default ones)
- A mechanism to open this based on an action (like a click on a certain annotation?)
Can you elaborate more on what your ideal use case is, and what an ideal API would look like for you?
from webviewer-ui.
Hi @bollain,
thanks for the update and heads up! This sounds really promising.
Yes our use case is to create an annotation for the word the user clicked on and displaying a custom popup next to the created annotation.
Best would be an API where a popup with a fully custom content (like the dialog APIs) can be created. Also it would be helpful if there was an easy way to update the position of that popup to be next to a specified annotation.
from webviewer-ui.
Hi @sabieber,
We are currently working on a new and improved way to customize the UI without having to fork this repo, and can explore this requirement more in depth.
If I understand correctly you want:
- An API to add a fully custom popup (not one of the default ones)
- A mechanism to open this based on an action (like a click on a certain annotation?)
Can you elaborate more on what your ideal use case is, and what an ideal API would look like for you?
Hi guys...
Can you give me, please, some hints on how this customization works?
Any help will be very much appreciated...It's a real struggle just to build it...
Even following those steps found in here ((https://docs.apryse.com/documentation/web/guides/advanced-customization/))
I'm using the 10.6 branch.
I only get to do those steps after install Visual Studio 2019 with "Desktop development with C++" package...
But, after the build, the copied files (from webviewer-ui/build folder) don't work correctly with my app (build with React).
:(
Someone can help?
Tnx in advance!!!
from webviewer-ui.
Related Issues (20)
- [Bug] Preview file: Cannot read properties of undefined (reading 'Annotations') version 10.4.0 HOT 1
- [Bug] Error when changing the document after update to 10.5.0 HOT 2
- [Feature Request] Custom Right Click Menu for Bookmarks HOT 1
- [Bug] Toolbar does not show up if 'header' is disabled HOT 3
- [Feature Request] Customize how a Datetime will appear in a note/comment HOT 1
- Fit Mode doesnt work for the second document HOT 1
- [Bug] Shift+Click thumbnails degraded behavior in 10.6 HOT 2
- Post-install run build/start is failing HOT 1
- Getting error after integrating pdfnet-node library in angular. HOT 1
- [Bug] Webviewer showing markReplaceTextToolButton in Read only mode HOT 1
- [Bug] TypeScript Error: Property 'customHandlerId' Not Recognized in '@pdftron/webviewer' Method 'instance.UI.loadDocument HOT 1
- PDF with 3d Data shows black page HOT 1
- [Bug] Keyboard shortcuts are not working after updated to 10.8 HOT 1
- [SECURITY] CVE-2023-26149 quill-mention HOT 6
- Running latest version project changes throws multiple scss errors HOT 2
- [Feature Request] expose options for instance.UI.print HOT 2
- [Bug] CustomStamps exports an invalid textColor in case of the default white text color HOT 1
- [Bug] instance.UI.setActiveLeftPanel not working in modular UI HOT 1
- [Bug] Unable to open context menu HOT 1
- [Bug] Unable to enter a multi-digit page number in modular UI page controls input HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webviewer-ui.