git.iko.soy/webring
on master help sign in
Merge pull request #305 from dym-sh/site-types

[portal] added toggles for site-types

commit517f316d329aafcda05bd284ddc71e8d018121a5 authorChris <ckipp@pm.me> dateTue 10 Sep 2019, 20:51 (7 years ago) parent0b571dc64fd174
2 files changed+28−4
compare with master
unifiedsplit
links/main.css+7−1 scripts/portal.js+21−3
links/main.css+7−1
@@ -19,7 +19,13 @@ body #portal ul li:before { content: attr(id) ")"; }
1919body #portal ul li[data-type]::after { content:"<" attr(data-type) ">"; color:#555; }
2020body #portal ul li a { line-height: 20px; padding:0px 5px; text-decoration: none;}
2121body #portal ul li a:visited { color:#ccc; text-decoration: none;}
22−body #portal ul li a:hover { text-decoration: underline; }
22+body #portal a:active,
23+body #portal a:focus,
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 }
2329
2430body aside { min-width: 200px; padding: 0 15px; line-height: 16px; display: none; }
2531body aside ul { margin-bottom: 15px; }
scripts/portal.js+21−3
@@ -12,12 +12,17 @@ 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) {
19− const listItems = sites.reduce((acc, site, id) => `${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>`
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) =>
24+ `${acc}<li ${_type(site)} id='${id}'><a href='${site.url}'>${_name(site)}</a></li>`, '')
25+ return `<nav>${siteTypes}</nav><main><ul>${listItems}</ul></main><footer>${_readme()}${_buttons()}</footer>`
2126 }
2227
2328 function _name (site) {
@@ -66,4 +71,17 @@ function Portal (sites) {
6671 this.next = function (loc = this.locate()) {
6772 return loc == this.sites.length - 1 ? this.sites[0] : this.sites[loc + 1]
6873 }
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+ }
6987}