Mod Creation/Sidebar API Reference: Difference between revisions

From Melvor Idle
(User:Coolrox95 Add mod guide navigation)
(Use SyntaxHighlight)
Line 35: Line 35:
'''Example'''
'''Example'''


  <nowiki>// Move COMBAT skills to be below NON-COMBAT
  <syntaxhighlight lang="js" line>// Move COMBAT skills to be below NON-COMBAT
sidebar.category('Combat', { after: 'Non-Combat' });
sidebar.category('Combat', { after: 'Non-Combat' });


Line 41: Line 41:
sidebar.category('Greetings', { toggleable: true }, (greetings) => {
sidebar.category('Greetings', { toggleable: true }, (greetings) => {
   greetings.item('Hello');
   greetings.item('Hello');
});</nowiki>
});</syntaxhighlight>


=== categories(): Category[] ===
=== categories(): Category[] ===
Line 51: Line 51:
'''Example'''
'''Example'''


  <nowiki>const allCategories = sidebar.categories();</nowiki>
  <syntaxhighlight lang="js" line>const allCategories = sidebar.categories();</syntaxhighlight>


=== removeCategory(id: string): void ===
=== removeCategory(id: string): void ===
Line 63: Line 63:
'''Example'''
'''Example'''


  <nowiki>sidebar.removeCategory('Combat');</nowiki>
  <syntaxhighlight lang="js" line>sidebar.removeCategory('Combat');</syntaxhighlight>


=== removeAllCategories(): void ===
=== removeAllCategories(): void ===
Line 71: Line 71:
'''Example'''
'''Example'''


  <nowiki>sidebar.removeAllCategories();</nowiki>
  <syntaxhighlight lang="js" line>sidebar.removeAllCategories();</syntaxhighlight>


== Category ==
== Category ==
Line 81: Line 81:
All properties are optional.
All properties are optional.


  <nowiki>interface CategoryConfig {
  <syntaxhighlight lang="js" line>interface CategoryConfig {
   rootClass?: string | null; // String separated classes to add to the rootEl
   rootClass?: string | null; // String separated classes to add to the rootEl
   categoryClass?: string | null; // String separated classes to add to the categoryEl
   categoryClass?: string | null; // String separated classes to add to the categoryEl
Line 91: Line 91:
   onClick?: (() => void) | null; // Code to execute if the category title is clicked
   onClick?: (() => void) | null; // Code to execute if the category title is clicked
   onRender?: (elements: CategoryElements) => void; // See notes below
   onRender?: (elements: CategoryElements) => void; // See notes below
}</nowiki>
}</syntaxhighlight>


If creating a new category and neither a <code>before</code> nor <code>after</code> is defined, the category is added to the bottom of the sidebar.
If creating a new category and neither a <code>before</code> nor <code>after</code> is defined, the category is added to the bottom of the sidebar.
Line 99: Line 99:
The <code>onRender</code> property can be set to a callback that will receive an object containing the category's HTML element properties once the sidebar is rendered. This is because the sidebar can be configured before it is rendered so a category's <code>rootEl</code> property will be <code>undefined</code> until it has been rendered. The elements parameter contains the following:
The <code>onRender</code> property can be set to a callback that will receive an object containing the category's HTML element properties once the sidebar is rendered. This is because the sidebar can be configured before it is rendered so a category's <code>rootEl</code> property will be <code>undefined</code> until it has been rendered. The elements parameter contains the following:


  <nowiki>interface CategoryElements {
  <syntaxhighlight lang="js" line>interface CategoryElements {
   rootEl: HTMLLIElement;
   rootEl: HTMLLIElement;
   categoryEl: HTMLDivElement;
   categoryEl: HTMLDivElement;
   nameEl: HTMLSpanElement;
   nameEl: HTMLSpanElement;
   toggleEl?: HTMLElement;
   toggleEl?: HTMLElement;
}</nowiki>
}</syntaxhighlight>


