118 lines
3.6 KiB
JavaScript
118 lines
3.6 KiB
JavaScript
const JSON_WEBRING = "https://git.gablaxy.xyz/api/v1/repos/gablaxy/webring/raw/webring.json?ref=main";
|
|
|
|
const template = document.createElement("template");
|
|
template.innerHTML = `
|
|
<style>
|
|
:root{
|
|
--webring-texte: #c296f5;
|
|
--webring-links: #9162c7;
|
|
}
|
|
|
|
#webring-container{
|
|
margin-top: 10px;
|
|
border: 1px solid var(--webring-links);
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
display: inline-flex;
|
|
background-color: #222326;
|
|
}
|
|
|
|
#webring-title{
|
|
color: var(--webring-texte);
|
|
margin-top: 0;
|
|
margin-bottom: 3px;
|
|
padding: 0 5px;
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#webring-title .spacer {
|
|
width: 1em;
|
|
}
|
|
|
|
#webring-inner a{
|
|
color: var(--webring-links);
|
|
text-decoration: none;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
#webring-inner a:hover{
|
|
color: var(--webring-texte);
|
|
}
|
|
|
|
#webring-inner{
|
|
color: var(--webring-texte);
|
|
padding: 0 5px;
|
|
}
|
|
</style>
|
|
|
|
<div id="webring-container">
|
|
<b class="black" id="webring-inner">
|
|
<!-- Webring content -->
|
|
</b>
|
|
</div>
|
|
`;
|
|
|
|
class Webring extends HTMLElement {
|
|
connectedCallback() {
|
|
|
|
this.attachShadow({ mode: "open" });
|
|
|
|
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
|
|
|
const currentSite = this.getAttribute("site");
|
|
|
|
fetch(JSON_WEBRING)
|
|
.then((response) => response.json())
|
|
.then((sites) => {
|
|
const normalize = (url) => url.replace(/\/$/, "");
|
|
|
|
const matchedSiteIndex = sites.findIndex(
|
|
(site) => normalize(site.url) === normalize(currentSite)
|
|
);
|
|
|
|
if (matchedSiteIndex === -1) {
|
|
this.shadowRoot.querySelector("#webring-inner").insertAdjacentHTML("afterbegin", `
|
|
<h3 id="webring-title"><span class="spacer"></span><span>grossomodo</span><a class="hub" href="https://hub.gablaxy.xyz/">X</a></h3>
|
|
<p>T'es pas dans le gang bozo</p>
|
|
`);
|
|
return;
|
|
}
|
|
|
|
let previousSiteIndex = matchedSiteIndex - 1;
|
|
if (previousSiteIndex < 0) previousSiteIndex = sites.length - 1;
|
|
|
|
let nextSiteIndex = matchedSiteIndex + 1;
|
|
if (nextSiteIndex >= sites.length) nextSiteIndex = 0;
|
|
|
|
const content = `
|
|
<h3 id="webring-title"><span class="spacer"></span><span>grossomodo</span><a class="hub" href="https://hub.gablaxy.xyz/">X</a></h3>
|
|
<a href="${sites[previousSiteIndex].url}" rel="prev noreferrer external">< avant</a>
|
|
/
|
|
<a rel="external noreferrer" href="${sites[matchedSiteIndex].url}">${sites[matchedSiteIndex].name}</a>
|
|
/
|
|
<a href="${sites[nextSiteIndex].url}" rel="next noreferrer external">après ></a>
|
|
`;
|
|
|
|
this.shadowRoot
|
|
.querySelector("#webring-inner")
|
|
.insertAdjacentHTML("afterbegin", content);
|
|
})
|
|
.catch((error) => {
|
|
console.error(error);
|
|
const content = `
|
|
<h3 id="webring-title"><span class="spacer"></span><span>grossomodo</span><a class="hub" href="https://hub.gablaxy.xyz/">X</a></h3>
|
|
<p>T'es pas dans le gang bozo</p>
|
|
`;
|
|
|
|
this.shadowRoot
|
|
.querySelector("#webring-inner")
|
|
.insertAdjacentHTML("afterbegin", content);
|
|
});
|
|
}
|
|
}
|
|
|
|
window.customElements.define("webring-iutechno", Webring);
|