AEM 62 - Touch UI Extend Rich Text Link Dialog, Add Rel Attribute Select

Goal

Extend the Link Dialog of Touch UI Rich Text Editor to add Coral Select widget for selecting rel attribute of anchor tag

For AEM 63 check this post

Demo | Package Install | GitHub


rel Attribute select in Link Dialog

rel Applied to Anchor Tag

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-extend-rte-link-options

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-extend-rte-link-options/clientlib and set property categories of String type to cq.authoring.dialog and dependencies String[] to underscore

3) Create file ( type nt:file ) /apps/eaem-touchui-extend-rte-link-options/clientlib/js.txt, add the following

                         link-options.js

4) Create file (type nt:file) /apps/eaem-touchui-extend-rte-link-options/clientlib/link-options.js, add the following code

(function ($) {
    "use strict";

    var _ = window._,
        Class = window.Class,
        CUI = window.CUI,
        REL_FIELD = "rel",
        RTE_LINK_DIALOG = "rtelinkdialog";

    if(CUI.rte.ui.cui.CuiDialogHelper.eaemExtended){
        return;
    }

    var EAEMLinkBaseDialog = new Class({
        extend: CUI.rte.ui.cui.LinkBaseDialog,

        toString: "EAEMLinkBaseDialog",

        initialize: function(config) {
            this.superClass.initialize.call(this, config);

            this.$rteDialog = this.$container.find("[data-rte-dialog=link]");

            this.$rteDialog.find(".coral-Popover-content").append(getLinkRelOptionsHtml());
        },

        dlgToModel: function() {
            this.superClass.dlgToModel.call(this);

            var relField = this.getFieldByType(REL_FIELD);

            if(_.isEmpty(relField)){
                return;
            }

            var relVal = relField.val();

            if (_.isEmpty(relVal)) {
                return;
            }

            this.objToEdit.attributes["rel"] = relVal;
        }
    });

    CUI.rte.ui.cui.CuiDialogHelper = new Class({
        extend: CUI.rte.ui.cui.CuiDialogHelper,

        toString: "EAEMCuiDialogHelper",

        instantiateDialog: function(dialogConfig) {
            var type = dialogConfig.type;

            if(type !== RTE_LINK_DIALOG){
                this.superClass.instantiateDialog.call(this, dialogConfig);
                return;
            }

            var $editable = $(this.editorKernel.getEditContext().root),
                $container = CUI.rte.UIUtils.getUIContainer($editable),
                dialog = new EAEMLinkBaseDialog();

            dialog.attach(dialogConfig, $container, this.editorKernel);

            return dialog;
        }
    });

    function getLinkRelOptionsHtml(){
        var html =  "<div class='coral-RichText-dialog-columnContainer'>" +
                    "<div class='coral-RichText-dialog-column'>" +
                    "<coral-select data-type='rel' placeholder='Choose \"rel\" attribute'>";

        var options = ["alternate", "author", "bookmark", "external", "help",
                        "license", "next", "nofollow", "noreferrer", "noopener", "prev", "search", "tag" ];

        _.each(options, function(option){
            html = html + getOptionHtml(option);
        });

        html = html + "</coral-select></div></div>";

        return html;

        function getOptionHtml(option){
            return "<coral-select-item>" + option + "</coral-select-item>"
        }
    }

    CUI.rte.ui.cui.CuiDialogHelper.eaemExtended = true;
})(jQuery);