=== id: string ===
=== id: string ===
Line 132: Line 132:
'''Example'''
'''Example'''


  <nowiki>const clickMe = sidebar.category('Click Me', {
  <syntaxhighlight lang="js" line>const clickMe = sidebar.category('Click Me', {
   onClick() {
   onClick() {
     console.log('I have been clicked!');
     console.log('I have been clicked!');
Line 138: Line 138:
});
});


clickMe.click(); // I have been clicked!</nowiki>
clickMe.click(); // I have been clicked!</syntaxhighlight>


=== toggle(force?: boolean): void ===
=== toggle(force?: boolean): void ===
Line 150: Line 150:
'''Example'''
'''Example'''


  <nowiki>// Show Combat items if currently hidden, or hide if currently being shown
  <syntaxhighlight lang="js" line>// Show Combat items if currently hidden, or hide if currently being shown
sidebar.category('Combat').toggle();
sidebar.category('Combat').toggle();


// Hide Non-Combat items
// Hide Non-Combat items
sidebar.category('Non-Combat').toggle(false);</nowiki>
sidebar.category('Non-Combat').toggle(false);</syntaxhighlight>


=== remove(): void ===
=== remove(): void ===
Line 162: Line 162:
'''Example'''
'''Example'''


  <nowiki>// Remove Non-Combat skills
  <syntaxhighlight lang="js" line>// Remove Non-Combat skills
sidebar.category('Non-Combat').remove();</nowiki>
sidebar.category('Non-Combat').remove();</syntaxhighlight>


=== item(id: string, config?: ItemConfig, builder?: (item: Item) => void): Item ===
=== item(id: string, config?: ItemConfig, builder?: (item: Item) => void): Item ===
Line 185: Line 185:
'''Example'''
'''Example'''


  <nowiki>// Move Astrology above Firemaking
  <syntaxhighlight lang="js" line>// Move Astrology above Firemaking
sidebar.category('Non-Combat').item('Astrology', { before: 'Firemaking' });
sidebar.category('Non-Combat').item('Astrology', { before: 'Firemaking' });


Line 191: Line 191:
sidebar.category('General').item('Greetings', { nameClass: 'text-warning' }, (greetings) => {
sidebar.category('General').item('Greetings', { nameClass: 'text-warning' }, (greetings) => {
   greetings.subitem('Hello');
   greetings.subitem('Hello');
});</nowiki>
});</syntaxhighlight>


=== removeItem(id: string): void ===
=== removeItem(id: string): void ===
Line 203: Line 203:
'''Example'''
'''Example'''


  <nowiki>sidebar.category('Combat').removeItem('Attack');</nowiki>
  <syntaxhighlight lang="js" line>sidebar.category('Combat').removeItem('Attack');</syntaxhighlight>


=== removeAllItems(): void ===
=== removeAllItems(): void ===
Line 211: Line 211:
'''Example'''
'''Example'''


  <nowiki>sidebar.category('Combat').removeAllItems();</nowiki>
  <syntaxhighlight lang="js" line>sidebar.category('Combat').removeAllItems();</syntaxhighlight>


== Item ==
== Item ==
Line 219: Line 219:
All properties are optional.
All properties are optional.


  <nowiki>interface ItemConfig {
  <syntaxhighlight lang="js" line>interface ItemConfig {
   rootClass?: string | null; // String separated classes to add to the rootEl
   rootClass?: string | null; // String separated classes to add to the rootEl
   itemClass?: string | null; // String separated classes to add to the itemEl
   itemClass?: string | null; // String separated classes to add to the itemEl
Line 234: Line 234:
   onClick?: (() => void) | null; // Code to be executed if the item is clicked
   onClick?: (() => void) | null; // Code to be executed if the item is clicked
   onRender?: (elements: ItemElements) => void; // See notes below
   onRender?: (elements: ItemElements) => void; // See notes below
}</nowiki>
}</syntaxhighlight>


If creating a new item and neither a <code>before</code> nor <code>after</code> is defined, the item is added to the bottom of the category.
If creating a new item and neither a <code>before</code> nor <code>after</code> is defined, the item is added to the bottom of the category.
Line 242: Line 242:
The <code>onRender</code> property can be set to a callback that will receive an object containing the item's HTML element properties once the sidebar is rendered. This is because the sidebar can be configured before it is rendered so an item's HTML element properties will be <code>undefined</code> until it has been rendered. The <code>elements</code> parameter contains the following:
The <code>onRender</code> property can be set to a callback that will receive an object containing the item's HTML element properties once the sidebar is rendered. This is because the sidebar can be configured before it is rendered so an item's HTML element properties will be <code>undefined</code> until it has been rendered. The <code>elements</code> parameter contains the following:


  <nowiki>interface ItemElements {
  <syntaxhighlight lang="js" line>interface ItemElements {
   rootEl: HTMLLIElement;
   rootEl: HTMLLIElement;
   itemEl: HTMLAnchorElement;
   itemEl: HTMLAnchorElement;
Line 249: Line 249:
   asideEl?: HTMLElement;
   asideEl?: HTMLElement;
   subMenuEl?: HTMLUListElement;
   subMenuEl?: HTMLUListElement;
}</nowiki>
}</syntaxhighlight>


=== id: string ===
=== id: string ===
Line 289: Line 289:
'''Example'''
'''Example'''


  <nowiki>// Navigate to the Woodcutting page
  <syntaxhighlight lang="js" line>// Navigate to the Woodcutting page
sidebar.category('Non-Combat').item('Woodcutting').click();</nowiki>
sidebar.category('Non-Combat').item('Woodcutting').click();</syntaxhighlight>


=== toggle(force?: boolean): void ===
=== toggle(force?: boolean): void ===
Line 302: Line 302:
'''Example'''
'''Example'''


  <nowiki>// Collapse (hide) the Completion Log's submenu if currently expanded (shown)
  <syntaxhighlight lang="js" line>// Collapse (hide) the Completion Log's submenu if currently expanded (shown)
// Or expand (show) the submenu if currently collapsed (hidden)
// Or expand (show) the submenu if currently collapsed (hidden)
sidebar.category('General').item('Completion Log').toggle();
sidebar.category('General').item('Completion Log').toggle();


// Collapse (hide) the Completion Log's submenu
// Collapse (hide) the Completion Log's submenu
sidebar.category('General').item('Completion Log').toggle(false);</nowiki>
sidebar.category('General').item('Completion Log').toggle(false);</syntaxhighlight>


=== remove(): void ===
=== remove(): void ===
Line 315: Line 315:
'''Example'''
'''Example'''


  <nowiki>// Removes the Summoning skill from the sidebar
  <syntaxhighlight lang="js" line>// Removes the Summoning skill from the sidebar
sidebar.category('Non-Combat').item('Summoning').remove();</nowiki>
sidebar.category('Non-Combat').item('Summoning').remove();</syntaxhighlight>


=== subitem(id: string, config?: SubitemConfig, builder?: (subitem: Subitem) => void): Subitem ===
=== subitem(id: string, config?: SubitemConfig, builder?: (subitem: Subitem) => void): Subitem ===
Line 338: Line 338:
'''Example'''
'''Example'''


  <nowiki>// Move Pets above Skills in the Completion Log
  <syntaxhighlight lang="js" line>// Move Pets above Skills in the Completion Log
sidebar.category('General').item('Completion Log').subitem('Pets', { before: 'Skills' });
sidebar.category('General').item('Completion Log').subitem('Pets', { before: 'Skills' });


Line 346: Line 346:
     sidebar.category('Non-Combat').item('Alt. Magic').click();
     sidebar.category('Non-Combat').item('Alt. Magic').click();
   }
   }
});</nowiki>
});</syntaxhighlight>


