gablaxy/webring
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Actualiser webring.js

Browse source
This commit is contained in:
gablaxy 2026-02-23 19:52:44 +01:00
parent 1ae8563fe0
commit 048327acb3
1 changed files with 102 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

204
webring.js
View file

@ -1,102 +1,102 @@
const JSON_WEBRING = "https://raw.githubusercontent.com/gablaxy/webring/main/webring.json"; const JSON_WEBRING = "https://codeberg.org/gablaxy/webring/raw/commit/1ae8563fe015e88464bc89b49154b072d805c9e9/webring.json";
const template = document.createElement("template"); const template = document.createElement("template");
template.innerHTML = ` template.innerHTML = `
<style> <style>
#webring-container{ #webring-container{
margin-top: 10px; margin-top: 10px;
border: 1px solid #9162c7; border: 1px solid #9162c7;
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
display: inline-flex; display: inline-flex;
background-color: #222326; background-color: #222326;
} }
#webring-title{ #webring-title{
font-family: Title; font-family: Title;
color: #c296f5; color: #c296f5;
margin-top: 0; margin-top: 0;
margin-bottom: 3px; margin-bottom: 3px;
padding: 0 5px; padding: 0 5px;
font-size: 1.2em; font-size: 1.2em;
text-align: center; text-align: center;
} }
#webring-inner a{ #webring-inner a{
color: #9162c7; color: #9162c7;
text-decoration: none; text-decoration: none;
padding: 0 5px; padding: 0 5px;
} }
#webring-inner a:hover{ #webring-inner a:hover{
color: #c296f5; color: #c296f5;
} }
#webring-inner{ #webring-inner{
font-family: FreePixel; font-family: FreePixel;
color: #c296f5; color: #c296f5;
padding: 0 5px; padding: 0 5px;
} }
</style> </style>
<div id="webring-container"> <div id="webring-container">
<b class="black" id="webring-inner"> <b class="black" id="webring-inner">
<!-- Webring content --> <!-- Webring content -->
</b> </b>
</div> </div>
`; `;
class Webring extends HTMLElement { class Webring extends HTMLElement {
connectedCallback() { connectedCallback() {
this.attachShadow({ mode: "open" }); this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true)); this.shadowRoot.appendChild(template.content.cloneNode(true));
const currentSite = this.getAttribute("site"); const currentSite = this.getAttribute("site");
// ou sinon on peut aller chercher le paramètre site dans la déclaration du widget // ou sinon on peut aller chercher le paramètre site dans la déclaration du widget
fetch(JSON_WEBRING) fetch(JSON_WEBRING)
.then((response) => response.json()) .then((response) => response.json())
.then((sites) => { .then((sites) => {
// Va chercher les infos du site actuel dans le json // Va chercher les infos du site actuel dans le json
const matchedSiteIndex = sites.findIndex( const matchedSiteIndex = sites.findIndex(
(site) => site.url === currentSite (site) => site.url === currentSite
) )
// stocke les index des sites avant et après dans le json // stocke les index des sites avant et après dans le json
let previousSiteIndex = matchedSiteIndex - 1; let previousSiteIndex = matchedSiteIndex - 1;
if(previousSiteIndex < 0)previousSiteIndex = sites.length - 1; if(previousSiteIndex < 0)previousSiteIndex = sites.length - 1;
let nextSiteIndex = matchedSiteIndex + 1; let nextSiteIndex = matchedSiteIndex + 1;
if(nextSiteIndex >= sites.length)nextSiteIndex = 0; if(nextSiteIndex >= sites.length)nextSiteIndex = 0;
const content = ` const content = `
<h3 id="webring-title">grossomodo</h3> <h3 id="webring-title">grossomodo</h3>
<a href="${sites[previousSiteIndex].url}" rel="prev noreferrer external">&lt; avant</a> <a href="${sites[previousSiteIndex].url}" rel="prev noreferrer external">&lt; avant</a>
/ /
<a rel="external noreferrer" href="${sites[matchedSiteIndex].url}">${sites[matchedSiteIndex].name}</a> <a rel="external noreferrer" href="${sites[matchedSiteIndex].url}">${sites[matchedSiteIndex].name}</a>
/ /
<a href="${sites[nextSiteIndex].url}" rel="next noreferrer external">après &gt;</a> <a href="${sites[nextSiteIndex].url}" rel="next noreferrer external">après &gt;</a>
`; `;
this.shadowRoot this.shadowRoot
.querySelector("#webring-inner") .querySelector("#webring-inner")
.insertAdjacentHTML("afterbegin", content); .insertAdjacentHTML("afterbegin", content);
}) })
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
const content = ` const content = `
<h3 id="webring-title">grossomodo</h3> <h3 id="webring-title">grossomodo</h3>
<p>T'es pas dans le gang bozo</p> <p>T'es pas dans le gang bozo</p>
`; `;
this.shadowRoot this.shadowRoot
.querySelector("#webring-inner") .querySelector("#webring-inner")
.insertAdjacentHTML("afterbegin", content); .insertAdjacentHTML("afterbegin", content);
}); });
} }
} }
window.customElements.define("webring-iutechno", Webring); window.customElements.define("webring-iutechno", Webring);