Skip to content

Commit

Permalink
add social links to sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@kayla-glick
kayla-glick committed Mar 14, 2024
1 parent 385a461 commit ef4010c
Show file tree
Hide file tree
Showing 8 changed files with 656 additions and 475 deletions.
2 changes: 1 addition & 1 deletion .prettierrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* @type {import("prettier").Options)}
*/
module.exports = {
printWidth: 100,
printWidth: 160,
useTabs: true,
tabWidth: 4,
semi: true,
Expand Down
178 changes: 91 additions & 87 deletions ui/core/components/sim_header.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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();
Expand All @@ -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) {
Expand All @@ -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>
);
Expand All @@ -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>
Expand All @@ -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();
});
}

Expand All @@ -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 => {
Expand All @@ -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);
Expand All @@ -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>
Expand Down
49 changes: 49 additions & 0 deletions ui/core/components/social_links.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading

0 comments on commit ef4010c

Please sign in to comment.