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