AEM 63 SP1 - Touch UI Extend Rich Text Link Dialog, Remove Parent Frame option from Target Select

Goal


Extend the Link Dialog of Touch UI Rich Text Editor to remove Parent Frame option from Target Coral Select widget

For adding new widget to Link Dialog check this post

Demo | Package Install | Github


Product Link Dialog



Extended Link Dialog

                        Parent Frame removed from the list of Target options





Solution


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

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

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

                         remove-target-options.js

4) Create file (type nt:file) /apps/eaem-touchui-extend-rte-remove-target-options/clientlib/remove-target-options.js, add the following code (#27 removes the parent frame option)

(function ($) {
    "use strict";

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

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

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

        toString: "EAEMLinkBaseDialog",

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

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

            var $target = this.$rteDialog.find("coral-select"),
                $parent = $target.find("coral-select-item[value='_parent']");

            //remove parent frame option
            $target[0].items.remove($parent[0]);
        }
    });

    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;
        }
    });

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

2 comments:

  1. Could you please suggest what too do if I want to remove the path field or make it not required? I want to do this because i have created another select field from where i choose predefined urls and want to ignore path field at all.

    ReplyDelete
  2. Sreekanth, does this work with AEM Cloud ? My client is using this exact code and we are upgrading their 6.2 version to AEM Cloud. I somehow fixed the JS issues , but now the pathfield is broken and I am only getting a textfield instead of pathbrowser

    ReplyDelete