Melvor Idle

Mod Creation/Sidebar API Reference: Difference between revisions

Page Discussion

Mod Creation/Sidebar API Reference (view source)

Revision as of 01:07, 15 June 2023

441 bytes added ,  15 June 2023
Fix incorrect IDs for sidebar skills
(Fix incorrect IDs for sidebar skills)
 
(6 intermediate revisions by 3 users not shown)
Line 12: Line 12:


== Sidebar ==
== Sidebar ==
The global <code>sidebar</code> object.
The global <code>sidebar</code> object.


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


'''Alternatively <code>category(id: string, builder?: (category: Category) => void): Category</code>'''
''Alternatively'' <code>category(id: string, builder?: (category: Category) => void): Category</code>


Gets or creates then gets a category by its <code>id</code>.
Gets or creates then gets a category by its <code>id</code>.
Line 33: Line 34:


'''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 39: 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 48: Line 50:


'''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 59: Line 62:


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


=== removeAllCategories(): void ===
=== removeAllCategories(): void ===
Line 66: Line 70:


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


== Category ==
== Category ==
See sidebar's <code>category</code> method for category creation.
See sidebar's <code>category</code> method for category creation.


=== <code>CategoryConfig</code> ===
=== CategoryConfig ===


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 84: 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 91: Line 98:


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>


=== <code>id: string</code> ===
=== id: string ===


(Property) The category's id.
(Property) The category's id.


=== <code>rootEl: HTMLLIElement</code> ===
=== rootEl: HTMLLIElement ===


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


=== <code>categoryEl: HTMLDivElement</code> ===
=== categoryEl: HTMLDivElement ===


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


=== <code>nameEl: HTMLSpanElement</code> ===
=== nameEl: HTMLSpanElement ===


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


=== <code>toggleEl: HTMLElement</code> ===
=== toggleEl: HTMLElement ===


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


=== <code>click(): void</code> ===
=== click(): void ===


Trigger's the category's configured <code>onClick</code> property, if present.
Trigger's the category's configured <code>onClick</code> property, if present.


'''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 129: Line 138:
});
});


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


=== <code>toggle(force?: boolean): void</code> ===
=== toggle(force?: boolean): void ===


Toggles the category's visibility.
Toggles the category's visibility.
Line 140: Line 149:


'''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>


=== <code>remove(): void</code> ===
=== remove(): void ===


Removes this category from the sidebar.
Removes this category from the sidebar.


'''Example'''
'''Example'''
<nowiki>// Remove Non-Combat skills
sidebar.category('Non-Combat').remove();</nowiki>


=== <code>item(id: string, config?: ItemConfig, builder?: (item: Item) => void): Item</code> ===
<syntaxhighlight lang="js" line>// Remove Non-Combat skills
'''Alternatively <code>item(id: string, builder?: (item: Item) => void): Item</code>'''
sidebar.category('Non-Combat').remove();</syntaxhighlight>
 
=== item(id: string, config?: ItemConfig, builder?: (item: Item) => void): Item ===
 
''Alternatively'' <code>item(id: string, builder?: (item: Item) => void): Item</code>


Gets or creates then gets an item by its <code>id</code>.
Gets or creates then gets an item by its <code>id</code>.
Line 172: Line 184:


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


// Create a new item and add a subitem beneath it
// Create a new item and add a subitem beneath it
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>


=== <code>removeItem(id: string): void</code> ===
=== removeItem(id: string): void ===


Remove an item from the category by its <code>id</code>.
Remove an item from the category by its <code>id</code>.
Line 189: Line 202:


'''Example'''
'''Example'''
<nowiki>sidebar.category('Combat').removeItem('Attack');</nowiki>


=== <code>removeAllItems(): void</code> ===
<syntaxhighlight lang="js" line>sidebar.category('Combat').removeItem('melvorD:Attack');</syntaxhighlight>
 
=== removeAllItems(): void ===


Remove all items from the category.
Remove all items from the category.


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


== Item ==
== Item ==
=== ItemConfig ===
=== ItemConfig ===


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 217: 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 224: Line 241:


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 231: Line 249:
   asideEl?: HTMLElement;
   asideEl?: HTMLElement;
   subMenuEl?: HTMLUListElement;
   subMenuEl?: HTMLUListElement;
}</nowiki>
}</syntaxhighlight>


=== <code>id: string</code> ===
=== id: string ===


(Property) The item's id.
(Property) The item's id.


=== <code>rootEl: HTMLLIElement</code> ===
=== rootEl: HTMLLIElement ===


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