=== removeSubitem(id: string): void ===
=== removeSubitem(id: string): void ===
Line 358: Line 358:
'''Example'''
'''Example'''


  <nowiki>sidebar.category('General').item('Completion Log').removeSubitem('Skills');</nowiki>
  <syntaxhighlight lang="js" line>sidebar.category('General').item('Completion Log').removeSubitem('Skills');</syntaxhighlight>


=== removeAllSubitems(): void ===
=== removeAllSubitems(): void ===
Line 366: Line 366:
'''Example'''
'''Example'''


  <nowiki>sidebar.category('General').item('Completion Log').removeAllSubitems();</nowiki>
  <syntaxhighlight lang="js" line>sidebar.category('General').item('Completion Log').removeAllSubitems();</syntaxhighlight>


== Subitem ==
== Subitem ==
Line 372: Line 372:
=== SubitemConfig ===
=== SubitemConfig ===


  <nowiki>interface SubitemConfig {
  <syntaxhighlight lang="js" line>interface SubitemConfig {
   rootClass?: string | null; // String separated classes to add to the rootEl
   rootClass?: string | null; // String separated classes to add to the rootEl
   subitemClass?: string | null; // String separated classes to add to the subitemEl
   subitemClass?: string | null; // String separated classes to add to the subitemEl
Line 384: Line 384:
   onClick?: (() => void) | null; // Code to be executed if the subitem is clicked
   onClick?: (() => void) | null; // Code to be executed if the subitem is clicked
   onRender?: (elements: SubitemElements) => void; // See notes below
   onRender?: (elements: SubitemElements) => void; // See notes below
}</nowiki>
}</syntaxhighlight>


