Class: Menu

new Menu_A(parent, propsopt)

A menu component for displaying a list of views. This is an abstract class, currently used for TComponents.Hamburger and TComponents.Tab. Although examples are provided for its use, it is recommended that users inherit from this class to implement concrete implementations.

Parameters:

Name	Type	Attributes	Description
`parent`	HTMLElement		HTML element that is going to be the parent of the component
`props`	TComponents.MenuProps	<optional>	Properties accepted by the Menu_A component.

Source: as-menu.js, line 47

Example

const menu = new TComponents.Menu_A(document.body, {
  title: 'My Menu',
  views: [
    { name: 'View 1', content: 'id-1' },
    { name: 'View 2', content: 'id-2' },
  ],
});
await menu.render();

Extends

TComponents.Component_A

Members

title :string

The title property of menu-type component.

Type:

string

Deprecated: The 'title' interface is no longer supported by 'TComponent.Menu_A'. Components that inherit from it will need to override the 'title' interface themselves.
Source: as-menu.js, line 149

Example

const menu = new TComponents.Menu_A(document.body, { title: 'My Menu' });
// Update the title dynamically
menu.title = 'Updated Menu Title';

useTitle :boolean

Set the useTitle property.

Type:

boolean

Deprecated: The 'useTitle' interface is no longer supported by 'TComponent.Menu_A'. Components that inherit from it will need to override the 'useTitle' interface themselves.
Source: as-menu.js, line 126

Example

const menu = new TComponents.Menu_A(document.body, { useTitle: true });
// Update the property dynamically
menu.useTitle = false;

views :Array.<any>

The views array of view-type components. This interface is about to be deprecated; please review TComponents.Menu_A#_initViews before using it.

Type:

Array.<any>

Deprecated: This getter will be removed in future versions. Use the instance field `this.views` directly instead. Review TComponents.Menu_A#_initViews for more details.
Source: as-menu.js, line 85

Methods

(protected) addView(newView) → {void}

Add a new view to the menu.

Parameters:

Name	Type	Description
`newView`	TComponents.ViewProps	View object.

Source: as-menu.js, line 314

Returns:

Type:: void

(protected) appendChild(index, instance, name) → {void}

Appends a child component to a specific view by its index. The child component will be appended to the content of the view at the specified index. If a child with the same name already exists, it will be removed first.

Parameters:

Name	Type	Description
`index`	number	The index of the view to append the child to.
`instance`	object	The child component to append.
`name`	string	The name of the child component.

Source: as-menu.js, line 436

Throws:

Throws an error if the index is out of range or invalid.
Type Error

Returns:

Type:: void

Example

const menu = new TComponents.Menu_A(document.body, {views:[{name: 'view-1', content: 'id-xxx'}]});
const childComponent = new TComponents.Button_A(null, {});
// Append to the first view
menu.appendChild(0, childComponent, 'childName');

(protected) checkActiveViewIndex(t) → {null|number}

Determines the type of menu component currently set to active. Checks if the provided view index is valid and sets it as active if it is.

Parameters:

Name	Type	Description
`t`	number	The new active view index.

Source: as-menu.js, line 397

Returns:

Returns null if the provided index is the same as the current active index or invalid, otherwise returns the new active view index.

Type:: null | number

Example

const menu = new TComponents.Menu_A(document.body,{});
const newIndex = menu.checkActiveViewIndex(1);

(protected) defaultProps() → {TComponents.MenuProps}

Returns the default values of class properties (excluding parent properties).

Overrides: TComponents.Component_A#defaultProps
Source: as-menu.js, line 165

Returns:

Type:: TComponents.MenuProps

(protected) findView(options) → {object|undefined}

Finds a view object by id, content, or name. Lookup priority:

id
content
name

Parameters:

Name Type Description

options

object

Properties

Name	Type	Attributes	Description
`id`	string	<optional>	The view id.
`content`	string \| HTMLElement	<optional>	The view content id or content object.
`name`	string	<optional>	The view display name.

Source: as-menu.js, line 553

Returns:

The matched view, if found.

Type:: object | undefined

(protected) getDom(content, id, name) → {HTMLElement}

Get the DOM element for the given content.

Parameters:

Name	Type	Description
`content`	TComponents.Component_A \| HTMLElement \| string	The content of the view.
`id`	string	The identifier of the view.
`name`	string	The name of the view.

Source: as-menu.js, line 497

