Anonymous

Mod Creation/Sidebar API Reference: Difference between revisions

From Melvor Idle

Mod Creation/Sidebar API Reference (view source)

Revision as of 01:20, 2 January 2023

801 bytes added ,  2 January 2023
Use SyntaxHighlight
(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}}
Retrieved from "https://testwiki.melvoridle.com/w/Special:MobileDiff/60181"