Comments (22)
Hi Sascha,
You can find the API available in thumbnail
branch: https://github.com/PDFTron/webviewer-ui/tree/thumbnail
Here is how you can use the API to render the page number and a download "button" above the thumbnail:
viewerInstance.setThumbnailRenderer(({ pageNumber, thumbnailContainer }) => {
const result = document.createElement('div');
const pageLabel = document.createElement('div');
pageLabel.innerHTML = `${pageNumber}`;
const downloadButton = document.createElement('div');
downloadButton.innerHTML = 'download';
downloadButton.addEventListener('click', () => { viewerInstance.downloadPdf() })
result.appendChild(pageLabel);
result.appendChild(downloadButton);
result.appendChild(thumbnailContainer);
return result;
})
Let us know how this API works for you. If everything is good then we will merge it to master.
Thanks!
from webviewer-ui.
I've reviewed your PR, and it looks like it's an API to append custom elements after the page number div.
We would like to keep this project general enough, and the PR seems a bit specific to number of use cases only.
To come up with a more general solution, do you think it would be useful for an API to get thumbnail images, which could be used to create custom thumbnails from scratch?
from webviewer-ui.
Thanks for reviewing my PR and providing feedback.
You are right in the assumption that its an API for appending custom DOM elements to the end of the Thumbnail (so its below the page number - in our case we would hide the normal page number via CSS).
I actually think the provided API could be of use in a lot of different cases, for example one culd use it to overlay the thumbnail with custom content by using the API and some basic CSS rules.
Also we would actually like to introduce a similar API to annotations in the annotations panel to introduce some custom elements in the list view).
If you think the API is not general enough we could work with the API you suggested if it is implemented. I don't really know if there is a way to build something similar for the annotations though, as they have more complex elements like dropdowns, replies, ...
Would be perfect if we could implement these APIs rather quickly as we want to roll out the new UI in december.
from webviewer-ui.
I also agree that there could be many users who want to tweak existing thumbnails panel and notes panel, but I just don't think having an API to simply append custom element is sufficient. It's true that the API could be powerful if used with CSS, but that also means the customization code becomes more complex and hard to understand for people who are not familiar with CSS.
from webviewer-ui.
Is this something you would design and implement then? From our perspective its not really feasable to make the implemented API more general to support more usecases.
How would you suggest a similar API would look like for the customization of the annotation card in the annotations panel (to support adding a status and buttons)?
from webviewer-ui.
This is one of the enhancement we have on our backlog, but we don't have a timeline yet.
API for customizing annotation card could be trickier, as it involves more components and actions. What kind of customizations are you thinking of?
from webviewer-ui.
The customizations for the annotations we currently need are adding custom actions to the dropdown (where edit and delete are) and showing a custom status inside the card (something like unrevised/finished).
We currently have a branch in my own fork of the ui with an API which allows us to add a custom div to every annotation card in the sidebar. You can check it out here.
I think it would be really good to have something similar (more generic is fine) for every user of the webviewer.
You can check out our current version of the APIs here:
sabieber@29f340b
sabieber@9199964
Hope we can further discuss this and find a solution that is suitable for adding as a general API
from webviewer-ui.
Any news on this?
from webviewer-ui.
Sorry for a late reply, and thank you for clarifying the use case and sharing the code.
We had an internal discussion, and thought of an API that might look like this:
viewerInstance.setThumnailRender(({ pageNumber, thumbnail }) => {
// pageNumber is a string
// thumbnail is a DOM element
const result = document.createElement('div');
const customLabel = document.createElement('div');
customLabel.innerHTML = 'This is page ' + pageNumber;
result.appendChild(customLabel);
result.appendChild(thumbnail);
return result;
});
which will render the custom page label on top of thumbnail image.
Any comments or feedback would be appreciated.
from webviewer-ui.
Thanks for discussing the issue internally and coming up with a proposal.
The proposed API looks fine and should solve our use case as well as being flexible enough for other users.
When do you think this could be implemented?
Were there any discussions yet regarding the customized annotations content?
from webviewer-ui.
@justinjung04 are there some news on this? Thanks
from webviewer-ui.
Sorry for a late reply.
We have been busy preparing for a next release over the last month.
I will make sure to work on it and give you an update after we release WebViewer 5.0 :)
from webviewer-ui.
@ZhijieZhang thanks for the branch and example. This should work for us pretty well! Thanks for the work!
from webviewer-ui.
I ported our thumbnail customization to the new proposed API for testing and it works like expected. So this should be merged into master, thanks 👍
from webviewer-ui.
Actually we currently get an exception when setting the thumbnail renderer in viewerLoaded
of our config resulting in the first two thumbnails not being rendered:
Uncaught TypeError: Cannot read property 'appendChild' of null
at webviewer-ui.min.js:47
at webviewer-ui.min.js:38
at Image.e.onload (CoreControls.js:784)
Is there a fix for this?
from webviewer-ui.
I tried to run the code snippet posted above in a config file but didn't see any errors...
Could you elaborate more about how you are using this API? Being able to see your related code in your config file would be very helpful.
from webviewer-ui.
Thanks for looking into this issue :)
The issue can be reproduced in our testing system under the following URL https://oxomi.test.scireum.com/p/DEMO/catalog/10001937
Our configuration can be found as config.js
in the sources panel of the browser debugger and the function that calls setThumbnailRenderer
is called Config.overrideThumbnails
. It seems to be some sort of timing issue as it works with a config just containing the setThumbnailRenderer
call.
The error occurs since switching to your new API, before with our proposed setThumbnailCustomContentRenderer
everything worked fine.
from webviewer-ui.
Hey thanks for sending us the URL. We were able to reproduce the issue on your testing system.
However if we put a breakpoint on where the exception throws, thumbnail will be loaded correctly as we step over and we are not be able to see the error anymore.
We found one suspicious spot in Thumbnail.js which may cause this error and pushed a fix for that. Can you try building from thumbnail
branch and see if the issue is resolved? If the issue still occurs, can you try calling Config.overrideThumbnails
in documentLoaded
event?
from webviewer-ui.
Thanks for looking into the issue, but the thumbnail
branch was not updated
from webviewer-ui.
We tried to merge the current master in my thumbnail branch and build from there but the issue still occurs.
We also tried to call Config.overrideThumbnails
in documentLoaded
instead but this doesnt seem to work either.
Sadly if the issue can't be resolved I would have to switch back to our own implementation proposal for our next release
from webviewer-ui.
Oops, forgot to push the changes to origin thumbnail
. Sorry!
Could you please try again with thumbnail
branch and see if the issue still occurs.
from webviewer-ui.
I'm closing this issue due to inactivity.
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.