82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
import { Snippet } from "@/components/Snippet";
|
|
|
|
const xhrRequestSnippets = [
|
|
{
|
|
name: "🥉 XHR",
|
|
codeLanguage: "javascript",
|
|
code: `const xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "https://api.exemple.com/data", true);
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState === 4 && xhr.status === 200) {
|
|
console.log(JSON.parse(xhr.responseText));
|
|
}
|
|
};
|
|
xhr.send();`,
|
|
},
|
|
{
|
|
name: "🥈 jQuery",
|
|
codeLanguage: "javascript",
|
|
code: `$.ajax({
|
|
url: "https://api.exemple.com/data",
|
|
method: "GET",
|
|
success: function (data) {
|
|
console.log(data);
|
|
},
|
|
});`,
|
|
},
|
|
{
|
|
name: "🥇 Fetch",
|
|
codeLanguage: "javascript",
|
|
code: `fetch("https://api.exemple.com/data")
|
|
.then((response) => response.json())
|
|
.then((data) => console.log(data));`,
|
|
},
|
|
];
|
|
|
|
const deferIframeSnippets = [
|
|
{
|
|
name: "HTML - 1ère étape",
|
|
codeLanguage: "html",
|
|
code: `<div
|
|
class="iframe-container"
|
|
data-src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
|
data-width="1280"
|
|
data-height="720"
|
|
>
|
|
<img src="https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" loading="lazy" />
|
|
<button type="button" class="iframe-loader">Charger la vidéo</button>
|
|
</div>`,
|
|
},
|
|
{
|
|
name: "JavaScript - 2ème étape",
|
|
codeLanguage: "javascript",
|
|
code: `document.querySelectorAll('button.iframe-loader').forEach((button) => {
|
|
// Pour chaque bouton qui doit charger un iframe, on écoute le clic dessus
|
|
button.addEventListener('click', () => {
|
|
// On récupère le container de l'iframe, qui dans notre exemple est la balise parente du bouton
|
|
const container = button.closest('.iframe-container');
|
|
|
|
// Si le container n'existe pas, on arrête l'exécution de la fonction pour éviter un plantage
|
|
if (!container) return;
|
|
|
|
const { src, width, height } = container.dataset;
|
|
|
|
// On prépare notre iframe avec les données stockées dans le container
|
|
const iframe = document.createElement('iframe');
|
|
iframe.setAttribute('src', src);
|
|
iframe.setAttribute('width', width);
|
|
iframe.setAttribute('height', height);
|
|
|
|
// On supprime le contenu du container pour y ajouter notre iframe
|
|
container.innerHTML = '';
|
|
container.appendChild(iframe);
|
|
});
|
|
});`,
|
|
},
|
|
];
|
|
|
|
export default {
|
|
xhrRequest: () => <Snippet snippets={xhrRequestSnippets} />,
|
|
deferIframe: () => <Snippet snippets={deferIframeSnippets} />,
|
|
};
|