TheTechMaker

Adding Menu Bar Functionality to FeatherText

Written by

ishanajay2012

in

As you may know, I recently began building my own online text editor. We added a menu bar to it, but not any functionality. Today, I will be adding functionality to my menu bar.

Adding a Context Menu

To begin, I added these lines right after we declare the top menu bar container.

index.html
<div id="top_menu_options">
        <!-- PLACEHOLDER TEXT: -->
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, nobis accusantium. Blanditiis similique, architecto porro quod consequuntur consectetur, est culpa ad deserunt eveniet, eius laborum! Voluptatum, sapiente? Labore, ut et.
</div>

To give it some style, we can start a new CSS ruleset. Let’s make it float above the other elements and have a minimum width and height of 200 pixels, a preferred width of 20% viewport width, a maximum width of 300 pixels, a maximum height of 500 pixels, and a preferred height of 30% viewport height.

style.css
#top_menu_options {
  z-index: 2;
  position: absolute;
  width: clamp(200px, 20vw, 300px);
  height: clamp(200px, 30vh, 500px);
}

Let’s give it a background blur and a background color. It should change with the theme, so let’s add a variable to our .dark ruleset.

style.css
.dark {
/* We must write it this way so that we can give it a background blue with backdrop-filter: blur(...) and rgba(...) */
  --context-bg-color: 49, 49, 49; /*#313131*/
}

Then we can apply this color (mixed with some transparency) and a background blur to our context menu.

style.css
#top_menu_options {
  backdrop-filter: blur(1.7px);
  background-color: rgba(var(--context-bg-color),0.7);
}

It appears to be a little too below the menu bar for my liking, so I will shift it up a little here.

style.css
#top_menu_options {
  transform: translateY(-3%);
}

We won’t need it visible at all times, so let’s keep it hidden by default.

style.css
#top_menu_options {
  display: none;
}

If our screen isn’t tall enough, we will need to scroll, but the scrollbar does not look good on the page, so we will hide it.

style.css
#top_menu_options {
  overflow-y: scroll;
  scrollbar-width: none;
}

Importing a Script

First, I put this line right after we set the title of the webpage.

index.html
<script src="scripts/top_menu_bar.js" defer></script>

Within this script, I put some starter code in that would allow us to log to the console while telling us where the message was coming from and loop over every menu item to give them click and mouseenter listeners.

top_menu_bar.js
function log(txt) {console.log(`[top_menu_bar.js] ${txt}`);}
log("Script loaded!")

const context_menu = document.getElementById("top_menu_options");
Array.from(document.getElementsByClassName("top_menu_item")).forEach(top_menu_item => {

    top_menu_item.addEventListener("click",()=>{
        
    })
    
    top_menu_item.addEventListener("mouseenter", () => {
    
    })

})

Keeping Track

In the future, it will come in handy to keep track of the context menu state. That is why we are going to add this line right after we declare the log function.

top_menu_bar.js
const context_menu_state = { clicked: "" }; // I can already tell that we will need to keep track of the clicked item, so I'm adding it here now

We should also set the actual context menu itself to a variable.

top_menu_bar.js
const context_menu_container = document.getElementById("top_menu_options");

Because we will be keeping context_menu_state['clicked'] as a string for easy debugging, we should probably link those strings to actual HTML elements we can manipulate in the DOM.

top_menu_bar.js
const menu_bar_items = {}; // We will populate this later. We should be focused on scalability, so using preset menu items would become more tedious in the long run

Then, we can populate this object.

top_menu_bar.js
Array.from(document.getElementsByClassName("top_menu_item")).forEach(top_menu_item => { // We have to convert it to an array to run forEach on it.
    menu_bar_items[top_menu_item.innerText] = top_menu_item;
});

Showing the Context Menu on Click

Let’s get back to our click listener in the loop over every top menu item and show the context menu under it.

top_menu_bar.js
context_menu_container.style.display = "block";
context_menu_container.style.left = top_menu_item_inner_p.offsetLeft + "px";
context_menu_state.clicked = top_menu_item.innerText; // We declared this object earlier, now we need to update it

Let’s also give an indication of the selected item in the menu bar by adding a CSS class to it so we can style it later. This also involves first removing it from any other menu items.

top_menu_bar.js
Object.values(menu_bar_items).forEach(val => {
  val.classList.remove("force_selected_border_underline");
});
top_menu_item.classList.add("force_selected_border_underline");

However, inspecting the top menu items gives us a problem. The mouseenter event does not trigger for HTML margins, so the spaces between the menu items won’t trigger an event. This can be fixed by nesting the text in a p element, like this.

index.html
<div class="top_menu_item">
  <p class="top_menu_item_text">Help</p>
</div>

And applying the border only to the inner p element.

style.css
#top_menu_container p.force_selected_border_underline {border-bottom-color: rgb(var(--accent-1)) !important;}
#top_menu_container p.top_menu_item_text {
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 4px),
        0 calc(100% - 4px)
    );
    transition: clip-path 50ms linear;
    transition-delay: 50ms;
    margin: 0;
    padding: 0;
    border-bottom: 6px solid var(--text-color);
}
.top_menu_item {
    cursor: default;
}
#top_menu_container .top_menu_item:hover p.top_menu_item_text, #top_menu_container p.force_selected_border_underline {
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        0 100%
    );
}

Now, outside of any event handler but within the loop over the top menu items, let’s store this text in a variable.

top_menu_bar.js
const top_menu_item_inner_p = top_menu_item.getElementsByClassName("top_menu_item_text")[0];

At the beginning of the script, we should link the text of the item to the p element within it, so let’s make an object for that

top_menu_bar.js
const menu_bar_inner_p_items = {};

And populating it with the outer menu items.

top_menu_bar.js
Array.from(document.getElementsByClassName("top_menu_item")).forEach(top_menu_item => {
    menu_bar_items[top_menu_item.innerText] = top_menu_item;
    menu_bar_inner_p_items[top_menu_item.getElementsByClassName("top_menu_item_text")[0].innerText] = top_menu_item.getElementsByClassName("top_menu_item_text")[0];
});

Then, we need to apply the class change to the inner paragraph element, so let’s modify our click listener within the loop to account for this.

