git.iko.soy/webring
on 64fd174 help sign in
webring/scripts/portal.js
87 lines 3.7 kB history raw
1'use strict'
3function Portal (sites) {
4 this.el = document.createElement('div')
5 this.el.id = 'portal'
6 this.sites = sites
8 // Templates
10 function _readme () {
11 return `<p class='readme'>This webring is an attempt to inspire artists & developers to build their own website and share traffic among each other. The ring welcomes personalized websites such as <b>diaries, wikis & portfolios</b>.</p><p>To add yourself to the ring, submit a <a href='https://github.com/XXIIVV/webring/edit/master/scripts/sites.js' target='_blank'>Pull Request</a>.<br />If you found a broken link, please <a href='https://github.com/XXIIVV/webring/issues/new' target='_blank'>report it</a>.</p>`
12 }
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>`
16 }
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) =>
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>`
26 }
28 function _name (site) {
29 return site.title || `${site.url.split('//')[1]}`
30 }
32 function _type (site) {
33 return site.type ? `data-type="${site.type}"` : ''
34 }
36 function _redirect (site) {
37 return `<main><p>Redirecting to <a href="${site.url}">${site.url}</a></p></main>
38 <meta http-equiv="refresh" content="3; url=${site.url}">
39 <footer><p class='buttons'><a href='#' onClick="portal.reload('')">Directory</a> | <a href='#${site.url}' onClick="portal.reload('random')">Skip</a> | <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></p>`
40 }
42 //
44 this.install = function (host) {
45 host.appendChild(this.el)
46 }
48 this.start = function () {
49 this.el.innerHTML = window.location.hash && window.location.hash.length > 4 ? _redirect(this.next()) : _directory(this.sites)
50 }
52 this.reload = function () {
53 setTimeout(() => { window.location.reload() }, 500)
54 }
56 this.navigate = function (target) {
57 setTimeout(() => { window.location.href = target }, 3000)
58 }
60 this.locate = function () {
61 const hash = window.location.hash.replace('#', '').trim()
63 if (hash === 'random') {
64 return Math.floor(Math.random() * this.sites.length)
65 } else {
66 const id = sites.findIndex(site => site.url.indexOf(hash) > -1)
67 return id > -1 ? parseInt(id) : -1
68 }
69 }
71 this.next = function (loc = this.locate()) {
72 return loc == this.sites.length - 1 ? this.sites[0] : this.sites[loc + 1]
73 }
77function 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 }