a04a077 · webring · git.iko.soy

index.html+17

compare with master

unifiedsplit

@@ -15,6 +15,23 @@

15 const portal = new Portal(sites);

16 portal.install(document.body);

17 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+

18 </script>

35 </script>

19</body>

36</body>

20</html>

37</html>

links/main.css+7−1

@@ -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; }

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;}

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+14−2

@@ -16,8 +16,20 @@ function Portal (sites) {

16 }

17

18 function _directory (sites) {

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)'><${siteType}></a>`

22+ , `<a class='current' href='#' onclick='event.preventDefault(); toggleType(event)'><all></a>` )

23+

24+ 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>`, '')

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>

20− return `<main><ul>${listItems}</ul></main><footer>${_readme()}${_buttons()}</footer>`

32+ <footer>${_readme()}${_buttons()}</footer>`

21 }

33 }

22

34

23 function _name (site) {

35 function _name (site) {