git.iko.soy/webring
on master help sign in
Merge pull request #305 from dym-sh/site-types
517f316Chris
links/main.css+7−1
compare with master
unifiedsplit
@@ -19,7 +19,13 @@ body #portal ul li:before { content: attr(id) ")"; }
19body #portal ul li[data-type]::after { content:"<" attr(data-type) ">"; color:#555; }
19body #portal ul li[data-type]::after { content:"<" attr(data-type) ">"; color:#555; }
20body #portal ul li a { line-height: 20px; padding:0px 5px; text-decoration: none;}
20body #portal ul li a { line-height: 20px; padding:0px 5px; text-decoration: none;}
21body #portal ul li a:visited { color:#ccc; text-decoration: none;}
21body #portal ul li a:visited { color:#ccc; text-decoration: none;}
22+body #portal a:active,
23+body #portal a:focus,
22−body #portal ul li a:hover { text-decoration: underline; }
24+body #portal a:hover { text-decoration: underline; }
25+
26+body #portal nav { display: flex; flex-direction: row; margin-bottom: 15px }
27+body #portal nav a { margin: 0 5px; color: gray }
28+body #portal nav a.current { color: white }
23
29
24body aside { min-width: 200px; padding: 0 15px; line-height: 16px; display: none; }
30body aside { min-width: 200px; padding: 0 15px; line-height: 16px; display: none; }
25body aside ul { margin-bottom: 15px; }
31body aside ul { margin-bottom: 15px; }
scripts/portal.js+21−3
@@ -12,12 +12,17 @@ function Portal (sites) {
12 }
12 }
13
13
14 function _buttons () {
14 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>`
16 }
16 }
17
17
18 function _directory (sites) {
18 function _directory (sites) {
19+ const siteTypesArray = [...new Set(sites.map(site => site.type).filter(Boolean))]
20+ const siteTypes = siteTypesArray.reduce((output, siteType) =>
21+ `${output}<a data-type='${siteType}' href='#' onclick='toggleType(event)'>&lt;${siteType}&gt;</a>`,
22+ `<a class='current' href='#' onclick='toggleType(event)'>&lt;all&gt;</a>`)
23+ const listItems = sites.reduce((acc, site, id) =>
19− const listItems = sites.reduce((acc, site, id) => `${acc}<li ${_type(site)} id='${id}'><a href='${site.url}'>${_name(site)}</a></li>`, '')
24+ `${acc}<li ${_type(site)} id='${id}'><a href='${site.url}'>${_name(site)}</a></li>`, '')
20− return `<main><ul>${listItems}</ul></main><footer>${_readme()}${_buttons()}</footer>`
25+ return `<nav>${siteTypes}</nav><main><ul>${listItems}</ul></main><footer>${_readme()}${_buttons()}</footer>`
21 }
26 }
22
27
23 function _name (site) {
28 function _name (site) {
@@ -66,4 +71,17 @@ function Portal (sites) {
66 this.next = function (loc = this.locate()) {
71 this.next = function (loc = this.locate()) {
67 return loc == this.sites.length - 1 ? this.sites[0] : this.sites[loc + 1]
72 return loc == this.sites.length - 1 ? this.sites[0] : this.sites[loc + 1]
68 }
73 }
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+ }
69}
87}