Actualiser webring.js
This commit is contained in:
gablaxy
parent
1ae8563fe0
commit
048327acb3
1 changed files with 102 additions and 102 deletions
204
webring.js
204
webring.js
|
|
@ -1,102 +1,102 @@
|
|||
const JSON_WEBRING = "https://raw.githubusercontent.com/gablaxy/webring/main/webring.json";
|
||||
|
||||
const template = document.createElement("template");
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
#webring-container{
|
||||
margin-top: 10px;
|
||||
border: 1px solid #9162c7;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
display: inline-flex;
|
||||
background-color: #222326;
|
||||
}
|
||||
|
||||
#webring-title{
|
||||
font-family: Title;
|
||||
color: #c296f5;
|
||||
margin-top: 0;
|
||||
margin-bottom: 3px;
|
||||
padding: 0 5px;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#webring-inner a{
|
||||
color: #9162c7;
|
||||
text-decoration: none;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#webring-inner a:hover{
|
||||
color: #c296f5;
|
||||
}
|
||||
|
||||
#webring-inner{
|
||||
font-family: FreePixel;
|
||||
color: #c296f5;
|
||||
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");
|
||||
// ou sinon on peut aller chercher le paramètre site dans la déclaration du widget
|
||||
|
||||
fetch(JSON_WEBRING)
|
||||
.then((response) => response.json())
|
||||
.then((sites) => {
|
||||
// Va chercher les infos du site actuel dans le json
|
||||
const matchedSiteIndex = sites.findIndex(
|
||||
(site) => site.url === currentSite
|
||||
)
|
||||
|
||||
// stocke les index des sites avant et après dans le json
|
||||
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">grossomodo</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">grossomodo</h3>
|
||||
<p>T'es pas dans le gang bozo</p>
|
||||
`;
|
||||
|
||||
this.shadowRoot
|
||||
.querySelector("#webring-inner")
|
||||
.insertAdjacentHTML("afterbegin", content);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define("webring-iutechno", Webring);
|
||||
const JSON_WEBRING = "https://codeberg.org/gablaxy/webring/raw/commit/1ae8563fe015e88464bc89b49154b072d805c9e9/webring.json";
|
||||
|
||||
const template = document.createElement("template");
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
#webring-container{
|
||||
margin-top: 10px;
|
||||
border: 1px solid #9162c7;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
display: inline-flex;
|
||||
background-color: #222326;
|
||||
}
|
||||
|
||||
#webring-title{
|
||||
font-family: Title;
|
||||
color: #c296f5;
|
||||
margin-top: 0;
|
||||
margin-bottom: 3px;
|
||||
padding: 0 5px;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#webring-inner a{
|
||||
color: #9162c7;
|
||||
text-decoration: none;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#webring-inner a:hover{
|
||||
color: #c296f5;
|
||||
}
|
||||
|
||||
#webring-inner{
|
||||
font-family: FreePixel;
|
||||
color: #c296f5;
|
||||
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");
|
||||
// ou sinon on peut aller chercher le paramètre site dans la déclaration du widget
|
||||
|
||||
fetch(JSON_WEBRING)
|
||||
.then((response) => response.json())
|
||||
.then((sites) => {
|
||||
// Va chercher les infos du site actuel dans le json
|
||||
const matchedSiteIndex = sites.findIndex(
|
||||
(site) => site.url === currentSite
|
||||
)
|
||||
|
||||
// stocke les index des sites avant et après dans le json
|
||||
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">grossomodo</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">grossomodo</h3>
|
||||
<p>T'es pas dans le gang bozo</p>
|
||||
`;
|
||||
|
||||
this.shadowRoot
|
||||
.querySelector("#webring-inner")
|
||||
.insertAdjacentHTML("afterbegin", content);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define("webring-iutechno", Webring);
|
||||
|
|
|
|||
Loading…
Reference in a new issue