Returns:

The DOM element.

Type:: HTMLElement

(protected) getMenuBarItem(style, index) → {HTMLElement|null}

Get a menu bar item DOM element by index.

Parameters:

Name	Type	Description
`style`	string	CSS selector used to find the menu bar container.
`index`	number	Index of the menu bar item (0-based).

Source: as-menu.js, line 531

Returns:

The menu bar item element if found, otherwise null.

Type:: HTMLElement | null

(protected) hideView(view) → {void}

Hides the specified view by updating its visibility state and setting its associated DOM element display to none.

Parameters:

Name	Type	Description
`view`	object	The view object to hide.

Source: as-menu.js, line 377

Returns:

Type:: void

(protected) initViews() → {void}

Build internal view models and child component instances from props.views. This method processes each view's content, ensuring it is a valid HTMLElement or TComponents.Component_A instance. It also initializes the view's ID and name properties. If the content is a string, it attempts to find the corresponding DOM element by ID. If the content is not a valid type, it throws an error. Due to issues with the view's getter constructor, it is recommended that inherited components use this method to initialize views.

Source: as-menu.js, line 639

Returns:

Type:: void

Example

// Example usage in a derived class
class MyMenu extends Menu_A {
  constructor(parent, props) {
    super(parent, props);
    this._views = [];
  }

  // Override the view getter and setter.
  get views() {
   return this._views;
  }

  onInit(){
   this._initViews();
    ...
  }
}

(protected) isValidIndex(index) → {boolean}

Checks whether the given index is a valid view index.

Parameters:

Name	Type	Description
`index`	number	The index to validate.

Source: as-menu.js, line 424

Returns:

True if the index is valid, otherwise false.

Type:: boolean

mapComponents() → {object}

Maps components to their identifiers.

Overrides: TComponents.Component_A#mapComponents
Source: as-menu.js, line 248

Returns:

Type:: object

markup() → {string}

Generate the markup for the component.

Overrides: TComponents.Component_A#markup
Source: as-menu.js, line 288

Returns:

HTML markup

Type:: string

onInit() → {void}

Initializes the component.

Overrides: TComponents.Component_A#onInit
Source: as-menu.js, line 220

Throws:

If an error occurs during initialization.
Type ErrorCode

Returns:

Type:: void

onRender() → {void}

Render the component.

Overrides: TComponents.Component_A#onRender
Source: as-menu.js, line 265

Throws:

If an error occurs during rendering.
Type Error

Returns:

Type:: void

(protected) processContent(content) → {HTMLElement}

Process the content of the view.

Parameters:

Name	Type	Description
`content`	any	The content of the view.

Source: as-menu.js, line 690

Returns:

The content of the view, which is of the type HTMLElement.

Type:: HTMLElement

(protected) processView(view) → {object}

Processes a view definition into an internal view model. This method normalizes the view content, generates its ID, resolves dynamic properties, and initializes runtime flags.

Parameters:

Name	Type	Description
`view`	TComponents.ViewProps	The raw view definition.

Source: as-menu.js, line 589

Returns:

The processed internal view object.

Type:: object

(protected) pushView(tmpView) → {void}

Pushes a processed view into internal view and child lists. Also creates a corresponding View_A instance.

Parameters:

Name	Type	Description
`tmpView`	object	The processed internal view object.

Source: as-menu.js, line 622

Returns:

Type:: void

(protected) removeChild(index, t) → {void}

Removes a child component from a specific view by its index. The child component is identified by the provided name or component ID.

Parameters:

Name	Type	Description
`index`	number	The index of the view from where the child the removed.
`t`	string \| object	The name or component instance of the child to be removed.

Source: as-menu.js, line 471

Throws:

Throws an error if the index is out of range or invalid.
Type Error

Returns:

Type:: void

Example

const menu = new TComponents.Menu_A(document.body, {});
// Remove a child component from the first view by name
menu.removeChild(0, 'childName');

(protected) removeView(view) → {void}

Removes a view from the menu by its view object. This will remove the view from both internal view list and props.views.

Parameters:

Name	Type	Description
`view`	object	The view object to remove.

Source: as-menu.js, line 339

Returns:

Type:: void

(protected) showView(view) → {void}

Shows the specified view by updating its visibility state and restoring its associated DOM element display.

Parameters:

Name	Type	Description
`view`	object	The view object to show.

Source: as-menu.js, line 358

Returns:

Type:: void