View attachments in popup when using the editor widget

[roemhildtg]

Hello all,

I am using the default out of the box editor widget to edit and display data for an app. Attachments are by default opened in a new window. I would like a dialog box with the attachment ( which is images) to load via a ajax request.

Has anybody been able to get attachments, such an image to open in a popup of some type, while using the default editor widget?

My logic was to trigger an event handler that changes the link to the attachment, after the attribute inspector loads but I can't seem to find an event that is triggered during that time.

Am I going at this from the right approach, or would there be a better way to accomplish this with the default editor? I know you could probably write a custom widget to to do this, but I would prefer to stick with the functionality that the editor widget provides.

[roemhildtg]

Update:

I was able to get this to work, although it isn't very effective in handling multiple attachments, or anything other than an image.

Since I couldn't find an event to watch for the attachment editor loading, I used the mouse hover event to change the way the link is handled.

               app.attachmentList = app.editor.attributeInspector._attachmentEditor._attachmentList;
                if (app.attachmentList) {
                    app.selectFeatureHandle = on(app.attachmentList, "mouseover", function() {
                        var link = domQuery('a', app.attachmentList)[0];
                        var temp = domAttr.get(link, 'href');
                        if (temp != '#') {
                            app.attachUrl = temp;
                            domAttr.set(link, "href", "#");
                            domAttr.set(link, "target", "_self");
                            link.innerHTML = '<img class="attachment" src="' + app.attachUrl + '" + alt="Attachment" />';
                            app.viewAttachmentHandle = on(link, "click", function() {
                                attachmentDialog.set('content', '<img class="attachment" src="' + app.attachUrl + '" + alt="Attachment" />');
                                attachmentDialog.show();
                            });
                        }
                    });
                    app.clearFeatureHandle = on(app.map.infoWindow, "hide", function() {
                        app.attachUrl = '';
                        app.clearFeatureHandle.remove();
                        app.viewAttachmentHandle.remove();
                    });
                }

This code will load the image in place of the link text, as well as add a dojo popup dialog when the image is clicked.

Any other suggestions would be appreciated.