https://jn327.github.io/scripts/Components/TopBar.js

1//Make sure you have the common elements creator added!
2var TopBar = {};
3TopBar.init = function( parentElement )
4{
5  if (parentElement == undefined)
6  {
7    parentElement = CommonElementsCreator.defaultTopBarParent;
8  }
9
10  var rootLocation = CommonElementsCreator.getRootLocation();
11
12  var pathName = window.location.pathname;
13  var bIndex = pathName == "/index.html" || pathName == "/" || pathName == "" || pathName == "index.html"
14    || (pathName.length > 11 && pathName.substr(pathName.length - 11) == "/index.html");
15
16  //start creating the elements
17  var container = document.createElement('nav');
18  container.id = "headerContainer";
19  parentElement.appendChild(container);
20
21  var list = document.createElement('ul');
22  list.id = 'headerList';
23  container.appendChild(list);
24
25  if (!bIndex)
26  {
27    li = document.createElement('li');
28    list.appendChild(li);
29
30    var headerItem = document.createElement('a');
31    headerItem.className = 'headerLink';
32    headerItem.href = "../index.html";
33    headerItem.textContent = "Home";
34    li.appendChild(headerItem);
35  }
36
37  var imgList = document.createElement('ul');
38  imgList.id = 'linksList';
39  container.appendChild(imgList);
40
41  var links = [
42    {
43      title: "Email me",
44      link: "mailto:[email protected]",
45      source: "email"
46    },
47    {
48      title: "Linkedin",
49      link: "https://www.linkedin.com/in/jn327/",
50      source: "linkedin"
51    },
52    {
53      title: "BitBucket",
54      link: "https://bitbucket.org/Jn327/",
55      source: "bitbucket"
56    },
57    {
58      title: "GitHub",
59      link: "https://github.com/jn327",
60      source: "github"
61    },
62    {
63      title: "GameJolt",
64      link: "https://gamejolt.com/@Jn327/games",
65      source: "gamejolt"
66    },
67    {
68      title: "ItchIo",
69      link: "https://jn327.itch.io/",
70      source: "itchio"
71    }
72  ];
73
74  let linkItem;
75  let toolTipItem;
76  let imgItem;
77  let theData;
78  let li;
79  for (let j = 0; j < links.length; j++)
80  {
81    li = document.createElement('li');
82    imgList.appendChild(li);
83
84    theData = links[j];
85
86    linkItem = document.createElement('a');
87    linkItem.className = 'imageLink';
88    linkItem.href = theData.link;
89    linkItem.target = '_blank';
90    linkItem.rel = 'noopener';
91
92    //<span class="tooltiptext">Tooltip text</span>
93    toolTipItem = document.createElement('span');
94    toolTipItem.className = 'toolTip';
95    toolTipItem.textContent = theData.title;
96
97    imgItem = document.createElement('img');
98    imgItem.className = 'imageLinkIcon';
99    imgItem.src = (rootLocation+"images/"+theData.source+".png");
100    imgItem.alt = "Image file not found: " +theData.source;
101
102    linkItem.appendChild(imgItem);
103    linkItem.appendChild(toolTipItem);
104    li.appendChild(linkItem);
105  }
106
107  //codewars badge
108  linkItem = document.createElement('a');
109  linkItem.className = 'imageLinkNoHover';
110  linkItem.href = "https://www.codewars.com/users/jn327/"
111  linkItem.target = '_blank';
112  linkItem.rel = 'noopener';
113
114  //<span class="tooltiptext">Tooltip text</span>
115  toolTipItem = document.createElement('span');
116  toolTipItem.className = 'toolTip';
117  toolTipItem.textContent = "Codewars";
118
119  imgItem = document.createElement('img');
120  imgItem.src ="https://www.codewars.com/users/jn327/badges/micro";
121  linkItem.appendChild(imgItem);
122  linkItem.appendChild(toolTipItem);
123  li.appendChild(linkItem);
124}
125
126TopBar.addLinks = function( labels, selectedIndex )
127{
128  if (selectedIndex == undefined)
129  {
130    selectedIndex = -1;
131  }
132
133  var list = document.getElementById("headerList");
134  var headerItem;
135  var li;
136  var headerItems = [];
137  for (var i = 0; i < labels.length; i++)
138  {
139    li = document.createElement('li');
140    list.appendChild(li);
141
142    headerItem = document.createElement('a');
143    headerItem.className = i != selectedIndex ? 'headerLink' : 'headerLink-active';
144    headerItem.textContent = labels[i];
145    li.appendChild(headerItem);
146
147    headerItems.push(headerItem);
148  }
149
150  return headerItems
151}
152
153CommonElementsCreator.addStyles(["topBar"]);
154CommonElementsCreator.addLoadEvent( TopBar.init );