If creating a new subitem and neither a <code>before</code> nor <code>after</code> is defined, the subitem is added to the bottom of the parent item's sub-menu.
If creating a new subitem and neither a <code>before</code> nor <code>after</code> is defined, the subitem is added to the bottom of the parent item's sub-menu.
Line 392: Line 392:
The onRender property can be set to a callback that will receive an object containing the subitem's HTML element properties once the sidebar is rendered. This is because the sidebar can be configured before it is rendered so a subitem's HTML element properties will be <code>undefined</code> until it has been rendered. The <code>elements</code> parameter contains the following:
The onRender property can be set to a callback that will receive an object containing the subitem's HTML element properties once the sidebar is rendered. This is because the sidebar can be configured before it is rendered so a subitem's HTML element properties will be <code>undefined</code> until it has been rendered. The <code>elements</code> parameter contains the following:


  <nowiki>interface SubitemElements {
  <syntaxhighlight lang="js" line>interface SubitemElements {
   rootEl: HTMLLIElement;
   rootEl: HTMLLIElement;
   subitemEl: HTMLAnchorElement;
   subitemEl: HTMLAnchorElement;
   nameEl: HTMLSpanElement;
   nameEl: HTMLSpanElement;
   asideEl?: HTMLElement;
   asideEl?: HTMLElement;
}</nowiki>
}</syntaxhighlight>


=== id: string ===
=== id: string ===
Line 429: Line 429:
'''Example'''
'''Example'''


  <nowiki>// Navigate to the Completion Log's Items page
  <syntaxhighlight lang="js" line>// Navigate to the Completion Log's Items page
sidebar.category('General').item('Completion Log').subitem('Items').click();</nowiki>
sidebar.category('General').item('Completion Log').subitem('Items').click();</syntaxhighlight>


=== remove(): void ===
=== remove(): void ===
Line 438: Line 438:
'''Example'''
'''Example'''


  <nowiki>// Remove Items from the Completion Log sidebar
  <syntaxhighlight lang="js" line>// Remove Items from the Completion Log sidebar
