How to create menu in C3 (English)

This week I continued to explore Svelte. However, I was distracted by some new ideas. And this is one of the reasons why I started updating my blog again: having something that forces me to finish a project before moving on to the next. So I resisted the temptation to procrastinate (forever): I completed this template. I’m happy because I can easily reuse it in other projects.

As I said last week, my aim is to get a simple method for creating menus in C3. To do this, I created a reusable component with Svelte, inserted it into C3 and created a Construct 3 project to document its APIs

In this post I want to write how to use this template to create a custom menu. The future me will certainly be happy to find these notes.

First I need two files: menu.js and menu.css. I created and compiled these two files with Svelte. They are the code needed to create, manage and customize the menu.

After importing them into Construct I can start setting up the project. The CSS file only needs to be loaded once, at startup:

I insert the reference to menu.js in a file with purpose “Imports for Events”:

import * as svelte from "./menu.js";

A line of code is enough to show the menu:

menuSvelte.visible.true();

To hide the menu just write:

menuSvelte.visible.false();

In the example file I create several menus using different techniques. Consequently, each time I call the clearMenu() command to delete all the items in the menu itself.

menuSvelte.items.clearMenu();

I use the setTitle() command to customize the menu title

menuSvelte.title.setTitle("Main Menu");

Finally I set the template:

menuSvelte.columns.setColumns(["icon", "label", "description"]);

There are 5 “columns” available: icon, label, description, rightIcon, rightImage. Also there is a container, textual, for textual components.

To insert the various elements in the menu, you can use some commands, which partly follow those already in use for arrays.

menuSvelte.items.push({
	icon,
	label: "Fonts",
	description: "Choose Font Family for the Menu",
  rightIcon,
  rightImage,
	onClick: "g_runtime.callFunction('showFonts')"
});

The items.push(newItem) command allows you to insert a new item in the menu. Accept an object whose properties trace the columns that will be displayed in the menu.

To these is added the property: onClick. As you can easily understand, it is used to define the function to perform when you click on the element.

I have implemented these commands:

push(item: ItemType)
unshift(item: ItemType)
shift()
pop()
addItemAtIndex(index: number, item:ItemType)
updateItemById(id:string, item:ItemType)
updateItemByLabel(label:string, item:ItemType)
updateItemByIndex(index: number, item:ItemType)
removeItemById(id: string)
removeItemByLabel(label: string)
removeItemByIndex(index: number)
loadItemsFromArray(arrayItems:ItemType[])

Another useful thing is the ability to change the style of many of the menu items. To do this you can use commands similar to this:

menuSvelte.css.changeStyle("menu-width", "360px");

The available commands are:

changeStyle(style: string, value: string)
changeFontTitle(value: string)
changeFontItems(value: string)
changeFontTitleAndItems(title: string, items: string)
themeStandard(theme:string)
loadTheme(customTheme: Styles, standard:string = “Light”)

You use the first 4 to modify only a single aspect of the menu. For things a little more elaborate, however, it is better to use the last two commands.

menuSvelte.css.themeStandard("Dark");

You use menuSvelte.css.themeStandard(theme) to set one of the default color themes. I can choose from 9 different themes: Dark, Light, Bouron, Gold Miner, Oscar, Herrera Yellow, Herrera Green, Herrera Blue, and Herrera Magenta.

You use menuSvelte.css.loadTheme(customTheme, standard) to load a custom theme from a JSON file. You can use create a theme with a json similar to this:

{   
	"color-primary": "#2e257d",
    "color-background": "#aaa8bd",

    "font-title": "Roboto, sans-serif",
    "font-items": "Roboto, sans-serif",
    
    "modal-background": "#0f0c45bf",

    "menu-border-radius": "32px 0px 32px 0px",
    "menu-border-style": "solid",
    "menu-border-width": "1px",

    "item-height": "64px",
    "item-icon-size": "48px",
    "item-image-size": "64px"
}