AlfDocumentPreview / PdfJs Problem

[christianjanker]

Hi guys,

I have tried to build a sample from Dave's blogpost (http://blogs.alfresco.com/wp/developer/2014/11/20/aikau-using-the-alfdocumentpreview/)
Just wanted to create a preview-dialog on a pdf-file, which should open when a button is clicked.



The AlfrescoDocumentPreview.js requires the "alfresco/preview/PdfJs"- module within the "setupPlugins" function. Then the constructor-function of PdfJs gets called. Everything is fine, but unfortunately it seems as if the code where the "Alfresco.WebPreview.prototype.Plugins.PdfJs.prototype" - Object/Mixin/Whatever is added never executes?
Cause later on i fall into the exception that the "onComponentsLoaded"-function is missing when the plugin tries to display.

I definitely missed something. Any ideas on this?

previewAction: function () {
           
           console.log("Within Preview try");
           
           var vs = win.getBox();
           
           var nodeRef = "workspace://SpacesStore/" + this.entry.id;
           
           this.payload = {
                    contentWidth: (vs.w*0.7) + "px",
                    contentHeight: (vs.h-64) + "px",
                    handleOverflow: false,
                    dialogTitle: "PreviewTitle",
                    additionalCssClasses: "no-padding",
                    widgetsContent: [
                       {
                          name: "alfresco/documentlibrary/AlfDocument",
                          nodeRef: nodeRef,
                          config: {
                             widgets: [
                                {
                                   name: "alfresco/preview/AlfDocumentPreview"
                                }
                             ]
                          }
                       }
                    ],
                    widgetsButtons: [
                       {
                          name: "alfresco/buttons/AlfButton",
                          config: {
                             label: "close",
                             publishTopic: "NO_OP"
                          }
                       }
                    ],
                    publishOnShow: [
                       {
                          publishTopic: "ALF_RETRIEVE_SINGLE_DOCUMENT_REQUEST",
                          publishPayload: {
                             nodeRef: nodeRef
                          }
                       }
                    ]
           };
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[ddraper]

Hi Christian… quick question - are you doing this within the Share application? E.g. as an extension to Share? The reason I ask is that we're currently doing some rather "interesting" prototype manipulate to get the PDFjs previewer working in Aikau which currently relies on it running within the context of the Share application. We're going to breaking this dependency in the future.

A bit more information on the context in which you're using this code would be useful to help debug the problem.

Thanks,
Dave

[christianjanker]

Thx for answering dave!

Omg, I've just narrowed my examle to post it here and now it's working like a charm.

In first place I've tried to extend the Inbox example from Paolo Predonzani with a Preview-Dialog (https://github.com/softwareloop/alfresco-inboxes). I will try to track down the error and post it here.


Even though this code example of a Preview-Diaolog is working:

model.jsonModel = {
  services: ["alfresco/services/ContentService",
            "alfresco/services/DocumentService",
            "alfresco/dialogs/AlfDialogService"],
  widgets: [
    {
      name: "softwareloop/preview/Preview"
    }
  ]
};
‍‍‍‍‍‍‍‍‍‍‍‍

define([
    'dijit/_TemplatedMixin',
    'dijit/_WidgetBase',
    'dojo/_base/declare',
    'dojo/text!./templates/Preview.html',
    "dojo/date/locale",
    "alfresco/core/Core",
    "dojo/_base/lang",
    "dojo/window"
], function (TemplatedMixin, WidgetBase, declare, template, locale, Core, lang, win ) {
    return declare([WidgetBase, TemplatedMixin, Core], {
        templateString: template,


        payload: null,
        buildRendering: function () {
        
            this.inherited(arguments);
        },

        previewAction: function () {
           
           console.log("Within Preview try");
           
           var vs = win.getBox();
           
           var nodeRef = "workspace://SpacesStore/" + "1a0b110f-1e09-4ca2-b367-fe25e4964a4e";
           
           this.payload = {
                    contentWidth: (vs.w*0.7) + "px",
                    contentHeight: (vs.h-64) + "px",
                    handleOverflow: false,
                    dialogTitle: "PreviewTitle",
                    additionalCssClasses: "no-padding",
                    widgetsContent: [
                       {
                          name: "alfresco/documentlibrary/AlfDocument",
                          nodeRef: nodeRef,
                          config: {
                             widgets: [
                                {
                                   name: "alfresco/preview/AlfDocumentPreview"
                                }
                             ]
                          }
                       }
                    ],
                    widgetsButtons: [
                       {
                          name: "alfresco/buttons/AlfButton",
                          config: {
                             label: "close",
                             publishTopic: "NO_OP"
                          }
                       }
                    ],
                    publishOnShow: [
                       {
                          publishTopic: "ALF_RETRIEVE_SINGLE_DOCUMENT_REQUEST",
                          publishPayload: {
                             nodeRef: nodeRef
                          }
                       }
                    ]
           };
           
           this.alfPublish("ALF_CREATE_DIALOG_REQUEST", this.payload);
           
        }
        
    });
});

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<div class="inboxes-item">
     <button class="inboxes-item-button" data-dojo-attach-event="click:previewAction">Preview</button>
</div>
‍‍‍‍‍

[christianjanker]

Now i was able to reconstruct the error.

I added a Container-Dojo, which dynamically "requires" the Preview Widget.

Container.js

define([
    'dijit/_TemplatedMixin',
    'dijit/_WidgetBase',
    'dojo/_base/declare',
    'dojo/text!./templates/Container.html',
    "dojo/date/locale",
    "alfresco/core/Core",
    "dojo/_base/lang",
    "dojo/window"
], function (TemplatedMixin, WidgetBase, declare, template, locale, Core, lang, win ) {
    return declare([WidgetBase, TemplatedMixin, Core], {
        templateString: template,


        payload: null,
        buildRendering: function () {
            this.inherited(arguments);
        },

        postCreate: function () {
            var containerNode = this.containerNode;
            containerNode.innerHTML = "…";
            
            require(["softwareloop/preview/Preview"], lang.hitch(this, function (Preview) {
               var previewItem = new Preview();
               
               previewItem.placeAt(containerNode).startup();
            }));
        }
        
    });
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Preview:

define([
    'dijit/_TemplatedMixin',
    'dijit/_WidgetBase',
    'dojo/_base/declare',
    'dojo/text!./templates/Preview.html',
    "dojo/date/locale",
    "alfresco/core/Core",
    "dojo/_base/lang",
    "dojo/window"
], function (TemplatedMixin, WidgetBase, declare, template, locale, Core, lang, win ) {
    return declare([WidgetBase, TemplatedMixin, Core], {
        templateString: template,


        payload: null,
        buildRendering: function () {
        
            this.inherited(arguments);
        },

        previewAction: function () {
           
           console.log("Within Preview try");
           
           var vs = win.getBox();
           
           var nodeRef = "workspace://SpacesStore/" + "1a0b110f-1e09-4ca2-b367-fe25e4964a4e";
           
           this.payload = {
                    contentWidth: (vs.w*0.7) + "px",
                    contentHeight: (vs.h-64) + "px",
                    handleOverflow: false,
                    dialogTitle: "PreviewTitle",
                    additionalCssClasses: "no-padding",
                    widgetsContent: [
                       {
                          name: "alfresco/documentlibrary/AlfDocument",
                          nodeRef: nodeRef,
                          config: {
                             widgets: [
                                {
                                   name: "alfresco/preview/AlfDocumentPreview"
                                }
                             ]
                          }
                       }
                    ],
                    widgetsButtons: [
                       {
                          name: "alfresco/buttons/AlfButton",
                          config: {
                             label: "close",
                             publishTopic: "NO_OP"
                          }
                       }
                    ],
                    publishOnShow: [
                       {
                          publishTopic: "ALF_RETRIEVE_SINGLE_DOCUMENT_REQUEST",
                          publishPayload: {
                             nodeRef: nodeRef
                          }
                       }
                    ]
           };
           
           this.alfPublish("ALF_CREATE_DIALOG_REQUEST", this.payload);
           
        }
        
    });
});

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

preview.get.js

model.jsonModel = {
  services: ["alfresco/services/ContentService",
            "alfresco/services/DocumentService",
            "alfresco/dialogs/AlfDialogService"],
  widgets: [
    {
      name: "softwareloop/preview/Container"
    }
  ]
};
‍‍‍‍‍‍‍‍‍‍‍‍

Container.html

<div class="inboxes-results" data-dojo-attach-point="containerNode">
</div>
‍‍‍‍

Preview.html

<div class="inboxes-item">
     <button class="inboxes-item-button" data-dojo-attach-event="click:previewAction">Preview</button>
</div>
‍‍‍‍‍

Any ideas on that? It seems the dynamic require within the postConstruct of the Container-Dojo mess up everything….

[christianjanker]

Moving the dynamic require into the define of the Container.js solved my problem.

define([
    'dijit/_TemplatedMixin',
    'dijit/_WidgetBase',
    'dojo/_base/declare',
    'dojo/text!./templates/Container.html',
    "dojo/date/locale",
    "alfresco/core/Core",
    "dojo/_base/lang",
    "dojo/window",
    "softwareloop/preview/Preview"
], function (TemplatedMixin, WidgetBase, declare, template, locale, Core, lang, win, Preview ) {
    return declare([WidgetBase, TemplatedMixin, Core], {
        templateString: template,


        payload: null,
        buildRendering: function () {
            this.inherited(arguments);
        },

        postCreate: function () {
            var containerNode = this.containerNode;
            containerNode.innerHTML = "…";
            
               var previewItem = new Preview();
               
               previewItem.placeAt(containerNode).startup();
        }
        
    });
});

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Can someone explain me that?
Seems to be an AMD-Loader issue that i don't really understand
Thx in advance