sidebar.category('General').item('Completion Log').subitem('Items').remove();</nowiki>
sidebar.category('General').item('Completion Log').subitem('Items').remove();</syntaxhighlight>
{{ModGuideNav}}
{{ModGuideNav}}
{{Menu}}

Revision as of 01:20, 2 January 2023

The sidebar object is a global variable and is used to customize the side (left-hand) navigation menu.

The sidebar is organized into four levels:

  • Sidebar
    • Category
      e.g. "Combat"
      • Item
        e.g. "Attack" under "Combat"
        • Subitem
          e.g. "Skills" under "Completion Log"

Sidebar

The global sidebar object.

category(id: string, config?: CategoryConfig, builder?: (category: Category) => void): Category

Alternatively category(id: string, builder?: (category: Category) => void): Category

Gets or creates then gets a category by its id.

Parameters

id: string The id of the category to get or create

config?: CategoryConfig An optional configuration object that may be used to configure either a new or existing category. See CategoryConfig within the Category section below.

builder?: (category: Category) => void An optional callback that receives the category as a parameter. Useful for adding items to the category without needing to store it as a variable.

Returns

Category The category object.

Example 

// Move COMBAT skills to be below NON-COMBAT
sidebar.category('Combat', { after: 'Non-Combat' });

// Create a new category "GREETINGS" and add an item beneath it
sidebar.category('Greetings', { toggleable: true }, (greetings) => {
  greetings.item('Hello');
});

categories(): Category[]

Returns

Category[] An ordered array of all categories.

Example 

const allCategories = sidebar.categories();

removeCategory(id: string): void

Remove a category by its id.

Parameters

id: string The id of the category to remove.

Example 

sidebar.removeCategory('Combat');

removeAllCategories(): void

Remove all categories from the sidebar. Not completely sure why you'd want to do that, though.

Example 

sidebar.removeAllCategories();

Category

See sidebar's category method for category creation.

CategoryConfig

All properties are optional. 

interface CategoryConfig {
  rootClass?: string | null; // String separated classes to add to the rootEl
  categoryClass?: string | null; // String separated classes to add to the categoryEl
  name?: string | HTMLElement | null; // Override the displayed name (defaults to category id)
  nameClass?: string | null; // String separated classes to add to the nameEl
  toggleable?: boolean | null; // Determines if the category can be hidden (example: Combat & Non-Combat)
  before?: string; // Places the category before another category by id. Cannot be present if after is defined.
  after?: string; // Places the category after another category by id. Cannot be present if before is defined.
  onClick?: (() => void) | null; // Code to execute if the category title is clicked
  onRender?: (elements: CategoryElements) => void; // See notes below
}

If creating a new category and neither a before nor after is defined, the category is added to the bottom of the sidebar.

You can pass null to any property to remove previously configured options. For example, setting name to null sets the display of the category back to its id.

The onRender property can be set to a callback that will receive an object containing the category's HTML element properties once the sidebar is rendered. This is because the sidebar can be configured before it is rendered so a category's rootEl property will be undefined until it has been rendered. The elements parameter contains the following: 

interface CategoryElements {
  rootEl: HTMLLIElement;
  categoryEl: HTMLDivElement;
  nameEl: HTMLSpanElement;
  toggleEl?: HTMLElement;
}

id: string

(Property) The category's id.

rootEl: HTMLLIElement

(Property) The category's root HTML element. This contains the categoryEl and all item's rootEl's.

categoryEl: HTMLDivElement

(Property) The category's primary HTML element. This contains the nameEl and toggleEl, if defined.

nameEl: HTMLSpanElement

(Property) The category's name HTML element. This contains the defined name property.

toggleEl: HTMLElement

(Property) The category's toggle HTML element (the visibility eyecon). This is undefined if the category's toggleable property is set to false or null.

click(): void

Trigger's the category's configured onClick property, if present.

Example 

const clickMe = sidebar.category('Click Me', {
  onClick() {
    console.log('I have been clicked!');
  }
});