=== <code>itemEl: HTMLAnchorElement</code> ===
=== itemEl: HTMLAnchorElement ===


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


=== <code>iconEl: HTMLSpanElement</code> ===
=== iconEl: HTMLSpanElement ===


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


=== <code>nameEl: HTMLSpanElement</code> ===
=== nameEl: HTMLSpanElement ===


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


=== <code>asideEl: HTMLElement</code> ===
=== asideEl: HTMLElement ===


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


=== <code>subMenuEl: HTMLUListElement</code> ===
=== subMenuEl: HTMLUListElement ===


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


=== <code>category: Category</code> ===
=== category: Category ===


(Property) The parent category of the item.
(Property) The parent category of the item.


=== <code>click(): void</code> ===
=== click(): void ===


Triggers the item's configured <code>onClick</code> property, if present.
Triggers the item's configured <code>onClick</code> property, if present.


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


=== <code>toggle(force?: boolean): void</code> ===
<syntaxhighlight lang="js" line>// Navigate to the Woodcutting page
sidebar.category('Non-Combat').item('melvorD:Woodcutting').click();</syntaxhighlight>
 
=== toggle(force?: boolean): void ===


Toggles the visibility of the item's subitem menu, if any subitems exist.
Toggles the visibility of the item's subitem menu, if any subitems exist.
Line 282: Line 301:


'''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>


=== <code>remove(): void</code> ===
=== remove(): void ===


Removes this item from the parent category.
Removes this item from the parent category.


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


=== <code>subitem(id: string, config?: SubitemConfig, builder?: (subitem: Subitem) => void): Subitem</code> ===
<syntaxhighlight lang="js" line>// Removes the Summoning skill from the sidebar
'''Alternatively <code>subitem(id: string, builder: (subitem: Subitem) => void): Subitem</code>'''
sidebar.category('Non-Combat').item('melvorD:Summoning').remove();</syntaxhighlight>
 
=== subitem(id: string, config?: SubitemConfig, builder?: (subitem: Subitem) => void): Subitem ===
 
''Alternatively'' <code>subitem(id: string, builder: (subitem: Subitem) => void): Subitem</code>


Gets or creates then gets a subitem by its id.
Gets or creates then gets a subitem by its id.
Line 315: Line 337:


'''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' });


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


=== <code>removeSubitem(id: string): void</code> ===
=== removeSubitem(id: string): void ===


Remove a subitem from the item by its <code>id</code>.
Remove a subitem from the item by its <code>id</code>.
Line 334: Line 357:


'''Example'''
'''Example'''
<nowiki>sidebar.category('General').item('Completion Log').removeSubitem('Skills');</nowiki>


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


Removes all subitems from the item.
Removes all subitems from the item.


'''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 ==
=== <code>SubitemConfig</code> ===
 
  <nowiki>interface SubitemConfig {
=== 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 357: 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 364: Line 391:


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>


=== <code>id: string</code> ===
=== id: string ===


(Property) The subitem's id.
(Property) The subitem's id.


=== <code>rootEl: HTMLLIElement</code> ===
=== rootEl: HTMLLIElement ===


(Property) The subitem's root HTML element. This contains the <code>ubitemEl</code>.
(Property) The subitem's root HTML element. This contains the <code>ubitemEl</code>.


=== <code>subitemEl: HTMLAnchorElement</code> ===
=== subitemEl: HTMLAnchorElement ===


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


=== <code>nameEl: HTMLSpanElement</code> ===
=== nameEl: HTMLSpanElement ===


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


=== <code>asideEl: HTMLElement</code> ===
=== asideEl: HTMLElement ===


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


=== <code>item: Item</code> ===
=== item: Item ===


(Property) The parent item of the subitem.
(Property) The parent item of the subitem.


=== <code>click(): void</code> ===
=== click(): void ===


Triggers the subitem's configured <code>onClick property</code>, if present.
Triggers the subitem's configured <code>onClick</code> property, if present.


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


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


Removes this subitem from the parent item.
Removes this subitem from the parent item.


'''Example'''
'''Example'''
  <nowiki>// Remove Items from the Completion Log sidebar
 
sidebar.category('General').item('Completion Log').subitem('Items').remove();</nowiki>
  <syntaxhighlight lang="js" line>// Remove Items from the Completion Log sidebar
sidebar.category('General').item('Completion Log').subitem('Items').remove();</syntaxhighlight>
{{ModGuideNav}}
{{Menu}}
Retrieved from "https://wiki.melvoridle.com/w/Special:MobileDiff/55482...61527"