top_menu_bar.js
context_menu_container.style.display = "block";
context_menu_container.style.left = top_menu_item_inner_p.offsetLeft + "px";
context_menu_state.clicked = top_menu_item.innerText;
Object.values(menu_bar_inner_p_items).forEach(val => {
    val.classList.remove("force_selected_border_underline");
});
top_menu_item_inner_p.classList.add("force_selected_border_underline");

By now, our JS should probably look something like this:

top_menu_bar.js
function log(txt) {
    console.log('[top_menu_bar.js] ', txt);
}
log("Script loaded!");

const context_menu_state = { clicked: "" };
const menu_bar_items = {};
const menu_bar_inner_p_items = {};
const context_menu_container = document.getElementById("top_menu_options");

Array.from(document.getElementsByClassName("top_menu_item")).forEach(top_menu_item => {
    menu_bar_items[top_menu_item.innerText] = top_menu_item;
    menu_bar_inner_p_items[top_menu_item.getElementsByClassName("top_menu_item_text")[0].innerText] = top_menu_item.getElementsByClassName("top_menu_item_text")[0];
});

Array.from(document.getElementsByClassName("top_menu_item")).forEach(top_menu_item => {
    const top_menu_item_inner_p = top_menu_item.getElementsByClassName("top_menu_item_text")[0];

    top_menu_item.addEventListener("click", () => {
        context_menu_container.style.display = "block";
        context_menu_container.style.left = top_menu_item_inner_p.offsetLeft + "px";
        context_menu_state.clicked = top_menu_item.innerText;
        Object.values(menu_bar_inner_p_items).forEach(val => {
            val.classList.remove("force_selected_border_underline");
        });
        top_menu_item_inner_p.classList.add("force_selected_border_underline");
    });

    top_menu_item.addEventListener("mouseenter", () => {
        
    });
});

Allowing the User to Peek Context Menus

In a menu bar, if you click on a menu item and move your mouse over to another item, the options move from the original one you clicked and appear under that item. Let’s recreate this by adding code to the inside of our mouseenter event. I am going to avoid mouseover since that fires multiple times if your cursor is in the element, not just when your cursor enters the bounds of the element.

Within this event, we first need to make sure that something was clicked before we show the context menu.

top_menu_bar.js
if (context_menu_state.clicked !== "") {

}

Then within this if statement, we can make sure that the context menu is visible and then make it appear under the currently hovered menu item.

top_menu_bar.js
context_menu_container.style.display = "block";
context_menu_container.style.left = top_menu_item_inner_p.offsetLeft + "px";

We should also give a visual indication of the currently hovered item, so let’s add a class to it called force_white_border_underline. This class should create a distinction between the currently hovered item and the currently selected item. We should only add it if the selected element actually does differ from the hovered element, though.

top_menu_bar.js
Object.values(menu_bar_inner_p_items).forEach(val => {
    val.classList.remove("force_white_border_underline");
});
if (context_menu_state.clicked !== top_menu_item.innerText) {
    menu_bar_inner_p_items[top_menu_item.innerText].classList.add("force_white_border_underline");
}

Then, we can implement it in CSS by adding it to the ruleset that sets clip-path to show the entire border, which makes that ruleset look like this.

style.css
#top_menu_container .top_menu_item:hover p.top_menu_item_text, #top_menu_container p.force_selected_border_underline, #top_menu_container p.force_white_border_underline {
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        0 100%
    );
}

Hiding the Menu Options Whenever the User Clicks Elsewhere

We now have a fully functional menu bar system, unless you want to leave the menu bar and exit completely. Sure, we could use focusout, but the menu bar items aren’t even allowed to have focus, and even if we set their tabindex to zero, clicking on a context menu will instantly hide it, since a menu bar item lost focus. On most Windows systems, this is the case, however what if in the future I decide that the context menu options should remain visible until after the action has completed. The goal here is to get the most flexibility.

To accomplish this, we will use a click event on all of the document (since the menu options are outside the scope of the top menu items) and then hide and remove the classes we may have added to it if the click event was not fired because the user clicked on another menu bar item (or its children) or the context menu and its children.

This code to add the event listener will not be added in any scopes, at the every end of the file.

top_menu_bar.js
document.addEventListener("click", (e) => {
    if (!context_menu_container.contains(e.target) && !Object.values(menu_bar_items).some(item => item.contains(e.target))) {
        context_menu_state.clicked = "";
        context_menu_container.style.display = "none";
        Object.values(menu_bar_inner_p_items).forEach(menu_bar_inner_p => {
            menu_bar_inner_p.classList.remove("force_selected_border_underline", "force_white_border_underline");
        });
    }
});

Now, our context menu behavior works flawlessly!

Structuring the Options for the Context Menu

In order to gain more individual control over each menu option, there will be an unordered list within this context menu container, and each list item will be an option of the menu. It will also be a flex container (which will help with responsive layouts and horizontal alignment later). Each list item will have two more flex containers inside of it, one aligned to the left and one to the right (we will use justify-content: space-between; on the list item to accomplish this). For now, the left div will just contain the action while the right will contain the keyboard shortcut or an arrow, if the action is meant to trigger a submenu.

Below is an example of the structure. We can add more list items later.

index.html
<div id="top_menu_options" class="comfy_spacing"> <!-- .comfy-spacing will be useful for customization later -->
        <ul id="top_menu_options_ul" class="undecorated_list">
            <li class="top_menu_options_li flex_container">
                <div class="flex_container">
                    <p class="top_menu_options_choice_inner_p_main_text">New</p>
                </div>
                <div class="flex_container">
                    <p class="top_menu_options_choice_inner_subtext">Ctrl+N</p>
                </div>
            </li>
            <li class="top_menu_options_li flex_container">
                <div class="flex_container">
                    <p class="top_menu_options_choice_inner_p_main_text">Open</p>
                </div>
                <div class="flex_container">
                    <p class="top_menu_options_choice_inner_subtext">Ctrl+O</p>
                </div>
            </li>
        </ul>
    </div>

Then, we can implement some basic styling in CSS.

