80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import { GefestA } from "../modules/Gefest/primitives/a";
|
|
import { GefestI } from "../modules/Gefest/primitives/i";
|
|
import { DefaultElement } from "./default-element";
|
|
|
|
type FontAwesomeGroup = "fas" | "far" | "fab"; // e.g. "fas fa-home"
|
|
type FontAwesomeIcon = `${FontAwesomeGroup} fa-${string}`;
|
|
|
|
class NavbarButton extends DefaultElement {
|
|
constructor(icon: FontAwesomeIcon) {
|
|
const iconElement = new GefestI("");
|
|
iconElement.addClass(icon);
|
|
const elementA = new GefestA([
|
|
iconElement
|
|
]);
|
|
elementA.addClass("linked-btn");
|
|
elementA.addClass("noselect");
|
|
elementA.addClass("nav-link");
|
|
elementA.setAttribute("aria-current", "page");
|
|
super([ elementA ]);
|
|
this.addClass("nav-item");
|
|
this.setPersonalStyle("cursor: pointer; padding: 12px 24px; font-size: 1.5em;");
|
|
}
|
|
|
|
protected wrapHTML(content: string): string {
|
|
const attrString = this.attributesToString();
|
|
return `<li ${attrString}>${content}</li>`;
|
|
}
|
|
}
|
|
|
|
class NavbarItemContainerUL extends DefaultElement {
|
|
constructor() {
|
|
// Buttons HERE!!!
|
|
const newsButton = new NavbarButton("fas fa-rss-square");
|
|
newsButton.onClick = () => alert("News clicked!") as void;
|
|
|
|
const chatButton = new NavbarButton("fas fa-comments");
|
|
chatButton.onClick = () => alert("Chat clicked!") as void;
|
|
|
|
super([
|
|
newsButton,
|
|
chatButton
|
|
]);
|
|
this.addClass("navbar-nav");
|
|
}
|
|
|
|
protected wrapHTML(content: string): string {
|
|
const attrString = this.attributesToString();
|
|
return `<ul ${attrString}>${content}</ul>`;
|
|
}
|
|
}
|
|
|
|
class NavbarItemContainer extends DefaultElement {
|
|
constructor() {
|
|
super([
|
|
new NavbarItemContainerUL()
|
|
]);
|
|
this.addClass("central-navbar");
|
|
this.addClass("collapse");
|
|
this.addClass("navbar-collapse");
|
|
this.addClass("noselect");
|
|
}
|
|
}
|
|
|
|
export class Navbar extends DefaultElement {
|
|
constructor() {
|
|
super([
|
|
new NavbarItemContainer()
|
|
]);
|
|
this.addClass("navbar");
|
|
this.addClass("navbar-expand-lg");
|
|
this.addClass("noselect");
|
|
this.addClass("fixed-bottom");
|
|
this.addClass("border-top");
|
|
}
|
|
|
|
protected wrapHTML(content: string): string {
|
|
const attrString = this.attributesToString();
|
|
return `<nav ${attrString}>${content}</nav>`;
|
|
}
|
|
} |