clickMe.click(); // I have been clicked!

toggle(force?: boolean): void

Toggles the category's visibility.

Parameters

force?: boolean Optionally set to true to force display the category, false to hide.

Example 

// Show Combat items if currently hidden, or hide if currently being shown
sidebar.category('Combat').toggle();

// Hide Non-Combat items
sidebar.category('Non-Combat').toggle(false);

remove(): void

Removes this category from the sidebar.

Example 

// Remove Non-Combat skills
sidebar.category('Non-Combat').remove();

item(id: string, config?: ItemConfig, builder?: (item: Item) => void): Item

Alternatively item(id: string, builder?: (item: Item) => void): Item

Gets or creates then gets an item by its id.

Parameters

id: string The id of the item to get or create

config?: ItemConfig An optional configuration object that may be used to configure either a new or existing item. See ItemConfig within the Item section below.

builder?: (item: Item) => void An optional callback that receives the item as a parameter. Useful for adding subitems to the item without needing to store it as a variable.

Returns

Item The item object.

Example 

// Move Astrology above Firemaking
sidebar.category('Non-Combat').item('Astrology', { before: 'Firemaking' });

// Create a new item and add a subitem beneath it
sidebar.category('General').item('Greetings', { nameClass: 'text-warning' }, (greetings) => {
  greetings.subitem('Hello');
});

removeItem(id: string): void

Remove an item from the category by its id.

Parameters

id: string The id of the item to remove

Example 

sidebar.category('Combat').removeItem('Attack');

removeAllItems(): void

Remove all items from the category.

Example 

sidebar.category('Combat').removeAllItems();

Item

ItemConfig

All properties are optional. 

interface ItemConfig {
  rootClass?: string | null; // String separated classes to add to the rootEl
  itemClass?: string | null; // String separated classes to add to the itemEl
  icon?: string | HTMLElement | null; // Either a URL (string) or an HTMLElement to appear in the item's icon slot.
  iconClass?: string | null; // String separated classes to add to the iconEl
  name?: string | HTMLElement | null; // Override the displayed name (defaults to item id)
  nameClass?: string | null; // String separated classes to add to the nameEl
  aside?: string | HTMLElement | null; // Text or HTMLElement to be displayed in the aside slot. Example: level (1/99) text on skills.
  asideClass?: string | null; // String separated classes to add to the asideEl
  link?: string | null; // URL to open if this item is clicked
  ignoreToggle?: boolean | null; // Set to true if this item should be visible even if its parent category is hidden. Example: Combat Level under the Combat category.
  before?: string; // Places the item before another item by id. Cannot be present if after is defined.
  after?: string; // Places the item after another item by id. Cannot be present if before is defined.
  onClick?: (() => void) | null; // Code to be executed if the item is clicked
  onRender?: (elements: ItemElements) => void; // See notes below
}

If creating a new item and neither a before nor after is defined, the item is added to the bottom of the category.

You can pass null to any property to remove previously configured options. For example, setting name to null sets the display of the item back to its id.

The onRender property can be set to a callback that will receive an object containing the item's HTML element properties once the sidebar is rendered. This is because the sidebar can be configured before it is rendered so an item's HTML element properties will be undefined until it has been rendered. The elements parameter contains the following: 

interface ItemElements {
  rootEl: HTMLLIElement;
  itemEl: HTMLAnchorElement;
  iconEl: HTMLSpanElement;
  nameEl: HTMLSpanElement;
  asideEl?: HTMLElement;
  subMenuEl?: HTMLUListElement;
}

id: string

(Property) The item's id.

rootEl: HTMLLIElement

(Property) The item's root HTML element. This contains the itemEl and subMenuEl.

itemEl: HTMLAnchorElement

(Property) The item's primary HTML element. This contains the iconEl, nameEl, and asideEl.

iconEl: HTMLSpanElement