style.css
.undecorated_list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#top_menu_options_ul {
    height: 96%;
    width: 94%;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 2%;
    padding-bottom: 2%;
    overflow-y: scroll;
    scrollbar-width: none;
}
#top_menu_options_ul p {
    margin: 0;
    cursor: default;
}
#top_menu_options_ul li {
    justify-content: space-between;
}
#top_menu_options_ul li p.top_menu_options_choice_inner_subtext:not(p.disregard_subtext_formatting) { /*We don't want to make the right arrow dimmed and italic*/
    color: var(--subtle-color);
    font-style: italic;
}
#top_menu_options_ul li:not(#top_menu_options_ul li:first-child) {
    margin-top: clamp(var(--spacing-between-menu-items-min),var(--spacing-between-menu-items-preferred),var(--spacing-between-menu-items-max));
}
#top_menu_options_ul li:not(.not_a_context_menu_option):hover { /*This may be useful for labels and submenu headings within the context menu*/
    font-weight: bold;
}
#top_menu_options_ul li:not(.not_a_context_menu_option):hover p.top_menu_options_choice_inner_p_main_text {
    color: color-mix(in srgb, rgb(var(--accent-1)) 90%, var(--text-color) 10%);
}
.context_menu_header { /*Again, useful for submenu headings*/
    border-bottom: 2px solid var(--subtle-color);
    padding-bottom: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
}

You may notice that we have three variables referenced here, namely --spacing-between-menu-items-preferred, --spacing-between-menu-items-min, and --spacing-between-menu-items-max. Before this CSS code, we first need to define these variables.

style.css
.dark {
  --subtle-color: rgb(133, 133, 133); /*This should change with theme, and that is why it was referenced above*/
}
.compact_spacing {
    --spacing-between-menu-items-min: 0px;
    --spacing-between-menu-items-preferred: 0px;
    --spacing-between-menu-items-max: 0px;
}
.comfy_spacing {
    --spacing-between-menu-items-min: 0px;
    --spacing-between-menu-items-preferred: 10px;
    --spacing-between-menu-items-max: 100vh;
}

In the future, we can change the class to increase or decrease the spacing between menu items.

Making the Buttons Do Stuff

To change the buttons for every menu item you click and make them do things when you click it, I made a separate file for this called top_menu_options.js.

In this file, I defined the log function and a placeholder function for things that will be implemented later. Then, added a reference to the inner unordered list of the top menu options in the DOM.

top_menu_options.js
function log(txt) {
    console.log('[top_menu.js][top_menu_options.js] ', txt); // 
}
log("Script loaded!");

const no_op = ()=>{}
const top_menu_options_ul = document.getElementById("top_menu_options_ul")

Then I came up with a structure for declaring the context menu items as an object.

Each key in this object corresponds to the text of the menu item that should be clicked for these specific items to show up. Every value is array of objects, with the objects this time representing each item in the context menu. There can be many different kinds of things you would want to put in here, so make sure to mark each of them with a type. I am using numbers to represent the types, and I am putting all the possible options in a JSDoc comment.

top_menu_options.js
/**
 * An object of menu options. For every option, there is another array of options (represented by objects). Below are the parameters each one can take.
 * - `type` (integer): Represents the type of the item
 *     - `0`: Represents a menu label with text. It is used to, for example, display the submenu breadcrumbs. It is only recommended to be used as the first menu item. 
 *     - `1`: Same as `0`, but with no text. This makes it just a separator.
 *     - `2`: A regular menu option that can be clicked to preform an action.
 *     - `3`: A submenu that can be clicked to open up more options.
 *     - `4`: Back header (used for properly displaying context menu breadcrumbs)
 *     - `5`: A checkbox item that can be toggled to on or off. The function given to `handler` is called every time it is clicked with a single argument passed to it - whether if the item has been changed to checked or not
 *  - `content` (string): The **unsanitized** HTML to display (not used on type `1`)
 *     - Note: on type `4` items, all the previous breadcrumbs will be dimmed and this will be displayed on the right side of the menu options
 *  - `subtext` (string): The **unsanitized** HTML to display on the right side in a darker color, typically a keyboard shortcut (only used on `2`)
 *  - `openTo` (array[object]): Another array of menu item objects that will be opened up when the current option is clicked (only used on `3`)
 *  - `handler` (function): A function to be run when the menu option is clicked (only used on `2` and `5`)
 *  - `checked` (boolean): Whether the menu item is checked by default or not (only used on `5`)
 *     - Note: This value changes. It is used by FeatherText to keep track of the current item's state
 *  - `disabled` (boolean): Whether the current option is disabled and cannot be used in the current scenario (only used on `2` and `5`)
 *     - Note: This is automatically enabled on type `3` items if all the type `2` items in `openTo` have this enabled. This cannot be set manually on type `3` items.
 *     - Note: If this is enabled on a type `5` item, it will remain locked in the current state whether it is checked or not
 */

Then right after, I begin defining the menu items.

top_menu_options.js
const menu_options = {
    "File":[],
    "Edit":[],
    "Go To":[],
    "Cursor":[],
    "View":[],
    "Options":[],
    "Help":[]
}

Let’s think ahead for a moment. If we want to open up a submenu, we will need to call the function to redraw the menu with a custom array and keep track of the previous items that the menu was opened to. Let’s define those two things.

top_menu_options.js
let previous_open_to = {}
function reset_previous_open_to() {previous_open_to={}}

function redraw_menu_from_array(arr) {}

Within our redraw_menu_from_array function, let’s first start out by clearing out the items that are currently in our list.

top_menu_options.js
top_menu_options_ul.innerHTML = ''

Then, we can loop over each item in the array.

top_menu_options.js
for (const [idx, element] of arr.entries()) {}

Within this for loop, we can chain if statements together to construct different types of menu items differently.

top_menu_options.js
if (element['type'] === 0) {}
else if (element['type'] === 1) {}
else if (element['type'] === 2) {}
else if (element['type'] === 3) {}
else if (element['type'] === 4) {}
else if (element['type'] === 5) {}

Constructing Type Zero Items

Type zero items are context menu headers. All the code in this section will be within the first if clause.

Let’s make a list item to contain all the text and then disable context menu option styling.

top_menu_options.js
const new_list_item = document.createElement("li")
new_list_item.classList.add("top_menu_options_li", "not_a_context_menu_option")

We don’t want top and bottom borders being applied if it is either the first or last elements, so let’s apply a different class for each scenario.

Scenario 1: The context menu header is the first item

