AEM CQ 56 - Disable HTML5SmartImage Map Tools

Goal

Disable some of the not required html5smartimage (CQ.html5.form.SmartImage) Image Map tools. Image map tools allow an author to create hotspots on image as shapes (Rectangle, Circle etc. ) by specifying the mapParameter in image configuration. Here we disable shapes other than Rectangle forcing the author to use only rectangles while creating hotspots

Package Install

Solution

We need a clientlib to add necessary js logic for disabling the tools

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/disable-imagemap-tools

2) Create node /apps/disable-imagemap-tools/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.widgets. Here if you cannot use otb category cq.widgets, add a custom category (my.custom.clientlib) and make sure you conditionally include the clientlib in page component jsp (<cq:includeClientLib categories="my.custom.clientlib" />)

3) Create file (nt:file) /apps/disable-imagemap-tools/clientlib/js.txt and add

                       disable-tools.js

4) Create file (nt:file) /apps/disable-imagemap-tools/clientlib/disable-tools.js and add the following code

CQ.Ext.ns("ExperienceAEM");

ExperienceAEM.Html5SmartImage = {
    mapToolRectangleOnly: function(image){
        var mapTool = null;

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

        var toolBar = mapTool.userInterface.getTopToolbar();

        var tools = toolBar.findBy(function(comp){
            return comp["toggleGroup"] == "mapperTools";
        }, toolBar);

        CQ.Ext.each(tools, function(tool){
            if( (tool.text != "Rectangle") && (tool.text != "Edit") ){
                tool.setDisabled(true);
            }
        });
    }
};

5) Add a listener on component's html5smartimage widget. Please note that it is not advisable modifying foundation components (say /libs/foundation/components/image). This solution is for custom components. So i have an image component /apps/disable-imagemap-tools/image and adding a listener on the custom image component's node /apps/disable-imagemap-tools/image/dialog/items/image

Here we are registering a loadcontent event listener with function created in the clientlib above

                       function(f) { ExperienceAEM.Html5SmartImage.mapToolRectangleOnly(f); }

Image instance is passed to the js function; logic executes on image load and disables shapes other than Rectangle