(Property) The item's icon HTML element. This contains the defined icon property.

nameEl: HTMLSpanElement

(Property) The item's name HTML element. This contains the defined name property.

asideEl: HTMLElement

(Property) The item's aside HTML element. This contains the defined aside property. This is undefined if no aside property is set.

subMenuEl: HTMLUListElement

(Property) The item's sub-menu HTML element. Contains any subitems defined. This is undefined if no subitems exist.

category: Category

(Property) The parent category of the item.

click(): void

Triggers the item's configured onClick property, if present.

Example 

// Navigate to the Woodcutting page
sidebar.category('Non-Combat').item('Woodcutting').click();

toggle(force?: boolean): void

Toggles the visibility of the item's subitem menu, if any subitems exist.

Parameters

force?: boolean Optionally set to true to force display the category, false to hide.

Example 

// Collapse (hide) the Completion Log's submenu if currently expanded (shown)
// Or expand (show) the submenu if currently collapsed (hidden)
sidebar.category('General').item('Completion Log').toggle();

// Collapse (hide) the Completion Log's submenu
sidebar.category('General').item('Completion Log').toggle(false);

remove(): void

Removes this item from the parent category.

Example 

// Removes the Summoning skill from the sidebar
sidebar.category('Non-Combat').item('Summoning').remove();

subitem(id: string, config?: SubitemConfig, builder?: (subitem: Subitem) => void): Subitem

Alternatively subitem(id: string, builder: (subitem: Subitem) => void): Subitem

Gets or creates then gets a subitem by its id.

Parameters

id: string The id of the subitem to get or create

config?: SubitemConfig An optional configuration object that may be used to configure either a new or existing subitem. See SubitemConfig within the Subitem section below.

builder?: (subitem: Subitem) => void An optional callback that receives the subitem as a parameter

Returns

Subitem The subitem object

Example 

// Move Pets above Skills in the Completion Log
sidebar.category('General').item('Completion Log').subitem('Pets', { before: 'Skills' });

// Add a shortcut to Alt. Magic beneath Magic
sidebar.category('Combat').item('Magic').subitem('Alt. Magic', {
  onClick() {
    sidebar.category('Non-Combat').item('Alt. Magic').click();
  }
});

removeSubitem(id: string): void

Remove a subitem from the item by its id.

Parameters

id: string The id of the subitem to remove

Example 

sidebar.category('General').item('Completion Log').removeSubitem('Skills');

removeAllSubitems(): void

Removes all subitems from the item.

Example 

sidebar.category('General').item('Completion Log').removeAllSubitems();

Subitem

SubitemConfig

interface SubitemConfig {
  rootClass?: string | null; // String separated classes to add to the rootEl
  subitemClass?: string | null; // String separated classes to add to the subitemEl
  name?: string | HTMLElement | null; // Override the displayed name (defaults to subitem id)
  nameClass?: string | null; // String separated classes to add to the nameEl
  aside?: string | HTMLElement | null; // Text or HTMLElement to be displayed in the aside slot. Example: completion percentages in the Completion Log.
  asideClass?: string | null; // String separated classes to add to the asideEl
  link?: string | null; // URL to open if this item is clicked
  before?: string; // Places the subitem before another subitem by id. Cannot be present if after is defined.
  after?: string; // Places the item after another item by id. Cannot be present if before is defined.
  onClick?: (() => void) | null; // Code to be executed if the subitem is clicked
  onRender?: (elements: SubitemElements) => void; // See notes below
}

If creating a new subitem and neither a before nor after is defined, the subitem is added to the bottom of the parent item's sub-menu.

You can pass null to any property to remove previously configured options. For example, setting name to null sets the display of the subitem back to its id.

The onRender property can be set to a callback that will receive an object containing the subitem's HTML element properties once the sidebar is rendered. This is because the sidebar can be configured before it is rendered so a subitem's HTML element properties will be undefined until it has been rendered. The elements parameter contains the following: 

