1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
import GameServerProfile from './profile';
import { shell } from 'electron';
import { switchPage } from '../CustomEvents';
export default class GameServer {
constructor(
public profile:GameServerProfile,
public menuName:string,
public name:string,
public shortDescription:string,// the server in 1-2 sentences
public newsFeed:string,
public backgrounds:{isVideo:boolean,file:string}[],
public icon:string,
public socialLinks:socialLink[]
){}
getMenuEntry():HTMLElement{
const sidebarItem = document.createElement('div');
sidebarItem.classList.add("sidebarItem");
//Title
const title = document.createElement('div');
title.classList.add("title");
const titleIMG = document.createElement('img');
titleIMG.src = `./media/server/${this.icon}`;
const titleText = document.createElement('div');
titleText.innerText = this.menuName;
title.appendChild(titleIMG);
title.appendChild(titleText);
title.addEventListener('click', ()=>{
switchPage("SERVER",this.name);
});
sidebarItem.appendChild(title);
//Collapsable
const container = document.createElement('div');
container.classList.add("colapse");
const info = document.createElement('div');
info.innerHTML = '<i class="fas fa-info fa-fw"></i>Information';
container.appendChild(info);
info.addEventListener('click', ()=>{
switchPage("SERVER",this.name);
});
const news = document.createElement('div');
news.innerHTML = '<i class="far fa-newspaper fa-fw"></i>News';
if(this.newsFeed && this.newsFeed!==null){
news.addEventListener('click', ()=>{
switchPage("SERVER",this.name,"NEWS");
});
} else {
news.hidden = true;
}
container.appendChild(news);
const preferences = document.createElement('div');
preferences.innerHTML = '<i class="fas fa-sliders-h fa-fw"></i>Preferences';
preferences.addEventListener('click', ()=>{
switchPage("SERVER",this.name,"PREF");
});
container.appendChild(preferences);
sidebarItem.appendChild(container);
//event Target / interactivity
const events = document.createElement('span');
events.classList.add("switch-page-event");
events.addEventListener("site-changed", (event:CustomEvent)=>{
sidebarItem.classList.remove("selected");
info.classList.remove("selected");
news.classList.remove("selected");
preferences.classList.remove("selected");
if(event.detail.sitetype === "SERVER" && event.detail.page === this.name){
sidebarItem.classList.add("selected");
if(event.detail.subPage === "NEWS") {
news.classList.add("selected");
} else if(event.detail.subPage === "PREF") {
preferences.classList.add("selected");
} else {
info.classList.add("selected");
}
}
});
sidebarItem.appendChild(events);
return sidebarItem;
}
}
export class socialLink {
constructor(
public icon:string,// has to be one from font awesome -https://fontawesome.com/icons
public tooltip:string,
public url:string
){}
getHTML():HTMLElement{
//<button onclick="sv.openSocialLink(this)" socialLink="abc"><i class="fa fa-user"></i></button><br>
const element = document.createElement('button');
element.onclick = this.open;
element.innerHTML = `<i class="${this.icon}"></i>`;
element.title = this.tooltip;
return element;
}
open(){
if(this.url)
shell.openExternal(this.url.indexOf("://")!==-1?this.url:`https://${this.url}`);
}
}
|