top_menu_options.js
if (idx===0) {
  new_list_item.classList.add("context_menu_header")
}

Scenario 2: The context menu header is the last item

top_menu_options.js
else if (idx===items.length-1) { // idx is 0-indexed, while Array.prototype.length is not. This is why we subtract 1
  new_list_item.classList.add("context_menu_ending_header")
}

Scenario 3: Neither of the conditions above are true, meaning that the header is in the middle of the context menu.

top_menu_options.js
else {
  new_list_item.classList.add("context_menu_midway_header")
}

Let’s combine this into an if-else chain, and then add our list item to the outer unordered list.

top_menu_options.js
const new_list_item = document.createElement("li")
new_list_item.classList.add("top_menu_options_li", "not_a_context_menu_option")
if (idx===0) {
    new_list_item.classList.add("context_menu_header")
} else if (idx===items.length-1) {
    new_list_item.classList.add("context_menu_ending_header")
} else {
    new_list_item.classList.add("context_menu_midway_header")
}
top_menu_options_ul.appendChild(new_list_item)

Then, I made an element for the text and added it to the list item we created earlier.

top_menu_options.js
const new_list_header_text = document.createElement("p")
new_list_header_text.classList.add("top_menu_options_choice_inner_p_main_text")
new_list_header_text.innerHTML = element['content']
new_list_item.appendChild(new_list_header_text)

Now, we can update our CSS rules for the context menu headers.

style.css
.context_menu_header {
    border-bottom: 2px solid var(--subtle-color);
    padding-bottom: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
}
.context_menu_midway_header {
    border-bottom: 2px solid var(--subtle-color);
    border-top: 2px solid var(--subtle-color);
    margin-top: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
    margin-bottom: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
    padding-top: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
    padding-bottom: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
}
.context_menu_ending_header {
    border-top: 2px solid var(--subtle-color);
    margin-top: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
    padding-top: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
}

I also updated it to give it even spacing.

Constructing Type One Items

Type one items are simply context menu separators, so this one is fairly straightforward. All code in this section will be contained inside our second if clause.

Let’s start by making a new list item.

top_menu_options.js
const new_list_item = document.createElement("li")

It isn’t an actual clickable menu item, so let’s add some identifiers to reflect these properties in the CSS we will add later.

top_menu_options.js
new_list_item.classList.add("top_menu_options_li", "not_a_context_menu_option", "context_menu_separator")

Then, we can add this list item to our unordered list.

top_menu_options.js
top_menu_options_ul.appendChild(new_list_item)

Finally, we can give even spacing to our context menu separator with a new CSS rule.

style.css
.context_menu_separator {
    border-bottom: 2px solid var(--subtle-color);
    margin-top: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
    margin-bottom: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
}

Constructing Type Two Items

Type two items are probably the most common type I will use because this represents a regular item that you can click on to perform an action. The code here will be part of the third clause.

Let’s start by making a new list item, adding the relevant classes to it, and then attaching it to the handler.

top_menu_options.js
const new_list_item = document.createElement("li")
new_list_item.classList.add("top_menu_options_li", "flex_container")
if (!element['disabled']) {new_list_item.addEventListener("click", element['handler'])}
top_menu_options_ul.appendChild(new_list_item)

Then, we can make the divs that go on both the left and right sides of the list item.

top_menu_options.js
const left_side_div = document.createElement("div")
left_side_div.classList.add("flex_container")
new_list_item.appendChild(left_side_div)
const right_side_div = document.createElement("div")
right_side_div.classList.add("flex_container")
new_list_item.appendChild(right_side_div)

We can then make the text that goes in either div.

top_menu_options.js
const left_side_text = document.createElement("p")
left_side_text.classList.add("top_menu_options_choice_inner_p_main_text")
left_side_text.innerHTML = element['content']
left_side_div.appendChild(left_side_text)
const right_side_text = document.createElement("p")
right_side_text.innerHTML = element['subtext']
right_side_text.classList.add("top_menu_options_choice_inner_subtext")
right_side_div.appendChild(right_side_text)

We then need to provide visual indication of the item being disabled, so let’s add a class to the list item.

top_menu_options.js
if (element['disabled']) {
    new_list_item.classList.add("context_menu_option_disabled")
}

We can then add the ruleset for context_menu_option_disabled.

style.css
.context_menu_option_disabled {
    color: var(--subtle-color);
}
.context_menu_option_disabled p.top_menu_options_choice_inner_subtext {
    color: color-mix(in srgb, var(--subtle-color) 75%, var(--window-bg-color) 25%) !important;
}]

Constructing Type Three Items

Type three items are the buttons that lead to a submenu. Rather than draw a new box, I think it would be better to do what Firefox does and show the new menu options without spawning a new box. All code will be in the fourth if clause.

We can structure this the exact same as type two items, but they do a different thing when they are clicked. We also want to stop the regular subtext formatting from being applied to this element.

We are creating a new list item below.

top_menu_options.js
const new_list_item = document.createElement("li")
new_list_item.classList.add("top_menu_options_li", "flex_container")
top_menu_options_ul.appendChild(new_list_item)

Let’s create the left side div and p elements.

top_menu_options.js
const left_side_div = document.createElement("div")
left_side_div.classList.add("flex_container")
new_list_item.appendChild(left_side_div)

const left_side_text = document.createElement("p")
left_side_text.classList.add("top_menu_options_choice_inner_p_main_text")
left_side_text.innerHTML = element['content']
left_side_div.appendChild(left_side_text)

Let’s create the right-side div. Again, this will be the exact same as a type two item.

top_menu_options.js
const right_side_div = document.createElement("div")
right_side_div.classList.add("flex_container")
new_list_item.appendChild(right_side_div)

Then for the right-side text, we will do something a little different. We will use a right quote (›) character instead of subtext defined in the menu_options object. We will also prevent the regular subtext formatting from being applied by adding another class to this text, disregard_subtext_formatting.

top_menu_options.js
const right_side_text = document.createElement("p")
right_side_text.classList.add("top_menu_options_choice_inner_subtext", "disregard_subtext_formatting")
right_side_text.innerHTML = '›'
right_side_div.appendChild(right_side_text)

