Melvor Idle

Mod Creation/Sidebar API Reference: Difference between revisions

Page Discussion

Mod Creation/Sidebar API Reference (view source)

Revision as of 03:17, 16 October 2022

427 bytes removed ,  16 October 2022
no edit summary
No edit summary
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
  <nowiki>// Move COMBAT skills to be below NON-COMBAT
sidebar.category('Combat', { after: 'Non-Combat' });
sidebar.category('Combat', { after: 'Non-Combat' });
Line 48: Line 50:


'''Example'''
'''Example'''
  <nowiki>const allCategories = sidebar.categories();</nowiki>
  <nowiki>const allCategories = sidebar.categories();</nowiki>


Line 59: Line 62:


'''Example'''
'''Example'''
  <nowiki>sidebar.removeCategory('Combat');</nowiki>
  <nowiki>sidebar.removeCategory('Combat');</nowiki>


Line 66: Line 70:


'''Example'''
'''Example'''
  <nowiki>sidebar.removeAllCategories();</nowiki>
  <nowiki>sidebar.removeAllCategories();</nowiki>


== 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 {
  <nowiki>interface CategoryConfig {
   rootClass?: string | null; // String separated classes to add to the rootEl
   rootClass?: string | null; // String separated classes to add to the rootEl
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 {
  <nowiki>interface CategoryElements {
   rootEl: HTMLLIElement;
   rootEl: HTMLLIElement;
Line 98: Line 106:
}</nowiki>
}</nowiki>


=== <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', {
  <nowiki>const clickMe = sidebar.category('Click Me', {
   onClick() {
   onClick() {
Line 131: Line 140:
clickMe.click(); // I have been clicked!</nowiki>
clickMe.click(); // I have been clicked!</nowiki>


=== <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
  <nowiki>// Show Combat items if currently hidden, or hide if currently being shown
sidebar.category('Combat').toggle();
sidebar.category('Combat').toggle();
Line 146: Line 156:
sidebar.category('Non-Combat').toggle(false);</nowiki>
sidebar.category('Non-Combat').toggle(false);</nowiki>


=== <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
  <nowiki>// Remove Non-Combat skills
sidebar.category('Non-Combat').remove();</nowiki>
sidebar.category('Non-Combat').remove();</nowiki>


=== <code>item(id: string, config?: ItemConfig, builder?: (item: Item) => void): Item</code> ===
=== item(id: string, config?: ItemConfig, builder?: (item: Item) => void): Item ===
'''Alternatively <code>item(id: string, builder?: (item: Item) => void): Item</code>'''
 
''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
  <nowiki>// Move Astrology above Firemaking
sidebar.category('Non-Combat').item('Astrology', { before: 'Firemaking' });
sidebar.category('Non-Combat').item('Astrology', { before: 'Firemaking' });
Line 180: Line 193:
});</nowiki>
});</nowiki>


=== <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>
  <nowiki>sidebar.category('Combat').removeItem('Attack');</nowiki>


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


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


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


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


All properties are optional.
All properties are optional.
  <nowiki>interface ItemConfig {
  <nowiki>interface ItemConfig {
   rootClass?: string | null; // String separated classes to add to the rootEl
   rootClass?: string | null; // String separated classes to add to the rootEl
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 {
  <nowiki>interface ItemElements {
   rootEl: HTMLLIElement;
   rootEl: HTMLLIElement;
Line 233: Line 251:
}</nowiki>
}</nowiki>


=== <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
  <nowiki>// Navigate to the Woodcutting page
sidebar.category('Non-Combat').item('Woodcutting').click();</nowiki>
sidebar.category('Non-Combat').item('Woodcutting').click();</nowiki>


=== <code>toggle(force?: boolean): void</code> ===
=== 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)
  <nowiki>// 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)
Line 289: Line 309:
sidebar.category('General').item('Completion Log').toggle(false);</nowiki>
sidebar.category('General').item('Completion Log').toggle(false);</nowiki>


=== <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
  <nowiki>// Removes the Summoning skill from the sidebar
sidebar.category('Non-Combat').item('Summoning').remove();</nowiki>
sidebar.category('Non-Combat').item('Summoning').remove();</nowiki>


=== <code>subitem(id: string, config?: SubitemConfig, builder?: (subitem: Subitem) => void): Subitem</code> ===
=== subitem(id: string, config?: SubitemConfig, builder?: (subitem: Subitem) => void): Subitem ===
'''Alternatively <code>subitem(id: string, builder: (subitem: Subitem) => void): Subitem</code>'''
 
''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
  <nowiki>// 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 325: Line 348:
});</nowiki>
});</nowiki>


=== <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>
  <nowiki>sidebar.category('General').item('Completion Log').removeSubitem('Skills');</nowiki>


=== <code>removeAllSubitems(): void</code>
=== 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>
  <nowiki>sidebar.category('General').item('Completion Log').removeAllSubitems();</nowiki>


== Subitem ==
== Subitem ==
=== <code>SubitemConfig</code> ===
 
=== SubitemConfig ===
 
  <nowiki>interface SubitemConfig {
  <nowiki>interface SubitemConfig {
   rootClass?: string | null; // String separated classes to add to the rootEl
   rootClass?: string | null; // String separated classes to add to the rootEl
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 {
  <nowiki>interface SubitemElements {
   rootEl: HTMLLIElement;
   rootEl: HTMLLIElement;
Line 371: Line 399:
}</nowiki>
}</nowiki>


=== <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
  <nowiki>// 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();</nowiki>


=== <code>remove(): void</code> ===
=== 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
  <nowiki>// 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();</nowiki>
Buttchouda
91

edits

Retrieved from "https://testwiki.melvoridle.com/w/Special:MobileDiff/55483"