We really like the new dark them in the the latest UI. In fact we have made that the default theme for the viewer. However if a user changes the theme to “light” I’d like to save their preference. Is there an event that we can hook into that fires when the them is changed - similar to what we can do with the fitModeUpdated event?
Thanks,
David
Hi, David.
Thanks for the question regarding WebViewer!
Currently, there is no event fired when the theme is changed. We will add themeChanged to the next WebViewer version (7.2).
In the meantime, you could change the setActiveTheme action in redux/actions/exposedActions.js to the code below:
export const setActiveTheme = theme => {
fireEvent(‘themeChanged’);
return ({
type: ‘SET_ACTIVE_THEME’,
payload: { theme },
});
};
To listen to the event, you can do something like:
WebViewer(…).then(function(instance) {
instance.iframeWindow.addEventListener(‘themeChanged’, e => {
console.log(e)
});
});
After retrieving the theme from the database or the local storage, you can set the theme by using https://www.pdftron.com/api/web/WebViewerInstance.html#setTheme__anchor
Please let me know how this works for you, and if you have any further questions.
Best Regards,
Diego Felix
Software Developer
PDFTron Systems, Inc.
www.pdftron.com
CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.
Hi, David.
Just adding to my previous response: it’s probably useful to have the theme chosen when you get the event in the event listener. So here are the code snippets from before, but with the chosen theme exposed:
export const setActiveTheme = theme => {
fireEvent('themeChanged', theme);
return ({
type: 'SET_ACTIVE_THEME',
payload: { theme },
});
};
WebViewer(...).then(function(instance) {
instance.iframeWindow.addEventListener('themeChanged', e => {
console.log(e.detail)
});
});
Hi Diego,
Thanks for you reply. I notice that you’ve already added the code to the web viewer-ui GitHub repository. I’m building a custom web viewer from there, so I grabbed that code and built my custom UI again - thanks for acting on it so quickly!
Anyway I’m having trouble listening to the event. I’ve tried it in numerous places and it just doesn’t get called. This is as close to your sample code as I can get:
self.webViewer = new PDFTron.WebViewer({
path: “assets/pdftron/”,
css: ‘assets/pdftron/custom.css’,
initialDoc: initialDocUrl,
enableAnnotations: true,
disabledElements: [“noteReply”],
config: “assets/webViewerCustomConfig.js”,
l: “Redacted”,
serverUrl: null, // We set this to null as we handle the saving and loading to PouchDb separately
streaming: true // this starts off as true to handle loading the file specified by initialDocUrl, which is stored locally
}, viewerElement).then(function(instance) {
instance.iframeWindow.addEventListener(‘themeChanged’, e => {
console.log(e)
});
});
But I get an: Error: Uncaught (in promise): TypeError: (intermediate value).then is not a function
TypeError: (intermediate value).then is not a function
I’ve also tried it on the viewerElement, the instance i.e. webViewer.getInstance and the docViewer. I’m sure I’m just missing something obvious. Could you please point me in the right direction.
Thanks,
David
Hi, David.
I’ve tried your code (as similar I could get it working) and I’ve got this error even without the call to addEventListener. Do you still get this error if you remove the addEventListener part?
Best Regards,
Diego Felix
Software Developer
PDFTron Systems, Inc.
www.pdftron.com
CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.
Hi Diego,
Yes I still get the error even if I remove the addEventListener part. It seems that I am doing something a bit different in creating the WebViewer. My more complete code is:
self.webViewer = new PDFTron.WebViewer({
path: “assets/pdftron/”,
css: ‘assets/pdftron/custom.css’,
initialDoc: initialDocUrl,
enableAnnotations: true,
disabledElements: [“noteReply”],
config: “assets/webViewerCustomConfig.js”,
l: “Redacted”,
serverUrl: null, // We set this to null as we handle the saving and loading to PouchDb separately
streaming: true // this starts off as true to handle loading the file specified by initialDocUrl, which is stored locally
}, viewerElement);
// .then(function(instance) {
// instance.iframeWindow.addEventListener(‘themeChanged’, e => {
// console.log(e)
// });
// });
viewerElement.addEventListener(‘ready’, function () {
self.webViewerInstance = self.webViewer.getInstance();
self.docViewer = self.webViewer.getInstance().docViewer;
self.events.publishEventWebViewerReady();
self.webViewerInstance.setPrintQuality(4);
self.webViewerInstance.setTheme(‘light’);
self.setupCustomToolbarButtons(self.webViewerInstance);
self.webViewerInstance.setCustomNoteFilter(annot => {
return !annot.Author.startsWith(‘AutoCAD’);
});
self.webViewerInstance.setHeaderItems(header => {
header.getHeader(‘toolbarGroup-Insert’).delete([1,3]);
});
self.setupEventListeners();
self.webViewerInstance.iframeWindow.addEventListener(‘themeChanged’, e => {
console.log(e)
});
});
You can see that I create my WebViewer using the new keyword. I get the WebViewer instance in the viewerElement “ready” event. I tried adding the event listener a different way (last 4 lines of code), but then I get this error: ERROR TypeError: Cannot read property ‘addEventListener’ of undefined. I think it doesn’t find the iframeWindow.
My app is built with Ionic/Angular.
I have given support@pdftron.com access to our GitHub repository if that helps - https://github.com/harbour-software/docsontapv2a
Kind regards,
David
Hi, David.
Can you give me (difel110185) access to the repository?
Thank you,
Diego Felix
Software Developer
PDFTron Systems, Inc.
www.pdftron.com
CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.
I have added you to the repository.
Hi, David.
I have access now. What should I do to try the code?
Diego Felix
Software Developer
PDFTron Systems, Inc.
www.pdftron.com
CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.
You will need ionic framework installed. Then “npm install”. After that “ionic serve” will run the app in the browser. When prompted to get a verification code enter “Demo@harboursoftware.com.au”. That will populate a verification code for you.
Hi, David.
I am getting Unable to authenticate, need: Basic realm=“https://npm.fontawesome.com/” when trying npm install. Anything else I should do?
Diego Felix
Software Developer
PDFTron Systems, Inc.
www.pdftron.com
CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.
Hi Diego,
I managed to change the way that I was creating the web viewer, so I am now able to listen for the ‘themeChanged’ event.
Thanks,
David
That’s terrific news, David.
Sorry, I wasn’t able to take a look at this until now.
Best Regards,
Diego Felix
Software Developer
PDFTron Systems, Inc.
www.pdftron.com
CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.