5,796
edits
(User:Coolrox95 Add mod guide navigation) |
(Fix incorrect IDs for sidebar skills) |
||
(4 intermediate revisions by 2 users not shown) | |||
Line 35: | Line 35: | ||
'''Example''' | '''Example''' | ||
< | <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'); | ||
});</ | });</syntaxhighlight> | ||
=== categories(): Category[] === | === categories(): Category[] === | ||
Line 51: | Line 51: | ||
'''Example''' | '''Example''' | ||
< | <syntaxhighlight lang="js" line>const allCategories = sidebar.categories();</syntaxhighlight> | ||
=== removeCategory(id: string): void === | === removeCategory(id: string): void === | ||
Line 63: | Line 63: | ||
'''Example''' | '''Example''' | ||
< | <syntaxhighlight lang="js" line>sidebar.removeCategory('Combat');</syntaxhighlight> | ||
=== removeAllCategories(): void === | === removeAllCategories(): void === | ||
Line 71: | Line 71: | ||
'''Example''' | '''Example''' | ||
< | <syntaxhighlight lang="js" line>sidebar.removeAllCategories();</syntaxhighlight> | ||
== Category == | == Category == | ||
Line 81: | Line 81: | ||
All properties are optional. | All properties are optional. | ||
< | <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 | ||
}</ | }</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: | ||
< | <syntaxhighlight lang="js" line>interface CategoryElements { | ||
rootEl: HTMLLIElement; | rootEl: HTMLLIElement; | ||
categoryEl: HTMLDivElement; | categoryEl: HTMLDivElement; | ||
nameEl: HTMLSpanElement; | nameEl: HTMLSpanElement; | ||
toggleEl?: HTMLElement; | toggleEl?: HTMLElement; | ||
}</ | }</syntaxhighlight> | ||
=== id: string === | === id: string === | ||
Line 132: | Line 132: | ||
'''Example''' | '''Example''' | ||
< | <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!</ | clickMe.click(); // I have been clicked!</syntaxhighlight> | ||
=== toggle(force?: boolean): void === | === toggle(force?: boolean): void === | ||
Line 150: | Line 150: | ||
'''Example''' | '''Example''' | ||
< | <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);</ | sidebar.category('Non-Combat').toggle(false);</syntaxhighlight> | ||
=== remove(): void === | === remove(): void === | ||
Line 162: | Line 162: | ||
'''Example''' | '''Example''' | ||
< | <syntaxhighlight lang="js" line>// Remove Non-Combat skills | ||
sidebar.category('Non-Combat').remove();</ | 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''' | ||
< | <syntaxhighlight lang="js" line>// Move Astrology above Firemaking | ||
sidebar.category('Non-Combat').item('Astrology', { before: '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'); | ||
});</ | });</syntaxhighlight> | ||
=== removeItem(id: string): void === | === removeItem(id: string): void === | ||
Line 203: | Line 203: | ||
'''Example''' | '''Example''' | ||
< | <syntaxhighlight lang="js" line>sidebar.category('Combat').removeItem('melvorD:Attack');</syntaxhighlight> | ||
=== removeAllItems(): void === | === removeAllItems(): void === | ||
Line 211: | Line 211: | ||
'''Example''' | '''Example''' | ||
< | <syntaxhighlight lang="js" line>sidebar.category('Combat').removeAllItems();</syntaxhighlight> | ||
== Item == | == Item == | ||
Line 219: | Line 219: | ||
All properties are optional. | All properties are optional. | ||
< | <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 | ||
}</ | }</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: | ||
< | <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; | ||
}</ | }</syntaxhighlight> | ||
=== id: string === | === id: string === | ||
Line 289: | Line 289: | ||
'''Example''' | '''Example''' | ||
< | <syntaxhighlight lang="js" line>// Navigate to the Woodcutting page | ||
sidebar.category('Non-Combat').item('Woodcutting').click();</ | sidebar.category('Non-Combat').item('melvorD:Woodcutting').click();</syntaxhighlight> | ||
=== toggle(force?: boolean): void === | === toggle(force?: boolean): void === | ||
Line 302: | Line 302: | ||
'''Example''' | '''Example''' | ||
< | <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);</ | sidebar.category('General').item('Completion Log').toggle(false);</syntaxhighlight> | ||
=== remove(): void === | === remove(): void === | ||
Line 315: | Line 315: | ||
'''Example''' | '''Example''' | ||
< | <syntaxhighlight lang="js" line>// Removes the Summoning skill from the sidebar | ||
sidebar.category('Non-Combat').item('Summoning').remove();</ | sidebar.category('Non-Combat').item('melvorD: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''' | ||
< | <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(' | sidebar.category('Non-Combat').item('melvorD:Magic').click(); | ||
} | } | ||
});</ | });</syntaxhighlight> | ||
=== removeSubitem(id: string): void === | === removeSubitem(id: string): void === | ||
Line 358: | Line 358: | ||
'''Example''' | '''Example''' | ||
< | <syntaxhighlight lang="js" line>sidebar.category('General').item('Completion Log').removeSubitem('Skills');</syntaxhighlight> | ||
=== removeAllSubitems(): void === | === removeAllSubitems(): void === | ||
Line 366: | Line 366: | ||
'''Example''' | '''Example''' | ||
< | <syntaxhighlight lang="js" line>sidebar.category('General').item('Completion Log').removeAllSubitems();</syntaxhighlight> | ||
== Subitem == | == Subitem == | ||
Line 372: | Line 372: | ||
=== 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 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 | ||
}</ | }</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: | ||
< | <syntaxhighlight lang="js" line>interface SubitemElements { | ||
rootEl: HTMLLIElement; | rootEl: HTMLLIElement; | ||
subitemEl: HTMLAnchorElement; | subitemEl: HTMLAnchorElement; | ||
nameEl: HTMLSpanElement; | nameEl: HTMLSpanElement; | ||
asideEl?: HTMLElement; | asideEl?: HTMLElement; | ||
}</ | }</syntaxhighlight> | ||
=== id: string === | === id: string === | ||
Line 429: | Line 429: | ||
'''Example''' | '''Example''' | ||
< | <syntaxhighlight lang="js" line>// Navigate to the Completion Log's Items page | ||
sidebar.category('General').item('Completion Log').subitem('Items').click();</ | sidebar.category('General').item('Completion Log').subitem('Items').click();</syntaxhighlight> | ||
=== remove(): void === | === remove(): void === | ||
Line 438: | Line 438: | ||
'''Example''' | '''Example''' | ||
< | <syntaxhighlight lang="js" line>// Remove Items from the Completion Log sidebar | ||
sidebar.category('General').item('Completion Log').subitem('Items').remove();</ | sidebar.category('General').item('Completion Log').subitem('Items').remove();</syntaxhighlight> | ||
{{ModGuideNav}} | {{ModGuideNav}} | ||
{{Menu}} |