Craft 3 js - extend the field layout designer field settings

Question

I would like to have the ability to include a custom option in the field layout designer field settings. There is already a plugin for Craft 2 that uses this feature Relabel for Craft

And I would like to include a behavior like this in Craft 3 too but I can't find a way to solve this issue.

The FieldLayoutDesigner is initialized here and the settings are created with

initTab: function($tab) {
    if (this.settings.customizableTabs) {
        var $editBtn = $tab.find('.tabs .settings'),
            $menu = $('<div class="menu" data-align="center"/>').insertAfter($editBtn),
            $ul = $('<ul/>').appendTo($menu);

        $('<li><a data-action="rename">' + Craft.t('app', 'Rename') + '</a></li>').appendTo($ul);
        $('<li><a data-action="delete">' + Craft.t('app', 'Delete') + '</a></li>').appendTo($ul);

        new Garnish.MenuBtn($editBtn, {
            onOptionSelect: $.proxy(this, 'onTabOptionSelect')
        });
    }

    // Don't forget the fields!
    var $fields = $tab.children('.fld-tabcontent').children();

    for (var i = 0; i < $fields.length; i++) {
        this.initField($($fields[i]));
    }
},

But I don't see any triggers or other options to extend the content. Can someone please point me to the right direction how to include a custom button properly?

I think waiting for the click event on the wheel icon and wait until the DOM menu is created to attach a custom button might not be the best and intended idea?

Thank you very much.

Answer 1

If someone has a better approach to solve that please tell me because my method right now fells really wrong and like a hack that might be troublesome in the future. I would like to accept the answer of someone else - until then I'll use the following

onKeyDown: function(ev){
    ev.preventDefault();
    var btn = $(ev.target);
    if(btn.data('menubtn')){
        var menu = btn.data('menubtn');
        var options = menu.menu.$menuList;
        if(options.find('.myClass').length === 0){
            options.append('<li><a class="myClass" data-action="myCustomDataAction">Another Button wuhu ^.^</a></li>')
        }
    }
},
init: function () {
    var e = this;
    var icons = $(".settings.icon");
    $.each(icons, function(index, item){
        var menuBtn = $(item).data('menubtn');
        if(menuBtn){
            var $menu = menuBtn.menu;
            $menu.on('show', $.proxy(e, 'onShowMenu'));
            e.addListener($(item), 'mousedown', 'onKeyDown');
        }
    });
    // add the event listener
    Garnish.$doc.on('click', '.myClass[data-action="myCustomDataAction"]', this.showHoverMenu.bind(this));
},