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.
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
In order to load another content in edit mode we need to send request using dojo.publish function.
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 andinside 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.