add social links to sidebar (#4235)

.prettierrc.js

@@ -2,7 +2,7 @@
  * @type {import("prettier").Options)}
  */
 module.exports = {
-	printWidth: 100,
+	printWidth: 160,
 	useTabs: true,
 	tabWidth: 4,
 	semi: true,

ui/core/components/sim_header.tsx

@@ -1,19 +1,21 @@
+import { Tooltip } from 'bootstrap';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { element } from 'tsx-vanilla';
+
+import { SimUI } from '../sim_ui';
 import { Component } from './component';
 import { SettingsMenu } from './settings_menu';
-import { SimUI } from '../sim_ui';
-import { Tooltip } from 'bootstrap';
 import { SimTab } from './sim_tab';
-
-import { element, fragment } from 'tsx-vanilla';
+import { SocialLinks } from './social_links';
 
 interface ToolbarLinkArgs {
-	parent: HTMLElement,
-	href?: string,
-	text?: string,
-	icon?: string,
-	tooltip?: string | HTMLElement,
-	classes?: string,
-	onclick?: Function
+	parent: HTMLElement;
+	href?: string;
+	text?: string;
+	icon?: string;
+	tooltip?: string | HTMLElement;
+	classes?: string;
+	onclick?: () => void;
 }
 
 export class SimHeader extends Component {
@@ -30,7 +32,7 @@ export class SimHeader extends Component {
 		this.simTabsContainer = this.rootElem.querySelector('.sim-tabs') as HTMLElement;
 		this.simToolbar = this.rootElem.querySelector('.sim-toolbar') as HTMLElement;
 
-		this.knownIssuesContent = <ul className='text-start ps-3 mb-0'></ul> as HTMLElement;
+		this.knownIssuesContent = (<ul className="text-start ps-3 mb-0"></ul>) as HTMLElement;
 		this.knownIssuesLink = this.addKnownIssuesLink();
 		this.addBugReportLink();
 		this.addDownloadBinaryLink();
@@ -40,8 +42,8 @@ export class SimHeader extends Component {
 		// Allow styling the sticky header
 		new IntersectionObserver(
 			([e]) => e.target.classList.toggle('stuck', e.intersectionRatio < 1),
-			{threshold: [1]}
-		).observe(this.rootElem)
+			{ threshold: [1] },
+		).observe(this.rootElem);
 	}
 
 	activateTab(className: string) {
@@ -51,21 +53,21 @@ export class SimHeader extends Component {
 	addTab(title: string, contentId: string) {
 		const isFirstTab = this.simTabsContainer.children.length == 0;
 
-		let classes = `${contentId} nav-item`;
-		let tab = (
-			<li className={classes} attributes={{role:"presentation"}}>
-				<a className={`nav-link ${isFirstTab && 'active'}`}
+		const classes = `${contentId} nav-item`;
+		const tab = (
+			<li className={classes} attributes={{ role: 'presentation' }}>
+				<a
+					className={`nav-link ${isFirstTab && 'active'}`}
 					dataset={{
-						bsToggle:'tab',
+						bsToggle: 'tab',
 						bsTarget: `#${contentId}`,
 					}}
 					attributes={{
-						role:'tab',
-						'aria-selected':isFirstTab,
+						role: 'tab',
+						'aria-selected': isFirstTab,
 					}}
-					type='button'
-					>
-						{title}
+					type="button">
+					{title}
 				</a>
 			</li>
 		);
@@ -90,16 +92,22 @@ export class SimHeader extends Component {
 	addExportLink(label: string, onClick: (parent: HTMLElement) => void, hideInRaidSim?: boolean) {
 		this.addImportExportLink('export-dropdown', label, onClick, hideInRaidSim);
 	}
-	private addImportExportLink(cssClass: string, label: string, onClick: (parent: HTMLElement) => void, hideInRaidSim?: boolean) {
+	private addImportExportLink(
+		cssClass: string,
+		label: string,
+		onClick: (parent: HTMLElement) => void,
+		hideInRaidSim?: boolean,
+	) {
 		const dropdownElem = this.rootElem.getElementsByClassName(cssClass)[0] as HTMLElement;
 		const menuElem = dropdownElem.getElementsByClassName('dropdown-menu')[0] as HTMLElement;
 
 		const itemElem = (
 			<li>
-				<a href="javascript:void(0)"
-					className='dropdown-item'
+				<a
+					href="javascript:void(0)"
+					className="dropdown-item"
 					attributes={{
-						role: 'button'
+						role: 'button',
 					}}>
 					{label}
 				</a>
@@ -112,25 +120,24 @@ export class SimHeader extends Component {
 	}
 
 	private addToolbarLink(args: ToolbarLinkArgs): HTMLElement {
-		let item = (
+		const item = (
 			<div className="sim-toolbar-item">
-				<a 
+				<a
 					href={args.href ? args.href : 'javascript:void(0)'}
 					className={args.classes}
-					target={args.href ? "_blank" : '_self'}
-				>
+					target={args.href ? '_blank' : '_self'}>
 					{args.icon && <i className={args.icon}></i>}
-					{args.text ? ` ${args.text} ` : ''} 
+					{args.text ? ` ${args.text} ` : ''}
 				</a>
-			</div>);
+			</div>
+		);
 
-		let link = item.children[0];
+		const link = item.children[0];
 
 		if (args.onclick) {
 			link.addEventListener('click', () => {
 				// Typescript is requiring this even though the condition is being done already above
-				if (args.onclick)
-					args.onclick();
+				if (args.onclick) args.onclick();
 			});
 		}
 
@@ -148,44 +155,46 @@ export class SimHeader extends Component {
 	private addKnownIssuesLink(): HTMLElement {
 		return this.addToolbarLink({
 			parent: this.simToolbar,
-			text: "Known Issues",
+			text: 'Known Issues',
 			tooltip: this.knownIssuesContent,
-			classes: "known-issues link-danger hide"
+			classes: 'known-issues link-danger hide',
 		}).children[0] as HTMLElement;
 	}
 
 	addKnownIssue(issue: string) {
 		this.knownIssuesContent.appendChild(<li>{issue}</li>);
 		this.knownIssuesLink.classList.remove('hide');
-		Tooltip.getInstance(this.knownIssuesLink)?.setContent({'.tooltip-inner': this.knownIssuesContent});
+		Tooltip.getInstance(this.knownIssuesLink)?.setContent({
+			'.tooltip-inner': this.knownIssuesContent,
+		});
 	}
 
 	private addBugReportLink() {
 		this.addToolbarLink({
-			href: "https://github.com/wowsims/wotlk/issues/new/choose",
+			href: 'https://github.com/wowsims/wotlk/issues/new/choose',
 			parent: this.simToolbar,
-			icon: "fas fa-bug fa-lg",
-			tooltip: "Report a bug or<br>Request a feature"
-		})
+			icon: 'fas fa-bug fa-lg',
+			tooltip: 'Report a bug or<br>Request a feature',
+		});
 	}
 
 	private addDownloadBinaryLink() {
-		let href = "https://github.com/wowsims/wotlk/releases";
-		let icon = "fas fa-gauge-high fa-lg"
-		let parent = this.simToolbar;
+		const href = 'https://github.com/wowsims/wotlk/releases';
+		const icon = 'fas fa-gauge-high fa-lg';
+		const parent = this.simToolbar;
 
-		if (document.location.href.includes("localhost")) {
-			fetch("/version").then(resp => {
+		if (document.location.href.includes('localhost')) {
+			fetch('/version').then(resp => {
 				resp.json()
-					.then((versionInfo) => {
+					.then(versionInfo => {
 						if (versionInfo.outdated == 2) {
 							this.addToolbarLink({
 								href: href,
 								parent: parent,
 								icon: icon,
-								tooltip: "Newer version of simulator available for download",
-								classes: "downbin link-danger",
-							})
+								tooltip: 'Newer version of simulator available for download',
+								classes: 'downbin link-danger',
+							});
 						}
 					})
 					.catch(error => {
@@ -197,25 +206,25 @@ export class SimHeader extends Component {
 				href: href,
 				parent: parent,
 				icon: icon,
-				tooltip: "Download simulator for faster simulating",
-				classes: "downbin",
-			})
+				tooltip: 'Download simulator for faster simulating',
+				classes: 'downbin',
+			});
 		}
 	}
 
 	private addSimOptionsLink() {
 		this.addToolbarLink({
 			parent: this.simToolbar,
-			icon: "fas fa-cog fa-lg",
-			tooltip: "Show Sim Options",
+			icon: 'fas fa-cog fa-lg',
+			tooltip: 'Show Sim Options',
 			classes: 'sim-options',
-			onclick: () => new SettingsMenu(this.simUI.rootElem, this.simUI)
-		})
+			onclick: () => new SettingsMenu(this.simUI.rootElem, this.simUI),
+		});
 	}
 
 	private addSocialLinks() {
-		let container = document.createElement('div');
-		container.classList.add('sim-toolbar-socials')
+		const container = document.createElement('div');
+		container.classList.add('sim-toolbar-socials');
 		this.simToolbar.appendChild(container);
 
 		this.addDiscordLink(container);
@@ -224,51 +233,46 @@ export class SimHeader extends Component {
 	}
 
 	private addDiscordLink(container: HTMLElement) {
-		this.addToolbarLink({
-			href: "https://discord.gg/p3DgvmnDCS",
-			parent: container,
-			icon: "fab fa-discord fa-lg",
-			tooltip: "Join us on Discord",
-			classes: "discord-link link-alt"
-		})
+		container.appendChild(
+			<div className="sim-toolbar-item">{SocialLinks.buildDiscordLink()}</div>,
+		);
 	}
 
 	private addGitHubLink(container: HTMLElement) {
-		this.addToolbarLink({
-			href: "https://github.com/wowsims/wotlk",
-			parent: container,
-			icon: "fab fa-github fa-lg",
-			tooltip: "Contribute on GitHub",
-			classes: "github-link link-alt"
-		})
+		container.appendChild(
+			<div className="sim-toolbar-item">{SocialLinks.buildGitHubLink()}</div>,
+		);
 	}
 
 	private addPatreonLink(container: HTMLElement) {
-		this.addToolbarLink({
-			href: "https://patreon.com/wowsims",
-			parent: container,
-			text: "Support our devs",
-			icon: "fab fa-patreon fa-lg",
-			tooltip: "Support us on Patreon",
-			classes: "patreon-link link-alt",
-		})
+		container.appendChild(
+			<div className="sim-toolbar-item">{SocialLinks.buildPatreonLink()}</div>,
+		);
 	}
 
 	protected customRootElement(): HTMLElement {
 		return (
 			<header className="sim-header">
 				<div className="sim-header-container">
-					<ul className="sim-tabs nav nav-tabs" attributes={{role:"tablist"}}></ul>
+					<ul className="sim-tabs nav nav-tabs" attributes={{ role: 'tablist' }}></ul>
 					<div className="import-export within-raid-sim-hide">
 						<div className="dropdown sim-dropdown-menu import-dropdown">
-							<a href="javascript:void(0)" className="import-link" attributes={{role:"button", 'aria-expanded':"false"}} dataset={{bsToggle:'dropdown', bsDisplay:'dynamic'}}>
+							<a
+								href="javascript:void(0)"
+								className="import-link"
+								attributes={{ role: 'button', 'aria-expanded': 'false' }}
+								dataset={{ bsToggle: 'dropdown', bsDisplay: 'dynamic' }}>
 								<i className="fa fa-download"></i>
 								{' Import '}
 							</a>
 							<ul className="dropdown-menu"></ul>
 						</div>
 						<div className="dropdown sim-dropdown-menu export-dropdown">
-							<a href="javascript:void(0)" className="export-link" attributes={{role:"button", 'aria-expanded':"false"}} dataset={{bsToggle:'dropdown', bsDisplay:'dynamic'}}>
+							<a
+								href="javascript:void(0)"
+								className="export-link"
+								attributes={{ role: 'button', 'aria-expanded': 'false' }}
+								dataset={{ bsToggle: 'dropdown', bsDisplay: 'dynamic' }}>
 								<i className="fa fa-right-from-bracket"></i>
 								{' Export '}
 							</a>

ui/core/components/social_links.tsx

@@ -0,0 +1,49 @@
+import { Tooltip } from 'bootstrap';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { element } from 'tsx-vanilla';
+
+import { Component } from './component';
+
+export class SocialLinks extends Component {
+	static buildDiscordLink(): Element {
+		const anchor = (
+			<a
+				href="https://discord.gg/p3DgvmnDCS"
+				target="_blank"
+				className="discord-link link-alt"
+				dataset={{ bsToggle: 'tooltip', bsTitle: 'Join us on Discord' }}>
+				<i className="fab fa-discord fa-lg" />
+			</a>
+		);
+		Tooltip.getOrCreateInstance(anchor);
+		return anchor;
+	}
+
+	static buildGitHubLink(): Element {
+		const anchor = (
+			<a
+				href="https://github.com/wowsims/sod"
+				target="_blank"
+				className="github-link link-alt"
+				dataset={{ bsToggle: 'tooltip', bsTitle: 'Contribute on GitHub' }}>
+				<i className="fab fa-github fa-lg" />
+			</a>
+		);
+		Tooltip.getOrCreateInstance(anchor);
+		return anchor;
+	}
+
+	static buildPatreonLink(): Element {
+		const anchor = (
+			<a
+				href="https://patreon.com/wowsims"
+				target="_blank"
+				className="patreon-link link-alt"
+				dataset={{ bsToggle: 'tooltip', bsTitle: 'Support us on Patreon' }}>
+				<i className="fab fa-patreon fa-lg" /> Patreon
+			</a>
+		);
+		Tooltip.getOrCreateInstance(anchor);
+		return anchor;
+	}
+}