@@ -12,13 +12,16 @@ function Portal (sites) {
1212 }
1313
1414 function _buttons () {
15− return `<p class='buttons'><a href='#random' onClick="portal.reload('random')">Random</a> | <a href='https://github.com/XXIIVV/webring'>Information</a> <a id='icon' href='#random' onClick="portal.reload('random')"></a> | <a href="hallway.html">The Hallway</a> | <a href="wiki.html">The Wiki</a> | <a id="opml">OPML</a></p>`
15+ return `<p class='buttons'><a href='#random' onClick="portal.reload('random')">Random</a> | <a href='https://github.com/XXIIVV/webring'>Information</a> <a id='icon' href='#random' onClick="portal.reload('random')"></a> | <a href="hallway.html">The Hallway</a> | <a href="wiki.html">The Wiki</a> | <a id="opml">OPML</a></p>`
1616 }
1717
1818 function _directory (sites) {
1919 const siteTypesArray = [...new Set(sites.map(site => site.type).filter(Boolean))]
20− const siteTypes = siteTypesArray.reduce((output, siteType) => `${output}<a data-type='${siteType}' href='#' onclick='event.preventDefault(); toggleType(event)'><${siteType}></a>`, `<a class='current' href='#' onclick='event.preventDefault(); toggleType(event)'><all></a>`)
21− const listItems = sites.reduce((acc, site, id) => `${acc}<li ${_type(site)} id='${id}'><a href='${site.url}'>${_name(site)}</a></li>`, '')
20+ const siteTypes = siteTypesArray.reduce((output, siteType) =>
21+ `${output}<a data-type='${siteType}' href='#' onclick='toggleType(event)'><${siteType}></a>`,
22+ `<a class='current' href='#' onclick='toggleType(event)'><all></a>`)
23+ const listItems = sites.reduce((acc, site, id) =>
24+ `${acc}<li ${_type(site)} id='${id}'><a href='${site.url}'>${_name(site)}</a></li>`, '')
2225 return `<nav>${siteTypes}</nav><main><ul>${listItems}</ul></main><footer>${_readme()}${_buttons()}</footer>`
2326 }
2427
@@ -68,4 +71,17 @@ function Portal (sites) {
6871 this.next = function (loc = this.locate()) {
6972 return loc == this.sites.length - 1 ? this.sites[0] : this.sites[loc + 1]
7073 }
74+
75+}
76+
77+function toggleType (e) {
78+ e.preventDefault()
79+ const navLink = e.target
80+ const selectedType = navLink.dataset.type
81+ document.querySelector(`nav a.current`).classList.remove('current')
82+ navLink.classList.add('current')
83+ document.querySelectorAll(`main li`).forEach(el => el.style.display = 'block')
84+ if(selectedType) {
85+ document.querySelectorAll(`main li:not([data-type='${selectedType}'])`).forEach(el => el.style.display = 'none')
86+ }
7187}