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

1 comment:

  1. Hi,

    Thanks for blog.One thing i want to understand is if i have to change the name of shape (Rectangle,Circle,polygon). I want to display Desktop,Mobile & ipad and I want to crop them as a rectangular shape for all. How i can achieve the same in touch UI.
    Thanks in advance,
    mohit

    ReplyDelete