Then, we can handle a click event by stopping all other events (to make sure that the menu item does not lose focus and disappear), and setting the current array as the one previously opened because in the next line, we redraw the context menu items with the elements that are supposed to be within the submenu.

top_menu_options.js
new_list_item.addEventListener("click",e=>{
    e.stopImmediatePropagation()
    previous_open_to = arr
    redraw_menu_from_array(element['openTo'])
})

Constructing Type Four Items

Type four items are the headers that allow you to open a submenu’s parent. All code in this section will be in the fifth clause.

Because we need to make sure this option is as visible as possible to the user in case they clicked on the submenu by mistake, it must be the first item in the list of context menu items. We can run a quick check to see if this is true, after which we will log an error message and skip drawing this item if it is not.

top_menu_options.js
if (idx !== 0) {log("Type 4 elements must be the first item of the array!");continue;}

Then, we can make a list item and have it show the previously opened menu on click.

top_menu_options.js
new_list_item.addEventListener("click",e=>{
    e.stopImmediatePropagation()
    redraw_menu_from_array(previous_open_to)
    previous_open_to = arr
})

We can also give it the typical classes of a list item.

top_menu_options.js
new_list_item.classList.add("top_menu_options_li", "flex_container")
top_menu_options_ul.appendChild(new_list_item)

We construct the left and right side divs like we normally do, except the left side div is a label for the entire list item being a back button.

top_menu_options.js
const left_side_div = document.createElement("div")
left_side_div.classList.add("flex_container")
new_list_item.appendChild(left_side_div)

const left_side_text = document.createElement("p")
left_side_text.classList.add("top_menu_options_choice_inner_p_main_text")
left_side_text.innerHTML = '‹ Back'
left_side_div.appendChild(left_side_text)

const right_side_div = document.createElement("div")
right_side_div.classList.add("flex_container")
new_list_item.appendChild(right_side_div)

For the right-side text, we are going to do something interesting. We are going to make the element, as usual, and then dim its content, except for the final slash. We will do this by using a regular expression to wrap everything that needs to be dimmed in a span tag.

top_menu_options.js
const right_side_text = document.createElement("p")
right_side_text.innerHTML = element['content'].replace(/^(.*\/)/, '<span style="color: var(--subtle-color);">$1</span>');
right_side_text.classList.add("top_menu_options_choice_inner_subtext", "disregard_subtext_formatting") // We want to remove as much default CSS styling as possible, which is why we do not apply the normal formatting for subtext
right_side_div.appendChild(right_side_text)

Constructing Type Five Items

Type five items are the checkbox items that turn something on or off. All code in this section will be in the sixth and final if clause.

We can define the new list item along with the left and right side divs and texts like we would normally do.

top_menu_options.js
const new_list_item = document.createElement("li")
new_list_item.classList.add("top_menu_options_li", "flex_container")
top_menu_options_ul.appendChild(new_list_item)

const left_side_div = document.createElement("div")
left_side_div.classList.add("flex_container")
new_list_item.appendChild(left_side_div)

const left_side_text = document.createElement("p")
left_side_text.classList.add("top_menu_options_choice_inner_p_main_text")
left_side_text.innerHTML = element['content']
left_side_div.appendChild(left_side_text)

const right_side_div = document.createElement("div")
right_side_div.classList.add("flex_container")
new_list_item.appendChild(right_side_div)

const right_side_text = document.createElement("p")
right_side_text.innerHTML = element['subtext']
right_side_text.classList.add("top_menu_options_choice_inner_subtext")
right_side_div.appendChild(right_side_text)

Before the text on the left side, we should put a box to indicate whether or not the current option is selected. This will be a div element that will be filled if the option is selected, and only show the border if the option is not selected.

top_menu_options.js
const left_side_selection_indicator = document.createElement("div")
left_side_selection_indicator.classList.add("context_menu_option_selection_indicator")
if (element['checked']) {left_side_selection_indicator.classList.add("context_menu_option_selection_indicator_selected")}
left_side_text.insertAdjacentElement("beforebegin",left_side_selection_indicator)

We also have to give indication of the item being disabled if it is, so let’s implement that logic here.

top_menu_options.js
if (element['disabled']) {
    new_list_item.classList.add("context_menu_option_disabled")
}

If the menu option isn’t disabled, then we can toggle its state by changing its context menu indicator.

top_menu_options.js
new_list_item.addEventListener("click", ()=>{
  if (!element['disabled']) {
      element['checked'] = !element['checked']
      left_side_selection_indicator.classList.toggle("context_menu_option_selection_indicator_selected")
      element['handler'](element['checked'])
  }
})

Then, using CSS, we can make the context menu indicator however we want. In this case, it will be a small div that can be filled to indicate that the menu option is selected, or empty to indicate that the menu option is not selected.

style.css
.context_menu_option_selection_indicator {
    height: 9px;
    aspect-ratio: 1; /* Makes the height and width equal */
    align-self: center; /* Centers itself vertically */
    border: 2px solid var(--text-color);
    margin-right: 8px; /* Gives space between the indicator and the text */
}
.context_menu_option_selection_indicator_selected {
    background-color: var(--text-color);
}
.context_menu_option_disabled .context_menu_option_selection_indicator {
    border-color: var(--subtle-color);
}
.context_menu_option_disabled .context_menu_option_selection_indicator_selected {
    background-color: var(--subtle-color) !important;
}

Redrawing The Menu Items Based on a Menu Option

In order to do this, we can draw the menu options for that specified menu item.

top_menu_options.js
export function redraw_menu_options(menu_item) {
    if (menu_options[menu_item] === undefined) {log("Not a valid menu option!");return;}
    
    redraw_menu_from_array(menu_options[menu_item])
}

Structuring The Program

Notice how we added export to the beginning of the function declaration. This is because of the way I am going to structure this program. We will import the function from this file and use it in top_menu_bar.js. This code will be at the beginning of top_menu_bar.js. I will be moving both of those files into a separate subfolder called top_menu.

top_menu_bar.js
import { redraw_menu_options, reset_previous_open_to } from "./top_menu_options.js";

In top_menu_options.js, reset_previous_open_to is not exported from the file. Let’s change that by adding the export keyword to the function declaration at the beginning of the file.

top_menu_options.js
export function reset_previous_open_to() {previous_open_to={}}

