Thursday, May 11, 2017

Enabling Opening Of Image Editor With Single/Double Click For Image Property in EPiServer

In one of our project we had to extend functionality to extend the content selector feature to enable to open up the image editor with single/double. The reason for extending feature is to enable quick access to image editor instead of browsing through right hand panel.


How it is look like


Defining Image Porpety as ContentReference


        [UIHint(UIHint.Image)]
        [Display(Order = 40)]
        public virtual ContentReference Image { get; set; }



Extending Image Property Descriptor


 /// 
    /// Extends functionality of image content selector to open up image editor on single/double click
    /// 
    [EditorDescriptorRegistration(TargetType = typeof(ContentReference), UIHint = UIHint.Image)]
    public class ImageEditorDescriptor : EditorDescriptor
    {
        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable attributes)
        {
            metadata.ClientEditingClass = "Murtaza/Editors/ImageContentSelector/Editor";

            base.ModifyMetadata(metadata, attributes);

        }
    }



Defining Javascript class

In module.config the path to Resources/Scripts is defined as Murtaza and
inside Resources/Scripts. I have Editors -> ImageContentSelector -> Editor.js
therefore,  the ClientEditingClass is Murtaza/Editors/ImageContentSelector/Editor


<dojo>
    <paths>
      <add name="Murtaza" path="Resources/Scripts">
    </add></paths>
  </dojo>



Extending Dojo Functionality


define([
    "dojo/_base/declare",
    "dojo/dom-style",
    "dojo/aspect",
    "epi-cms/widget/ContentSelector"
],

/* Extends functionality of image content selector to open up image editor on single/double click */
    function (
        declare,
        domStyle,
        aspect,
        ContentSelector
    ) {
        return declare([ContentSelector], {

            postCreate: function () {
                this.inherited(arguments);

                /* Display node is the attach point of outer div */
                this.displayNode.addEventListener("click", this.openImageEditor.bind(this))
                this.displayNode.addEventListener("dbclick", this.openImageEditor.bind(this))

            },

            _updateDisplayNode: function (content) {

                /* Inherited from _SelectorBase through ContentSelector */
                this.inherited(arguments);

                /* Saving it for later to extract content id to form uri */
                this.content = content;
            },

            openImageEditor: function (e)
            {
                if (this.content && this.content.uri) {
                    var contextParameters = { uri: this.content.uri };
                    dojo.publish("/epi/shell/context/request", [contextParameters, { sender: this }]);
                }
            },

        });
    });



In order to load another content in edit mode we need to send request using dojo.publish function.