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
|
const pageGroups = {
main: {
Tutorials: 'tutorials.html',
Projects: 'projects.html',
Blog: 'blog.html',
Home: 'index.html',
About: 'about.html',
Contact: 'contact.html',
Resume: 'resume.html'
},
mundus: {
Title: 'Mundus',
Introduction: 'introduction.html',
History: 'history.html',
'User Interface': 'user-interface.html',
'Basic Concepts': 'basic-concepts.html'
},
mySqlConnectEntityFrameworkCSharp: {
Title: 'Connect to MySql in C# and Entity Framework',
Introduction: 'introduction.html',
Preparation: 'preparation.html',
Connecting: 'connecting.html'
}
};
const pageInfo = {
getPageGroup: function () {
switch (document.getElementsByTagName('head')[0].id) {
case 'main': return pageGroups.main;
case 'mundus': return pageGroups.mundus;
case 'mySqlConnectEntityFrameworkCSharp': return pageGroups.mySqlConnectEntityFrameworkCSharp;
}
},
getPageToReturnTo: function (pageGroup) {
switch (pageGroup) {
case pageGroups.mundus: return pageGroups.main.Projects;
case pageGroups.mySqlConnectEntityFrameworkCSharp: return pageGroups.main.Tutorials;
}
}
};
const current = {
pageGroup: pageInfo.getPageGroup(),
tab: document.getElementsByTagName('body')[0].id
};
const generator = {
generateTabs: function (tabTitles) {
let toReturn = '';
tabTitles.forEach(item => { toReturn += `<a href="./${current.pageGroup[item]}" class="${item === current.tab ? 'selected-tab' : 'other-tab'}">${item}</a>`; });
return toReturn;
},
generateFull: function () {
const columnStyle = 'float: left; min-width: 33.33%;';
document.getElementsByClassName('header')[0].innerHTML =
`
<div style="${columnStyle}">
<span class="article-title">${current.pageGroup.Title}</span>
</div>
<div style="${columnStyle}">
${this.generateTabs(Object.keys(current.pageGroup).splice(1, Object.keys(current.pageGroup).length - 1))}
</div>
<div width=32px>
<a href="../../${pageInfo.getPageToReturnTo(current.pageGroup)}" class="close" title="Back to Projects"><img src="../../img/ui/close.png" alt="Back" width="32" height="32"></a>
</div>
`;
}
};
if (current.pageGroup !== pageGroups.main) {
generator.generateFull();
} else {
document.getElementsByClassName('header')[0].innerHTML = generator.generateTabs(Object.keys(current.pageGroup));
}
|