Going back to top_menu_bar.js, we can now put the following line as the final line before we close the click and mouseenter listeners in our menu item loop.

top_menu_bar.js
redraw_menu_options(top_menu_item.innerText)

Then at the click for the entire document, we can put this line right before we close the if statement.

top_menu_bar.js
reset_previous_open_to()

Then, I renamed top_menu_bar.js to top_menu.js, so that our directory tree looks like this.

Plaintext
C:.
│   index.html
│   style.css
│   
└───scripts
    └───top_menu
            top_menu.js
            top_menu_options.js

We should represent these changes in index.html by replacing the script import within the head tags with the code below.

index.html
<script src="scripts/top_menu/top_menu.js" type="module" defer></script>

Final Code

Assuming everything in the guide was followed (along with some refactoring and style changes), this is how your code should look.

index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>FeatherText</title>
    <script src="scripts/top_menu/top_menu.js" type="module" defer></script>
</head>

<body class="dark">
    <div id="top_menu_container" class="fullwidth flex_container">
        <div class="top_menu_item">
            <p class="top_menu_item_text">File</p>
        </div>
        <div class="top_menu_item">
            <p class="top_menu_item_text">Edit</p>
        </div>
        <div class="top_menu_item">
            <p class="top_menu_item_text">Go To</p>
        </div>
        <div class="top_menu_item">
            <p class="top_menu_item_text">Cursor</p>
        </div>
        <div class="top_menu_item">
            <p class="top_menu_item_text">View</p>
        </div>
        <div class="top_menu_item">
            <p class="top_menu_item_text">Options</p>
        </div>
        <div class="top_menu_item">
            <p class="top_menu_item_text">Help</p>
        </div>
    </div>
    <div id="top_menu_options" class="comfy_spacing">
        <ul id="top_menu_options_ul" class="undecorated_list">
            
                
        </ul>
    </div>
    <div>
    </div>
</body>

</html>
style.css
/* Import "Azeret Mono" font (to be used on UI elements like the menu bar) */
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap');

/* Import "DM Mono" font (to be used in the text box) */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

.dark {
    --window-bg-color: #010022;
    --context-bg-color: 46, 46, 46  ; /*#313131*/
    --text-color: white;
    --subtle-color: rgb(173, 173, 173);
    --accent-1: 0, 136, 255; /*#0088ff*/
}
.compact_spacing {
    --spacing-between-menu-items-min: 0px;
    --spacing-between-menu-items-preferred: 0px;
    --spacing-between-menu-items-max: 0px;
}
.comfy_spacing {
    --spacing-between-menu-items-min: 0px;
    --spacing-between-menu-items-preferred: 10px;
    --spacing-between-menu-items-max: 100vh;
}
body {
    background-color: var(--window-bg-color);
    color: var(--text-color);
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
    font-family: 'Azeret Mono';
}

.fullwidth {width: 100vw;}
.flex_container {display: flex;}

/* MARK: Top Menu Bar
*/
#top_menu_container {
    padding: 2px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
#top_menu_container *:first-child {
    padding-left: 10px;
}
#top_menu_container *:not(#top_menu_container *:first-child) {
    padding-left: clamp(4px, 0.75vw, 100vw);
}
#top_menu_container * {
    margin: 0;
    margin-top: 10px;
}
.top_menu_item {
    cursor: default;
}
#top_menu_container p.top_menu_item_text {
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 4px),
        0 calc(100% - 4px)
    );
    transition: clip-path 50ms linear;
    transition-delay: 50ms;
    margin: 0;
    padding: 0;
    border-bottom: 6px solid var(--text-color);
}
#top_menu_container .top_menu_item:hover p.top_menu_item_text, #top_menu_container p.force_selected_border_underline, #top_menu_container p.force_white_border_underline {
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        0 100%
    );
}
#top_menu_container p.force_selected_border_underline {border-bottom-color: rgb(var(--accent-1)) !important;}
#top_menu_container p.force_white_border_underline {border-bottom-color: var(--text-color);}
/* MARK: Top Menu Options
*/
#top_menu_options {
    width: clamp(200px, 20vw, 300px);
    height: clamp(200px, 30vh, 500px);
    position: absolute;
    /* display: none; */
    transform: translateY(-3%);
    z-index: 2;
    position: absolute;
    backdrop-filter: blur(5px);
    background-color: rgba(var(--context-bg-color),0.7);
    overflow-y: scroll;
    scrollbar-width: none;
}
.undecorated_list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#top_menu_options_ul {
    height: 96%;
    width: 94%;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 2%;
    padding-bottom: 2%;
    overflow-y: scroll;
    scrollbar-width: none;
}
#top_menu_options_ul p {
    margin: 0;
    cursor: default;
}
#top_menu_options_ul li {
    justify-content: space-between;
}
#top_menu_options_ul li p.top_menu_options_choice_inner_subtext:not(p.disregard_subtext_formatting) {
    color: var(--subtle-color);
    font-style: italic;
}
#top_menu_options_ul li:not(#top_menu_options_ul li:first-child) {
    margin-top: clamp(var(--spacing-between-menu-items-min),var(--spacing-between-menu-items-preferred),var(--spacing-between-menu-items-max));
}
#top_menu_options_ul li:not(.not_a_context_menu_option):not(.context_menu_option_disabled):hover {
    font-weight: bold;
}
#top_menu_options_ul li:not(.not_a_context_menu_option):not(.context_menu_option_disabled):hover p.top_menu_options_choice_inner_p_main_text {
    color: color-mix(in srgb, rgb(var(--accent-1)) 90%, var(--text-color) 10%);
}
.context_menu_option_disabled {
    color: var(--subtle-color);
}
.context_menu_option_disabled p.top_menu_options_choice_inner_subtext {
    color: color-mix(in srgb, var(--subtle-color) 75%, var(--window-bg-color) 25%) !important;
}
.context_menu_header {
    border-bottom: 2px solid var(--subtle-color);
    padding-bottom: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
}
.context_menu_midway_header {
    border-bottom: 2px solid var(--subtle-color);
    border-top: 2px solid var(--subtle-color);
    margin-top: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
    margin-bottom: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
    padding-top: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
    padding-bottom: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
}
.context_menu_ending_header {
    border-top: 2px solid var(--subtle-color);
    margin-top: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
    padding-top: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
}
.context_menu_separator {
    border-bottom: 2px solid var(--subtle-color);
    margin-top: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
    margin-bottom: clamp(var(--spacing-between-menu-items-min), var(--spacing-between-menu-items-preferred), var(--spacing-between-menu-items-max));
}
#top_menu_options_ul li:not(#top_menu_options_ul li:has(div.context_menu_option_selection_indicator)) {
    margin-left: 20px;
}
.context_menu_option_selection_indicator {
    height: 9px;
    aspect-ratio: 1;
    align-self: center;
    border: 2px solid var(--text-color);
    margin-right: 8px;
}
.context_menu_option_selection_indicator_selected {
    background-color: var(--text-color);
}
.context_menu_option_disabled .context_menu_option_selection_indicator {
    border-color: var(--subtle-color);
}
.context_menu_option_disabled .context_menu_option_selection_indicator_selected {
    background-color: var(--subtle-color) !important;
}
top_menu.js
function log(txt) {
    console.log('[top_menu.js] ', txt);
}
log("Script loaded!");

