diff options
Diffstat (limited to 'src/js/love.js')
| -rw-r--r-- | src/js/love.js | 145 |
1 files changed, 78 insertions, 67 deletions
diff --git a/src/js/love.js b/src/js/love.js index 66f47d4..59ecccc 100644 --- a/src/js/love.js +++ b/src/js/love.js @@ -1,15 +1,18 @@ -window.addEventListener('DOMContentLoaded', () => { +window.addEventListener("DOMContentLoaded", () => { // This script insert a love button at the end of an article page - const articles = document.querySelectorAll('article'); + const articles = document.querySelectorAll("article"); function getCurrentPageLang() { - return document.documentElement.lang || "en"; + return document.documentElement.lang || "en"; } function getLikeEndPoint() { - let currentArticleName = window.location.pathname.split('/')[2]; - if (currentArticleName.indexOf('.') > 0) { - currentArticleName = currentArticleName.slice(0, currentArticleName.lastIndexOf('.')) + let currentArticleName = window.location.pathname.split("/")[2]; + if (currentArticleName.indexOf(".") > 0) { + currentArticleName = currentArticleName.slice( + 0, + currentArticleName.lastIndexOf("."), + ); } return `${window.location.origin}/like/${currentArticleName}`; @@ -19,20 +22,20 @@ window.addEventListener('DOMContentLoaded', () => { if (isAnArticle) { const article = articles[0]; - const likes = article.querySelector('.likes'); - const nbLikes = article.querySelector('.nbLikes'); - const footnotes = article.querySelector('.footnotes'); + const likes = article.querySelector(".likes"); + const nbLikes = article.querySelector(".nbLikes"); + const footnotes = article.querySelector(".footnotes"); - likes.style="display: 'block';"; + likes.style = "display: 'block';"; const updateNbLikes = () => { fetch(getLikeEndPoint(), { - method: 'GET', + method: "GET", headers: { - 'i-love-what-you-do': '<3', + "i-love-what-you-do": "<3", }, }).then((res) => { if (res.ok) { - res.text().then((text) => nbLikes.textContent = text); + res.text().then((text) => (nbLikes.textContent = text)); } else { nbLikes.textContent = ""; } @@ -46,80 +49,88 @@ window.addEventListener('DOMContentLoaded', () => { footnotes.before(likes); } - const icon = likes.querySelector('.icon'); - const messagesLike = likes.querySelector('.likesNotes'); + const icon = likes.querySelector(".icon"); + const messagesLike = likes.querySelector(".likesNotes"); - icon.addEventListener('mouseover', () => { + icon.addEventListener("mouseover", () => { for (const c of icon.children) { - const path = c.querySelector('path'); - path?.classList.add('anim'); + const path = c.querySelector("path"); + path?.classList.add("anim"); } }); - icon.addEventListener('mouseout', () => { + icon.addEventListener("mouseout", () => { for (const c of icon.children) { - const path = c.querySelector('path'); - path?.classList.remove('anim'); + const path = c.querySelector("path"); + path?.classList.remove("anim"); } }); - icon.addEventListener('click', () => { + icon.addEventListener("click", () => { const c = icon.children[1]; const lang = getCurrentPageLang(); - const path = c.querySelector('path'); + const path = c.querySelector("path"); - path.classList.add('anim-click'); - path.getAnimations().forEach(anim => { + path.classList.add("anim-click"); + path.getAnimations().forEach((anim) => { anim.cancel(); anim.play(); }); fetch(getLikeEndPoint(), { - method: 'POST', + method: "POST", headers: { - 'i-love-what-you-do': '<3', - 'lang': lang, + "i-love-what-you-do": "<3", + lang: lang, }, - }).then(response => { - const t = response.text(); - - if (response.ok) { - messagesLike.classList.remove('err'); - t.then(t => messagesLike.textContent = t); - updateNbLikes(); - } else { - t.then(t => { - // In case of error, we want to be able to set the initial message back - const previousText = messagesLike.textContent; - const timeoutErr = 3000; - const wasAnError = messagesLike.classList.contains('err'); - - // Set the error - messagesLike.classList.add('err'); - if (Math.floor(response.status / 100) == 4) { - messagesLike.textContent = t; - } else { - messagesLike.textContent = lang == 'fr' ? 'Désolé, le service est indisponible.' : 'Sorry, service unavailable.'; - } - - // Set the initial message back - if(!wasAnError) { - setTimeout(() => { - if(messagesLike.classList.contains('err')) { - messagesLike.classList.remove('err'); - messagesLike.textContent = previousText; - } - }, timeoutErr); - } - }); - } - }).catch(() => { - // In case of exception error. We don't want to set back the initial message. - messagesLike.classList.add('err'); - messagesLike.textContent = lang == 'fr' ? 'Désolé, le service est indisponible.' : 'Sorry, service unavailable.'; - messageText = ''; - }); + }) + .then((response) => { + const t = response.text(); + + if (response.ok) { + messagesLike.classList.remove("err"); + t.then((t) => (messagesLike.textContent = t)); + updateNbLikes(); + } else { + t.then((t) => { + // In case of error, we want to be able to set the initial message back + const previousText = messagesLike.textContent; + const timeoutErr = 3000; + const wasAnError = messagesLike.classList.contains("err"); + + // Set the error + messagesLike.classList.add("err"); + if (Math.floor(response.status / 100) == 4) { + messagesLike.textContent = t; + } else { + messagesLike.textContent = + lang == "fr" + ? "Désolé, le service est indisponible." + : "Sorry, service unavailable."; + } + + // Set the initial message back + if (!wasAnError) { + setTimeout(() => { + if (messagesLike.classList.contains("err")) { + messagesLike.classList.remove("err"); + messagesLike.textContent = previousText; + } + }, timeoutErr); + } + }); + } + }) + .catch(() => { + // In case of exception error. We don't want to set back the initial message. + messagesLike.classList.add("err"); + messagesLike.textContent = + lang == "fr" + ? "Désolé, le service est indisponible." + : "Sorry, service unavailable."; + messageText = ""; + }); }); } }); |