interface SubitemElements {
  rootEl: HTMLLIElement;
  subitemEl: HTMLAnchorElement;
  nameEl: HTMLSpanElement;
  asideEl?: HTMLElement;
}

id: string

(Property) The subitem's id.

rootEl: HTMLLIElement

(Property) The subitem's root HTML element. This contains the ubitemEl.

subitemEl: HTMLAnchorElement

(Property) The subitem's primary HTML element. This contains the nameEl and asideEl.

nameEl: HTMLSpanElement

(Property) The subitem's name HTML element. This contains the defined name property.

asideEl: HTMLElement

(Property) The subitem's aside HTML element. This contains the defined aside property. This is undefined if no aside property is set.

item: Item

(Property) The parent item of the subitem.

click(): void

Triggers the subitem's configured onClick property, if present.

Example 

// Navigate to the Completion Log's Items page
sidebar.category('General').item('Completion Log').subitem('Items').click();

remove(): void

Removes this subitem from the parent item.

Example 

// Remove Items from the Completion Log sidebar
sidebar.category('General').item('Completion Log').subitem('Items').remove();
Modding Guides
Getting Started Creator Toolkit Migrating from Scripts and Extensions Essentials Mod Context API Reference Sidebar API Reference Reusable Components with PetiteVue Enabling DevTools for the Steam and Epic Clients
Melvor Idle version v1.3.1 (Released: 30th October 2024)
Error creating thumbnail: File missing
Combat:
Error creating thumbnail: File missing
Attack •
Error creating thumbnail: File missing
Strength •
Error creating thumbnail: File missing
Defence •
Error creating thumbnail: File missing
Hitpoints •
Error creating thumbnail: File missing
Ranged •
Error creating thumbnail: File missing
Magic •
Error creating thumbnail: File missing
Prayer •
Error creating thumbnail: File missing
Slayer •
Error creating thumbnail: File missing
Corruption
Skills:
Error creating thumbnail: File missing
Farming •
Error creating thumbnail: File missing
Township •
Error creating thumbnail: File missing
Woodcutting •
Error creating thumbnail: File missing
Fishing •
Error creating thumbnail: File missing
Firemaking •
Error creating thumbnail: File missing
Cooking •
Error creating thumbnail: File missing
Mining •
Error creating thumbnail: File missing
Smithing •
Error creating thumbnail: File missing
Thieving •
Error creating thumbnail: File missing
Fletching •
Error creating thumbnail: File missing
Crafting •
Error creating thumbnail: File missing
Runecrafting •
Error creating thumbnail: File missing
Herblore •
Error creating thumbnail: File missing
Agility •
Error creating thumbnail: File missing
Summoning •
Error creating thumbnail: File missing
Astrology •
Error creating thumbnail: File missing
Alternative Magic •
Error creating thumbnail: File missing
Cartography •
Error creating thumbnail: File missing
Archaeology •
Error creating thumbnail: File missing
Harvesting
Other:
Error creating thumbnail: File missing
Beginners Guide • Guides •
Error creating thumbnail: File missing
Bank •
Error creating thumbnail: File missing
Combat •
Error creating thumbnail: File missing
Mastery •
Error creating thumbnail: File missing
Money Making •
Error creating thumbnail: File missing
Shop • Easter Eggs • Pets •
Error creating thumbnail: File missing
Golbin Raid •
Error creating thumbnail: File missing
Full Version • Throne of the Herald • Atlas of Discovery •
Error creating thumbnail: File missing
Into the Abyss
Reference Tables: Items, Equipment, Experience Table, Upgrading Items, Combat Areas, Slayer Areas, Dungeons, Strongholds, The Abyss, Monsters
Retrieved from "https://testwiki.melvoridle.com/index.php?title=Mod_Creation/Sidebar_API_Reference&oldid=60181"