Customizing Aikau PdfJs Preview Widget

[keith_bailey]

Hi,

I'm pretty new to Share development so please bear with me.

What I'd like to do is the following :

1) Change the behaviour of the Aikau PdfJs viewer, so that it is maximized by default.

2) Show the PDF outline/thumbnail sidebar by default.

So, far I'm failing to make much progress on 1) - i've got the following config, and I suspect the <targetPackageRoot> is incorrect, but i've tried 'preview' and 'document-details' packages. The preview one seems the most logical.

What else do I need ? Is the below sufficient to push an updated config to the widget ? 

What about the ID's ?

I couldnt figure out what the ID should be for AlfDocumentPreview, so I tried finding by name. At the moment, I dont think the .js is even being run, so its a non-starter.

Can you push a config to the widget without an ID ?

On the off-chance that i'm on the right track, is using 'widgetsForPluginsOverrides' the correct mechanism to use? 

Finally, can I use the same mechanism to perform requirement 2) - It doesnt look like there is a flag for the sidebar, although the vanilla mozilla pdfjs appears to have a "sidebarViewOnLoad"... I can see there is a onSideBarToggle() method, but how can I cause this to fire ?

For what its worth, I have been through the excellent Aikau tutorials by Dave Draper, but I cant help feeling i'm missing something fundamental when it comes to lightly modifying a widget through a surf extension module.

Thanks for any help / pointers.

Cheers,

Keith

/src/main/amp/config/alfresco/web-extension/site-data/extensions/myco-custom-viewer.xml

<extension>
     <modules>
          <module>
               <id>Custom Document Preview Widget</id>
               <description>Instantiate a Document Preview Widget</description>
               <auto-deploy>true</auto-deploy>
               <customizations>
                    <customization>
                         <targetPackageRoot>org.alfresco.modules.preview</targetPackageRoot>
                         <sourcePackageRoot>com.myco.modules.preview</sourcePackageRoot>
                    </customization>
               </customizations>
          </module>
     </modules>
</extension>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

/src/main/amp/config/alfresco/web-extension/site-webscripts/com/myco/modules/preview/myco-preview.get.js

var docPreview = widgetUtils.findObject(model.jsonModel, "name",
          "alfresco/preview/AlfDocumentPreview");
this.alfLog("log", "In override viewer Widget", config);

if (docPreview != null) {
this.alfLog("log", "Found Preview Widget ", config);
     docPreview.config.widgets.push({
          name : "alfresco/preview/AlfDocumentPreview",
          config : {
               heightMode : 600,

               widgetsForPluginsOverrides : [ {
                    id : "PdfJs",                    
                    name: "alfresco/preview/PdfJs/PdfJs",
                    replace: true,
                    config: {
                         maximized : "true" }
               } ]
          }
     });
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[afaust]

The Aikau PDF.js previewer is currently only used within the Faceted Search page for the preview popup when you click on the thumbnail of a document in the search result. The preview in the document-details page is a non-Aikau PDF.js instance. The package you are targeting (org.alfresco.modules.preview) does not contain a web script that is using Aikau / model.jsonModel at all, so there is nothing to customise. Also, your JavaScript file is called myco-previewer.get.js so the Surf customisation will only work for an Alfresco file /alfresco/site-webscripts/org/alfresco/modules/preview/myco-previewer.get.js - such a file does not exist.

Lastly, the document-details page is currently not based on the Aikau-based details page, which is only an experimental / work-in-progress page. This is a result of Alfresco not prioritising the migration of old YUI-based pages over to Aikau in the last years. So to customise the document previewer you would need to customise the legacy YUI PDF.js previewer component.

[keith_bailey]

Thanks Axel, most informative. 

Oh dear - well, at least I know my confusion was justified - I was directed to JSDoc: Module: alfresco/preview/PdfJs/PdfJs  by Alfresco Support.

I wasn't sure about the naming of my customised .get.js - in fact i've just tried renaming it to pdfjs.get.js, and I can see it gets loaded now, which is a start. 

I'll go back to support with this information and ask them to advise on your response.

Keith

[keith_bailey]

I’ve had some success.  I’m sure there is a ‘nicer’ way of doing this, although I suspect the benefit is marginal given where I had to perform the change.

I modified the non-Aikau PdfJs.js directly : Initially I tried changing the value of the “maximized”  to ‘true’ in the configuration attributes – this had no effect. I did, however have some success by calling  the this.onMaximizeClick() at the end of _loadPdf.  

I placed the file in in an amp at :

/src/main/amp/web/components/preview/PdfJs.js

This had the effect of overwriting the OOTB file.

Unfortunately attempting to call onSideBarToggle() in the same place didn’t work, but I suspect this is because it’s happing too early during the rendering of the JS. If there was a way to fire the OOTB javascript methods after the viewer has been loaded, that would remove the need to replace the standard product.

So, I’m nearly there!