import { redraw_menu_options, reset_previous_open_to } from "./top_menu_options.js";

const context_menu_state = { clicked: "", menu_options_clicked: false };
const menu_bar_items = {};
const menu_bar_inner_p_items = {};
const context_menu_container = document.getElementById("top_menu_options");

Array.from(document.getElementsByClassName("top_menu_item")).forEach(top_menu_item => {
    menu_bar_items[top_menu_item.innerText] = top_menu_item;
    menu_bar_inner_p_items[top_menu_item.getElementsByClassName("top_menu_item_text")[0].innerText] = top_menu_item.getElementsByClassName("top_menu_item_text")[0];
});

Array.from(document.getElementsByClassName("top_menu_item")).forEach(top_menu_item => {
    const top_menu_item_inner_p = top_menu_item.getElementsByClassName("top_menu_item_text")[0];

    top_menu_item.addEventListener("click", () => {
        context_menu_container.style.display = "block";
        context_menu_container.style.left = top_menu_item_inner_p.offsetLeft + "px";
        context_menu_state.clicked = top_menu_item.innerText;
        Object.values(menu_bar_inner_p_items).forEach(val => {
            val.classList.remove("force_selected_border_underline");
        });
        top_menu_item_inner_p.classList.add("force_selected_border_underline");
        redraw_menu_options(top_menu_item.innerText)
    });

    top_menu_item.addEventListener("mouseenter", () => {
        if (context_menu_state.clicked !== "") {
            context_menu_container.style.display = "block";
            context_menu_container.style.left = top_menu_item_inner_p.offsetLeft + "px";
            Object.values(menu_bar_inner_p_items).forEach(val => {
                val.classList.remove("force_white_border_underline");
            });
            if (context_menu_state.clicked !== top_menu_item.innerText) {
                menu_bar_inner_p_items[top_menu_item.innerText].classList.add("force_white_border_underline");
            }
        }
        redraw_menu_options(top_menu_item.innerText)
    });
});

document.addEventListener("click", (e) => {
    if (!context_menu_container.contains(e.target) && !Object.values(menu_bar_items).some(item => item.contains(e.target))) {
        context_menu_state.clicked = "";
        context_menu_container.style.display = "none";
        Object.values(menu_bar_inner_p_items).forEach(menu_bar_inner_p => {
            menu_bar_inner_p.classList.remove("force_selected_border_underline", "force_white_border_underline");
        });
        reset_previous_open_to()
    }
});
top_menu_options.js
function log(txt) {
    console.log('[top_menu.js][top_menu_options.js] ', txt);
}
log("Script loaded!");

const no_op = ()=>{}
const top_menu_options_ul = document.getElementById("top_menu_options_ul")

/**
 * An object of menu options. For every option, there is another array of options (represented by objects). Below are the parameters each one can take.
 * - `type` (integer): Represents the type of the item
 *     - `0`: Represents a menu label with text. It is used to, for example, display the submenu breadcrumbs. It is only recommended to be used as the first menu item. 
 *     - `1`: Same as `0`, but with no text. This makes it just a separator.
 *     - `2`: A regular menu option that can be clicked to preform an action.
 *     - `3`: A submenu that can be clicked to open up more options.
 *     - `4`: Back header (used for properly displaying context menu breadcrumbs)
 *     - `5`: A checkbox item that can be toggled to on or off. The function given to `handler` is called every time it is clicked with a single argument passed to it - whether if the item has been changed to checked or not
 *  - `content` (string): The **unsanitized** HTML to display (not used on type `1`)
 *     - Note: on type `4` items, all the previous breadcrumbs will be dimmed and this will be displayed on the right side of the menu options
 *  - `subtext` (string): The **unsanitized** HTML to display on the right side in a darker color, typically a keyboard shortcut (only used on `2`)
 *  - `openTo` (array[object]): Another array of menu item objects that will be opened up when the current option is clicked (only used on `3`)
 *  - `handler` (function): A function to be run when the menu option is clicked (only used on `2` and `5`)
 *  - `checked` (boolean): Whether the menu item is checked by default or not (only used on `5`)
 *     - Note: This value changes. It is used by FeatherText to keep track of the current item's state
 *  - `disabled` (boolean): Whether the current option is disabled and cannot be used in the current scenario (only used on `2` and `5`)
 *     - Note: This is automatically enabled on type `3` items if all the type `2` items in `openTo` have this enabled. This cannot be set manually on type `3` items.
 *     - Note: If this is enabled on a type `5` item, it will remain locked in the current state whether it is checked or not. It can be changed programatically, but not by the user
 */
const menu_options = {
    "File":[],
    "Edit":[],
    "Go To":[],
    "Cursor":[],
    "View":[],
    "Options":[],
    "Help":[]
}

let previous_open_to = {}
export function reset_previous_open_to() {previous_open_to={}}

