git.iko.soy/webring
on master help sign in
[portal] added toggles for site-types
commita04a0776f8c48c7f738e311221be2eccae3e2e73 authorDYM <re@dym.sh> dateSun 8 Sep 2019, 18:28 (7 years ago) parent5f5d762
3 files changed+38−3
compare with master
unifiedsplit
index.html+17 links/main.css+7−1 scripts/portal.js+14−2
index.html+17
@@ -15,6 +15,23 @@
1515 const portal = new Portal(sites);
1616 portal.install(document.body);
1717 portal.start();
18+
19+ function toggleType( e )
20+ { const navLink = e.target
21+ , selectedType = navLink.dataset.type
22+
23+ document.querySelector( `nav a.current` )
24+ .classList.toggle( 'current' )
25+ navLink.classList.toggle( 'current' )
26+
27+ document.querySelectorAll( `main li` )
28+ .forEach( el => el.style.visibility = 'visible' )
29+
30+ if( selectedType )
31+ document.querySelectorAll( `main li:not([data-type='${selectedType}'])` )
32+ .forEach( el => el.style.visibility = 'hidden' )
33+ }
34+
1835 </script>
1936</body>
2037</html>
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+14−2
@@ -16,8 +16,20 @@ function Portal (sites) {
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) => `${output}
21+ <a data-type='${siteType}' href='#' onclick='event.preventDefault(); toggleType(event)'>&lt;${siteType}&gt;</a>`
22+ , `<a class='current' href='#' onclick='event.preventDefault(); toggleType(event)'>&lt;all&gt;</a>` )
23+
24+ const listItems = sites.reduce( (acc, site, id) =>
25+ `${acc}<li ${_type(site)} id='${id}'><a href='${site.url}'>${_name(site)}</a></li>`
26+ , '' )
27+
28+ return `<nav>${siteTypes}</nav>
29+ <main>
30+ <ul>${listItems}</ul>
31+ </main>
32+ <footer>${_readme()}${_buttons()}</footer>`
2133 }
2234
2335 function _name (site) {