AEM CQ 56 - HTML5SmartImage Save Existing Image Maps

Goal

In CQ 56, working with Html 5 Smart Image you must have noticed that image maps added on an existing image are cleared if a new image is uploaded or drag dropped into the working area. If you have too many maps and do not want the existing maps to be cleared on new image drop, following solution may help. Check the demo video

Solution

One way to preserve map values is to handle the image changes on server side by coding a JCR observation listener or sling post processor or servlet filter, but if you'd like to handle it on the client side and don't mind adding a new xtype (unless it's really necessary and you cant figure out an other way, never change the existing xtype behavior, always extend and register a new xtype). Here we extend the xtype html5smartimage, add necessary save maps functionality and register it as savemapshtml5smartimage

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/saveimagemaps

2) Create node /apps/saveimagemaps/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.widgets

3) Create file (nt:file) /apps/saveimagemaps/clientlib/js.txt and add

                       saveimagemaps.js

4) Create file (nt:file) /apps/saveimagemaps/clientlib/saveimagemaps.js and add the following code

CQ.Ext.ns("ExperienceAEM");

ExperienceAEM.Html5SmartImage = CQ.Ext.extend(CQ.html5.form.SmartImage, {
    initComponent: function () {
        ExperienceAEM.Html5SmartImage.superclass.initComponent.call(this);
        var mapTool = null;

        CQ.Ext.each(this.imageToolDefs, function(tool){
            if(tool.toolId == "smartimageMap"){
                mapTool = tool;
            }
        });

        var mapValue = null;

        this.on("loadimage", function(){
            if(mapTool.initialValue){
                mapValue = mapTool.initialValue;
            }else if(!mapTool.initialValue && mapValue){
                mapTool.initialValue = mapValue;
            }
        });
    }
});

CQ.Ext.reg("savemapshtml5smartimage", ExperienceAEM.Html5SmartImage);

5) Use the xtype savemapshtml5smartimage in your image component