git.iko.soy/webring
on master help sign in
moved all toggleType to js file
64fd174DYM
index.html−9
compare with master
unifiedsplit
@@ -15,15 +15,6 @@
15 const portal = new Portal(sites);
15 const portal = new Portal(sites);
16 portal.install(document.body);
16 portal.install(document.body);
17 portal.start();
17 portal.start();
18−
19− function toggleType(e) {
20− const navLink = e.target
21− const selectedType = navLink.dataset.type
22− document.querySelector(`nav a.current`).classList.remove('current')
23− navLink.classList.add('current')
24− document.querySelectorAll(`main li`).forEach(el => el.style.display = 'block')
25− if(selectedType) { document.querySelectorAll(`main li:not([data-type='${selectedType}'])`).forEach(el => el.style.display = 'none') }
26− }
27 </script>
18 </script>
28</body>
19</body>
29</html>
20</html>
scripts/portal.js+19−3
@@ -12,13 +12,16 @@ 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))]
19 const siteTypesArray = [...new Set(sites.map(site => site.type).filter(Boolean))]
20+ const siteTypes = siteTypesArray.reduce((output, siteType) =>
20− const siteTypes = siteTypesArray.reduce((output, siteType) => `${output}<a data-type='${siteType}' href='#' onclick='event.preventDefault(); toggleType(event)'>&lt;${siteType}&gt;</a>`, `<a class='current' href='#' onclick='event.preventDefault(); toggleType(event)'>&lt;all&gt;</a>`)
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) =>
21− 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>`, '')
22 return `<nav>${siteTypes}</nav><main><ul>${listItems}</ul></main><footer>${_readme()}${_buttons()}</footer>`
25 return `<nav>${siteTypes}</nav><main><ul>${listItems}</ul></main><footer>${_readme()}${_buttons()}</footer>`
23 }
26 }
24
27
@@ -68,4 +71,17 @@ function Portal (sites) {
68 this.next = function (loc = this.locate()) {
71 this.next = function (loc = this.locate()) {
69 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]
70 }
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+ }
71}
87}