Class: Hamburger

new Hamburger(parent, props)

Represents a Hamburger menu component.

Parameters:

Name	Type	Description
`parent`	HTMLElement	The parent element to which the hamburger menu is attached..
`props`	TComponents.HamburgerProps	The properties of the hamburger menu.

Source: as-hamburger.js, line 53

Example

const hamburgerInstance = new TComponents.Hamburger(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'View 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the hamburger menu
await hamburgerInstance.render();

Extends

TComponents.Menu_A

Members

activeView :string

Gets the currently active view.

Type:

string

Deprecated: Use `activeViewName` instead TComponents.Hamburger#activeViewName.
Source: as-hamburger.js, line 188

Example

const hamburgerInstance = new TComponents.Hamburger(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'View 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the hamburger menu
await hamburgerInstance.render();

// Get the current active view
const currentActiveView = hamburgerInstance.activeView;
console.log(currentActiveView); // 'View 1'

activeViewIndex :number

Sets the active view index and updates the active view in the Hamburger component.

Type:

number

Source: as-hamburger.js, line 279

Example

const hamburgerInstance = new TComponents.Hamburger(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'View 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the hamburger menu
await hamburgerInstance.render();

// Get the current active view index
const currentActiveViewIndex = hamburgerInstance.activeViewIndex;
console.log(currentActiveViewIndex); // 0

activeViewIndex :number

Sets the active view index and updates the active view in the Hamburger component. This will update the hamburger menu but will NOT trigger the onchange event. Recommended for internal or programmatic updates, where change notification is not desired.

Type:

number

Source: as-hamburger.js, line 329

Example

const hamburgerInstance = new TComponents.Hamburger(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'View 0',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
    {
      name: 'View 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 1,
});

// Render the hamburger menu
await hamburgerInstance.render();

hamburgerInstance.activeViewIndexX = 0;

activeViewName :string

Sets the active view by its display name. The comparison is performed against the resolved text from Component_A.tParse.

Type:

string

Source: as-hamburger.js, line 235

Example

const hamburgerInstance = new TComponents.Hamburger(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'View 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the hamburger menu
await hamburgerInstance.render();

// Get the current active view name
const currentActiveView = hamburgerInstance.activeViewName;
console.log(currentActiveView); // 'View 1'

alwaysVisible :boolean

The visibility state of the hamburger menu.

Type:

boolean

Source: as-hamburger.js, line 146

Example

const hamburgerInstance = new TComponents.Hamburger(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'View 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the hamburger menu
await hamburgerInstance.render();

// Get the current visibility state
const isAlwaysVisible = hamburgerInstance.alwaysVisible;
console.log(isAlwaysVisible); // true

// Set the visibility state to false
hamburgerInstance.alwaysVisible = false;

views :Array.<any>

An array of Hamburger's views, each containing properties like id, name, content, active, and child.

Type:

Array.<any>

Overrides: TComponents.Menu_A#views
Source: as-hamburger.js, line 100

Example

const hamburgerInstance = new TComponents.Hamburger(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'View 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
    {
      name: 'View 2',
      icon: 'abb-icon abb-icon-folder-open_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the hamburger menu
await hamburgerInstance.render();

// Get the views
const views = hamburgerInstance.views;
console.log(views);

Methods

addMenu(menu, idopt) → {void}

Adds a new menu item to the hamburger menu.

Parameters:

Name Type Attributes Default Description

menu

object

The menu definition

Properties

Name	Type	Description
`name`	string	Display name of the menu item
`content`	string \| HTMLElement	Content of the menu view

id

string

null

ID of the menu view

Source: as-hamburger.js, line 555

Returns:

Type:: void

Examples

const hamburgerInstance = new TComponents.Hamburger(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'View 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the hamburger menu
await hamburgerInstance.render();

const v1 = {
  name: 'Menu 1',
  content: 'view-001',
  icon: 'abb-icon abb-icon-abb_tree-view_16',
  children: []
}

hamburgerInstance.addMenu(v1);

const div1 = document.createElement('div');
div1.textContent = 'Hello world';
div1.style.fontSize = '96px';
div1.style.fontWeight = 'bold';
div1.style.textAlign = 'center';

const v2 = {name: 'Menu 2', content: div1};

hamburgerInstance.addMenu(v2);

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

Returns default properties for the hamburger menu.

Overrides: TComponents.Menu_A#defaultProps
Source: as-hamburger.js, line 378

Returns:

The default properties.

Type:: TComponents.HamburgerProps

hideMenu(options) → {void}

Hides a menu item and its associated view.

Parameters:

Name Type Description

options

object

Properties

Name	Type	Attributes	Description
`id`	string	<optional>	Menu id
`content`	string \| HTMLElement	<optional>	Menu content
`name`	string	<optional>	Menu display name

Source: as-hamburger.js, line 653

Returns:

Type:: void

Example

hamburgerInstance.hideMenu({ name: 'Menu 2' });

hideMenuByIndex(index) → {void}

Hides a hamburger menu by its index.

Parameters:

Name	Type	Description
`index`	number	Zero-based menu index.

Source: as-hamburger.js, line 670

Returns:

Type:: void

Example

// Hide the menu 1.
hamburgerInstance.hideMenuByIndex(0);

mapComponents() → {object}

Maps components to their identifiers.

Overrides: TComponents.Menu_A#mapComponents
Source: as-hamburger.js, line 468

Returns:

Type:: object

markup() → {string}

Generates the HTML markup for the hamburger menu.

Overrides: TComponents.Menu_A#markup
Source: as-hamburger.js, line 458

Returns:

The HTML markup.

Type:: string

onInit() → {void}

Initializes the hamburger menu.

Overrides: TComponents.Menu_A#onInit
Source: as-hamburger.js, line 436

Returns:

Type:: void

onRender() → {void}

Renders the hamburger menu.

Overrides: TComponents.Menu_A#onRender
Source: as-hamburger.js, line 487

Returns:

Type:: void

removeMenu(options) → {void}

Removes a menu item by id, content, or name. Lookup priority:

id
content
name

Parameters:

Name Type Description

options

object

Properties

Name	Type	Attributes	Description
`id`	string	<optional>	Menu id
`content`	string \| HTMLElement	<optional>	Menu content
`name`	string	<optional>	Menu display name

Source: as-hamburger.js, line 614

Returns:

Type:: void

Example

hamburgerInstance.removeMenu({ name: 'Menu 1' });

removeMenuByIndex(index) → {void}

Removes a hamburger menu by its index in the views array.

Parameters:

Name	Type	Description
`index`	number	Zero-based hamburger menu index.

Source: as-hamburger.js, line 637

Returns:

Type:: void

Example

hamburgerInstance.removeMenuByIndex(1);

(protected) setActiveView() → {void}

Removes the “active” style from all hamburger menu buttons, then activates the view at the specified index.

Source: as-hamburger.js, line 834

Throws:

If the hamburger menu is not initialized or the target view cannot be found.
Type Error

Returns:

Type:: void

showMenu(options) → {void}

Shows a menu item and its associated view.

Parameters:

Name Type Description

options

object

Properties

Name	Type	Attributes	Description
`id`	string	<optional>	Menu id
`content`	string \| HTMLElement	<optional>	Menu content
`name`	string	<optional>	Menu display name

Source: as-hamburger.js, line 687

Returns:

Type:: void

Example

hamburgerInstance.showMenu({ name: 'Menu 2' });

showMenuByIndex(index) → {void}

Shows a hamburger menu by its index.

Parameters:

Name	Type	Description
`index`	number	Zero-based menu index.

Source: as-hamburger.js, line 705

Returns:

Type:: void

Example

// Hide the menu 1;
hamburgerInstance.hideMenuByIndex(0);

// Show the menu 1;
hamburgerInstance.showMenuByIndex(0);

(static) loadCssClassFromString(css)

Add css properties to the component

Parameters:

Name	Type	Description
`css`	string	The css string to be loaded into style tag

Source: as-hamburger.js, line 876

Example

TComponents.Hamburger.loadCssClassFromString(/*css* / `
  .tc-hamburger {
    height: 100%;
    width: 100%;
  }`
);