function redraw_menu_from_array(arr) {
    // Clear existing items
    top_menu_options_ul.innerHTML = ''
    
    // Add new items
    for (const [idx, element] of arr.entries()) {
        if (element['type'] === 0) {
            const new_list_item = document.createElement("li")
            new_list_item.classList.add("top_menu_options_li", "not_a_context_menu_option")
            if (idx===0) {
                new_list_item.classList.add("context_menu_header")
            } else if (idx===items.length-1) {
                new_list_item.classList.add("context_menu_ending_header")
            } else {
                new_list_item.classList.add("context_menu_midway_header")
            }
            top_menu_options_ul.appendChild(new_list_item)
            
            const new_list_header_text = document.createElement("p")
            new_list_header_text.classList.add("top_menu_options_choice_inner_p_main_text")
            new_list_header_text.innerHTML = element['content']
            new_list_item.appendChild(new_list_header_text)
        } else if (element['type'] === 1) {
            const new_list_item = document.createElement("li")
            new_list_item.classList.add("top_menu_options_li", "not_a_context_menu_option", "context_menu_separator")
            top_menu_options_ul.appendChild(new_list_item)
        } else if (element['type'] === 2) {
            const new_list_item = document.createElement("li")
            new_list_item.classList.add("top_menu_options_li", "flex_container")
            if (!element['disabled']) {new_list_item.addEventListener("click", element['handler'])}
            top_menu_options_ul.appendChild(new_list_item)
            
            const left_side_div = document.createElement("div")
            left_side_div.classList.add("flex_container")
            new_list_item.appendChild(left_side_div)
            
            const left_side_text = document.createElement("p")
            left_side_text.classList.add("top_menu_options_choice_inner_p_main_text")
            left_side_text.innerHTML = element['content']
            left_side_div.appendChild(left_side_text)
            
            const right_side_div = document.createElement("div")
            right_side_div.classList.add("flex_container")
            new_list_item.appendChild(right_side_div)
            
            const right_side_text = document.createElement("p")
            right_side_text.innerHTML = element['subtext']
            right_side_text.classList.add("top_menu_options_choice_inner_subtext")
            right_side_div.appendChild(right_side_text)
            
            if (element['disabled']) {
                new_list_item.classList.add("context_menu_option_disabled")
            }
        } else if (element['type'] === 3) {
            const new_list_item = document.createElement("li")
            new_list_item.classList.add("top_menu_options_li", "flex_container")
            top_menu_options_ul.appendChild(new_list_item)
            
            const left_side_div = document.createElement("div")
            left_side_div.classList.add("flex_container")
            new_list_item.appendChild(left_side_div)
            
            const left_side_text = document.createElement("p")
            left_side_text.classList.add("top_menu_options_choice_inner_p_main_text")
            left_side_text.innerHTML = element['content']
            left_side_div.appendChild(left_side_text)
            
            const right_side_div = document.createElement("div")
            right_side_div.classList.add("flex_container")
            new_list_item.appendChild(right_side_div)
            
            const right_side_text = document.createElement("p")
            right_side_text.classList.add("top_menu_options_choice_inner_subtext", "disregard_subtext_formatting")
            right_side_text.innerHTML = '›'
            right_side_div.appendChild(right_side_text)
            
            new_list_item.addEventListener("click",e=>{
                e.stopImmediatePropagation()
                previous_open_to = arr
                redraw_menu_from_array(element['openTo'])
            })
        } else if (element['type'] === 4) {
            if (idx !== 0) {log("Type 4 elements must be the first item of the array!");continue;}
            const new_list_item = document.createElement("li")
            new_list_item.addEventListener("click",e=>{
                e.stopImmediatePropagation()
                redraw_menu_from_array(previous_open_to)
                previous_open_to = arr
            })
            new_list_item.classList.add("top_menu_options_li", "flex_container")
            top_menu_options_ul.appendChild(new_list_item)
            
            const left_side_div = document.createElement("div")
            left_side_div.classList.add("flex_container")
            new_list_item.appendChild(left_side_div)
            
            const left_side_text = document.createElement("p")
            left_side_text.classList.add("top_menu_options_choice_inner_p_main_text")
            left_side_text.innerHTML = '‹ Back'
            left_side_div.appendChild(left_side_text)
            
            const right_side_div = document.createElement("div")
            right_side_div.classList.add("flex_container")
            new_list_item.appendChild(right_side_div)
            
            const right_side_text = document.createElement("p")
            right_side_text.innerHTML = element['content'].replace(/^(.*\/)/, '<span style="color: var(--subtle-color);">$1</span>');
            right_side_text.classList.add("top_menu_options_choice_inner_subtext", "disregard_subtext_formatting")
            right_side_div.appendChild(right_side_text)
        } else if (element['type'] === 5) {
            const new_list_item = document.createElement("li")
            new_list_item.classList.add("top_menu_options_li", "flex_container")
            top_menu_options_ul.appendChild(new_list_item)
            
            const left_side_div = document.createElement("div")
            left_side_div.classList.add("flex_container")
            new_list_item.appendChild(left_side_div)
            
            const left_side_text = document.createElement("p")
            left_side_text.classList.add("top_menu_options_choice_inner_p_main_text")
            left_side_text.innerHTML = element['content']
            left_side_div.appendChild(left_side_text)
            
            const left_side_selection_indicator = document.createElement("div")
            left_side_selection_indicator.classList.add("context_menu_option_selection_indicator")
            if (element['checked']) {left_side_selection_indicator.classList.add("context_menu_option_selection_indicator_selected")}
            left_side_text.insertAdjacentElement("beforebegin",left_side_selection_indicator)
            
            const right_side_div = document.createElement("div")
            right_side_div.classList.add("flex_container")
            new_list_item.appendChild(right_side_div)
            
            const right_side_text = document.createElement("p")
            right_side_text.innerHTML = element['subtext']
            right_side_text.classList.add("top_menu_options_choice_inner_subtext")
            right_side_div.appendChild(right_side_text)
            
            if (element['disabled']) {
                new_list_item.classList.add("context_menu_option_disabled");
            }
            new_list_item.addEventListener("click", ()=>{
                if (!element['disabled']) {
                    element['checked'] = !element['checked']
                    left_side_selection_indicator.classList.toggle("context_menu_option_selection_indicator_selected")
                    element['handler'](element['checked'])
                }
            })
        }
    }
}

export function redraw_menu_options(menu_item) {
    if (menu_options[menu_item] === undefined) {log("Not a valid menu option!");return;}
    
    redraw_menu_from_array(menu_options[menu_item])
}

redraw_menu_options("File")

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts