EPiServer - Content Area as Image list

Dojo widget

define([
        "dojo/_base/array",
        "dojo/_base/connect",
        "dojo/_base/declare",
        "dojo/_base/lang",
        "dojo/query",
        "dojo/dom-class",
        "dojo/on",
        "dojo/dom",
        "dijit/popup",
        "dijit/TooltipDialog",
        "epi/epi",
        "epi/dependency",
        "epi-cms/contentediting/editors/ContentAreaEditor"
    ],
    function(
        array,
        connect,
        declare,
        lang,
        query,
        domClass,
        on,
        dom,
        popup,
        TooltipDialog,
        epi,
        dependency,
        _ContentAreaEditor
    ) {
        return declare("alloy.editors.contentAreaWithPreview", [_ContentAreaEditor], {
            buildRendering: function() {
                this.inherited(arguments);

                var self = this;

                // override _createTreeNode method
                var _createTreeNode = this.tree._createTreeNode;
                this.tree._createTreeNode = lang.hitch(this.tree, function(model) {
                    var node = _createTreeNode.call(this, model);
                    self._modifyNode.call(self, node, model);
                    return node;
                });
            },

            _modifyNode: function(node, model) {
                var imgNode = query("img.dijitIcon", node.domNode);
                if (imgNode == null || imgNode.length == 0) {
                    return;
                }

                var spanLabel = query("span.dijitTreeLabel", node.domNode);
                if (spanLabel == null || spanLabel.length == 0) {
                    return;
                }

                this._resolveContentData(model.item.contentLink, lang.hitch(this, function(content) {
                    if (!content.thumbnailUrl) {
                        return;
                    }

                    // setup image
                    imgNode = imgNode[0];
                    domClass.add(imgNode, "epi-thumbnail");
                    domClass.remove(imgNode, "epi-iconObjectImage");
                    domClass.remove(imgNode, "dijitTreeIcon");
                    imgNode.src = content.thumbnailUrl;

                    // setup span
                    spanLabel = spanLabel[0];
                    domClass.remove(spanLabel, "dijitTreeLabel");
                    domClass.add(spanLabel, "dojoxEllipsis");

                    // preview on dblclick 
                    on(imgNode, 'dblclick', function() {
                        window.open(content.previewUrl, '_blank');
                    });

                    this._createTooltip(node, imgNode, content.previewUrl);
                }));
            },

            _resolveContentData: function(contentlink, callback) {
                var registry = dependency.resolve("epi.storeregistry");
                var store = registry.get("epi.cms.content.light");
                if (!contentlink) {
                    return null;
                }

                var contentData;
                dojo.when(store.get(contentlink), function(returnValue) {
                    contentData = returnValue;
                    callback(contentData);
                });
                return contentData;
            },

            _createTooltip: function (node, imgNode, previewUrl) {
                var createHtml = function() {
                    return "<img src='" + previewUrl + "' style='max-height: 250px;max-width: 400px;'/>";
                };

                node.imageTooltip = new TooltipDialog({
                    connectId: [node.id],
                    content: createHtml(),
                    onMouseLeave: function() {
                        popup.close(node.imageTooltip);
                    }
                });

                on(imgNode, 'mouseleave', function() {
                    popup.close(node.imageTooltip);
                });

                on(imgNode, 'click', function() {
                    popup.open({
                        popup: node.imageTooltip,
                        around: dom.byId(node.id),
                        orient: ["after-centered"]
                    });
                });
            }
        });
    });

Editor descriptor

using EPiServer.Cms.Shell.UI.ObjectEditing.EditorDescriptors;
using EPiServer.Core;
using EPiServer.Shell.ObjectEditing.EditorDescriptors;

namespace EpiServerThumbnail.Business.EditorDescriptors
{
    [EditorDescriptorRegistration(TargetType = typeof(ContentArea), UIHint = UiHint)]
    public class ContentAreaEditorWithPreviewDescriptor : ContentAreaEditorDescriptor
    {
        public const string UiHint = "content-area-with-preview";

        public ContentAreaEditorWithPreviewDescriptor()
        {
            this.ClientEditingClass = "alloy.editors.contentAreaWithPreview";
        }
    }
}

Using in model

[Display(Name = "Image list", GroupName = SystemTabNames.Content, Order = 321)]
[CultureSpecific]
[UIHint(ContentAreaEditorWithPreviewDescriptor.UiHint)]
public virtual ContentArea ContentAreaWithThumbnails { get; set; }