RED.menu API and small update in addItem

Core Development
1

Hi All,

I am using editorTheme.page.scripts from the setting.js to customize the editor.
I made some basic customization such as adding a button next to the "deploy" button, and some entries in hamburger menu for my own application needs. It is working pretty fine, but I am not completely satisfied in the way I have added the menu entries.
To do so I have inserted the html elements with the appropriate node-red classes, like so :

    const ul = document.querySelector("#red-ui-header>ul.red-ui-header-toolbar");
    const myItems = String.raw`
    <li class="red-ui-menu-divider"></li>
    <li>
      <a tabindex="-1" href="#">
        <div id="menu-about" class="red-ui-menu-label">About ${about.productName}</div>
      </a>
    </li>
    <li class="red-ui-menu-dropdown-submenu pull-left">
      <a tabindex="-1" href="#">
        <span class="red-ui-menu-label">Help</span>
      </a>
      <ul class="red-ui-menu-dropdown">
      <li>
        <a  id="menu-get-started" tabindex="-1" href="#">
          <span class="red-ui-menu-label">Getting started</span>
        </a>
      </li>
      <li>
        <a id="menu-wiki" tabindex="-1" href="#">
          <span class="red-ui-menu-label">Wiki</span>
        </a>
      </li>
      </ul>
    </li>
    `;
    hamburger.insertAdjacentHTML('beforeend', myItems.trim());

As already said, it is working fine, but I find it very hard coded and it is directly relying on node-red classes.
Then I tried to use instead the RED.menu.addItem api which is available in this context, like so:

var menuOptions = [];
    menuOptions.push({ id: "menu-item-help-myapp-gettingstart", label: "Getting Started", onselect: function () { $("#getting-started-dialog").dialog("open"); } });
    menuOptions.push({ id: "menu-item-help-myapp-wiki", label: "Wiki", onselect: function () { $("#wiki-dialog").dialog("open"); } });

    RED.menu.addItem("red-ui-header-button-sidemenu", { id: "menu-item-myapp-help", label: "Help", options: menuOptions });
    RED.menu.addItem("red-ui-header-button-sidemenu", { id: "menu-item-myapp-about", label: "About " + about.productName, onselect: function () { $("#about-dialog").dialog("open"); } });

Again it is working pretty fine, however I face an issue to insert a divider as It seems not possible with current implementation of "RED.menu.addItem" function.
Nevertheless, with a simple modification in addItem, a divider can be inserted by using

RED.menu.addItem("red-ui-header-button-sidemenu", null);

Below is the small modification in addItem :

   function addItem(id,opt) {
        var item = createMenuItem(opt);
        // small modification just below, testing "opt!== null" before "opt.group"
        if (opt !== null && opt.group) {
            var groupItems = $("#"+id+"-submenu").children(".red-ui-menu-group-"+opt.group);
            if (groupItems.length === 0) {
                item.appendTo("#"+id+"-submenu");
            } else {
                for (var i=0;i<groupItems.length;i++) {
                    var groupItem = groupItems[i];
                    var label = $(groupItem).find(".red-ui-menu-label").html();
                    if (opt.label < label) {
                        $(groupItem).before(item);
                        break;
                    }
                }
                if (i === groupItems.length) {
                    item.appendTo("#"+id+"-submenu");
                }
            }
        } else {
            item.appendTo("#"+id+"-submenu");
        }
    }

Then my question is, may I submit a PR to get this small modification in node-red ?

2

Seems a reasonable suggestion.

Put in a PR and we can review the specifics there.

3

done:

1 Like