5,798
edits
Buttchouda (talk | contribs) (Created page with "The <code>sidebar</code> 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 <code>sidebar</code> object. === <code>category(id: string, config?: CategoryConfig, builder?: (category: Category) => void)...") |
(Fix incorrect IDs for sidebar skills) |
||
(11 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 === | ||
''' | |||
''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 32: | Line 34: | ||
'''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 38: | Line 41: | ||
sidebar.category('Greetings', { toggleable: true }, (greetings) => { | sidebar.category('Greetings', { toggleable: true }, (greetings) => { | ||
greetings.item('Hello'); | greetings.item('Hello'); | ||
});</ | });</syntaxhighlight> | ||
=== | === categories(): Category[] === | ||
'''Returns''' | '''Returns''' | ||
Line 47: | Line 50: | ||
'''Example''' | '''Example''' | ||
== | <syntaxhighlight lang="js" line>const allCategories = sidebar.categories();</syntaxhighlight> | ||
=== removeCategory(id: string): void === | |||
Remove a category by its <code>id</code>. | Remove a category by its <code>id</code>. | ||
Line 58: | Line 62: | ||
'''Example''' | '''Example''' | ||
=== | <syntaxhighlight lang="js" line>sidebar.removeCategory('Combat');</syntaxhighlight> | ||
=== removeAllCategories(): void === | |||
Remove all categories from the sidebar. Not completely sure why you'd want to do that, though. | Remove all categories from the sidebar. Not completely sure why you'd want to do that, though. | ||
'''Example''' | '''Example''' | ||
< | |||
<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. | ||
=== | === CategoryConfig === | ||
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 83: | 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 90: | 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: | ||
< | |||
<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 === | ||
(Property) The category's id. | (Property) The category's id. | ||
=== | === 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>. | ||
=== | === 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. | ||
=== | === 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. | ||
=== | === 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>. | ||
=== | === 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''' | ||
< | |||
<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 128: | Line 138: | ||
}); | }); | ||
clickMe.click(); // I have been clicked!</ | clickMe.click(); // I have been clicked!</syntaxhighlight> | ||
=== | === toggle(force?: boolean): void === | ||
Toggles the category's visibility. | Toggles the category's visibility. | ||
Line 139: | Line 149: | ||
'''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 === | ||
Removes this category from the sidebar. | Removes this category from the sidebar. | ||
'''Example''' | '''Example''' | ||
=== | <syntaxhighlight lang="js" line>// Remove Non-Combat skills | ||
''' | 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 171: | Line 184: | ||
'''Example''' | '''Example''' | ||
< | |||
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'); | ||
});</ | });</syntaxhighlight> | ||
=== | === 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 188: | Line 202: | ||
'''Example''' | '''Example''' | ||
=== | <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''' | ||
< | |||
<syntaxhighlight lang="js" line>sidebar.category('Combat').removeAllItems();</syntaxhighlight> | |||
== Item == | == Item == | ||
=== ItemConfig === | === ItemConfig === | ||
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 216: | 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 223: | 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: | ||
< | |||
<syntaxhighlight lang="js" line>interface ItemElements { | |||
rootEl: HTMLLIElement; | rootEl: HTMLLIElement; | ||
itemEl: HTMLAnchorElement; | itemEl: HTMLAnchorElement; | ||
Line 230: | Line 249: | ||
asideEl?: HTMLElement; | asideEl?: HTMLElement; | ||
subMenuEl?: HTMLUListElement; | subMenuEl?: HTMLUListElement; | ||
}</ | }</syntaxhighlight> | ||
=== | === id: string === | ||
(Property) The item's id. | (Property) The item's id. | ||
=== | === 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>. | ||
=== | === 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>. | ||
=== | === 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. | ||
=== | === 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. | ||
=== | === 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. | ||
=== | === 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. | ||
=== | === category: Category === | ||
(Property) The parent category of the item. | (Property) The parent category of the item. | ||
=== | === 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''' | ||
=== | <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 281: | Line 301: | ||
'''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 === | ||
Removes this item from the parent category. | Removes this item from the parent category. | ||
'''Example''' | '''Example''' | ||
=== | <syntaxhighlight lang="js" line>// Removes the Summoning skill from the sidebar | ||
''' | 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 314: | Line 337: | ||
'''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 === | ||
Remove a subitem from the item by its <code>id</code>. | Remove a subitem from the item by its <code>id</code>. | ||
Line 333: | Line 357: | ||
'''Example''' | '''Example''' | ||
=== | <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''' | ||
< | |||
<syntaxhighlight lang="js" line>sidebar.category('General').item('Completion Log').removeAllSubitems();</syntaxhighlight> | |||
== Subitem == | == Subitem == | ||
=== | |||
< | === 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 356: | 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. | ||
You can pass <code>null</code> to any property to remove previously configured options. For example, setting <code>name</code> to <code>null</code> sets the display of the subitem back to its id. | You can pass <code>null</code> to any property to remove previously configured options. For example, setting <code>name</code> to <code>null</code> 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 <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 === | ||
(Property) The subitem's id. | (Property) The subitem's id. | ||
=== | === 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>. | ||
=== | === 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>. | ||
=== | === 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. | ||
=== | === 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. | ||
=== | === item: Item === | ||
(Property) The parent item of the subitem. | (Property) The parent item of the subitem. | ||
=== | === click(): void === | ||
Triggers the subitem's configured <code>onClick | Triggers the subitem's configured <code>onClick</code> property, if present. | ||
'''Example''' | '''Example''' | ||
=== | <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''' | ||
< | |||
sidebar.category('General').item('Completion Log').subitem('Items').remove();</ | <syntaxhighlight lang="js" line>// Remove Items from the Completion Log sidebar | ||
sidebar.category('General').item('Completion Log').subitem('Items').remove();</syntaxhighlight> | |||
{{ModGuideNav}} | |||
{{Menu}} |